How to make your front page look like the live demo site

December 22, 2015| Binaya D

In this tutorial we are going to show you how to create a front page like the demo, all of the process are explained below:

Step 1 – Plugins That are Used

  1. Widgetkit Lite – For the front page slideshow
  2. Remove Widget Title – Allows you to hide the widget title from the front-end
  3. Jetpack Widget Visibility – Lets you publish widgets on select pages

Step 2 – Create a Home Page Slider

You need to create a slider using widgetkit plugin. The complete tutorial to make a slideshow can be find here: https://www.styledthemes.com/flat-responsive-setup/387-create-a-slider-like-the-demo-website-using-widgetkit and place the shortcode that come from widget kit to banner-wide widget position.

Step 3 – Create a Call To Action

You can create a call to action as the demo site using the following snippets:

<h2 class=”home_page_title”>Get Your Business Started With Flat Responsive</h2>

<p>Use Flat Responsive theme to create your business website as it is SEO optimized. <br /> Enjoy the flexibility in design and functionality provided by this theme.</p>

<a href=”sign-up” class=”btn”>Get Theme</a>

 

Step-4 Create a Top Widget

All Together there are 4 widgets on the demo you can place the following codes in respective widgets to show like the demo page.

Top 1 Widget

<div style=”text-align:center;”>

<i class=”flat_icons1 cornflowerblue fa fa-cogs”></i>

<h4>Fast & Easy Setup</h4>

<p>Using this Flat Responsive theme, setting up your website can be quick and very easy. You can add your text here using a textbox in the Top 1 Widget Position. </p>

<a href=”#” class=”btn “>Details</a>

</div>

Top 2 Widget

<div style=”text-align:center;”>

<i class=”flat_icons1 cornflowerblue fa fa-life-ring”></i>

<h4>Updates & Support</h4>

<p>We provide regular updates to our themes with feature additions and fixes. You will also be able to access our support forum or benefit from our support through emails.</p>

<a href=”#” class=”btn “>Details</a>

</div>

Top 3 Widget

<div style=”text-align:center;”>

<i class=”flat_icons1 cornflowerblue fa fa-lightbulb-o”></i>

<h4>Flexible & Flat Design</h4>

<p>This theme provides you with 19 widget positions, 100 color classes, 5 navigation styles and more options. It is extremely flexible & encourages flat website design.</p>

<a href=”#” class=”btn “>Details</a>

</div>

Top 4 Widget

<div style=”text-align:center;”>

<i class=”flat_icons1 cornflowerblue fa fa-cogs”></i>

<h4>Flat & Responsive</h4>

<p>Along with maintaining the flat concept in this Premium WordPress Theme, we have also maintained responsiveness & retina readiness for best viewing experience.</p>

<a href=”#” class=”btn “>Details</a>

</div>

 

Step 5- Create A Inset Top Widget

<div class=”container”>
<div class=”col-md-6 wow fadeInRightBig”>
<img src=”http://demo.styledthemes.com/demos/flat-responsive/wp-content/uploads/sites/5/2015/02/comp.png”/>
 
</div>
<div class=”col-md-6 wow fadeInLeftBig”>
<h2 class=”home_page_title color_white”>Beautiful on every device</h2>
<p class=”color_white”>We have developed and designed this Flat Responsive theme to meet the requirements of eCommerce website, Corporate Web Portals or Personal Web-Pages. You have flexible options to set your website the way you would want to. View the websites created with this theme in mobile devices or your laptops – they will always look beautiful.</p>
<div class=”row”>
<div class=”col-md-6″>
<ul class=”list-checkmark white”>
<li>Responsive in all devices</li>
<li>Well Tested Theme</li>
<li>Retina Display </li>
<li>Quality Support </li>
</ul>
</div>
<div class=”col-md-6″>
<ul class=”list-checkmark white”>
<li>Fast & Easy Setup</li>
<li>Updates & Support</li>
<li>Flexible & Flat Design </li>
<li>Flat & Responsive </li>
</ul>
</div>
</div>
<br/>
<a href=”#” class=”btn2 white”>Learn More</a>
</div>
 
