How to design a top-level webpage layout

Sharing is caring!

[vc_row][vc_column width=”1/1″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]

WordPress Web Design

Do you struggle with getting your webpage to look the way you want it to? Do you have a hard time deciding what should go in the sidebar or the footer? This video will help.

Web design is an artistic process and if you’re designing websites for your own business (or as a profession) it’s important to start the process with a wireframe. This will help you to keep your vision in-tact. But even when designing a wireframe, you have to know what goes where. That’s exactly what I’ll cover in this video.[/vc_column_text][mk_divider style=”padding_space” divider_width=”full_width” margin_top=”20″ margin_bottom=”20″][/vc_column][/vc_row][vc_row][vc_column width=”2/3″][vc_video link=””][/vc_column][vc_column width=”1/3″][mk_padding_divider size=”40″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]

Download my Website Blueprint Cheat Sheet Below

[/vc_column_text][mk_padding_divider size=”40″][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_padding_divider size=”40″][vc_row_inner][vc_column_inner width=”1/4″][mk_image src=”” image_width=”310″ image_height=”340″ crop=”true” lightbox=”false” frame_style=”simple” link=”” target=”_self” caption_location=”inside-image” align=”left” margin_bottom=”10″][/vc_column_inner][vc_column_inner width=”3/4″][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]Here’s the blueprint file that I mentioned in the video blog. These are not super sexy (yet) but you’ll see all my best designs laid out and you’re welcome to copy them and use them all you want!

Thanks for watching WordPress Website Design on YouTube![/vc_column_text][/vc_column_inner][/vc_row_inner][vc_accordions style=”fancy-style” action_style=”accordion-action” open_toggle=”0″ container_bg_color=”#fff”][vc_accordion_tab title=”Step-By-Step Introduction”][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]How to design the perfect Web page. That’s coming up.

Hey, rock stars! Welcome back to My name is Owen Hemsath. Today I’m gonna talk about how to design the perfect. …Wordpress website design for a web page or silo page. Now, if you’ve seen some of my other videos, you know that I’m a big advocate of creating silos.

And although you have to do a little bit more these days- a silo alone is not going to get you where you want. It’s going to be, it’s certainly going to put you ahead of your competition. But a big part of that is designing a web page.

Now a, a big problem that I see with business owners and like clients that hire me and, and other web designers is for every page, they’re designing like, a new page. You know, it’s like well, we need to add a new page to our website. It’s like, oh great, I gotta design a whole ‘nother page.

Now it doesn’t work that way, you need to be creating templates and a lot of WordPress website design and website themes today support a template based system. So what we do is we create a series of templates that you can now export to the rest of your pages. But it’s still important that those templates. Are created properly. So, let’s go in close and take a look at how we have designed a, a webpage that’s designed to be kind of like, like a top of the silo type of scenario. Okay?

Click the next tab….[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=”Sitewide Links and Navigation”][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]

Sitewide Links and Navigation

So you landed on the homepage, and then you clicked on one of the tabs.

And it led you to a page that looks like this. Let’s take a look at some of the basic structure. First of all, and of course, you know, like you’re, you’re always, this could be your social media links up here. This could be like your phone number, or an email button.

You know, having those, always able to contact me, buttons, I think is a good idea. Up here you’ve got your navigation tabs. Now, when I first started in this, it was kind of like the thinking that you should have seven navigation tabs. I don’t agree with that anymore.

I think that you need to have like four or five, tops, and they need to be very simple. Every single one of them should be directed at converting a viewer to sale. So you don’t need one of these navigation tabs to say home. Right? Cuz typically your logo will lead you home.

You, you need it to say something like, About Us. What we offer. How to work with us. And our blog. Something like that. I don’t even have a contact page because it’s just, it’s just filled up every morning with people that are trying to sell me SEO service.

So I don’t even have a contact page anymore, but I do have a work with us form. It’s, it’s a client brief where I’m able to see, you know, a client can fill it out and tell me they wanna work with me and gimme some information about who they are.

So keep that very simple and keep it directed towards what you do. Products, services, work with us. Right, keep it really simple. On your page, your page should be, you know, 300 to 400 words, maybe 500. 500 Words is more like an article, but that’s the thing is, chalk it full of stuff man.

You know, like, you’ve gotta have content on your page. 400 words is like a minimum. And, you wanna saturate that, that page with maybe like 2% of SEO and include some of that in your h1 headers. And I know, you know, some of the nerds out there will be like oh, your h1s don’t really matter.

They don’t really matter, but it go, for, for the search engines, but it goes to viewer intent, right. A lot of people skim websites. So make the headers. Right? And that’s that big bold h1 tag that’s in there, make it so it says the keyword. So that way they know when they’re scrolling, oh, I’m, I, I know I’m on the right site, this is what I was looking for.

So, we’ve got that, the, the navigation. Now let’s talk about sidebars

Click the next tab[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=”Sidebar Design”][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]

Sidebar Design on Your Web Page

We have a sidebar. Okay? I believe in sidebars and WordPress Web Design makes this easy. Some people are doing like this whole page design, that’s okay. That’s fine. If that’s the, the intent of your site. I like sidebars because it enable me to, to engage with the viewer in different ways.

So for example. This is gonna be a content page, but I’ve got in my sidebar space to put an ad. And that ad could be an offer, like a free offer. Right? To my ebook, or to my series, or to whatever the case might be. And then, you know, you can design that page to go to your landing page.

Where now you’re converting web viewers into a lead ok. Underneath that maybe you have a directory to your silo right, you have all related pages, or maybe you have like, you revisit your, your navigation tab here. These are called, if you have any links over here, these are gonna be called site wide links.

Okay? So they’re gonna appear on about every single page where this sidebar is. So you don’t wanna make these like terribly like spammy or, or purposeful. But it’s just to help the viewer get where it is they’re going. I like to use related links. Because if they’re on a page about video marketing.

It might be helpful to have YouTube. You know, YouTube marketing. Landing page videos. Video production. Video bumpers. You know? Maybe even a tag that says, what are you looking for? And then underneath that I have a little circle there. Which I typically use to represent a testimonial. So maybe you’ve got.

A testimonial widget right in there, where it’s, every time it’s refreshed, a new testimonial pops up, right. So you’re engaging with the viewer that way. You might even have like social media links on, experimenting with an Instagram box. We’ll see how that turns out. Let’s go to your, I’ll come up to the main page last, go to your footer.

Your footer here is a huge resource. I like to have a three or four box footer that maybe has, like, you know, a summary about us, maybe our social links and then, maybe, like, a schedule, like schedule with me, or a work with me, right. And this could be an image.

Maybe it looks like a contact box, but it’s an image, and when you click it. It will go back to that work with us page, see. And then maybe in here you’ve got something you like your blog roll. Right? So your, your latest and greatest blogs. Or maybe it’s like your most popular blogs which you know, you can, you can work that out with some plug ins.

Read the next tab…[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=”Main Page Design”][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]

Main Web Page Design

In your main page here, your main body, let’s go back to that. Okay, we said about 400 words. But look at how I have it structured. I have an image up at the top and then I have some text right next to it. Now underneath that I have more text.

Underneath that I have some bullet points. So basically what you have here is you’ve got, you know, everything you really need to convert that viewer. Right up here, right up there. And then you’re gonna say something like let’s dig into that a little bit more because you don’t want them necessarily moving off of your page, right?

You do want them to scroll, but if they don’t, then at least they got the point of, of the page across and the reason you want them to scroll is because it increases your scroll rate. Right, and this is part of what they call UXO, right, user experienced optimization, it’s, it’s still seo but we’re all going to be using that term very shortly so be in tuned to that.

So, take a look at that, and then I’ve got some bullet points here, it just breaks it up, that’s it. I’m just breaking up the text into some bullet points, so that my eyes, the viewer eyes kind of like it. And then of course I’ve got a closing summary with another high impact image here.

You do wanna have at least let’s say two links, you know, on the page. One is fine, they should be natural. Two links to other sources. Right? We become, we become experts by quoting experts. So, links out to two other sources. Maybe you got a lin-, you know for more about that, read, read this.

Or, you know, Jim Bob does a great article on that here. And then in your images, your images should have Alt tags. So, I like to use at least two images per page, plus alt tags. Right? And then, you, you’re like totally optimizing if you’re using WordPress, Yoast’s plug-in, you’ll get shining colors.

And everything is good to go. So I’ve got a, a slide file, a cheat sheet that you can use where I have all of my wireframe, my best performing wireframe templates. And if you want to check that out you can click the link in the description box below and I’ll get you all my, you can look at all my design templates and you can steal them, you can use them, you can do whatever you want with them.

But I have an image like this in there. And you can have like an actual, you know, icon like image with all this kind of stuff on it, and you know, I hope that it helps you with your. with your WordPress website design and you guys get some great results[/vc_column_text][/vc_accordion_tab][/vc_accordions][vc_column_text disable_pattern=”true” align=”left” margin_bottom=”0″]

Final Thoughts:

Let me know where else you’re struggling too if there’s any other videos that you think that need to be made or if you have any questions or comments on what I just covered here, if you need some clarity, go ahead and answer you know, put something in the comments below and I’ll engage with you.

If it’s your first time on the channel, I definitely want you to subscribe. We are engaging and we want to engage with you and have a great time with you. So I hope that you’ll take the time to subscribe to the channel. And check out some of our other videos as well.

Thank you for joining us and we’ll see you next time.[/vc_column_text][mk_padding_divider size=”40″][/vc_column][/vc_row][vc_row][vc_column width=”1/1″ bg_color=”#dd3333″][vc_row_inner][vc_column_inner width=”2/3″][mk_divider style=”padding_space” divider_width=”full_width” margin_top=”22″ margin_bottom=”0″][vc_column_text disable_pattern=”true” align=”center” margin_bottom=”0″]

So What Do You Think?

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/3″][mk_button dimension=”three” size=”large” outline_skin=”dark” outline_active_color=”#fff” outline_hover_color=”#333333″ bg_color=”#ffffff” text_color=”dark” target=”_self” align=”center” fullwidth=”false” margin_top=”15″ margin_bottom=”15″ url=””]Holla at ya boy on Google+[/mk_button][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][mk_padding_divider size=”40″][/vc_column][/vc_row]

Posted in , ,

Owen Video

Owen Video is the CEO of Owen Video where we teach service-based business owners how to get more customers FASTER with online video marketing. Owen is a pioneer in the industry and a regular contributor to Tubebuddy, Agorapulse, GetResponse Email Marketing, and BeLive.TV and he's also the host of The Business of Video Podcast.

Leave a Comment