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

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

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

FavoriteLoadingAdd to favorites

Get my blueprint cheat sheet here http://bit.ly/webblueprints. In this video I’ll cover the main assets to a web page including page navigation, banners, sidebar design, footer, and body page specs. I’ll include things like word count, keyword saturation, video placement, and outbound links as well as links to other videos on similar topics. Don’t forget to share this video with your friends who are struggling with website design!

For every subscriber, YouTube pays me a piece of chicken and a can of beans so PLEASE Subscribe to my channel: http://bit.ly/XkdbXS


Video Notes:

************************1. Create templates************************

Now a, a big problem that I see with business owners and like clients that hire me and, and other WordPress 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.

************************2. Top level Navigation************************

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.

WordPress web design tutorial
Designing a top level web page template

************************3. Sidebar and Footer************************

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.

Use related pages for your web design- 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 WordPress 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.

************************4: Main Page************************

In your main page or top level design page, 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?


For more information:
WEB: http://thevideospot.net
TW: http://www.twitter.com/owenhemsath
FB: http://www.fb.com/yourvideospot


  1. www.IndiaTechGuys.com April 26, 2017 at 9:27 pm - Reply

    *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

  2. Ipsita Lath April 26, 2017 at 9:28 pm - Reply

    Hi, i need your help.. i am a fresher n trying to learn the designing and developing part of it.. and am struglling with the asthetic sense or placement of components… so can help me out… i’ll b very thankful

  3. Erika Dobešová April 26, 2017 at 9:28 pm - Reply

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

  4. Антон Кубаев April 26, 2017 at 9:30 pm - Reply


  5. Joe Reid April 26, 2017 at 9:32 pm - Reply

    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.

  6. parvez hasan April 26, 2017 at 9:33 pm - Reply

    Thanks nice overflow

  7. Richard Demeny April 26, 2017 at 9:33 pm - Reply

    Pretty cool video man

  8. Jacob Kjærulf April 26, 2017 at 9:34 pm - Reply

    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

  9. Radical Reflex April 26, 2017 at 9:35 pm - Reply

    Is WordPress SEO Friendly ?

  10. stijn van wauwe April 26, 2017 at 9:35 pm - Reply

    You look like Mark Ruffalo!

  11. banti kumar barnwal April 26, 2017 at 9:35 pm - Reply

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

  12. Taylor Ossenfort April 26, 2017 at 9:36 pm - Reply

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

  13. Mil Jardigan April 26, 2017 at 9:36 pm - Reply

    i like your tshirt!!

  14. sunny lyken April 26, 2017 at 9:36 pm - Reply

    Is it possible to make a website only one page with information : Bio, Services  offered, Contact, and Fee/Rates are do you have to do a website with 4 -7 different tabs

  15. nikita Sachdev April 26, 2017 at 9:37 pm - Reply

    thankyou sir! this is very helpful 🙂

  16. Nazy Sheikhan April 26, 2017 at 9:39 pm - Reply

    Great video, thanks for your time and explanation 🙂

  17. eric niu April 26, 2017 at 9:40 pm - Reply

    Great video.
    By the way, do you have a personal website?

  18. Wordpress Blogs Benefits April 26, 2017 at 9:41 pm - Reply

    Rich contents to learn from!

  19. Tartam Vani April 26, 2017 at 9:44 pm - Reply

    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) ?

  20. arun chaudhary April 26, 2017 at 9:47 pm - Reply

    helpful video man…….

  21. Sayadeth Chanthalath April 26, 2017 at 9:47 pm - Reply

    It is very helpful vedio that helps me a lots to my first website

  22. vega bond April 26, 2017 at 9:49 pm - Reply

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

  23. Rickey Holcomb April 26, 2017 at 9:49 pm - Reply

    Love it ! Under 10 minutes.

  24. Jayson Valencia April 26, 2017 at 9:49 pm - Reply

    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.

  25. click411 April 26, 2017 at 9:50 pm - Reply

    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

  26. Gloria Moskovita April 26, 2017 at 9:53 pm - Reply

    Went to fetch blueprint cheat sheet, and got nothing… SCAM…

  27. PixemWeb April 26, 2017 at 9:53 pm - Reply

    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.

  28. Pier Bottero April 26, 2017 at 9:54 pm - Reply

    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.


  29. Christian Sianturi April 26, 2017 at 9:54 pm - Reply

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

  30. Md.Abdul Halim April 26, 2017 at 9:57 pm - Reply

    I like your tutorial

  31. Jeancarlos Meyer Fontalvo Mejia April 26, 2017 at 9:57 pm - Reply

    Mark Ruffalo is teaching us Web Design :D!

  32. Maechile de la Cruz April 26, 2017 at 9:58 pm - Reply

    nice design. 🙂

  33. Raj Kumar April 26, 2017 at 10:02 pm - Reply

    your link doesn’t show any cheat sheet. it was as if I got cheated.

  34. Wendy Zaruba April 26, 2017 at 10:05 pm - Reply

    Thanks for the great information.

  35. VULGAR BANG April 26, 2017 at 10:06 pm - Reply

    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!!

  36. Nhlangano Chabalala April 26, 2017 at 10:06 pm - Reply

    Great video. got the synapses firing!!!

  37. bankole dada April 26, 2017 at 10:07 pm - Reply

    simple and nice

  38. A Singh April 26, 2017 at 10:07 pm - Reply

    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.

  39. Ely Zayed April 26, 2017 at 10:08 pm - Reply

    useful layout..

  40. Yavor April 26, 2017 at 10:09 pm - Reply

    This doesn’t look like it has much to do with the actual web design process. It’s a sketch of a design and it is very simple.

  41. jms shef April 26, 2017 at 10:12 pm - Reply

    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

  42. Sua henghang April 26, 2017 at 10:16 pm - Reply

    Your one-stop to website build up! http://store.templatemonster.com?aff=Peanut_penguin 
    Not a scam nor it’s a spam, check it out yourself! Here’s a good luck to your website building!

  43. harleen boparai April 26, 2017 at 10:16 pm - Reply

    Thank you so much:)

  44. Perth Website Designers April 26, 2017 at 10:18 pm - Reply

    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.

  45. Amplify ROI April 26, 2017 at 10:18 pm - Reply

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

  46. Branding Los Angeles April 26, 2017 at 10:19 pm - Reply

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

  47. MsPurplehaze15 April 26, 2017 at 10:20 pm - Reply

    Im still learning how to creare a website. Thanks for the video 🙂

  48. Margarita Valverde April 26, 2017 at 10:21 pm - Reply

    Thanks for sharing all these knowledge you are awesome!!

  49. JoAnna Burks April 26, 2017 at 10:22 pm - Reply

    You win. You’re my new internet boyfriend. 🙂 On a serious not, I dig your information and really appreciate your direct style and kick ass delivery. Thank you.

  50. Mz. Bick April 26, 2017 at 10:25 pm - Reply

    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

Leave A Comment