</div>

 

Step 6 – Create a Home Page

  1. Go to Pages >> Add New
  2. Name this “Home” and select the page template “Page Full Width”
  3. In the right column, check the box for “Hide Title”. This will hide the page title “Home” from the front-end.
  4. Scroll further down the page and uncheck the box next to “Allow Comments”. If this doesn’t show, go to the top of the screen and click on the upside down tab “Screen Options” and then check the box next to Discussion.
  5. Insert the Following Code and Save it
    <div class=”row”>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”><i class=”flat_icons1 cornflowerblue fa fa-flag-o”></i>
    <h4>Unlimited Possibilities</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
    </div>
    </div>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-mobile”></i>
    <h4>Fully Responsive</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
    </div>
    </div>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-code”></i>
    <h4>Plugins Integrated</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
     
    </div>
    </div>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-bars”></i>
    <h4>5 Navigation Menus</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
     
    </div>
    </div>
    </div>
    <div class=”row”>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-check”></i>
    <h4>SEO optimized</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
     
    </div>
    </div>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-tachometer”></i>
    <h4>Custom Colors</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
     
    </div>
    </div>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-eur”></i>
    <h4>WooCommerce Supported</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
     
    </div>
    </div>
    <div class=”col-md-3″>
    <div class=”fr-content-box” style=”text-align: center;”>
    <i class=”flat_icons1 cornflowerblue fa fa-tachometer”></i>
    <h4>Snippets Included</h4>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when
     
    </div>
    </div>
    </div>
    <div style=”text-align: center;” class=”wow fadeIn col-md-12″><a class=”btn ” href=”#”>View More Features</a></div>
  6. For any images, upload new images 250×140 pixels (can be any height you want) and copy their File URL and replace the sample ones in the code snippet.
  7. Publish or Save the page
  8. Make sure your WordPress settings >> Reading >> has the Front page selected to use the “Home” page you created and the blog one (if you have a blog) set as your posts.

Step 7 – Create A Portfolio

You can follow this link to create a Portfolio https://www.styledthemes.com/flat-responsive-setup/448-how-to-make-custom-portfolio and place the shortcode of the portfolio to inset-full widget.

Step 7 – Create A Logo Bar

<ul class=”fr-logo-bar”>
<li><a href=”#”><img alt=”Styled Themes” src=”http://demo.styledthemes.com/circumference/wp-content/uploads/logo-styledthemes.jpg” /></a></li>
<li><a href=”#”><img alt=”WordPress” src=”http://demo.styledthemes.com/circumference/wp-content/uploads/logo-wordpress.jpg” /></a></li>
<li><a href=”#”><img alt=”BBPress” src=”http://demo.styledthemes.com/circumference/wp-content/uploads/logo-bbpress.jpg” /></a></li>
<li><a href=”#”><img alt=”Jetpack” src=”http://demo.styledthemes.com/circumference/wp-content/uploads/logo-jetpack.jpg” /></a></li>
<li><a href=”#”><img alt=”Bootstrap 3″ src=”http://demo.styledthemes.com/circumference/wp-content/uploads/logo-bootstrap.jpg” /></a></li>
<li><a href=”#”><img alt=”WooCommerce” src=”http://demo.styledthemes.com/circumference/wp-content/uploads/logo-woocommerce.jpg” /></a></li>
</ul>

Other Important Facts:

1. You can find most of the files listed above in snippets.

2. To show widgets on selected pages that is front page you need to follow this tutorial https://www.styledthemes.com/flat-responsive-setup/378-how-to-show-widgets-on-selected-pages-only

Categories: Setup Tutorials for Encase Free

Leave a Reply

Black Friday Offer - 50% Off Discount on ALL PRO THEMES AND MEMBERSHIPS Use discount code BFCM2019