WordPress Web Design tutorial: designing your top level web page templates

How to design the perfect Web page. That’s coming up. [SOUND] Hey, rock stars! Welcome back to the videospot.net. My name is Owen Hemsath. Today I’m gonna talk about how to design the perfect. …website 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, and although silos, you know, you
have to do a little bit more these days. Like, 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 website, 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? 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, 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. [INAUDIBLE] 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. We have a sidebar. Okay? The side bar I believe in side bars. 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 side bars 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. 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
uxl, 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,
Yo’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 website design and
you guys get some great results. Let me know where else you’re struggling
too [SOUND] 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 on the video spot
dot net, and we’ll see you next time. [MUSIC]


  • Radical Reflex

    Is WordPress SEO Friendly ?

  • Wendy Zaruba

    Thanks for the great information.

  • Jacob Kjærulf

    just wanted to let you know, that you got some flaws on your website which dosent look that good when you want people to think of you as experts in webdesign 🙂 just a heads-up

  • www.IndiaTechGuys.com

    Top 7 Must Have WordPress Plugins – Killer!.

    Check out the website in my name if you need any web or app development.We do it all

  • Erika Dobešová

    Great video, enjoy it 🙂 hope you get your piece of chicken for my subscription :))) normally, I do not subscribe, but this is worth exception

  • Mz. Bick

    Your awesome! This is gold!!! I can't believe what you are doing here! Thanks from the bottom of my heart! Love within, love around. -ENB

  • Joe Reid

    Where's my cheat sheet? Gave you my info, looked all over the page I finally made it to, and still no sheet. What's up? Just trying to learn WordPress. Thanks.

  • harleen boparai

    Thank you so much:)

  • Perth Website Designers

    the more you do good in business, the more you’ll get a name going in the your industry. Building a high-performance website is essential, as it can influence how well your business performs. This is most especially true with the speed of information today that can either help or harm you.

  • stijn van wauwe

    You look like Mark Ruffalo!

  • Rickey Holcomb

    Love it ! Under 10 minutes.

  • Nhlangano Chabalala

    Great video. got the synapses firing!!!

  • PixemWeb

    Great Video demonstrating the importance of a well template'd website. WordPress is a great choice since it's themes are based on templates. Finding the right theme is the challenge that most people face and this video showcases some things a website owner should look out for and incorporate in their website.

    Again, great job on the video.

  • click411

    I need a SIMPLE template to embed on my webpage that is a client scheduler. I am a Barber that just needs a scheduler that devised the days I am open into 20 min apart. Most of the 3rd party schedulers are to complicated and I don't want that . Just a page the customer can go on and sign name and number in the box for tuesday at 4pm. Thats it. If other customer goes on they will see that cant come tues 4pm so they can sign 4:20

  • Mil Jardigan

    i like your tshirt!!

  • Richard Demeny

    Pretty cool video man

  • Jay Valencia

    Why use WordPress over Adobe Muse? For people that don't want to do the Dreamweaver.
    WordPress has overwhelming props but Muse is sooo cool too for graphical and widget layout without hassle.

  • Banti Barnwal

    how to conect payment services with website and what will be the cost for this.

  • Amplify ROI

    Very well put together. Silo pages are a key ingredient to proper SEO.

  • jms shef

    Great video thanx, I have also a question. I want to make a website but i am struggling with home page and the following pages.
    I like to make my website look like smart phone pages, full with apps and with possibility to scroll pages. is something like this possible? and finding the same sized apps are also an issue, if you can point a direction or advice the are welcome. Thanks

  • Jeancarlos Meyer Fontalvo Mejia

    Mark Ruffalo is teaching us Web Design :D!


    Hey bro! i got a question here! but firstly that was a good tutorial i learned lot, keep up the work!! now back to question, whenever i publish a post on wordpress it's not getting any view, is there anything like we should add meta tags to the post like we add in youtube for a new video ?
    waiting for reply thanks!!

  • Антон Кубаев


  • Healthy Happy with CBD

    Rich contents to learn from!

  • Pier Bottero

    Owen. Thank you very much for this video. Thats exacly the kind of think I was looking for but it seems to be not that easy to find. Most of the stuff you find when you search for " Creating a Website Layout" turns out to be a Photoshop tutorial where they show how to put the Ideas that you already have on PS, but not to skecth them up.

    I'm doing this web thing for about an year and one of the things that I'm strugling with is how to create a layout, based on the content. Like, "whats the best way I could put the images I have on the website interacting with the text? Do I use text over image?" "How can I divide my webpage? Sections? Colums?"

    I know that seems to be basic but I feel bad to just look for a template that looks cool and make my website out of it.

    What I'm looking for is some advice on how to draw a website on a paper sheet. How to plan it. Just like you do in this video.

    If you have more videos on that direction or if you know any book or website that talk about it I'd love to know.


  • Branding Los Angeles

    Thanks for sharing your insight! Great visual representations throughout as well!

  • Tartam Vani

    sir nice to see your video on WordPress Web Design Tutorial… one question, Can we design an interactive web page with the help of WordPress (interactive means online transaction, online selling of books or any product) ?

  • A Singh

    Thank you Owen – just subscribed. The link looks good – although the email comes over with the salutation : Hey [[firstname]],
    you may want to fix that! Great work.

  • jazz Sachdev

    thankyou sir! this is very helpful 🙂

  • Taylor Ossenfort

    you told me what to do, but not how to do it. i'm lost

  • Rahman fahim

    hey dude u r really helpful to making thing simple… thank u.. share us more..

  • Christian Sianturi

    I typed the links and it says "Page doesn't seem to exist"

  • arun chaudhary

    helpful video man…….

  • orglancs

    This is very clear and accessible. Thank you. But the problem for me is not the designing, it's getting the design onto the screen and the step before that, getting it down onto my hard drive, so I can then post it to my site. Where do we go after the end of this video, please?

  • Derrick Thornton

    What if you're trying to design a social media'ish page? examples, tips? Thanks in advance, Owen

  • Erklärfilme – Der Lichtspieler

    Thank you for this nice video!

  • britty bidari

    i am a beginner having problem in managing containers and spaces…please clarify if possible!

  • Corbbin Goldsmith

    I'm glad I can learn about web design and layout from Wolverine! This is so exciting!

  • Sujan Poudel

    nice nice

  • Jim Rodgers

    Excellent info and nicely delivered. Thanks

  • Halima Saleh

    love it ! your way of explaining is great

  • Lima Tembe

    hi Owen, i love your videos but I have a question…i dont like coding but i know a little, so i use wix and wordpress to create website just for fun..and many people that do business they love my pages and they asked me if i can sell them. so, i would like to know if it is a good idea to sell the websites that i made with wixwordpress? And if it is a good idea, can you tell me the price of a website?

  • Abdirahman Elmi

    wow it is good tutorial

  • Morten Gabriel Ottersen

    Hi Im a backend developer (C# etc) but have moved more to JavaScript coding, and here I'm doing great. But I still think it hard to do the design etc. anyone have some good advise to where I can come up to speed when it comes to design and css/html?

  • Lary John Lastimado

    Bruce Banner, is that you?

  • Kaerik

    so nice

  • Efrain Lemus

    I build websites for companies (e.g. restaurants, chiropractors, spa) and I'm not sure of what to include in the service pages? I usually include an introduction to the service, a small description about it, the benefits of the service and a contact form at the bottom. Do you have any advice on what else to include? Thanks in advance!

  • Stella David Seahorse Oracle Cards

    Thank you much☺

  • Emma Page

    For designing wordpress based template, i recommend only template design software TemplateToaster.

  • Dan

    Pretty annoying watching a sales person persona pushing info around. Ok content but delivery is obnoxious.

  • Hafiz ullah

    thanks sir

  • Piyush Matta

    sir please explain more

  • James Cannon

    Subbed great info for web design/development.

  • Vanessa Kenyahshah

    *Owen Video Thanks for this video – very easy to follow and super helpful. Please could you explain what 'Altags' for the images are and exactly how to implement these. Or will this be explained further within another video? Keep up the great work! 🏆

  • Tushar Vashisht

    appreciate your work man. thank u

  • Grant Hawkey

    Design of product single pages would be interesting to see Owen 🙂

  • Jeyakumar John

    Good detailed Show on Home page website

  • John Martin Pareja

    owen Banner

  • Christian Okafor

    after designing my theme it doesnt reflect on my blog please whats the possible solution to these thanks.

  • Stefan Hitchcock

    Stumbled upon your videos while designing two websites, one for my personal training business and one for the gym that I help manage.

    LOVEEEEEE the content, thank you so much!

  • Butthry

    Thank for sharing

  • Amarjeet Kumar

    can i make webpage in wordpress through HTML

  • Steve Agoston

    I design my own page

  • sunny22smily

    like that plan show me a design…

  • jenny internetcafee

    thanks for this video

  • tilitila88

    And how do I export a template as .json?

  • Rezmed

    how did you made your White Board 😀

  • Asumani

    first of all let me say i like yur accent and confidence secondly allow me to say thank you for this great video, ive subscribed right away

  • Yahsararel Ben Yoseph

    dis guy , dis guy looks like somebody i'd go drinking with to see what he says/does next ( I dont even drink)…..c'mon buddy lets go out!

  • Ruben Stevenson

    Hiya, checking for valuable methods online. You can get to know more tips to earn money online. Just go to google and type: "TheMakeMoneyOnlinePro".

  • David

    thank you for the recommendations on how to design a page more effective, I am struggling to read the php content and change the positions of elements. My background is joomla and also I hand code sites, but I just got into wordpress because I have people requesting it I'm also having a hard time understanding wordpress structure, in order to change other free templates I am new to PHP

  • huilin chng

    ur link cannot work 🙁
    can update the link ??

  • rohit bengani

    Very helpful to understand the basic details of making of a website. As a startup enterpreneur, I need some helpful links/ references of concept selling based websites. Thanks

  • Mike Mahoney

    You use the the word 'maybe' a lot. This makes it seem like you're not really sure about what you're saying, which undermines your attempt to speak authoritatively on the subject matter. The presentation style comes across more like a brainstorming session than a teaching lesson. Teach with certainty and slow down. Just trying to be constructive, not critical.

  • mikemahoney55

    BTW: the link above is broken.

  • Manpreet Dhaliwal

    ty sir for you blueprints they are real help

  • Poď Podnikať academy

    awesome! You are doing a good job, i like how you pay attention to clear pronounciation! tx

  • Manav Singh

    I'm starting my website and don't know how to design it well. Do you have some more content on this?
    I'm using WordPress!

  • SKM Software

    Awesome explain, as a web designer it will help me a lot


    I am facing problem while installing wamp server so could you plz make video on it

  • Bill Krueger

    Excellent. Too many tutorials (at least the ones I've been watching) are about the how, i.e. how to make a better looking menu. You're addressing another aspect which is layout design which is a sorely needed bit of information. Thanks.

  • gd7ultimate

    You left out your title.

  • A T

    Hey – you teach in amazing style- thank you for your time and effort in making this easier for us !

  • anzu anzu

    Am I the only one who is scared of the dark room with the door open lol.

  • Uja Domi

    revealed information of what I am looking for. You explain smarter and clearly

  • Jagannath University

    Very useful tips..bro

  • Kiara Lue

    What’s a silo?

  • 1 million subscriber without posting video Guru

    Love from India bro

  • Wow Kids

    best website theme colors download

  • Lubys A

    Your Link has no cheat sheet but now you have my email without an effort pff

  • davesguitarplanet

    You're enthusiastic. I get it.

  • Jayntilal Joshi

    This guy is looking like mark Ruffalo

  • John Comstock

    I'm assuming you're no longer updating your site, your webblueprints download link sent me to a 404 page.

  • Teach Better

    "You can steal them, you can use my designs, whatever" Spoken like a true designer. Subscribing!

  • Owen Video

    🔥🚀NEW CONTENT COMING — — Landing pages, Sales Copy, Video Marketing. S U B S C R I B E — http://owen.video/youtube

  • Sinthia Vicious

    This is really helpful. Thanks.

  • obuasi tina

    please am a beginner i want to learn how to design a website.

  • R G

    He's turning green! SMASH!

  • Praveen Kumar

    I have made an HTML blog website but I don't know How to post an article in it… Please help me.

  • Official MZ

    T. Andy


Leave a Reply

Your email address will not be published. Required fields are marked *