Setup the home 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:\/\/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
- 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.
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"]
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.
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"]
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"]
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