Build Your Own Business Website header image

One Hour website Makeover Main Clinic Supply Part 2 – Presenting the New Design

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

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.

This is Part 2 of One Hour Website Makeover for the Main Clinic Supply site and in this session we show the new design that Kim Carney, the artist working on this website makeover project created. We also discuss what plugins we used and further discuss the color and image balance.

Video Transcript

Rick: Well good evening everybody and welcome to this Thursday evening edition of our Live Call-in and Question and Answer session. This Thursday evening, we are doing another one of our live 1-hour Website Makeover series and tonight, we will be taking a look at Fran Fox’s Main Clinic Supply site. And then when we’re finished with that, we will move on to our final site, the Mental Management University which is a membership site.

And so I’m going to turn Fran’s microphone on. Good evening, Fran.

Fran: Hello there, Rick.

Rick: How are you doing?

Fran: Good, good.

Rick: Are you ready?

Fran: I am. I’m excited to see what you got.

Rick: You know, actually, I had forgotten that I was going to do a little striptease here on this thing. I was going to do a little da-dun…

Kim: We don’t want to see Rick in the nude…

Rick: No.

Fran: Can you please mute me again?

Rick: Okay here we go. So this is what Kim came up with.

Fran: Yeah, well it kind of incorporates the whole design.

Rick: Yeah so Kim, you want to dive in?

Kim: Sure. Well, I love the colors and I love your logo so that sort of started the whole you know, just ball rolling. I was kind of stuck with your top, I deal with the Main Clinic Supply almost looks the same except for different color added to this little number.

Fran: Yeah a little different font, a like that.

Kim: Yeah, a different font and of course, some tagline up there. That, by the way, I think if you can change on different pages, is that not right, Rick?

Rick: Yeah what we do is that Header Widgets plugin for that and so actually, I have a site that’s partially done there. So there it is, partially done and in this case then, use that Header Widgets plugin so we’ve got a widget area. Let’s see, there are 3 widget areas like that. And so this right here is a text widget.

Kim: And the numbers.

Rick: And this is a text widget too, right. So that you can…

Kim: Change.

Rick: Right, exactly.

Kim: I mean, if you’re on your sleep apnea, you could say “Sleep easier with” and change…

Fran: Yeah, sleep easier at night or something. Yeah, I think you did really well with that tagline, yes.

Kim: Well yes, you definitely need something that shows right up front what you’re doing. And then you know, with the video like enjoy new freedom whatever in your SeQual thing. That seems to be very important so just a little blurb there about them and maybe link off to some you know, some special features like that. And then we did the 3-widget thing for you because you can’t have those pages that are just long, long, long…looking for information right on your front page. We decided to make it sort of a landing page. So then the thing about the SeQual then the contact portion which has all your information, you probably should do a Facebook page and I can help you with that. I think you can do a Facebook thing and then…you had About Me so I sort of added that because that’s kind of a personal… you know, it makes sure you seem like a real human being.

Fran: Yeah, I think that’s a good idea. It puts a face to the blog, yeah.

Kim: On the bottom, Rick, did you finish this tonight? He’s going to get a spanking tomorrow.

Rick: You know, it’s been a busy week.

Kim: I’m done with that but just scroll down…

Rick: Give me just a second. I’m going to scroll down first on this and then I’m going to bring up the finished one that you did.

Kim: Okay so yeah, so on the footer, we added the secure shopping because we’re supposing that your clients are the older, like me, older that want to make sure that they’re you know, all taken care of on the secure angle. So we kind of added that and I think you should probably add something like that on a widget area on your shopping page, you know? So anyway, we just made that kind of prominent on your footer just so anyone knows that you’re all legal and you’re not going to steal their money or something.

Fran: Yeah… no, I think that’s really good. Yeah, I like those colors really well with the design (04.30) with my logo and…

Kim: Oh, I love the… Rick, do you have that live where you… we did the navigation thing?

Rick: I do have that live where we did the navigation thing.

Kim: Oh, Rick did the navigation thing.

Rick: So we’ve got the little logo that on the current page then is bright but on the rest of the pages, is in the background.

Fran: Fades out, yeah.

Yeah. So end up with that logo…

Fran: Yup, I like that.

Rick: And then…

Kim: And you did get a favicon but it’s not showing up. I made you a favicon.

Fran: Oh good. Thank you.

Rick: Oh yeah. Well, let’s just make sure it shows up.

Kim: Well, can you actually put that on a site that’s on a test site?

Rick: Of course.

Kim: I didn’t see… really?

Rick: Yeah.

Kim: Oh okay.

Rick: So let’s see, where did I store that? I stored that under graphics and then tutorial graphics and then Main Clinic Supply and then… okay, I just have it as… I don’t have it as ICO file but it doesn’t actually matter with the Thesis thing here.

Kim: Oh, it doesn’t? Because I thought I sent you an ICO file.

Yeah, I thought you did too but there it is now.

Kim: Yeah okay.

Fran: Where is it at?

It’s right up here on the top now.

Fran: Oh I see, yeah.

Kim: I did take your… I took the liberty with your logo and I pulled that orange… the orange circle just a little bit in because it felt like it was a little too far out. So I mean, I’m just talking just a little tiny bit, just to kind of… anyway…

Fran: Now Kim, I’m color blind so this is embarrassing to say…

Kim: You are?

Fran: But I thought that was really, really red. That’s orange?

Kim: No, it’s kind of an orange-red.

Fran: Okay so you still… I think medical, having the red in there is kind of important so…

Kim: Oh, would you change to red? Because I thought that orange was really nice with the blue.

Fran: Okay but it has a red tinge to it then?

Kim: Oh no, it has… and you know what? You can change that to be a little more reddish-orange but that’s definitely the color of your logo. But we can change that up a little bit, yeah.

Fran: No, if you like the orange, I’ve assumed, keep it that way. Because like whenever somebody can’t really see colors great, I’m in no position to judge.

Kim: Yeah. What do you think, Rick? I think it’s a really clean… I like the colors.

Rick: I do too. I thought it was exactly the same though. I didn’t…

Fran: Well, I’m sure it is, Rick. It’s just… it’s my eyes so…

Yeah okay let’s see… so…

Kim: No, I sampled his Illustrator and that’s what came up.

Yeah, f3925 and f15… oh it’s very, very close. Yeah.

Fran: No, it’s fine and it’s a little different color perhaps and maybe stands out so…

Kim: I redid your logo and a vector file, if you need it.

Fran: Well good, thank you. I’d sure take that.

Kim: Because you can… yeah.

Fran: Yeah.

Rick: Yeah, we’ll definitely want to…

Fran: And I think Rick, you mentioned… Kim, just to kind of go back a little bit, I’d sure take you up on helping me with the Facebook page.

Kim: Sure.

Fran: I have one started but I need to give it a little bit of a theme and then Rick had mentioned that I have kind of a rut gut file in there that should be a PNG. Is that what you said, Rick? I can’t remember it.

Rick: Are you talking about for the logo?

Fran: In the Facebook page, I put one in there that kind of lost its resolution.

Rick: Yes, right. Yeah right.

Kim: Well, we can just put them in whenever. That’s pretty easy.

Fran: Okay, no big deal. Okay.

Rick: Yeah because… I mean, what you want in that Facebook one is one that is exactly the right size and then you want to use a PNG or a GIF since it’s only 3 colors. But if it’s not exactly the right size and they can stretch it out, this is a PNG which is why it’s so bright. There’s no variegation in the color or in the color edges or anything like that whereas here, there’s variegation you know, around the edges and inside. And that’s because this is what JPEGs do especially with reds. But what it does with solid colors and the PNG and a GIF will hold the solid color exactly.

Fran: Yeah, that looks a lot better. Yeah, it looks good.

Kim: Oh I thought you changed the color of the telephone.

Rick: I did change the color of the telephone. Oh, let me refresh it. There we go.

Fran: It could still be a little larger.

Rick: Well actually, this is an error in my plugin. You know, you and I figure that my plugin actually, it doesn’t specify this color well enough to override the default which is why it went to black. But I’m going to fix that tomorrow so… not that I haven’t had my fill of that plugin but anyway, let’s see. What else do we want to say about this?

Kim: Well we did the little logo and the background of the widget area. We kind of… and of course, I love it in the footer. I just love the whole color of that so I just thought it worked really well just all over just…

