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!
In this box you can select individual settings for this particular page:
- Page layout: full-width or boxed
- Hide: header & top bar, floating menu, content area and bottom bar
- Enable beautiful page loading
- Set individual branding (logos and favicon)
and link for logos (if you want to have a clickable logo)
- Select primary menu area. (This particular option makes “Microsite” template so powerful!)
- 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)
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 your web-site is supposed to contain any other pages or posts, create another menu with absolute links in the menu. For example: “www.example.com/#!/anchor-name” and set it as site Primary menu.
In other words, duplicate the menu with this plugin and replace url with absolute url.
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.