Designing Homepage Layouts with Genesis

Homepage Layouts with GenesisThe homepage layout on all Genesis child themes is made up of widget areas, making it easy to add different types of content.

Depending on the type of widget you add to each area, your homepage can display static content such as an introduction to your business or dynamic content such as the latest article you have published.

In this tutorial, you will learn…

  • How to choose which Genesis child theme to base your design on
  • How to create a widget map of your homepage
  • How to add widgets to your homepage

Download a sample widget map…



This tutorial was last updated on 19th February 2013.

Comments

  1. says

    Hi Andrew,
    You can just apply a new child theme to an existing site but as the homepage, header and sidebars need to be configured and customised, you wouldn’t want to do it this way on a live website. You are probably best to create a new folder on your server and put a fresh installation of WordPress into that folder. Play around with the new child theme on that site until you are happy with it.
    Jo

  2. says

    Hello Jo,
    I’m just getting started. I’ve built an OK WP site using the 2010 free theme. I’ve learned a lot in the process.
    Now it’s time to choose a Genesis child theme and develop the functionality I need. eCommerce, membership etc.
    My first question is: can I simply apply the new theme to my existing site, or is it wiser to start form scratch?

  3. says

    There are a lot of elements you would need to change on the style sheet if you want to deviate from the default 960 pixel width.
    If you want to widen the homepage for example, you need to change: header width, home top width, home middle width and footer width.

  4. George says

    Hi Jo,
    Thanks for the reply.

    Instead of shrinking other widgets to fit, I want to make all widgets larger. How do I increase the entire container width of any particular page’s layout to fit my wider widgets?

  5. says

    Hi George,
    You just need to adjust the width of individual widget sections in the style sheet (Appearance/Editor) making sure that whatever pixels you add to one, you take off another.
    You adjust the padding and margins of the widget areas to have more or less spacing around them.
    You can also add display: none; to one of the widget areas to hide it completely and therefore expand one of the others to twice the size.
    To change just one widget inside a widget area, you need to look at the source code and get the widget id, then add a new section to your css for just that widget.
    For example…
    #home-middle #text-345 {
    width: 350px
    Background: #dddddd;
    }

    If you are not used to css, I would suggest only making one change at a time then previewing on the live website so you can change back easily.

  6. George says

    Hi Jo,
    * How do we influence the width of:
    – Each widget on the home page?
    – The entire home page container? I have a table that is too large for the featured widget, but if I expand that widget, I know I’ll have to expand the home page container as well.

    * How do you tighten up the rows of widgets to squeeze out white space above or below them? For example, home middle #1 / home middle #2 / home middle #3 is one row, and the footer #1/#2/#3 is the next row – how do you move them closer to each other in the style.css?

    Thanks.

  7. says

    The entire homepage is made up of widgets so you just go to Appearance/Widgets and instead of seeing just sidebar and perhaps footer areas on the right, you also see home top right, home top left, middle 1, middle 2, middle 3 etc. Obviously depends on the child theme as to exactly how many sections you have available. Choose standard widgets or special Genesis widgets from the left and drag into these sections. A detailed tutorial here about using the Genesis Featured post widget – http://www.creative-web-ideas.com/guide-to-genesis-featured-posts-widget/

  8. says

    Sorry, but where exactly are we able to do this dragging and dropping of widgets in Genesis? I have never known it was possible to easily customiz/se the homepage and don’t know where to go to do it.

  9. says

    Hi Keith, You’re right. The Pro Plus Package is an absolute bargain. You can use any of the available widgets in any of the widget areas. I often use featured page widgets on the homepage instead of featured posts widget.

  10. says

    Hi Jo
    I’m back.
    I’ve just bought the Pro Plus package – it’s so cheap when you think what you get.

    I notice that lots of the child themes have areas for featured post widgets on the home page, but lots of clients want a page based website not a blog.

    Are the featured post and page widgets interchangeable?

    Think that I might be asking you lots of questions now that I’m using Genesis Jo.

  11. says

    Hi Keith,
    Would definitely recommend it for client sites. You don’t need any php and the fact that homepage, banner and sidebar are all widgetized means clients have even more access to update if they need to.

  12. says

    Hi Jo
    I’m thinking of buying Genesis pro edition and I’m doing as much reading as I can before I jump in.

    I’m OK with html and CSS but have no PHP skills.
    Would you recommend Genesis as a framework to use on clients sites?

  13. says

    Wondering which Genesis child theme to use???
    Here’s my advice…
    All the Genesis child themes use the same framework so have the same functionality.
    The main thing to look at is the homepage layout on the demo site. Some have large images across the entire page, then posts or pages underneath.
    Others have the same sidebar on the homepage as on all the other pages. Some show 2 columns of posts on the homepage while other only show one.
    I would pick the homepage layout closest to what you want yours to be because these are the hardest things to change.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>