Help Center

| Submit or View Help Requests | Developer Docs |
| |

Customize Microsite Layouts and Pages

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.

  1. From the left navigation menu, select Content. Then select Edit content in the Microsite widget.

  2. Select Base Layout in the Microsite tab.

    Warning

    The microsite editor does not autosave your changes. Save frequently to make sure you don’t lose your work.

Step 1: Change your microsite’s branding (Optional)

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.

  1. Under the Current Layout in the sub-menu, select Layers.

  2. Select the Brand Container component.

  3. Edit the component properties in the Brand Container menu.

    • Color

    • Font

    Screenshot_2024-02-22_at_16_26_23.png
  4. Select Save in the upper-right corner.

Step 2: Create a layout or page
  1. In the microsite editor, select Microsite in the navigation sub-menu.

  2. Select Add Page.

  3. Optionally, select the layout you want to act as the parent layout, using the Inherited Layout angle-down-solid.svg [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

  4. Enter the Page title or layout name.

  5. Enter the Page key for your page.

  6. 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.

  7. 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.

  8. Select the page to which you want disallowed participants to be sent, from the Redirected for disallowed users angle-down-solid.svg [Drop-down list].

  9. Select Add.

  10. Select Save.

Step 3: Apply a template

You can apply a template to your new layout or page if you don’t want to start from scratch.

  1. Select MicrositeTemplates, in the left sidebar menu.

  2. Select Apply template to choose the template you want to apply.

  3. Once you've selected a template, select Apply Template to use the specific template format.

    Screenshot_2024-02-22_at_16_50_41.png
Step 4: Edit the microsite’s sidebar

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.

  1. Select MicrositeLogged In Layout.

    • Select icons8-cancel-25.png [Exit icon] to minimize the side menu.

  2. From the Add tab in the upper-right corner, expand the microsite components category, then select Sidebar Item.

  3. Select the Add to sidebar content.

    • On smaller screens, select the bars-solid.svg [Hamburger menu] to access the Add to sidebar content button.

  4. Return to the Edit tab of the Add/Edit menu.

  5. Select an Icon and Label to represent the page.

  6. Select the page from the Navigation Path angle-down-solid.svg [Drop-down list].

  7. Select Save.

Step 5: Preview and save

You can preview how the microsite will appear to your participants. Toggle between desktop.svg [Desktop], tablet-alt-solid.svg [Tablet] or mobile-vertical.svg [Mobile] preview mode by selecting the respective device icon in the center of the top menu bar.

  1. To enter preview, select eye-solid.svg [View] from the top menu bar.

  2. To return to the editing interface, select brush-solid.svg [Edit] from the top menu bar.

Visit our article on Widget and Microsite Components Explained for more on the component aspects of Microsites and Widgets.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.