Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 11 – Part 4 – Add a Slideshow to the Feature Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Now we’re going to Add a Slideshow to the Feature Box. If you look on the site, you’ll see that I have 3 different slideshows that I teach. I teach the Dynamic Gallery, I teach SH Slideshow and I teach Meteor Slideshow.

Meteor Slideshow

Tonight we’re going to use the Meteor Slideshow because in the first place, it’s a simple slideshow to configure and I think it generally meets the needs of a business website.

It wouldn’t be that great for blogs because it doesn’t have the ability to automatically display the most recent content like the Dynamic Content Gallery does but it’s great for this kind of a situation where all you really want to do is show some images.

If that’s what you want to do, then come over here to the “Add New” and we’re going to just search this time for Meteor Slides. That’s on the WordPress repository so we’ll just do the easy installation here. We’ll activate the plugin and once we’ve activated the plugin, you can see it has created this menu item up here called “Slides”.

Now the first thing to do is to just come in to the settings. I have images that are already created for this. The images are 360 pixels tall and they are 640 pixels wide. We’re just going to set it that way. You have a choice of transition styles and we’ll look at that in a few minutes once we’ve got something there to show. You also have a choice of navigation and transition speed and slide duration but what we’re going to do is to start off with height and width of the slide and hit Save Changes.

Setting a Featured Image

Then what we’re going to do is Add a New Slideshow and this slideshow is going to be Front Page. Say save to this, Add New Slideshow and now it’s there but it shows zero slides, right? What we do next is add a new slide and this is going to be Edmonds Remodel. We’re going to set the Featured Image which brings up that image editor, the uploader. I’m just going to select the file from documents, my business website, images and I named these things Slides, Edmonds Front Slide, there we go.

It’s 640×360 pixels and in this case, we’re going to use the full size version. We don’t really care about alignment, we’re just going to say Set Featured Image. Now you can see that the slide shows up here. If you want that slide to link to something, like to link to a specific page, you can put the URL of that link here. We’re not going to do that at the moment so we’re just going to say Publish.

We’ll Add New Slide and this one is going to be the West Seattle Custom Home, set the featured image, select the file, West Seattle slide, scroll down and hit Use as Featured Image and hit Publish.

Finally, we’re going to add a third one and this is going to be the East Side Luxury Spec, set the featured image, select the file, Use as Featured Image and Publish. If we come over here and look at Slides, we have 3 slides in here, we don’t have any links, we’ve got a title here but that’s it.

Use Widgets to Add Slideshow to the Feature Box

What we’re going to do is add the slideshow to the Feature Box. The way we add the slideshow to the Feature Box is over here in widgets. We need to refresh this because once we refresh it, we come over to Feature Box Row 1 Column 1 and we can grab this Meteor Slides Widget now and drop it into that.

We don’t need to use a title but when you need it to specify the slideshow, unfortunately, it doesn’t give you the chance of just picking it out of a list so you have to type that in, Front Page and hit Save. I was supposed to select Slideshow over here for Front Page and hit Update. We’ll just go back to slides and we can do that from the Quick Edit too, Quick Edit, Front Page, Update, Quick Edit, Front Page, Update.

Different Transition Styles

We’re going to have slides there and if we give it a minute, it’s going to start transitioning and you can see that transition like this. We can change the way the pictures transitions. We can come back over here to our Settings and right now it’s transitioning as a Fade but we could transition it as a CurtainX. Let’s just refresh that and let’s see what it looks like. There you go.

You have a fairly wide range of transition choices because each of these are different kinds of transitions. So that’s worth playing around with and experimenting with and seeing what you like. One of the things you can see is that there’s still a difference between this and this.

Part of that difference has to do with margin, which is why we talked about margin because what we want is some space up here. We might not have enough space there but we also want some space over here so we need to address ourselves to the margin. Actually, I don’t really like all those cool things so we’re just going back to Fade for that and now we’re going to come back down to the Feature Box Layout Plugin.

Call to Action Text Widget

In our Widget Row under Feature Box Row Height and Margins, we are going to give the top margin 20 pixels and we’ll leave the bottom margin alone for just a second. You see now it has dropped us down and what we need to do is give this column some margin on the left. We can do that here by Widget Column 2 Settings and you have to check this thing, “Check to customize the padding and margin for this column” and hit Save.

Under Widget Column 2 Settings, you have an opportunity for a padding or for a margin. We’re going to go ahead and check “Customize Margin” and let’s give ourselves 30 pixels of left margin. If we come over here and refresh, it has pushed this over so that we now have some space between our slideshow and that’s going to be our Call to Action Text Widget here.

Add a Drop Shadow to Images

We have one other thing that we’re going to do with this and that is to add a Drop Shadow to this image. In order for us to add this drop shadow, we are going to use a different plugin so we’ll work on that in just a moment.

As it is right now, here’s our slideshow and here’s our other widget.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one