Create a front page like the live demo – Part 2

Now that we got the front page content part done…the actual page itself, now we need to focus on the Landing Page sections with sidebar content.

Create the Banner with Caption

This is a tutorial that is already done, so you can actually GO HERE to follow the setup tutorial.

Setup the Top Call to Action

This part, we will create a Call to Action like you see in the screenshot.

fp cta

  1. Go to Appearance >> Widgets 
  2. Drag a text widget into the “Call to Action” sidebar box
  3. Title the widget as WELCOME TO OPPORTUNE Pro or whatever your title will be.
  4. In the text area, fill in your content by copying this code. You will of course be changing this to your own.
    Clean modern design at its very best to showcase what Opportune Pro has to offer. <br />Packed with many features from Unlimited Colours, many blog styles, page templates, and much more!
  5. Click Save 

Setup Three Image Boxes

We will be setting this up with each image having a dimension of 350 x 240 pixels:

fp image boxes

I’m going to make this a bit easier for you by posting the shortcode that is used to create these image boxes because we are now leaving the luxury of a page editor to a text widget where there is no method to click an “Insert Shortcode” button. To begin, we need to start with a little understanding how Image Boxes work when we need columns for each one because when we create them, we need to automatically wrap all image boxes in a container.

Before we create our image boxes, we need to first add a container that will contain the image boxes, so we first need to insert the opening and closing shortcode with the “Image Box Row” shortcode. 

[imagebox_row]

[/imagebox_row]

Now we can create our 3 image boxes shortcode by inserting it between the imagebox_row opening and closing shortcode.

[imagebox_row]
[opportune_imagebox size="col-lg-4" image="#" alt="description" link="#" target="_self" bgcolor="#f3f3f3" caption="Caption Title" captioncolor="#000000" color="#999999"] Add some extra image description here [/opportune_imagebox]
[opportune_imagebox size="col-lg-4" image="#" alt="description" link="#" target="_self" bgcolor="#f3f3f3" caption="Caption Title" captioncolor="#000000" color="#999999"] Add some extra image description here [/opportune_imagebox]
>[opportune_imagebox size="col-lg-4" image="#" alt="description" link="#" target="_self" bgcolor="#f3f3f3" caption="Caption Title" captioncolor="#000000" color="#999999"] Add some extra image description here [/opportune_imagebox]
[/imagebox_row]

 With each image box, we need to replace the default values for each attribute:

  • size=”col-lg-12″ This is the column count based on a 12-grid column layout. Because we want a 3 column layout, we change the size to be “col-lg-4” because 4 into 12 = 3 (columns)
  • image=”#” is our full URL path to our image, so we will change the # symbol to the full URL
  • alt=”description” is a short description for our image.
  • link=”#” is our link for the image.
  • target=”_self” is our target what happens when we click on the linked image. In this case, it will load the link in the same page.
  • bgcolor=”#f3f3f3″ is our image box background colour that you can change
  • caption=”Caption Title” is our caption title
  • captioncolor=”#000000″ is the colour of our title
  • color=”#999999″ is the colour of our text content
  • Add some extra image description here – This is our text content we can change to what we want.

To give you a starting point, here is the code for my first image box on the demo site:

[opportune_imagebox size="col-sm-12 col-lg-4" image="http://demos.shapedpixels.com/opportune-pro/wp-content/uploads/sites/5/2015/09/fp1.jpg" alt="FP Promo" link="" target="_self" bgcolor="#ffffff" caption="Unlimited Colours" captioncolor="#000000" color="#999999"] Aliquam blandit nisl sed consectetur blandit. Maecenas vitae efficitur purus. Phasellus finibus risus at ipsum cursus sollicitudin. Mauris scelerisque hendrerit justo tincidunt bibendum. [/opportune_imagebox]

When we create the group of image boxes, we will be doing this in a Text Widget.

  1. Go to Appearance >> Widgets, and drag a text widget into the “Inactive Widgets” area
  2. Begin adding our shortcodes from above, and make your attribute changes
  3. When done, set this widget to show on the Front Page
  4. Click Save
  5. Drag this widget into the “Landing 1” sidebar box.

Note To make it easier to update the attributes, I usually like to do that in a text editor, like Notepad, or something that gives you plain text and more space to do your work. Then copy it and paste it into the widget.

Action Box

This is what we will be creating…

fp middle cta

  1. Go to Appearance >> Customize >> Landing Page
  2. Find the setting for “Section 3 Background Colour” and change it to #ded8d0
  3. Click Save & Publish

Now we need to setup our text widget for this…

  1. Go to Appearance >> Widgets
  2. Drag a text widget into the “Landing 3” sidebar box
  3. Add this shortcode:
    [opportune_actionbox bg="#DED8D0" buttonbg="#DED8D0" border="#ffffff" text="#ffffff" buttontext="#ffffff" label="Purchase" link="#" target="_self" size="medium"] What better way than to purchase this theme so you can get started. [/opportune_actionbox]
  4. Update the attributes to your own preferences, including changing the default link # to an actual link.
  5. Set this widget to only show on the front page.
  6. Click Save

 Setup a Logo Bar

This is simply a group of logos that I created into a single image. This part really easy to do…

  1. Create your logo bar and upload it to your Media Library. When you do this, click on the edit link for this image and copy the File URL because we need it in a moment.
    file url
  2. Go to Appearance >> Widgets, and drag a text widget into the “Landing 4” sidebar box.
  3. Add this code into the text widget and replace /yourimage.jpg with that copied file URL 
    <a href="/yourimage.jpg" alt="a short description" />
  4. Set this widget to only show on the Front Page
  5. Click “Save

CONTINUE TO PART 3