How to make a front page like the demo site

This tutorial will help take you through the creation of a front page like the live demo site for Emphasize has. This one will be broken down into tutorial sections.

Plugins

Let’s begin with the plugins that I used for the demo site:

  • Hide Title – By Brandon Kraft & Randall Runnels – You can hide the page title
  • Remove Widget Titles – By Stephen Cronin – You can remove widget titles from the front-end of the site
  • Display Widgets – By Steph Wells – You can publish widgets to select pages of your website
  • Jetpack – If you use jetpack, you won’t need Display Widgets as it has it’s own Widget Visibility feature. 

Please note that the above plugins are optional and not required, but to achieve the effects and methods used to create the front page and other elements, the list above are what I used.

Before we continue, make sure you have at least the Display Widgets, Hide Title, and Remove Widget Titles activated.

Add a Banner

To make the banner, I created the image in Photoshop, but whatever image you plan to use, the key factor here is to upload it to your Media Library and to copy the File URL (see below) because we will need it shortly.

File URL for your Image after it’s in the Media Library:

banner file url

The size of your image or images (if using a slider) can be almost anything you want, but if you want to accommodate very large screens of 2560px in width, you will need a good quality image. Make sure it’s the size you need before uploading.

Demo banner size = 2560 x 460 pixels

emphasize banner

Now we need to create the widget our banner image will go into.

  1. Go to Appearance >> Widgets
  2. Drag a “Text Widget” into the “Full Width Banner” sidebar position and then title it with an ! exclamation mark in front of the title (this hides it from the front of your website.
  3. Add this code but update the “this is your image path/image.jpg” to the full FILE URL of your uploaded image:
     <img src="http://this-is-your-image-path/image.jpg" alt="My Front Page Banner"/>
  4. If you have either the Display Widgets or Widget Visibility (from Jetpack) active, you can select where to show this widget. Select to show it on the Front Page.
  5. Click “Save” on your widget.

Make the Call to Action

The call to action is used to grab the attention of the website visitor and to get them to take action by clicking on something, such as the button. This is what we are going to make:

cta emphasize

  1. Go to Appearance >> Widgets
  2. Drag a “Text Widget” into the “Call to Action” sidebar position
  3. Title it, but this time we won’t be hiding the title because our first line of our Call to Action is “Meet a Premium WordPress Theme called Emphasize Pro!
  4. In the content area of the text widget, we will now add our content for the body of the call to action text and button.
    Clean simple design to give more emphasis on your website's content. <a class="btn btn-lg aqua animated fadeInDown" href="http://www.shapedpixels.com/premium-wordpress-themes/51-emphasize-pro">Purchase Now</a>
  5. Now we can set our widget to publish it to show only on the Front Page.
  6. Click “Save

Note The animation effect of the call to action button is set by adding these two classes to the link of the button: animated fadeInDown

Where can you find alternative effects?

Animate It!

You can add animation to most elements to give it a special effect. Make sure you always start off with the class animated and then follow it with the effect class.

Main Content with Column Layout

On the live demo site, we see a two column layout. This one is a bit hands on with some HTML code, so when you make your own, take your time and you will be OK with this. Once it’s create, you don’t have to worry about it anymore…unless you need to edit something. This is what we are going to make:

emphasize fp contentBasically what the above content is, are two columns. Each one has content, such as the image and then the other is the text and list that you see in the screenshot. 

Create Your Image

First thing, create your image. This can be anything you want, where mine was two screens with a white background to blend into the page background, also being white. One you’ve done this, upload it to your Media Library and make note of the image File URL just like you did for the banner. 

Create Your Page

Now we can get into the actual page content, but we need to create a page for this. 

Caution When working with this content, take it slow and be careful not to delete any of the HTML code because the editor in WordPress is notorious for not behaving when working with HTML.

  1. Go to Pages >> Add New
  2. Title your page to what you want, but this title won’t be displayed because we are going to use that “Hide Title” plugin so that we can make our own page headings. 
  3. The next thing we need to do is to apply a page template from the “Page Attributes” box off to the right of the editor. Choose the “Full Width Page” template.
  4. In your page editor, let’s make our headings, starting with the first heading using the H1 style, followed by the second heading using the H2 style. When you create these two headings, use the Custom Heading Source Code you see further below the page because we need the wrapper container that the headings are sitting in to give us the style we see below:

    fp headings

  5. Now we need to add our content columns below our page headings in the editor, so for this we will need to switch our editor to the “Text (HTML)” tab so that we can paste some HTML code that will give us our columns.  You can get the source code further below in this tutorial.
  6. Using the above code as a template, change the image path to the one relating to the image you uploaded earlier for the first column.
  7. Now switch back to the “Visual” tab for the editor, and then select the content so that it’s highlighted. Start typing in your own content.
    fp content highlight change
  8. Next we need to change the list items to be your own. Select the list item and type in your own. Repeat for each one.
    fp list highlight

Custom Heading Source Code

We need our two headings to be wrapped in a div container with the two classes: heading text-center

<div class="heading text-center"> <h1>Core Features of Emphasize</h1> <h2>Super powerful &amp; easy to use theme</h2> </div>

Column Content Source Code

 This is our main content that sits in a column structure; inside that has a nested column structure that gives us a two-column list. The column structure uses the Bootstrap framework for a grid column layout, and it’s what this theme uses for the layout of the theme pages and other elements. You can read more about it here: Bootstrap Grid layouts

What is important is to create our two column layout with a base structure that looks like this:

<div class="row">
<div class="col-md-6">your content here</div>
<div class="col-md-6">your content here</div>
</div>
<div class="row"> <div class="col-md-6 animated bounceInLeft"> <img class="alignleft" src="http://demo.shapedpixels.com/emphasize-pro/wp-content/uploads/sites/4/2015/04/fp-devices.jpg" alt="device screenshot" /> </div> <div class="col-md-6 animated bounceInRight"> Emphasize Pro is a powerful theme that offers clean, elegant design aesthetics. Packed with features, flexibility, scalability, and overall good looks, there isn't a site that won't look simply amazing! With Emphasize Pro, your content will stand out because of the exceptional list of features you get with this theme. Check out just some of the many features you get: <div class="row"> <div class="col-md-6"> <ul class="feature-list aqua" style="padding-left: 0;">  	<li>Responsive Layout</li>  	<li>8 Blog Layouts</li>  	<li>Unlimited Colours</li>  	<li>28 Widget Positions</li> </ul> </div> <div class="col-md-6"> <ul class="feature-list aqua" style="padding-left: 0;">  	<li>Custom Widget Styles</li>  	<li>WordPress Customizer</li>  	<li>Premium Support</li>  	<li>Jetpack Ready</li> </ul> </div> </div> </div> </div>

Some Notes about the HTML Code as Content

I’m kind of breaking my own rules of not doing HTML as content because if you were to change themes later in time, any CSS styles associated with the HTML content will be lost and then would need to be copied from Emphasize over to the new theme. To maintain content such as this, it’s strongly recommended that shortcodes are used instead of HTML code. Shortcodes also makes it easier to work with when in the editor.

Unfortunately, this theme was built a year ago and i did not create shortcodes for this theme…something I will probably do at some point in time. However, for all new themes by Shaped Pixels, shortcodes will be used for in-page content elements like columns, custom headings, image boxes, icon boxes, etc.

Column Option

If you would like to create columns using a third party plugin, you could use one of your choice. Try to find one that just does columns only, and preferably a Bootstrap 3 version, but any column plugin should be OK to use. It might make things easier, and would maintain the content column structure if you later decided to change the theme. Otherwise, go ahead and use the HTML code I have above.