Create a front page like the live demo – Part 3

Let’s finish this up with part 3 by creating the Showcase Gallery that is seen at the bottom of the front page…

fp showcase

 Setting the Showcase Gallery up is going to be similar to the Image Boxes we setup earlier, except this one offers a few more options in the shortcode. Again, I would edit the shortcode attributes in a plain text program and then copy & paste the finished item into a text widget.

Prepare Your Images

The first thing we need to do is to create our images for our gallery. It’s also important that you make them consistent in size, otherwise you will get a wonky looking gallery that is uneven. In the case of this tutorial and for the demo site displaying 4 images, we will focus on setting up a 4 column showcase.

Image Size = 640 x 350 pixels is the size you want to match the demo, but also having them this size will also help with full width viewing and to maintain a responsive layout.

Once you’ve created your images, upload them to your Media Library and grab the File URL for each one because we need them in the next part of setting up a showcase gallery.

file url showcase

Showcase Gallery Shortcode

As mentioned, this is similar to the Image Boxes, so some of this should seem familar. Remember that we had to first create a wrapper container¬†that we did before? Same thing for this one, except we will be inserting the “Showcase Row” shortcode.

[showcase_row]

[/showcase_row]

This is our shortcode from the first showcase gallery image that I got from the demo site that you can use to modify the attributes, but first lets show the default shortcode without the changed attributes:

[opportune_showcase columns="col-lg-12" title="Your Title" rel="lightbox" image="#" alt="short description" caption="Maecenas posuere erat quis nisi ullamcorper pharetra nulla ut euismod leo." link="#" first="true"] [/opportune_showcase]

ATTRIBUTES

  • columns=”col-lg-12″ This is how many column spaces we need for this showcase image column. Default is col-lg-12 which means this is one column stretching 12 columns. But we want a 4 column layout so we need this to change to col-lg-3 because 3 into 12 = 4 showcase image columns
  • title=”Your Title” This is the caption title.
  • rel=”lightbox” This is used if you want your image to open in a lightbox. Depending on what lightbox plugin you use, the attribute might be different.
  • image=”#” This is the full URL to the image; change the # for the URL
  • alt=”short description” This is a short description for your image.
  • caption=”Maecenas posuere erat quis nisi ullamcorper pharetra nulla ut euismod leo.” This is your caption on hover.
  • link=”#” This is your link to where you want that image to link to. Change the # to the link.
  • first=”true” This means that this showcase image is the first one.
  • last=”true” This would mean that this is the last showcase image.

After you have modified the attributes, here is what it will look like after; this is the first one off the live demo site:

[opportune_showcase columns="col-sm-6 col-md-3 col-lg-3" title="Mobile Responsive" rel="" image="http://demos.shapedpixels.com/opportune-pro/wp-content/uploads/sites/5/2015/09/sc4.jpg" alt="Showcase Image 1" caption="Maecenas posuere erat quis nisi ullamcorper pharetra nulla ut euismod leo esta lorem delore in." buttontext="Details" link="#" style="round"] [/opportune_showcase]

Setup Your Widget

  1. Go to Appearance >> Widgets, and drag a text widget into the “Inactive Widgets” area so that you have more room to work.
  2. With each showcase gallery image you create with the shortcode, add it to your text widget. Repeat for each one by pasting it right after the last one.
  3. When done, Save it, and then drag it into the Bottom Showcase sidebar box.
  4. Set this widget to show on the Front Page
  5. Save

 

Early Easter 2017 Offer - Get 50% Discount on Lifetime Membership $299Buy Now - $149
+ +