Setup the “Home Page Design Two” page like the demo
AUTOMATIC SETUP
To automatically import the homepage content and settings, triple-click the following snippet and copy/paste it into the Sections Import/Export metabox and update your page. Note: This will overwrite any existing page content!
{"home_url":"https:\/\/maitheme.com\/mai-lifestyle-pro","layout":"full-width-content","banner_id":false,"hide_banner":"0","hide_breadcrumbs":"","hide_featured":"1","excerpt":"Mix, match, add or remove home page sections from each home page design. The \"Sections\" template in Mai Theme gives you the flexibility you need to make your website truly \"your website\".","images":[],"sections":[{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"xs","content_width":"md","align":"center","text_size":"","id":"","class":"","title":"","content":"Sign up now to get all of our latest posts and recipes right to your inbox!\r\n[ninja_form id=3]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"md","content_width":"","align":"center","text_size":"","id":"","class":"","title":"Recent Recipes","content":"[grid content=\"post\" number=\"6\" show=\"image, title, content, more_link\" content_limit=\"16\"]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"auto","content_width":"full","align":"","text_size":"","id":"","class":"","title":"","content":"[grid content=\"post\" categories=\"18\" columns=\"1\" show=\"image, title\" image_size=\"banner\" image_location=\"bg\" inner=\"light\" align=\"center, middle\" slider=\"true\" fade=\"true\" autoplay=\"true\" overlay=\"gradient\"]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"md","content_width":"","align":"center","text_size":"xs","id":"","class":"","title":"In Season","content":"[grid content=\"post\" number=\"6\" columns=\"6\" offset=\"6\" show=\"image, title\" image_size=\"one-fourth\" gutter=\"10\"]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"md","content_width":"","align":"center","text_size":"","id":"","class":"","title":"Our Favorites","content":"[columns]\r\n[col]\r\n[grid content=\"post\" offset=\"12\" number=\"1\" columns=\"1\" image_size=\"one-half\" show=\"image, title, content, more_link\" content_limit=\"32\"]\r\n[\/col]\r\n[col]\r\n[grid content=\"post\" offset=\"13\" number=\"4\" columns=\"2\" show=\"image, title\" entry_class=\"text-sm\"]\r\n[\/col]\r\n[\/columns]"},{"bg":"","image_id":"","image":false,"overlay":"","inner":"","height":"auto","content_width":"full","align":"","text_size":"","id":"","class":"","title":"","content":"[grid content=\"category\" columns=\"3\" number=\"6\" parent=\"18\" show=\"image, title\" image_location=\"bg\" align=\"center, middle\" gutter=\"0\" bottom=\"0\"]"},{"height":"md","align":"center","title":"Contributors","content":"
"}]}
MANUAL SETUP
We’ll explain here how to recreate the Mai Lifestyle Theme “Home Page Design Two” demo page.
Getting Started
- In your WP dashboard visit Pages > Add New.
- Under Page Attributes, choose the Sections template. See the Sections Template article for details about this template.
- Save as Draft or Publish to view the Sections metabox so you can start adding your content.
- 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 Sections Settings & Content
The Mai Lifestyle Theme demo Home Two page is made of 7 sections, created using the Section editor, which works like the Editor of any page. You can edit the content in Visual or Text mode, and apply various settings to each section to configure the Background, Overlay, Inner Style, Height, Content Width, and Content Alignment. Additionally there are advanced settings to apply.
Section 1
Section 1 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.
Title:
None.
Content:
Sign up now to get all of our latest posts and recipes right to your inbox!
[ninja_form id=3]
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Extra Small
Content Width: Medium
Content Alignment: Center
Text Size: None
Note: In the “Header Scripts” field of the “Scripts” metabox we added the following snippet to make the submit button the full column width.
<style>
.field-wrap.submit-wrap .ninja-forms-field[type="button"] {
display:block;
width: 100%;
}
</style>
Section 2
Title:
Recent Recipes
Content:
[grid content="post" number="6" show="image, title, content, more_link" content_limit="16"]
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Medium
Content Width: Default
Content Alignment: Center
Text Size: None
Section 3
Title:
None.
Content:
[grid content="post" categories="18" columns="1" show="image, title" image_size="banner" image_location="bg" inner="light" align_text="center, middle" slider="true" fade="true" autoplay="true" overlay="gradient"]
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Auto
Content Width: Full Width
Content Alignment: None
Text Size: None
Section 4
Title:
In Season
Content:
[grid content="post" number="6" columns="6" offset="6" show="image, title" image_size="one-fourth" gutter="10"]
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Medium
Content Width: Default
Content Alignment: Center
Text Size: Extra Small
Section 5
Title:
Our Favorites
Content:
[columns]
[col]
[grid content="post" offset="12" number="1" columns="1" image_size="one-half" show="image, title, content, more_link" content_limit="32"]
[/col]
[col]
[grid content="post" offset="13" number="4" columns="2" show="image, title" entry_class="text-sm"]
[/col]
[/columns]
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Medium
Content Width: Default
Content Alignment: Center
Text Size: None
Section 6
Title:
None.
Content:
[grid content="category" columns="3" number="6" parent="18" show="image, title" image_location="bg" align_text="center, middle" gutter="0" bottom="0"]
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Auto
Content Width: Full Width
Content Alignment: None
Text Size: None
Section 7
Title:
Contributors
Content:
This section uses a standard WordPress gallery.
- In the editor, click Add Media
- In the left sidebar, click Create Gallery
- Choose your images
- Insert Gallery
Here is our gallery shortcode as an example, though your image IDs will surely be different.
Settings:
Background Color: #
(empty)
Background Image: None
Overlay Style: None
Inner Style: None
Height: Medium
Content Width: Default
Content Alignment: Center
Text Size: None