This help article will walk you through how to use the microsite editor to create a microsite that reflects your brand and provides an engaging experience for your end users.
If you haven’t set up a microsite yet, then you’ll need to do so first. In addition our microsite editor doc explains the user interface, microsite structure (including layouts, pages, and components) of the microsite editor.
From the left navigation menu, select Content. Then select Edit content in the Microsite widget.
Select Base Layout in the Microsite tab.
Your Base layout consists of a brand container component that controls your microsite’s font and brand colors. Brand colors are applied to various parts of the microsite, including highlight colors and button colors.
Under the Current Layout in the sub-menu, select Layers.
Select the Brand Container component.
Edit the component properties in the Brand Container menu.
Color
Font
Select Save in the upper-right corner.
You can add a clickable header image that redirects your participants to a page you designate. Set it up in the Base layout.
Select Microsite → Layers.
Select Header Logo header component.
Update the image and adjust its height and width as desired.
Set the redirect path. This is where your participants will be redirected upon clicking the image.
Select Save.
In the microsite editor, select Microsite in the navigation sub-menu.
Select Add Page.
Optionally, select the layout you want to act as the parent layout, using the Inherited Layout [Drop-down list].
Optionally, we recommend that your new layout/page inherits either the logged-in or logged-out layouts for site organization purposes.
Example: If you want to add a landing page to your site that anyone can see regardless of whether they’re a logged-in participant, you can nest a new page within the base layou
Enter the Page title or layout name.
Enter the Page key for your page.
Enter the URL for your page.
Add a forward slash before the name you want to use and use hyphens in the case of a multi-word URL, e.g.,
/company-info
.
Allowed users: Limit page access to users of your choice.
Verified: Logged-in participants only.
Unverified: Logged-in participants who haven’t verified their email addresses.
Public: Viewable by anyone.
Select the page to which you want disallowed participants to be sent, from the Redirected for disallowed users [Drop-down list].
Select Add.
Select Save.
In the microsite editor, select Microsite in the navigation sub-menu.
Select Add Layout.
Optionally, select the layout you want to act as the parent layout, using the Inherited Layout [Drop-down list].
Optionally, we recommend that your new layout/page inherits either the logged-in or logged-out layouts for site organization purposes.
Example: If you want to add a landing page to your site that anyone can see regardless of whether they’re a logged-in participant, you can nest a new page within the base layout.
Enter the Layout name for your layout.
Enter the Layout key for your layout.
Select Add.
Select Save.
You can apply a template to your new layout or page if you don’t want to start from scratch.
Select Microsite → Templates, in the left sidebar menu.
Select Apply template to choose the template you want to apply.
Once you've selected a template, select Apply Template to use the specific template format.
This is recommended if you want logged in participants to be able to navigate to a page from the sidebar. These steps will show you how to do so, but you can adapt them if you want to add a sidebar item to another layout.
Select Microsite → Logged In Layout.
Select [Exit icon] to minimize the side menu.
From the Add tab in the upper-right corner, expand the microsite components category, then select Sidebar Item.
Select the Add to sidebar content.
On smaller screens, select the [Hamburger menu] to access the Add to sidebar content button.
Return to the Edit tab of the Add/Edit menu.
Select an Icon and Label to represent the page.
Select the page from the Navigation Path [Drop-down list].
Select Save.
You can preview how the microsite will appear to your participants. Toggle between [Desktop], [Tablet] or [Mobile] preview mode by selecting the respective device icon in the center of the top menu bar.
To enter preview, select [View] from the top menu bar.
To return to the editing interface, select [Edit] from the top menu bar.
The microsite editor does not autosave your changes. Save frequently to make sure you don’t lose your work.
After making all relevant changes, select Save in the top right.
Once saved, the changes will appear instantly in the live version of your microsite.
Visit our article on Widget and Microsite Components Explained for more on the component aspects of Microsites and Widgets.