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":"[gallery columns=\"6\" link=\"none\" ids=\"1853,1856,1852,1854,1857,1855\"]"}]}

MANUAL SETUP

We'll explain here how to recreate the Mai Lifestyle Theme "Home Page Design Two" demo page.

Getting Started

  1. In your WP dashboard visit Pages > Add New.
  2. Under Page Attributes, choose the Sections template. See the Sections Template article for details about this template.
  3. Save as Draft or Publish to view the Sections metabox so you can start adding your content.
  4. 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.

  1. In the editor, click Add Media
  2. In the left sidebar, click Create Gallery
  3. Choose your images
  4. Insert Gallery

Here is our gallery shortcode as an example, though your image IDs will surely be different.

[gallery columns="6" link="none" ids="1853,1856,1852,1854,1857,1855"]

Settings:

Background Color: # (empty)
Background Image: None  
Overlay Style: None  
Inner Style: None  
Height: Medium  
Content Width: Default  
Content Alignment: Center
Text Size: None

 

 

 

 

Did this answer your question?