Micro Sites

What exactly “Micro Sites” are and how to create them?

First of all you need to know that under “Micro Sites” term we understand: landing pages, one-page-sites and blank pages (pages with no top/bottom bar, header, navigation, etc).

To start creating micro site add a new page and select the “Microsite” page template (fig. 1.). “Microsite” box will appear – and that’s where the magic happens!

Fig. 1. Microsite template.

Fig. 1. Microsite template.

In this box you can select individual settings for this particular page:

  • Page layout: full-width or boxed

    Fig.2.1. Page layout.

    Fig.2-1. Page layout.

  • Hide: top bar, header, floating menu and bottom bar

    Fig. 2.2. Hide elements.

    Fig. 2-2. Hide elements.

  • Enable beautiful page loading
  • Set individual branding (logos and favicon)
    Fig. 2.3. Microsite logos.

    Fig. 2-3. Microsite logos.

    and link for logos (if you want to have a clickable logo)

    Fig. 2.4. Target link for Microsite logo.

    Fig. 2-4. Target link for Microsite logo.

  • Select primary menu area. (This particular option makes “Microsite” template so powerful!)

    Fig. 2.5. Menu for Microsite.

    Fig. 2-5. Menu for Microsite.

  • Add custom CSS for this page (Custom CSS for microsite page should be placed here, Custom CSS from Theme options > General > Custom CSS will not render on microsite page)

    Fig. 2.6. Custom CSS for Microsite.

    Fig. 2-6. Custom CSS for Microsite.

Making One-Page-Site

Let’s look at how to use a “Microsite” template on example of creating classical One-Page-Site (since this is the most challenging task). Idea is quite simple:

1. Create a required page layout using Visual Layout Builder.
Each stripe (row) represents a separate “page” on your one page site. Note that you can select the stripe minimal height in pixels or percents of browser window height. Also you need to fill the “Anchor” field of stripe – this will let you create an on-page navigation.

2. Create a custom menu for on-page navigation.

  • Follow the “WP-admin > Appearance > Menus”.
  • Create a new menu.
  • Use “Links” element to create on-page menu. Note that “URL” field must be filled with the anchor value of corresponding stripe prefixed with “#!/”. E.g. “#!/anchor-name”.
    Tip 1. To add a “Home” or “To top” link fill the URL field with just “#!/up”.
    Tip 2. If you web-site is supposed to contain any other pages or posts, use absolute links in the menu. For example: “www.example.com/#!/anchor-name”.

3. Assign on-page menu.
Navigate back to the page that you’ve created in step 1 and assign the menu created in step 2 to primary menu area.

Assign the microsite menu in Microsite options
Set other menu as Primary menu in Appearance > Menus