Create a Feature Box with a Slider and Call-to-Action
Now we are going to take a look at the Agility columns boxes in order to configure our feature box. Right now, our feature box is just one row. But what we want to create is a feature box with a slider on one side and this call to action in the other.
Review the HTML of our Existing Feature Box
Let’s come over and take a look at our HTML and expand our feature box, we have the feature box area which is the part of the page that’s spans from one side of the browser window to the other.
We have feature box area page which has a class of page wrapper. And that’s the part that’s the actual width of the page so it’s the narrower section. Inside of that, we have this feature box columns which is an Agility column wrapper and we’ve got set for a single column. Inside of that wrapper, we have the feature box which is an Agility column which is set to full width. And then inside of that, we have our widget area, feature box widget area.
Create 2nd Column in the Feature Box
So what we’re going to do is take this wrapper and we’re going to make it a 2-column wrapper instead. It’s going to be 2 columns and it’s going to be 2/3 1/3. The left hand side will be 2/3 wide and then the right hand side will be 1/3 wide.
And now of course, we only have one column in here now so we’re going to create another column. We’ll go to Agility column and we’re going to call this feature box left and add that box. And then we’re going to shift drag this up into place and drop it into feature box columns, open up its options and say that it’s going to be 2/3 of the width of the column wrapper.
Change Width of Column Wrappers
And then here, we’re going to take our feature box and instead of being full width, we’re going to say it’s 1/3 of the width of the column wrapper. In fact, I’m going to change the name of the two, feature box right. 1/3 of the width of the column wrapper so now we’ve got left and the right and then the right, we’ve got our widget area. We save our template now that we’ve got it divided up.
There’s nothing inside of our left feature box area so it just disappears and this pops over to the left. But as soon as we put some content in it, this is going to pop over to the right for us.
And that’s pretty much all of the configuration we need to do here for the moment. The next thing we’re going to do is add a slideshow to that section of the feature box.