Fran: Yeah, I do too. That’s really good.

Kim: It’s fun. It’s plain. It looks very fresh, right?

Fran: I agree, yeah.

Kim: It looks really kind of fresh.

Fran: When people are looking and it stands out from the competition, I like that.

Kim: Absolutely, yeah.

Rick: And yet it’s still simple. It’s not a real busy or complicated-looking design. It’s still relatively simple.

Kim: It’s not going to confuse people.

Fran: Right.

Rick: And in terms of construction, I mean, there is a little bit of custom code in this. This is the CSS file for it. And so this did require a little bit of extra code, mostly to get that background image in the navigation menu but also to get that… make that bulleted list with little bulleted items. And then there are a couple of flaws in my plugin that I need to overcome with this. But mostly, this styling… I mean, it’s mostly done with the plugins and what we just had to hardcode mostly were the images for these bullets and for the navigation menu.

Fran: Yeah. And Rick now, this is the shop page, right? And then the blog, which you know, we mentioned last week, it’s a little unorthodox. I want to be able to blog about the product, lots of information and then they would launch off to the shop.

Rick: Right.

Fran: So is it a big deal to kind of clone the look back on the blog or…

Rick: No, that’s what you would do actually. You would in fact, clone this. You would clone it back on to the blog, yeah.

Kim: But where is the shop? Where is the shop? Is that in the products link?

Rick: It would be the… I mean, it’s either shop or products or something.

Kim: Yeah, I think it should say shop because I think that’s more… and you know, you don’t have to use those little logos… I mean, those little icons for your bullets on the nav which is kind of…

Fran: No, I like those.

Kim: That was kind of fun.

Fran: No, no… I think they need to stay. It ties them together, you know. But Rick, if you go out to then you can see how… then that looks like an old pair of shoes now.

Rick: Well yeah, but that’s what you would… I mean, just completely replicate the style. The thing is that you know, you might… well, you don’t have any… yeah, you know you might in fact, just do your category navigation. I mean, have navigation on the sidebar really, since this is just a straight blog. Your Contact Us link… you probably do only need one Contact Us page. It doesn’t really matter, I guess, which one you use. But the Contact Us would link to one. The SeQual would link to the same page and this would be blog at that point rather than home.

Fran: Okay. So really, the website… I mean, if you look at what you and Kim have done here, this really kind of incorporates everything that’s on the

Rick: Right.

Fran: But yet it has an option for the shop. So this kind of becomes the face of, not just shop, correct?

Rick: Exactly.

Fran: Okay.

Rick: And so actually home might be deceptive. This might be store home instead or something like that.

Fran: Or blog. Yeah, I would almost see that as the home would be the blog with all the text and all that just really lots and lots of detail in order to become Google-friendly, where you just load it up. And then a link at the end, perhaps, after talking about SeQual and… I mean, like the SeQual Concentrator, I plan on probably… there’ll be 20 different blog posts talking specifically about that one product. But after each blog post would be a link to where you can go buy it.

Rick: Right.

Kim: Yeah.

Fran: So that seems like the home would be where all that blogging would go on. Is that my thinking right?

Rick: Well, I think…

Kim: Isn’t that the landing page though?

Rick: I think… I mean, in this case, from the store stand point, this is home because it is the landing page. From the blog standpoint you know, the other site is home.

Fran: I don’t know if it really matters if whenever you’re searching you know, everything’s going to be driven by a link or through a search. So it might not really matter. It just… when I look at what you and Kim have done down at the bottom, that looks like stuff that would be on the blog page you know, the picture of me, the location, perhaps but maybe not.

Rick: Well the problem with that thing on the blog page is that your blog page actually has a blog post, right?

Fran: And it is just a blog post, okay. Yeah.

Rick: Right. This doesn’t have any… I mean, the maximum size of the page is what you see here. It’s really a page that’s directed at pointing people toward your products and convincing people that your business is an appropriate place for them to make a purchase.

Fran: Right.

Kim: What about the About part being your recent blog post? I mean, those widgets can be changed out.

Rick: Oh yes, we can. You can always change out what the content of that is but the…

Kim: Right. So maybe…

Rick: But I mean, I think you should preserve the blog functionality for the blog page. It should be you know, a couple of…

Fran: You don’t put a lot of gingerbread on that. It’s just a lot on the block, right?

Rick: Right. This is the information section.

Fran: Alright, got you.

Rick: And so you can navigate to the store from here and you can navigate to the basic administrative pages like Contact Us. Or you can navigate to categories of posts you know, along here.

Fran: With the navigation at the top, Rick, in your mind, look like the shop navigation?

Rick: I would leave it exactly the same or very much…

Fran: Yeah exactly the same, yeah okay. I just think there’s a confusion that a blog and a website are the same thing. And I think that I need to get that straight.

Rick: Well, it will become… most people won’t know that they’re 2 different sites. Most people will see them as the same site because they’ll have the same appearance and their navigation, the navigation will take you to you know, the same places and… I mean, in fact, maybe your blog navigation… maybe you do have a slightly different navigation for your blog and what you have in blog navigation is the blog plus category, just something like that. I don’t know. It would be better thinking about but besides that, the pages are going to look… I would have exactly the same appearance on both sites.

Fran: Yeah okay, I agree. I would just… the kind of helps me get it squared away in my head on how the two work together.

Kim: Can I say one thing about… go back to the page that has the woman and the Made in USA?

Rick: Oh that’s the…

Kim: I have mocked up this page and you know, on this page, you can fit those little images in the woman carrying her…not CPAP but you know, you can sort of flush left that so your text can go around it you know? It makes it a little tighter.

Fran: Yeah. After seeing your stuff, that definitely needs some work. Yeah.

Kim: Yeah, just a little tighter and I would just take all that information about you out on that About page.

Fran: Okay yeah, good.

Rick: Yeah, I mean I think that it’s true. These images are probably better left aligned and when you left align them in WordPress then the text flows around them so they don’t break it like that.

Kim: Yeah.

Rick: Okay.

Fran: Oh, any thought about Kim bringing in… I don’t think I saw that on that page but even bringing in a Twitter feed or I was even thinking about a Google + feed.

Kim: Oh, I think that would be very easy on your sidebar, on your blog. Or I thought like we can do that on the widgets below but you could totally do that on the widget, on the…

Fran: I know on that organic gardening site, you had a little something going there which I thought was pretty neat.

Kim: If you are following Twitter feeds, I mean, it would really be your Twitter feed, right? Or a Twitter feed that whatever about… if you’re Twittering every day, you could follow your Twitter feed.

Fran: Yeah, that’s kind of what I was thinking.

Kim: Sure. Isn’t that easy, Rick, to put that on the sidebar?

Rick: Oh sure, that’s really easy. And I would put that in the regular sidebar. I wouldn’t put that in the footer here. I’d let the footer be administrative.

Fran: You know, it looks good the way it is. I think the best (20.01)

Kim: If you do that, you know you have to tweet, you have to keep that constant, right? I mean, that’s…

Fran: Yeah, you had a good point about it. If it gets stale, it’s like you know, it instantly becomes old. Yeah, I agree.

Kim: Nobody would go read it if it’s like 4 or 5 days old. So if you do that, you really have to sort of keep that up.

Fran: Yeah so that might be something be on the road or something.

Kim: But you could put your Facebook thing in there. I mean, you could do all your social networking things on the sidebar.

Fran: Yeah, I could use some help on that. And show me when you say sidebar, Rick. Where are you thinking…

Rick: Well, I’m thinking on the side so…

Kim: Actually, I have… did I send you a page?

Rick: Like right here.

Kim: Oh yeah.

Fran: Oh okay, yeah.

Kim: It would go over there.

Rick: Right.

Fran: No, that stuff over on the left that you had a while back on the shop site, you had… how wide were the borders at? Not this one, that one, yeah. Is that what we see… that’s the… it’s kind of hard to see on this GoTo Meeting but are we utilizing all of our screen real estate space?

Rick: Yeah, this is… well actually, this page is using a… this actually is the no sidebars template. But the dimension is 640 and 300 so…

Fran: Okay. I think it looks good. I don’t know if it needs to be any wider than that but I was just curious.

Rick: Yeah, 640 and 300 so the overall you know, interior width of it about 1001 pixels so it’s plenty big. It doesn’t need to be any larger than that.

Fran: Alright, good.

Kim: I mean, this is also something that if you get a new video or if you have a new product, you would you know, you would update this, right? You would keep your customers updated about the new product have or whatever.

Fran: Yeah. Well, a lot of that stuff Kim, would be to the blog but if there would be some new stuff here too, I guess I would envision the blog be more current than blogging every day or the products could stay static. It just… that’s SeQual probably won’t have an updated model for 2 to 3 years, you know.

Kim: Yeah but if you had something new that came in, anything new, you could take them in there and then you could return to this later just so you sort of have a new feeling.

Fran: Just change it up.

Kim: Exactly.

Fran: That’s a good point.

Rick: And this is the URL if you want to look at this live, Fran. The URL is headerwidgets.thesis…

Fran: Can I get you to drop that with chat thing?

Rick: I’d be glad to.

Fran: Alright, thanks.

Kim: So you can’t… Fran, you can’t see the ‘breathe easier’ is a different color than with portable oxygen?

Fran: No, no. I could see that. It just… some colors…

Kim: Come from across?

Fran: Yeah, they don’t. Greens and reds which is kind of a bad deal because of traffic lights but…

Kim: Oh yeah.

Fran: The cops never but it though so…

Kim: I’m going to try that one next time I…

Fran: It doesn’t work too good.

Rick: I mix up my top light and my bottom light.

Fran: There you go. And that’s really a true thing, that people do that. No, I can’t say that I have but… okay, good. I’ve got that link here so I’m going straight there.

Rick: Okay.

Fran: Yeah well, it shows up really big on my screen when I click it so yeah… in that GoTo Meeting window, it looks so much smaller. But when I see it on my other monitor, it’s really big. Yeah.

Rick: Well, you could… you can always… you can probably increase the size of your GoTo Meeting screen.

Fran: Yeah, I think I have it maxed out pretty good.

Rick: Okay because the real estate… I mean, the GoTo Meeting is currently projecting 1600 x 1200 screen size so it’s pretty large.

Fran: Yeah. Anyway, I’ve got it. It’s good.

Kim: It’s so strange how different my screen colors are from Rick’s screen colors. I’m on a Mac and he’s on a PC and it’s always amazes me, the color different.

Fran: Yeah. Apple’s better, right.

Kim: I think so.


Fran: Alright, well good.

Rick: Well then, what I’m going to do is package up all the graphics and send that stuff off to you. Next week, I’m going to work on you know, doing a video demonstrating how all of this is done. Although, it’s actually… it’s very much the same production technique as with Sean with the DJ site. That is you know, it’s using… actually, I should just show you which plugins we’re using. We’re using the Footer Widgets plugin, the Full Width Backgrounds plugin, the Header Layout plugin, landing pages, Shortcode Content Widgets, my brand new one, Widget Styles and then WP Menus. So each of those… well so anyway, I’m going to do…

Kim: Just make it easier.

Rick: I’m going to do a series of videos on how to create this using those plugins but it’s actually pretty simple. Probably the most time consuming part of it really would simply be adding the custom code for the navigation bar.

Fran: Yeah. And on this one, you’re kind of debugging your header a little bit, are you?

Rick: Yeah, I’m going to fix the widgets so that it automatically grabs this color but… and I’m also going to give you the custom CSS file so you don’t have to figure out the CSS on your own. But the video, when I do the video, we’re just going to start with a raw, unmodified, fresh Thesis install and just you know, work from there.

Fran: Okay sounds good. Then I’ll try to contact (26.39) see if I can arrange some more of that private training with him.

Rick: Sure, sure.

Fran: Alright sounds good.

Rick: Well, I hope you like it.

Fran: No, it looks really good. Fantastic. Thank you both, Kim and Rick. It’s really good.

Kim: You’re welcome. It was fun.

Fran: Yeah, I appreciate it. I might… Kim, can I talk to you about maybe a little help on my Facebook to kind of bring…

Kim: Absolutely. Sure.

Fran: Sounds good. Alright, thanks guys.

Rick: Okay have a good evening.

Fran: Yeah, you too.

0 Comments… add one
0 comments… add one

Leave a Comment