Build Your Own Business Website header image

How to Convert a Flash Site to WordPress & Thesis 2.1 – Part 6 – Configure Social Proof 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.

Now that we’ve got the basics of Thesis 2.1 configured for this conversion of a flash site, we’re going to configure the social proof widgets. After that we’re going to start customizing templates, clean up CSS and then we’re going to make a responsive header up here. It’s not immediately obvious to you but this header logo in the typical responsive context will end up going below the content which isn’t where you want it so we’re going to create one that goes in the right spot.

Upload Image File

So let’s do the social proof widgets. The first thing we’re going to do then is to do another Add Media and we’re going to upload files this time. Select the file and that file is in Downloads and Web Conversion Files and Other Images, it’s that one there, okay. I think this is a promotional image. I don’t have the ability to open that in a new tab. Oh, this is a pdf. I did not realize that so for the time being we’re just going to leave the link off of this.

Add Image to the Widget

“As featured in Where the Chefs Eat”, so that’s our title, alignment center. Actually no, we’re just going to insert that into the page. So copy it and then I need to open up widgets panel and go to my text widget and place that there, hit save to that one. Refresh it and here’s “As featured in Where the Chefs Eat”.

Our social networking widgets, Facebook. So we’re going to copy that link address and I’m just going to paste it in this file there, there’s our Facebook link and then copy link address again and then we’ll put that one there.

Configure Sizes of Additional Images

Now, what we’re going to do is insert two more images. We’re going to put Facebook first and Twitter second. So title here will be “Visit Our Facebook Page” and this time we’re going to go to the left. We’re going to use a custom URL.

Oh, that’s a really big image, did not see that coming. Actually before we do that, I’m just going to edit these images and I’m going to edit using the Media Library. Instead of being 512 I’m going to scale the image and I’m going to scale it down to 64 pixels.

We’ll update that one and then come back over to the library again. We’re going to change this one and we’re going to edit the image and we’re going to scale it to 64 pixels. Then we’re going to come back over here, it’s Facebook page, you know we’re just going to cancel this one and restart it.

Add Additional Images

So now we’ll Add Media and I have to refresh the page because it doesn’t look like it’s understanding that the image got resized. Add Media, full size 64 by 64. Custom URL we’ll get that from our text file, okay.

We’re going to do that one more time. Add Media, this time it’s going to be the Twitter. Let’s say, “Follow Us on Twitter”. Again alignment left, Custom URL and that Custom URL is going to be that and insert that into the page.

Now we can take both of these images and grab a new text widget and paste those. We’re going to use some CSS to change the spacing there but obviously we have the underlying basis for this now. We’re going to move on to creating the rotating header banner with the meteor slideshow.

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