Setup the “Home Page Design Three” page like the demo
We’ll explain here how to recreate the Mai Lifestyle Theme “Home Page Design Three” demo page. This does not include the default banner added with the customizer, navigation menus, or widgets. Please consult our other documentation for instruction on the customizer, widgets and menus.
Getting Started
- In your WP dashboard visit Pages > Add New.
- Save as Draft or Publish the page.
- Make sure your new page is set as your Static Front Page in Dashboard > Appearance > Customize > Homepage Settings > A static page & Homepage.
The ‘first’ visual section is actually the Banner Area (if you have that enabled in the Customizer). To edit the banner area title/text just edit the page title and the Excerpt.
Homepage Content
Copy and paste the following content/shortcodes into the page editor and customize/edit as you see fit.
This page includes a form created with Ninja Forms. Ninja Forms is not distributed with the theme but is available for free in the WordPress plugins repository. You can download this Ninja Forms form import file here. You’ll probably have to change the shortcode id to your actual form id.
[grid content="post" number="1" columns="1" show="image, title, excerpt, more_link"]
[grid content="post" grid_title="Dual Columns" number="2" columns="2" offset="1" show="image, title, excerpt, more_link" content_limit="16"]
[callout style="overflow:hidden;"]
<h2>Join our newsletter</h2>
Sign up now to get all of our latest posts and recipes right to your inbox!
[ninja_form id=3]
[/callout]
[grid content="post" grid_title="Triple Columns" number="3" columns="3" offset="3" show="image, title" entry_class="text-xs-center text-xs"]
[grid content="post" grid_title="Quadruple Columns" number="4" columns="4" offset="6" show="image, title" image_size="one-fourth" entry_class="text-xs-center text-xs" gutter="10"]
[grid content="post" grid_title="Sextuple Columns" number="6" columns="6" offset="10" show="image" image_size="one-fourth" image_location="bg" overlay="none" gutter="10"]
Page Layout
Make sure you have Content-Sidebar layout selected in order to display the sidebar on this page.