Build Your Own Business Website header image

Lesson 11 – Part 3 – Add a Slide Show to the Feature Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Why We’re Using the Orbit Slider

The slideshow we’re going to add in this class is called the Orbit Slider. There are lots of different slider plugins available to you and many of them are responsive. However, the Orbit Slider plugin is a very simple plugin. It’s very simple to use. And so for that reason, I’m going to demonstrate using it rather than any of the other potential plugins available.

Add Orbit Slider Plugin to the Site

We’re going to come over here to plugins and add new and we’re going to search for Orbit Slider. Orbit Slider is one of the plugins on and we’ll just go ahead and install it. Activate the plugin.

Add BYOB Orbit Slider Helper Box for Thesis 2 to the Site

And before we do anything else, the other thing we’re going to do is download and install a box that I created to help us place this. Let’s come over to Member Benefits and look under Plugins, Boxes and Packages for the Thesis theme 2.0 and then scroll down to boxes, we’re looking for the BYOB Orbit Slider Helper Box for Thesis 2. Let’s click on that.

Let’s download that box and then we’ll just come back over here to our Skin Editor. Actually, go back over to Thesis and select boxes and we’re going to upload and install that box. So we upload the box, choose the file and we’re going to go wher eit downloads from or downloaded to. And there we are, BYOB Orbit Helper. Open that up, add the box.

It says the box was successfully installed so we can close that, put a checkmark in the box to activate it and hit save boxes. And now, my BYOB Orbit Slider Helper box is going to be available to us.

Add BYOB Orbit Slider Helper Box to Front Page

So now we come back over to the Skin Editor and we need to go to the front page, insert that into our feature box. We’ll go on to feature box left, come down here to add new box… actually so we can see it better. And this is the BYOB Orbit Slider Helper and we’ll just call it the slider.

Set Custom Size for Slider Images

And we’ll add that box and then we’re going to drag slider up here to feature box left and drop it into place. Then we’re going to open up its options and we’re going to set a custom size for the slider images. The reason why I’m doing this first is that once we set this size and then upload our images, they will be automatically created to fit this size.

So the slider image height it going to be 360 and the slider image width will be 640. And we’ll go ahead and hit save or once we’ve done that, we just click that. Save our template.

Set Slider Options

And then we can come back over here to our slides and go to our slider options. I’m going to set some slider options first. And in terms of transition style, we’re going to show it to fade but I’m going turn off the navigation arrows.

We’re not going to have captions so we’ll turn those off. We won’t have bulleted navigation so we’ll turn that off. We will pause on hover, we’ll leave that as true but we’re going to turn on our slide timer animation. So turn that on.

Then under our Advanced Settings, we’re going to use the custom size. That’s the size we just created in the helper rather than the default size. Why they bother having a default size of 540 by 450, I have no idea. But the helper box creates a custom size so we’re going to select the custom size.

I think we’re going to put the javascript in the footer here and we’ll leave the document ready alone and we’ll leave the css slider theme settings alone. So we’ll just hit save settings and that has concluded the creation or the setting up of the slider.

Create Slides for the Slider

Now what we need to do is create some slides. So if we come over here to add new slide, you add a new slide by setting the featured image. So we hit set featured images, now we’re going to upload files, select a file. And I have a bunch of images prepared for this so go to my documents and my business website and images. And now what I’m looking for is… okay, here’s our east side slide. That’s what I named my images that are going to be slides.

So we’ll open that up and we’ll set it as the featured image and then we’ll just call this east side luxury spec. This isn’t going to show up anywhere based on our settings but it’ll help us identify which slides are which so we’ll give it a name. Go ahead and publish it.

And then we’ll add new slide, set the featured image, upload files, select the file and Edmonds front slide. So open up that one, set it as featured image and we’ll call this Edmonds view remodel. Publish that one and we’ll just do one more slide.

So add new slide, set the featured image, upload files, select files and then we want the West Seattle slide. So we’ll open up that one, set it as the featured image and then we’ll say West Seattle View Home. I guess I didn’t set the featured image, did I? There it is so set the featured image.

Let’s see if we can publish and see what’s going on in this. This should be showing up right there but it’s not so let’s try that again. Set the featured image, there it is. Update it again, take a look at our slides. Now we’ve got our 3 slides here.

Change Behavior of the Slider

As luck would have it, we’ve already added our slider to the page. So if we refresh our page, now we have our slider here and we can make it behave more quickly. We can change its behavior. You can see how when I hover over this, it stops playing, right? We have to go back over then to unclick that. But now we have these on two different sides. We’ve got our slider and we’ve got a place for our widget area.

Add Drop Shadow to the Feature Box

Now that we’ve got this done, the next thing we’re going to do with this is we’re going to give it a drop shadow. Take a look at our little demonstration site. It’s got this nice, little drop shadow here. Well, we’re going to use our handy, new widget styles thing to create that for us.

So we’ll go to the Skin Editor. We’ll go the css and create a new package. It’s going to be that widget styles package. And what I’m demonstrating to you is that you can use this for things other than widgets, right? This doesn’t actually have to be used only for a widget.

In this case, we’re going to call it slider and the reference will be slider. And the css selector here is going to be .orbit wrapper. Now I know that’s what the selector is for this because I know that’s the element that Orbit Slider wraps its images in. So I’m not making this one up. This is actually something I investigated and am therefore using.

4 Drop Shadow Settings

But anyway, we put this selector in orbit wrapper, come over to our widget styles and come down to drop shadow. A drop shadow has 4 settings. It has the horizontal offset. It has the vertical offset. It has the blur and it has the color.

The horizontal offset is the direction to the right that you want the shadow to show up. So a positive number shows shadow off in the right direction. A negative number will show the shadow in the left direction.

The vertical offset shows the shadow in the downward direction and then if you put a negative one in there, it puts it in the upward direction. Shadow blur is just how hard or soft the shadow is. If the shadow blur is 0 then it’s a very hard line. Then if it’s a larger number, the larger the number it is, the softer and fuzzier the shadow looks.

So for the moment, I’m going to say 550 and then pick a color. I’m going to use our main text color which is a dark gray. I’m going to say #tc1 and we hit save to that. And then we need to add the slider to our reference list which we’ll do under footer widgets, &slider.

Review the Changes

Let’s just reload this. It looks like the canvass is choking on the slider here. Oh, there it is. And now you can see that really dark grey drop shadow there. That’s the 555 horizontal, 5 vertical and then a 0 blur. We’re going to change that blur to 5 pixels as well. Make that 5, hit save. We’ll save the css file. We’ll refresh this and now you have a nice looking shadow here. You can see it’s a lot blurrier than it would have been when it was just our straight 0 blur.

It looks to me like we could use a little bit of padding here below this. And so I’m going to go take a look at the padding that we have on our feature box page. Actually, I’m going to look at feature box columns. You can see I checked remove bottom padding from our feature box column. I’m going to uncheck that so now we’ll have top and bottom padding on this wrapper. We hit save again and refresh that and now we’re going to end up with some space below the slider above the title which looks a little bit better.

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

Leave a Comment