Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 9 – Create the Footer Widgets

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

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.

In this session we show how to create the footer widgets in the new Thesis site. We install and activate the Black Studio TinyMCE Widget plugin and use this to upload an image and assign text for the text widget.

Video Transcript

We need to get these images and this, we need this Coldwell Banker. Is this a link? No, it’s just an image. Then this Facebook, Twitter and the Active Rain. Let’s save that image as and for the time being, we’re just going to save it to my desktop since this is not on my server. I don’t have the folder for all that stuff so we’re just going to save it to the desktop.

While we’re at it, Facebook… actually, let’s just take a look at this. Let’s see, inspect the element. What have we got here? Is that 3 images? That is 3 images, okay. So we’re just going to go ahead and save image as Facebook, save Twitter and save Active Rain.

Actually, these things look like little images too so let’s just make sure. So that’s an image and that’s an image. So we better get those as well. Save that image as echo and save this image and it’s that. Okay and then we’re just going to go ahead and copy this stuff. That’s all going to go into a text widget.

Okay so here we are back over to BYOB Thesis Footer Widgets. I think I hit save on this thing and I think if we go back over to the site for a second, we’ll see that we have… okay, we need to save that yet again. So now we have 3 widgets like that and we’re just going to put text widgets on each of those. We’ll come back over to Appearance and Widgets and footer row 1, we’re going to put a text widget in.

Actually, I think what I’m going to do is install one more plugin. Actually, I’m going to do that Blackbird Studio’s widget. Go back to installed plugins and we’ll add new. I really like that Blackbird Studios or whatever it’s called. What is it, Black Studio’s Tiny MCE Widget. So install that, activate that plugin and then we’re going to come over here and go to our Appearance and Widgets. We go to footer row 1 and we grab the Black Studio widget. I’m just going to take this one out here.

I’m not going to put a title in it but we are going to upload an image and we’re going to select from my desktop.This is that realtor image which was Coldwell Banker image. Yeah, that’s the one. So we’ll upload that and center it. Insert it into the post, hit save, probably just refresh this and it’s going to show up there. Okay, we’ll have to do some padding and stuff like that yet to make this all perfect.

The next thing we’ll do is come over here to widget column 2 and let me go to the HTML view. No, we’re going into the visual view and paste that code I did. You know, this might actually work just like that. Let’s try that. Let’s hit save, come back over here and refresh this. Oh, it does work.

Obviously, we have some styling we have to do and we probably actually want to change those image locations out because right now, they’re referencing something else. Then we’re just going to do that one more time over here with this footer widget, widget column 3 and we’ll grab the Black Studio widget and again, this is actually 3 images and I probably wouldn’t actually do this as 3 images. I would probably do this as an image sprite.

For the time being, what I’m going to do is select the file and the first one was the Facebook. I’ll open up that one. Okay, now the link URL for this wants to his Facebook page, right? And so what we’re going to do is, let’s see, we’re going to do each of these as lefts. And then let’s get that link to that, his Facebook link. Okay so his Facebook link is what? Okay, this one right there so let’s just copy that link address. That’s what we want it to link to and here, we’re going to replace the link URL with that link. Let’s see, visit my Facebook page with the title and we’ll do the same thing for alt text and then we’re going to insert that into the post, just like that.

Okay, now we’re going to add another one of these things and we’re going to do exactly the same thing and this one is that Twitter one, right? Twitter, open and again, we’re going to come back over and get where that Twitter is going to. So this is where it’s going to, copy link address, come back over here and the link URL is that. Again, it will be left, full size and then the title will be “Follow me on Twitter.” We use that as the same alternate text and save all changes.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment