Make a Front Page like the demo site

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 Pro.

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!
  • Display Widgets
  • Remove Widget Titles
  • Longevity Shortcodes

Step 1 – Create our Front Page

The front page uses the “Template No Content No Left & Right Sidebars“. 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.

  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 No Content No Left & Right Sidebars
    fp template select
  4. Click “Publish

Step 2 – Prepare your Images

You have some work to do here, but it’s best to get all your images prepared and ready to upload. We will need one for the front page banner, images for the 4 widgets we see side-by-side, and then we need the images that are found at the bottom of the page.

Banner Image = 2560×720 pixels (this accommodates people with big monitors if your site width is set to full width (100%). You will need 1 banner image.

tutorial demo banner

Three Widgets = Each image thumbnail is 350×225 pixels. Make sure they are equal in size for consistency. You will need 3 of these.

tutorial fp image widgets

The Showcase Gallery = Images are 640×425 pixels. Again, make sure they are equal in size for consistency. You will need 4 of these.

tutorial fp showcase

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.
  6. In your text widget, add this code  <img src="your File URL" alt="a short description"/> and paste that File URL you copied 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:

tutorial fp cta

  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 Pro
  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>[longevity_button url="http://www.shapedpixels.com/longevity-pro/" size="large" style="cta" background="#769cd0" border="#769cd0" color="#ffffff" target="_self"] Download This Theme [/longevity_button]<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 3 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, and Top 3.

tutorial fp image widgets

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).
    inactive widgets area
  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 2 widgets, except for the second one, we will drag that into “Top 2” and then the third one we drag into “Top 3“.
<img src="/your file url"/> <h3 style="font-size: 1.25rem; text-align:center">Beautiful Design</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">[longevity_button url="#" size="small" style="round" background="#769cd0" border="#769cd0" color="#ffffff" target="_self"] Button Text [/longevity_button]</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.

You will do this for each additional widget you add to get all three that you see in the front page demo.

 Step 6 – Create Our Showcase Gallery

This step is a little involved because not only are we creating our showcase gallery of images, we are also including some additional content that sits above the gallery:

tutorial above showcase

 Let’s start with the first part, which is the extra content we see in the screenshot above. This will be added to a text widget, which is where our Showcase gallery shortcode is going as well, so the amount of code going into our widget is a lot. Take this step slow and you will be fine.

Part 1 – The Introduction 

  1. Go to Appearance >> Widgets, and drag a text widget into the “Inactive Widgets” area. This will give us a bit more room to work with our content.
  2. Title your widget !Front Page Showcase Gallery (with an exclamation mark to hide the title)
  3. In the content area, copy the first batch of code (includes shortcode) you see below titled as “Showcase Introduction” and paste it into the text widget. Replace the content with your own and make any style adjustments as needed.
  4. Save your widget, but don’t drag it over into a sidebar yet.
[longevity-title heading="h1" color="#000000" align="center"] Zen Lifestyle [/longevity-title][longevity-subtitle heading="h2" color="#565656" align="center"] Lorem Ipsum dolor sit amet [/longevity-subtitle]<p>Donec varius quis turpis eget rhoncus. Maecenas posuere erat quis nisi ullamcorper pharetra. Nulla ut euismod leo. <br />Etiam quis eros dapibus, rutrum quam a, rutrum tellus. In sodales eget erat sed tincidunt.</p>

 Part 2 – The Showcase Gallery

Now that we are ready to create our gallery, we need to upload our 4 images that you prepared (or I hope you have ready). The images I used for the demo are 640×425 pixels in size so that on large 2560 pixels resolution screens, your images will fit. However, if you are using the boxed page width, you can make your images a bit smaller if you wish. 

Just like before, upload your images to your Media Library and copy the File URL of each one; save it somewhere for later.

Let’s add a divider to separate our Introduction and our gallery. To do this, we need to add a shortcode like this:

[longevity-divider style="spacer"]

Now we can copy the next snippet of code and paste it right below our divider shortcode. This is the part that creates the gallery, so when you copy each code snippet, change the content to your own, including the File URL. For the link, change the link=”#” (just the # only) that you see in the snippets, change this to a full URL of where this image will link to when clicked.

We will do this one shortcode at a time for each image. When done, copy the next one, then paste it “right after” the one you just pasted.

NOTE Normally, in a page or post, you don’t have to copy and paste the code because the shortcode plugin adds a button to your editor that lets you fill in each element. For more information about this, you can check out the Introduction to Shortcodes tutorial.

We first need to wrap our showcase shortcodes in a container shortcode:

[showcase_row]

Your showcase shortcode images here

[/showcase_row]

[longevity_showcase columns="col-sm-6 col-md-3 col-lg-3" title="Mobile Responsive" rel="" image="/your file url" alt="" link="#" button="See More"] [/longevity_showcase]
[longevity_showcase columns="col-sm-6 col-md-3 col-lg-3" title="Shortcode Plugins" rel="" image="/your file url" alt="" link="#" button="See More"] [/longevity_showcase]
[longevity_showcase columns="col-sm-6 col-md-3 col-lg-3" title="Multiple Blog Styles" rel="" image="/your file url" alt="" link="#" button="See More"] [/longevity_showcase]
[longevity_showcase columns="col-sm-6 col-md-3 col-lg-3" title="Premium Support" rel="" image="/your file url" alt="" link="#" button="See More"] [/longevity_showcase]

Time to Publish Your Showcase Gallery

When you are done with your widget, now it’s time to drag it over into the Bottom Showcase sidebar box. Any changes you made, make sure you click “Save” on the widget. You will also need to set the options at the bottom of the widget to publish this only to the Front Page. Once done, you can check out your front page.

Step 7 – Would You Like to See More (Call to Action)

This is a Call to Action that I put at the bottom of the page, which also uses a shortcode.

  1. Go to Appearance >> Widgets, and drag a text widget into the “Inactive Widgets” area.
  2. Title your widget with an ! before the title so that it’s hidden from the front-end.
  3. Copy the shortcode snippet below into the text widget and then update the content there, including the link for the button.
  4. Click Save
  5. Drag the widget into the Bottom Promo sidebar box.
[longevity-actionbox background="#bbbbbb" border="#bbbbbb" color="#ffffff" label="Click Here" link="#" target="_self" style="round" size="medium"]</p> <h4>Would You Like to See More?</h4> <p>If you would like more information about this theme, feel free to contact us</p> [/longevity-actionbox]