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:\/\/import.maitheme.com\/lifestyle","layout":"full-width-content","banner_id":false,"hide_banner":"1","hide_breadcrumbs":"0","hide_featured":"1","excerpt":"","images":{"1330":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/04\/brooke-lark-182428.jpg","618":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/05\/brooke-cagle-199262.jpg","1573":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2018\/01\/brooke-cagle-157923.jpg"},"sections":[{"bg":"","image_id":1330,"image":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/04\/brooke-lark-182428.jpg","overlay":"","inner":"light","height":"lg","content_width":"md","align_content":"","align":"center","text_size":"lg","id":"","class":"","context":"","title":"","content":"<h1 class=\"banner-title\">Mai Lifestyle Pro<\/h1>\r\nMai Lifestyle Pro is among StudioPress\u2019 top-3 best selling themes for the last five months in a row, Mai Theme is currently powering some of the most high-traffic websites on the Internet."},{"bg":"#f0f0f0","image_id":"","image":false,"overlay":"","inner":"","height":"xs","content_width":"sm","align_content":"","align":"center","text_size":"xl","id":"","class":"","context":"","title":"","content":"<em>\u201cThe Perfect Theme for Wellness, Food\/Recipe, Fitness, Lifestyle, or Small Business Websites and Blogs.\u201d<\/em>"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"latest-posts","class":"","context":"","title":"Latest Posts","content":"Read our latest tips, tricks, and musings below.\r\n\r\n[grid content=\"post\" number=\"9\" show=\"image, title, content, more_link\" content_limit=\"30\" slider=\"true\" slidestoscroll=\"3\" dots=\"true\" center_mode=\"true\"]"},{"bg":"#f0f0f0","image_id":"","image":false,"overlay":"","inner":"","height":"auto","content_width":"full","align_content":"","align":"","text_size":"","id":"","class":"","context":"","title":"","content":"[columns align_text=\"center\" gutter=\"0\"]\r\n[col image=\"618\" image_size=\"featured\"]\r\n[\/col]\r\n[col class=\"column\"]\r\n<div style=\"max-width: 300px; margin: auto; text-align: center;\">\r\n<h4>Never miss a post<\/h4>\r\n<em>Sign up to add style to your inbox.<\/em>\r\n[ninja_form id=2]\r\n\r\n<\/div>\r\n[\/col]\r\n[\/columns]"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Recipes","content":"We've been busy in the kitchen cooking up our new favorite recipes.\r\nCheck them out below, in a gorgeous swipeable slider.\r\n\r\n[grid content=\"post\" show=\"image, title, content, more_link\" content_limit=\"14\" taxonomy=\"category\" tax_field=\"slug\" terms=\"recipes\" number=\"9\" align=\"center\" slider=\"true\" slidestoscroll=\"3\" center_mode=\"true\"]"},{"bg":"","image_id":1573,"image":"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2018\/01\/brooke-cagle-157923.jpg","overlay":"","inner":"light","height":"lg","content_width":"sm","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Unlock Your True Potential","content":"You are powerful beyond measure, you just need to believe it. Cut out the negative in your life and seek out what inspires you. Don\u2019t make excuses. Learn how to unlock your true potential, download our fake ebook below.\r\n\r\n<a class=\"button\" href=\"#\">Download Now<\/a> <a class=\"button alt\" href=\"#\">Learn More<\/a>"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Recipe Categories","content":"Looking for something to make for dinner? Maybe a healthy late night snack? Find a recipe by category below.\r\n\r\n[grid content=\"category\" parent=\"recipes\" columns=\"3\" show=\"image, title\" image_location=\"bg\" align_text=\"center, middle\"]"},{"height":"auto","content_width":"full","align":"center","class":"full-width-image","content":"<img class=\"alignnone size-banner wp-image-595\" src=\"https:\/\/import.maitheme.com\/lifestyle\/wp-content\/uploads\/sites\/3\/2017\/05\/brooke-cagle-39574-1600x533.jpg\" alt=\"woman in parking garage\" width=\"1600\" height=\"533\" \/>"}]}

MANUAL SETUP

We'll explain here how to recreate the Mai Lifestyle Theme demo home 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.

Set your page Layout Settings

Homepage Sections Settings & Content

The Mai Lifestyle Theme demo homepage is made of 10 sections, created using the Section editor, which works like the Classic 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.

Where applicable paste content into the Text tab of the editor.

Section 1

Title

Mai Lifestyle Pro Theme

Content

<em>“The Perfect Theme for Wellness, Food/Recipe, Fitness, Lifestyle, or Small Business Websites and Blogs.”</em>

Settings

Background Color: None
Background Image: Select any image from the Media Library
Overlay Style: None
Inner Style: Light Box
Height: Large
Content Width: Small
Content Alignment: Center
Text Size: Large
 

Section 2

Title

None.

Content

<em>“The Perfect Theme for Wellness, Food/Recipe, Fitness, Lifestyle, or Small Business Websites and Blogs.”</em>

Settings

Background Color: #f0f0f0
Background Image: None
Overlay Style: None
Inner Style: None
Height: Extra Small
Content Width: Small
Content Alignment: Center
Text Size: Extra Large 

Section 3

Title:

Latest Posts

Content:

Read our latest tips, tricks, and musings below.

[grid content="post" exclude_categories="18" number="9" show="image, title, content, more_link" content_limit="30" slider="true" slidestoscroll="3" dots="true" center_mode="true"]

Note: We are using exclude_categories="18"  to make sure Recipes (category 18 on our site) are not shown in the Latest Posts section. You can remove this parameter or exclude your own categories by ID.

Settings:

Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None 

Section 4

Section 4 uses Columns/Col shortcodes, and 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.

We also need to find the image id of the image included on the left. You can reference our help documentation to find the image id.

Title:

None.

Content:

[columns gutter="0"]
[col image="618" image_size="featured"]
[/col]
[col align_text="center, middle"]
<div style="max-width: 300px;">
<h4>Never miss a post</h4>
<em>Sign up for our weekly newsletter to add style to your inbox.</em>
[ninja_form id=2]

</div>
[/col]
[/columns]

A simplified version here:

[columns gutter="0"]
[col image="618" image_size="featured"]
[/col]
[col align_text="center, middle"]
<h4>Never miss a post</h4>
<em>Sign up to add style to your inbox.</em>

<a class="button" href="#">Go Now</a>
[/col]
[/columns]

Settings:

Background Color: #f0f0f0
Background Image: None
Overlay Style: None
Inner Style: None
Height: Auto
Content Width: Full Width
Content Alignment: None
Text Size: None 

Section 5

Title:

Recipes

Content:

We've been busy in the kitchen cooking up our new favorite recipes.
Check them out below, in a gorgeous swipeable slider.

[grid content="post" show="image, title, content, more_link" content_limit="14" categories="18" number="9" align_text="center" slider="true" slidestoscroll="3" center_mode="true"]

Note: We are using categories="18"  as 18 is the category ID of the Recipes on our demo. You can remove this parameter to show all posts, or display post from a specific category by ID.

Settings:

Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None 

Section 6

Section 6 uses inner styling to create the text box, and button  class to render hyperlinks as buttons.

Title:

Unlock Your True Potential

Content:

You are powerful beyond measure, you just need to believe it. Cut out the negative in your life and seek out what inspires you. Don’t make excuses. Learn how to unlock your true potential, download our fake ebook below.

<a class="button" href="#">Download Now</a> <a class="button alt" href="#">Learn More</a>

Settings:

Background Color: None
Background Image: Select any image from the Media Library
Overlay Style: None
Inner Style: Light Box
Height: Large
Content Width: Small
Content Alignment: Center
Text Size: None

Section 7

Title:

Recipe Categories

Content:

Looking for something to make for dinner? Maybe a healthy late night snack? Find a recipe by category below.

[grid content="category" parent="18" columns="3" show="image, title" image_location="bg" align_text="center, middle"]

Note: We are using parent="18"  to only display child categories of the parent "Recipes" category, which has the ID of 18 on our demo. You can remove this parameter to show all categories, or display a specific category by ID.

Settings:

Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None

Section 8

Section 8 is simply an image added to the section content. Add an image to the section and choose the "banner" size. Then add full-width-image  class to the Additional Classes field for that section.

Title:

None.

Content:

Add any image from the Media Library.

Settings:

Background Color: None
Background Image: None
Overlay Style: None
Inner Style: None
Height: Auto
Content Width: Full Width
Content Alignment: None
Text Size: None
Additional Classes: full-width-image

Section 9

Section 9 displays our products. We use Woocommerce to power our Shop. Woocommerce is not included with Mai Theme.

Title:

Our Products

Content:

We've got just the right gifts to make the people in your life smile with joy. You won't be disappointed (and neither will they).

[grid content="product" columns="3" number="6" show="image, title, price, add_to_cart" align_text="center"]

<a class="button" href="https://maitheme.com/mai-lifestyle-pro/shop/">View All Products</a>

Settings:

Background Color: #ffffff
Background Image: Select any image from the Media Library
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: Center
Text Size: None

Section 10

Section 10 uses Mai Testimonials to populate a slider GRID. Mai Testimonials is not distributed with Mai Theme. Mai Testimonials IS available to purchase from maitheme.com. This plugin is currently in beta, so is not currently available to download. By purchasing now you are ensure the lowest price, and will be notified of its availability immediately upon release.

Title:

Testimonials

Content:

[grid content="testimonial" number="all" order_by="rand" columns="1" align="middle" slider="true" dots="true"] 

Settings:

Background Color: #f7f7f7
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Medium
Content Alignment: Center
Text Size: None 

Comprehensive documentation on Grid and Columns/Col is available in here.

Related YouTube videos:

Mai Theme Demo - How the Home Page is set up
How To Create A Full-Width Home Page With Sections Template In Genesis Mai Pro Child Theme

Mai Theme Demo - Setting up the Primary Sidebar

Mai Theme Demo - Creating the Mai Lifestyle theme demo Footer

Did this answer your question?