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:\/\/demo.maitheme.com\/law","layout":"full-width-content","banner_id":false,"hide_banner":"1","hide_breadcrumbs":"0","hide_featured":"1","excerpt":"","images":{"428":"https:\/\/demo.maitheme.com\/law\/wp-content\/uploads\/sites\/5\/2018\/09\/rawpixel-771306-unsplash.jpg","406":"https:\/\/demo.maitheme.com\/law\/wp-content\/uploads\/sites\/5\/2018\/09\/rawpixel-351765-unsplash.jpg","416":"https:\/\/demo.maitheme.com\/law\/wp-content\/uploads\/sites\/5\/2018\/09\/rawpixel-1066970-unsplash.jpg"},"sections":[{"bg":"","image_id":428,"image":"https:\/\/demo.maitheme.com\/law\/wp-content\/uploads\/sites\/5\/2018\/09\/rawpixel-771306-unsplash.jpg","overlay":"dark","inner":"","height":"xl","content_width":"","align_content":"","align":"","text_size":"xl","id":"","class":"","context":"","title":"","content":"<h1>Mai Law Pro Theme<\/h1>\r\nThe perfect theme for\u00a0you to showcase your firm on the web.\r\nThe last theme you'll ever need.\r\n\r\n<a class=\"button white\" href=\"https:\/\/demo.maitheme.com\/law\/\">FREE CONSULTATION<\/a>\u00a0\u00a0<a class=\"scroll-to text-sm\" href=\"#why-us\">WHY CHOOSE US?<\/a>"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"Our Practice Areas","content":"<p class=\"text-lg\" style=\"max-width: 800px; margin: auto;\">Our full service firm has over 50 years of experience in a variety of practice areas and legal services. We pay special attention to your needs, pride ourselves on delivering consistent, outstanding results, and adhere to strict ethical and legal guidelines. Browse our practice areas to learn more about how we can help you.<\/p>\r\n[grid content=\"page\" parent=\"13\" number=\"all\" xs=\"12\" sm=\"6\" md=\"4\" show=\"image, title\" image_location=\"bg\" overlay=\"gradient\" align_text=\"center, bottom\" class=\"top-xs-xxl\"]"},{"bg":"#323232","image_id":406,"image":"https:\/\/demo.maitheme.com\/law\/wp-content\/uploads\/sites\/5\/2018\/09\/rawpixel-351765-unsplash.jpg","overlay":"dark","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"why-us","class":"","context":"","title":"Why Choose Mai Law Pro","content":"<p class=\"text-lg\" style=\"max-width: 800px; margin: auto;\">Mai Law Pro Theme will get your law firm website ready in no time. Header layouts, banner area, grid archive settings, and many more theme customization features make it simple for you to create\u00a0an easy to navigate website that caters to your clients' needs.<\/p>\r\n[columns align=\"middle\" top=\"xxl\"]\r\n[col align_text=\"left\"]\r\n<div class=\"bottom-xs-xxl\">\r\n<h3>Responsive\u00a0Design<\/h3>\r\nBuilt with HTML5 and CSS3, Mai Law Pro is fully responsive to give your\u00a0mobile visitors a great experience.\r\n\r\n<\/div>\r\n<div class=\"bottom-xs-xxl\">\r\n<h3>Rocket Fast<\/h3>\r\nA balance of site architecture, UX, clean design, and quality code leads to beautiful websites that load fast and are easy to use.\r\n\r\n<\/div>\r\n<div class=\"bottom-xs-xxl\">\r\n<h3>Great Support<\/h3>\r\nWe invest a lot in our support.\u00a0We keep our extensive arsenal of how-to's and help docs regularly updated, and if you have a set-up question, we are here to\u00a0chat so you're never left stuck.\r\n\r\n<\/div>\r\n[\/col]\r\n[col]\r\nhttps:\/\/youtu.be\/UsgYKyvzlYY\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":"Our Attorneys","content":"<p class=\"text-lg\" style=\"max-width: 800px; margin: auto;\">Our reputable, talented team members are among the top in their respective fields. We care about our clients and our community and will work tirelessly to achieve exceptional results for you.<\/p>\r\n[grid content=\"page\" parent=\"11\" number=\"all\" align=\"center\" show=\"image, title, excerpt, more_link\" more_link_text=\"Read More\" image_size=\"thumbnail\" image_align=\"center\" boxed=\"false\" entry_class=\"bottom-xs-xxl\"]"},{"bg":"#f7f7f7","image_id":416,"image":"https:\/\/demo.maitheme.com\/law\/wp-content\/uploads\/sites\/5\/2018\/09\/rawpixel-1066970-unsplash.jpg","overlay":"dark","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"","id":"","class":"","context":"","title":"News & Events","content":"<p class=\"text-lg\" style=\"max-width: 800px; margin: auto;\">Stay up to date on our latest articles, press releases, and what we are doing serve and bring change to our community.<\/p>\r\n[grid content=\"post\" number=\"6\" show=\"image, title, excerpt, more_link\" content_limit=\"36\" boxed=\"true\" image_location=\"before_title\" slider=\"true\"]\r\n\r\n<a class=\"text-lg\" href=\"https:\/\/demo.maitheme.com\/law\/news\/\">View All Posts<\/a>"},{"bg":"#ffffff","image_id":"","image":false,"overlay":"","inner":"","height":"lg","content_width":"","align_content":"","align":"center","text_size":"lg","id":"","class":"","context":"","title":"Success Stories","content":"[columns]\r\n[col]\r\n<em>\"I love this theme! Great flexibility and so many options! But best of all is the responsive customer support.\"<\/em>\r\n<strong>- Linda<\/strong>\r\n[\/col]\r\n[col]\r\n<em>\"I've been very happy with my experience with the Mai Theme and the company's support and have been recommending it to others. Thank you!\"<\/em>\r\n<strong>- Olivia<\/strong>\r\n[\/col]\r\n[col]\r\n<em>\"Your theme, instructional videos and tutorials and help are top notch!!!!\"<\/em>\r\n<strong>- Lisa<\/strong>\r\n[\/col]\r\n[\/columns]"},{"bg":"#067ccc","height":"lg","content_width":"md","align":"center","text_size":"lg","content":"<strong>Looking for immediate answers to your questions?<\/strong>\r\n<h2>Schedule a no-cost consultation today!<\/h2>\r\nThis page was built using the powerful Sections page template that comes with this theme.\u00a0With the \u201cSections\u201d template, you\u2019re not stuck with using custom widget areas when designing your home page. And why limit yourself to a front page? The \u201cSections\u201d template can be used on as many pages as you like!\r\n\r\n<a class=\"button large white\" href=\"https:\/\/demo.maitheme.com\/law\/\">SCHEDULE NOW<\/a>"}]}
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 9 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.
Where applicable paste content into the Text tab of the editor.
Section 1
Title
None.
Content
<h1>Mai Law Pro Theme</h1>
The perfect theme for you to showcase your firm on the web.
The last theme you'll ever need.
<a class="button white" href="https://demo.maitheme.com/law/">FREE CONSULTATION</a> <a class="scroll-to text-sm" href="#why-us">WHY CHOOSE US?</a>
Settings
Background Color: None
Background Image: Select any image from the Media Library
Overlay Style: Dark
Inner Style: None
Height: Extra Large
Content Width: Default
Content Alignment: None
Text Alignment: None
Text Size: Extra Large
Section 2
Title
Our Practice Areas
Content
<p class="text-lg" style="max-width: 800px; margin: auto;">Our full service firm has over 50 years of experience in a variety of practice areas and legal services. We pay special attention to your needs, pride ourselves on delivering consistent, outstanding results, and adhere to strict ethical and legal guidelines. Browse our practice areas to learn more about how we can help you.</p>
[grid content="page" parent="13" number="all" xs="12" sm="6" md="4" show="image, title" image_location="bg" overlay="gradient" align_text="center, bottom" class="top-xs-xxl"]
Our demo site has a page called Practice Areas which has the ID of 13
. All of the actual practice areas are child pages of this page, so in our [grid]
shortcode we use parent="13"
to only show child pages of the main Practice Area page in this section.
Settings
Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: None
Text Alignment: Center
Text Size: None
Section 3
Title
Why Choose Mai Law Pro
Content
<p class="text-lg" style="max-width: 800px; margin: auto;">Mai Law Pro Theme will get your law firm website ready in no time. Header layouts, banner area, grid archive settings, and many more theme customization features make it simple for you to create an easy to navigate website that caters to your clients' needs.</p>
[columns align="middle" top="xxl"]
[col align_text="left"]
<div class="bottom-xs-xxl">
<h3>Responsive Design</h3>
Built with HTML5 and CSS3, Mai Law Pro is fully responsive to give your mobile visitors a great experience.
</div>
<div class="bottom-xs-xxl">
<h3>Rocket Fast</h3>
A balance of site architecture, UX, clean design, and quality code leads to beautiful websites that load fast and are easy to use.
</div>
<div class="bottom-xs-xxl">
<h3>Great Support</h3>
We invest a lot in our support. We keep our extensive arsenal of how-to's and help docs regularly updated, and if you have a set-up question, we are here to chat so you're never left stuck.
</div>
[/col]
[col]
[/col]
[/columns]
Settings
Background Color: #323232
Background Image: Select any image from the Media Library
Overlay Style: Dark
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: None
Text Alignment: Center
Text Size: None
HTML id: why-us
(For Section 1 link to scroll-to this section)
Section 4
Title
Our Attorneys
Content
<p class="text-lg" style="max-width: 800px; margin: auto;">Our reputable, talented team members are among the top in their respective fields. We care about our clients and our community and will work tirelessly to achieve exceptional results for you.</p>
[grid content="page" parent="11" number="all" align="center" show="image, title, excerpt, more_link" more_link_text="Read More" image_size="thumbnail" image_align="center" boxed="false" entry_class="bottom-xs-xxl"]
Settings
Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: None
Text Alignment: Center
Text Size: None
Section 5
Title
News & Events
Content
<p class="text-lg" style="max-width: 800px; margin: auto;">Stay up to date on our latest articles, press releases, and what we are doing serve and bring change to our community.</p>
[grid content="post" number="6" show="image, title, excerpt, more_link" content_limit="36" boxed="true" image_location="before_title" slider="true"]
<a class="text-lg" href="https://demo.maitheme.com/law/news/">View All Posts</a>
Settings
Background Color: None
Background Image: Select any image from the Media Library
Overlay Style: Dark
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: None
Text Alignment: Center
Text Size: None
Section 6
Title
Success Stories
Content
[columns]
[col]
<em>"I love this theme! Great flexibility and so many options! But best of all is the responsive customer support."</em>
<strong>- Linda</strong>
[/col]
[col]
<em>"I've been very happy with my experience with the Mai Theme and the company's support and have been recommending it to others. Thank you!"</em>
<strong>- Olivia</strong>
[/col]
[col]
<em>"Your theme, instructional videos and tutorials and help are top notch!!!!"</em>
<strong>- Lisa</strong>
[/col]
[/columns]
Settings
Background Color: #ffffff
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Default
Content Alignment: None
Text Alignment: Center
Text Size: Large
Section 7
Title
None.
Content
<strong>Looking for immediate answers to your questions?</strong>
<h2>Schedule a no-cost consultation today!</h2>
This page was built using the powerful Sections page template that comes with this theme. With the “Sections” template, you’re not stuck with using custom widget areas when designing your home page. And why limit yourself to a front page? The “Sections” template can be used on as many pages as you like!
<a class="button large white" href="https://demo.maitheme.com/law/">SCHEDULE NOW</a>
Settings
Background Color: #067ccc
Background Image: None
Overlay Style: None
Inner Style: None
Height: Large
Content Width: Medium
Content Alignment: None
Text Alignment: Center
Text Size: Large