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 8 – Add Text, Images and Links to the Attention Boxes

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to - ,

In our Widget Column 1, we’re going to use this Black Studio TinyMCE and drop it there. The first one linked to it is Service so put that in as a title and I had an image so we’re going to use the Add an Image here to choose the image, My Business Website, images and accent-box-1.jpg. Here you go, there’s an image.

Add Content to the Attention Boxes

I knew that I want the image to be 275 x 150 pixels so I created it at that size and I want this linked to a specific page on my site so I’m going to add a link here. I want it center aligned, I’m going to use the full size, I’m going to go pick the page and I want that one to link to Services so take that one and link it to Services. I’ll paste that link there and I’m going to insert it into the post.

Now we’ve added an image here and the next thing I want to do is add some text which I’m going to steal from this page. I’m going to come back over to the widget and use the Paste as Plain Text. Paste it, insert it and again, I want to link it so I’m going to add another line and let’s say “Learn More… “. I’m adding it to the Services Page and leave it at Thesis Theme Default for the moment, we’re not going to select the style so we’re just going to hit Save.

What I’m going to do in order to save time is I’m just going to repeat this so that in Widget Column 2, we can add another one to these, switch to my HTML view and paste that. This is going to be “Our Second Link”, and hit Save. I actually created new images for each one of these things but I don’t want to really spend time adding those. We’ll come down to this one again, go to the HTML view, paste the HTML to our 3rd link which is, “Our 3rd Attention Box”, and hit Save.

Styling the Attention Boxes

Now we’ve created these 3 Attention Boxes and we put content in them. If we come back over to our Home page, here are our 3 Attention Boxes unstyled. What we want to do is style them so that instead of looking like this, it’ll look like this. You might use the Widget Styles Plugin, except that there is some basic styling that is possible in any one of these plugins that creates widget areas.

Adding a Background Color to Widget Columns

For example under our Shortcode Content Widgets, we actually can change some stuff here and I think the first thing I want to do is to add a background color. To add our widget column background style, I want to customize the background so hit Save. Then we come back to that again and give it a background color by copying that background color from the other side. That’s the background color that we picked.

We could use a background image instead but I’m just going to pick a background color here. You’ll notice this does not have the same range of flexibility that the Widget Styles Plugin has. The Widget Styles Plugin has more options but this actually has enough options to make some dent in the process and I’m just going to Save that, come back over here and refresh it.

Add Padding and Margin to Widget Areas

Now you can see where padding and margin come into this equation again. Because what I’m going to do is to add padding around the inside of each one of these widget areas so that the text extends away from the edge of the widget area.

I’m going to put margin on the left hand side of this widget and this widget and I can do this one of two ways. I can either set the same margin in each case which would make these three widgets all the same width although this edge next to the picture wouldn’t line up with this edge next to the text because it gives a little margin here.

Let’s say, Widget Column Padding and Margin. I’m going to say typical left padding of 10 pixels and a typical right margin of 10 pixels and we’re going to say 20 pixels all the way around. I only set it on the left and the right,  let’s say 20 all the way around for the moment and hit Save. What’s going to happen is, these are going to separate and this text is going to move away from the edge, hit refresh.

This is one way to make these things all exactly the same size and you do it simply by adding an equal amount of margin on the left and on the right at which point all the content just shakes out. It looks like I’ve got more margin here than I do there so it could be that 20 pixels margin isn’t the right thing to do here. Maybe 15 pixels is all I need and this is where you start playing around with it just a little bit.

Specifying an Absolute Width

The way I set up this site was I specified the margin in between these two then specified the widths of each one of these widgets. Instead of using this typical left and right margin, what I’ll do is come down to Widget Column 1 settings, make the column 315 pixels wide and give it no left margin, make Column 2, 315 pixels wide and give it 24 pixels of left margin and Widget 3, make it 315 pixels wide and give it 24 pixels of left margin and hit Save.

At which point, this edge lines up with that edge and this edge lines up with this edge. I prefer the method of specifying an absolute width and putting margin in between when I want these edges to line up with their content. If I don’t really care but I want them all the same width, then I would just give an equal left and right margin and they’ll automatically be the same width but they’ll be indented from the page edge.

Create a Widget Style for the Heading

What we need to do is style the heading and the heading style is going to look very familiar now. What we’re going to do is create a widget style for this. We come back over to Widget Styles and we’re going to add a third widget style.

We’re not going to customize our background but we are going to customize the padding, we’re going to customize the heading font but not the background, we may end up customizing the heading padding, we are not going to set a fixed height for the widget body but we are going to customize the typical widget font and hit Save.

For the overall padding, we’re going to say 20 and then the heading font style was Arial with the size being 24, the color is that green, normal spacing, remove all caps, Center the Heading text and make it bold. Let’s apply that to those widgets first. I need to refresh this, down to Widget Block 1 – Widget Column 1, we’re going to give a style of 3, Widget Block 1 – Widget Column 2, give it a style of 3 and Widget Block 1 – Widget Column 3, give it a style of 3 and hit Save. Refresh this and here we go.

Heading Padding and Styling

Now we’ve got labels. We do want some Heading Padding to push the picture down a bit and we want to style this text. In terms of our Heading Padding, all we really need is Heading Bottom Padding so let’s just give ourselves 20 pixels of Bottom Padding.

In terms of body text style, we’ll pick Georgia for that and then we had 12 pixels for this, the font color was very dark gray, the link color was our green and the hover color was this red and we’re going to underline hover, hit Save and hit refresh.

We definitely want to enlarge our line heights. In the absence of body text style, let’s give it a line height of say, 22 pixels. I think we don’t need the 20 pixels of Bottom Margin or Bottom Padding for this so we come back to our Widget 3 overall padding and specify our Bottom Padding as having 0. I think that will work.

That did work and this will link off to the page that we want it to link to and we have our Attention Boxes here. They can be in the middle of the page or they can be back down here at the bottom which is where I originally showed them but we have this styled content sitting in the middle of our regular content by means of that Shortcode Content Widgets Plugin.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment