How to create a front page like the live demo

This tutorial is going to be a bit involved, but it’ll help you to create a front page just like the live demo site and the screenshot that is associated with Longevity.

Plugins Used for the Demo

These are the plugins I used to create the front page with, so you will want to install them. If you are using Jetpack, you can ignore “Display Widgets” as Jetpack has “Widget Visibility” that you can use. For the Longevity Shortcodes plugin, this is found in your original theme package download. You will want to make sure these are installed.

  • Animate It! - for animation effects
  • Display Widgets - to show widgets on select pages
  • Remove Widget Titles - to hide widget titles from the front-end

Step 1 - Create our Front Page

The front page uses the “Template Sidebars Only” template. This will not display any content if you were to enter any into the editor. We just need this one so we can take advantage of all the sidebar positions to give us our layout we need.

Available sidebars for this template are:

  1. Call to Action
  2. Breadcrumbs
  3. Top 1, 2, 3 and 4
  4. Content Bottom 1, 2, 3, and 4
  5. Banner
  6. bottom
  7. Footer

Let’s Get Started

  1. Go to Pages >> Add New
  2. Title this page however you like, but something that will reference it being your front page. Example: My Front Page
  3. Select the template as named above: Template Sidebars Only
  4. Click “Publish“

Step 2 - Prepare your Images

Banner Image = 2560×720 pixels (this accommodates people with big monitors if your site width is set to full width (100%). Although this is not required, it’s only a recommendation you use an image this size.

Four Widgets = Each image thumbnail is 250×160 pixels. Make sure they are equal in size for consistency. You will need 4 of these.

Note If you make your images bigger, they will simply downsize to fit the container they are in. Remember, this is a responsive theme, so images will adjust automatically based on the viewing window size.

Step 3 - Create Your Banner

Now it’s time to begin adding our content by using widgets, but first we will create our front page banner.

  1. Go to Media >> Add New
  2. Upload your front page banner image and then click on the text link “Edit“.
  3. At the top right section of your image edit screen is a File URL field. Click inside that and copy that URL.
  4. Now to to Appearance >> Widgets, and drag a text widget into the “Banner” sidebar box.
  5. Title it !Front Page Banner (with an exclamation mark right in front so that our title is hidden on the front-end). This is from the “Remove Widget Titles” plugin that lets you hide the widget title.
  6. In your text widget, first make sure the Automatically add paragraphs option is unchecked. Add this code <img src="/your File URL" alt="a short description"/> by pasting it into the text area. The File URL you copied earlier is to replace the text: /your File URL
  7. If you installed and activated the Display Widgets (or the Jetpack Widget Visibility feature), set the widget to only show on the Front Page.
  8. Click “Save“

Step 4 - Create Our Call to Action

Now it’s time to create our Call to Action. We will be using a text widget for this, and when done, it should look like this:

  1. Go to Appearance >> Widgets, and drag a text widget into the “Call to Action” sidebar box.
  2. Title your widget with the first title line that shows on the front-end. The demo uses: Experience a Stylish Theme called Longevity
  3. For the rest of the content, copy the code below and paste it into the text widget. 
<p style="font-size: 1.125rem; color: #000;">You should not have to settle for square shaped themes.</p><p>Clean simple design with with a variety of colour options, several blog styles and layouts, animation, plus much more! This theme is uses a multipurpose design which means you can use it for a variety of websites, from corporate to e-commerce to professional artists.</p> <p><a class="btn btn-lg blue" href="LINK HERE"/>Download Longevity</a><p>

When you copy the above code and content into your text widget, you will need to carefully replace the content with your own. Make sure you do not accidentally remove any of the HTML code parts. The button is a Shortcode, so you will want to replace the URL to where you want the button to link to, followed by changing the label of the button from “Download This Theme” to your own. The embedded CSS that you see on the first paragraph: font-size: 1.125rem; color: #000 can be changed to your own preferences. Right now the font is set to be 1.125rem (18px) and the colour is set to black, hence the HEX colour value #000 that you see. The same goes for the button styles too.

Step 5 - Create Our 4 Widgets witih Images

The next thing to do is create our 3 front page widgets that contains images, content, and a button. I used text widgets for these and published them to the sidebar positions of Top 1, Top 2, Top 3, and Top 4.

Before we begin with the widgets themselves, we need to upload our three images — hopefully you have these prepared. Upload them to your Media Library, and this is where you need to copy the “save” the File URL somewhere because we have to paste these URL’s into the text widgets as we make each one. So when you upload one, click the Edit link and copy that File URL just like we did with the banner in Step-3 above.

  1. Go to Appearance >> Widgets, and then drag a text widget into the “Inactive Widgets” area. This will let us work on the widget until we are ready to drag it into our sidebar position(s).
  2. Title the widget with a ! right before the title (so we can hide this from the front-end).
  3. Copy the code and content you see below into the text widget.
  4. Now we need to set the options of where we want this widget to be published. In our case, we want to publish it to the Front Page only.
  5. Click Save
  6. Drag the widet into the “Top 1” sidebar box.
  7. Repeat the above for each of the remaining 3 widgets, except for the second one, we will drag that into “Top 2” and then the third one we drag into “Top 3“, followed by the fourth one for “Top 4“.
<img src="IMAGE LINK HERE"/> <h3 style="font-size: 1.25rem; text-align:center">Several Colour Choices</h3><p style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem urna. Vestibulum fermentum libero ut ante consectetur dictum vitae nece.</p><p style="text-align:center"><a class="btn btn-sm blue" href="#">See More</a></p>

Just like before, you will want to change the content to your own. Remember the File URL’s you copied and saved from when you uploaded them? Grab the first one and replace the /your file URL with your File URL. For your button shortcode, replace the link to where you want the button to link to, and then change the button label too. If you want to change the HEX colours (the #769cd0 ), you can.

What About Animated Widgets like the Demo?

I used a plugin called Animateit! which handles the animation effect you see on the demo site. I will refer you to their documentation on how this is done, but should you install the plugin, here is the code I used for the widgets:

[edsanimate animation="bounceInLeft" infinite_animation="no" animate_on="" ] <img src="IMAGE LINK HERE"/> <h3 style="font-size: 1.25rem; text-align:center">Several Colour Choices</h3><p style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem urna. Vestibulum fermentum libero ut ante consectetur dictum vitae nece.</p><p style="text-align:center"><a class="btn btn-sm blue" href="#">See More</a></p> [/edsanimate]

The code above is wrapped in an animation shortcode:

[edsanimate animation="bounceInLeft" infinite_animation="no" animate_on=""] your widget content here [/edsanimate]

You will do this for each additional widget you add to get all four that you see in the front page demo…with or without the animation effect.