How to make a Front Page like the demo website

If you like how the live demo site for Emphasize looks, this tutorial will help you get your own site setup to have it like the demo.

Create a Front Page

First thing we need to do is to make sure we have a page made up. We won’t add any content to this yet because we will do that in a moment.

  1. Go to Pages >> Add New
  2. Title your page to what you want it to be. For the demo site, I named it “Welcome to Emphasize“. However, we need to hide our page title because we are going to create our own in the page content itself, so we need a plugin for that (see next part below).
  3. Select your page template to be the “Full Width Page
  4. Click “Publish” or “Update” if you already have one.

Hide Page Title

To hide the page title, we need a plugin called “Hide Title” which we can use.

  1. Go to Plugins >> Add New
  2. Search for “Hide Title” and when you see this one show up, click on Install and Activate it.
    hide title plugin
  3. Once this is done, you can open any page in your editor and off to the right side column is a box with the Hide Title setting. Place a checkmark in the box for your home page you made. This will hide the title.

Front Page Banner

We will begin with the front page banner, although you have the choice to put whatever you want here, even a slider. The demo uses a single image that contains text that was put onto the image itself using a photo program. For me, I use Photoshop, but there are many other image programs that will let you do that. However, if you are skilled at CSS, you can have a plain image and then using CSS, float actual text on top of the image.

  1. Prepare your image banner by cropping and sizing it to be 2560×460 (this allows for really big monitors and resolutions to see the image full width. However, you can make your width smaller if you wish, but I would not go less than 1920px (which is the most common resolution size nowadays). Your height is more flexible, so you can have it to your preference.
  2. Go to Media >> Add New
    media add new
  3. Upload your image banner and click on the Edit link. We need to copy the File URL (the full URL that links to the image)
    file url
  4. Go to Appearance >> Widgets, and then drag a text widget into the Full Width Banner sidebar position.
  5. In this text widget, title it “!Front Page Banner“. Notice I put an ! (exclamation mark) in front of the title? More on this in a moment.
  6. In the text widget content, copy and paste this code you see below. Replace /your file URL with the copied File Url that we got when we uploaded the banner image. Then for your ALT tag, keep it as it is or change it to give a short description for your image.
    <img src="/your file URL" alt="front page banner" />
  7. Click “Save” 

Hiding the Widget Title from the Front End

This is a common tutorial for all my themes, but basically, WordPress does not have a setting to disable widget titles from the front-end of your site, so we need to use a plugin for that feature. This is why I added an exclamation mark just before the widget title. 

Hide Widget Titles

Create a Call to Action 

To create a Call to Action like the demo site, there is a tutorial already setup for this:

CTA Tutorial

Let’s Create our Page Content with 2 Columns

This part of our setup is going require some time to put together and to be very careful because we need to work with some HTML code. The editor for WordPress is really finicky and can cause headaches because it has a bad habit of creating problems, so if you can, take this one real slow and one step at a time.

First thing we need to do is to open our front page we created, which should just be the title only. It’s time to start adding our content, but first, we need to create our columns. The demo site shows 2 columns, one with an image in it, the the other has some content and a bullet list of items.

fp content layout We will begin with our page heading, so let’s start by clicking on the “Text” tab of our editor. The first thing we will do is copy and paste this code:

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

You can change the content to be your own, such as:

  • Core Featured of Emphasize
  • Super Power &amp; easy to use theme

Note The &amp; you see above is html code for the & symbol. Whenever you are in HTML mode, it’s best to use &amp; for that, but when in normal editor mode, you can use the standard & symbol.

Create Columns

Now comes the really tricky part that requires us to do this in the HTML text mode of our editor so that we don’t accidentally remove any HTML code tags if we were in the normal Visual mode.

Below our heading code, we want to create our columns by adding some code. For a two column layout, we want to use this:

<div class="row">
<div class="col-md-6">content here</div>
<div class="col-md-6">content here</div>
</div>

The two div’s you see above with the class=”col-md-6″ means that each column will be 50% in width and will sit side-by-side in your page. Our actual content will go into each of these div’s, right where you see content here.

Adding Animation to our two Columns

If you want animation, we need to add classes to our two div’s. If you want the same kind of animation the demo site has, then you will add these classes to both div containers next to the col-md-6 class like this:

For the 1st Div to float in from the left:

class="col-md-6 animated bounceInLeft"

For the 2nd Div to float in from the right:

class="col-md-6 animated bounceInRight"

If you want to read more about animation in Emphasize, you can refer to this introduction tutorial:

Animation

To find out what other animation effects you can use, you can refer to this site:

Animation Effects Tryout

First Column Content

Based on our demo website, the first column simply has an image in it. So to get you started, you can use this code you see below:

<p><img class="alignleft size-full" src="http://demo.shapedpixels.com/emphasize/wp-content/uploads/sites/5/2015/04/fp-device-screenshot1.jpg" alt="device screenshot" /></p>

For your own image, upload it to your Media Library and copy the File URL for it, then replace the file URL you see in the code above between the ” ” for src. Don’t forget to update the ALT tag with a short description for the image.

Second Column Content

Based on our demo website, the second column is where our actual content is located. This content is actually two parts, the first being the written paragraph introcution, followed by the second part which is a 2-column bullet list. You can use this code you see below:

<p>Emphasize 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, 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: </p>

Adding the 2-Column Bullet List

Just below our paragraph (after the last </p> tag) that you just copied and pasted, we need to create a 2-column layout…just like we first did earlier with the div’s and the class=”col-md-6″ method. Again, we need to be careful here because we are working in HTML, so lets make this easier by giving you the code for the columns, but also include the bullet list. You can see the full code below:

<div class="row"> <div class="col-md-6"> <ul class="feature-list aqua" style="padding-left: 0;"> 	<li>Responsive Layout</li> 	<li>4 Blog Layouts</li> 	<li>Unlimited Colours</li> 	<li>15 Widget Positions</li> </ul> </div> <div class="col-md-6"> <ul class="feature-list aqua" style="padding-left: 0;"> 	<li>50 Animation Effects</li> 	<li>WordPress Customizer</li> 	<li>Theme Support</li> 	<li>Jetpack Ready</li> </ul> </div> </div>

Let’s run through the code above…

  • We have our 2-column code layout where each column has a class=”col-md-6″ 
  • In each column, we have an unordered list, each one uses a class=”featured-list aqua” to give it the style you see plus aqua is the colour of the bullet icons.
  • Each <li>Some content here</li> represents each list item.
  • The padding-left: 0; you see makes our list items flush to the left (no space).

When We are all Done

When we are all done, the page content HTML code should be like this when complete:

<div class="heading text-center"> <h1>Core Features of Emphasize</h1> <h2>Super powerful &amp; easy to use theme</h2> </div> <div class="row"> <div class="col-md-6 animated bounceInLeft"> <p><img class="alignleft size-full" src="http://demo.shapedpixels.com/emphasize/wp-content/uploads/sites/5/2015/04/fp-device-screenshot1.jpg" alt="device screenshot" /></p> </div> <div class="col-md-6 animated bounceInRight"> <p>Emphasize 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, 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: </p> <div class="row"> <div class="col-md-6"> <ul class="feature-list aqua" style="padding-left: 0;"> 	<li>Responsive Layout</li> 	<li>4 Blog Layouts</li> 	<li>Unlimited Colours</li> 	<li>15 Widget Positions</li> </ul> </div> <div class="col-md-6"> <ul class="feature-list aqua" style="padding-left: 0;"> 	<li>50 Animation Effects</li> 	<li>WordPress Customizer</li> 	<li>Theme Support</li> 	<li>Jetpack Ready</li> </ul> </div> </div> </div> </div>

Why so Much HTML Code?

You will probably ask yourself, “Why is there so much html coding needed for this?” A good question, but a not-so-easy-answer, but I will do my best here. Typically, when you make a page, you’re simply typing in text into your editor, making paragraphs, perhaps adding some inserted images, and some basic elements like quotes or bullet list content.

When you want something a little more elaborate, things like content columns, doing it from the Visual editor tab makes that very difficult because you cannot insert columns from there, you have to change to the Text view (html).

However, there are some themes that use Page Builder plugins that allow you to create more complex layouts because they insert html code for you as you drag and drop containers into your page and add content, whether images, lists, videos, etc. There are some themes that use Shortcodes, but even this can be difficult if you require complex layouts. 

You of course have the option to use a page builder plugin, but one of many problems is that the code they generate behind the scenes is horrible beyond belief. Plus, if you ever switch themes, you will have a lot of problems because everything is tied into using the page builder. There’s also the issue that if you use a page builder plugin, you basically have to use it for all your pages and post creation, not just one page only.

There are advantages to page builders though, and the biggest one is that you don’t have to worry about html code, you simply drag and drop elements into your page and create your layout and content.