The Wireframe: Anatomy of a Home Page

The first step to planning a great home page for your website is to understand the basic layout of a WordPress website. Designers typically start with a “wireframe” to sketch out the placement of the elements on a page. When you think about the underlying structure of your website in this way, it becomes easier to understand how various elements on your home page can be laid out.

Click on the various wireframe areas for more information.

Homepage Wireframe

Click on an area in the wireframe for more information about each area.

Homepage Wireframe
Site Header Primary Navigation area Main Homepage Widget Area / Slider Widget Area 2 Widget area 3 Widget area 4 Sidebar Area Footer Area

Site Header

This is your site header, where typically your logo will go, along with links to social media, or contact information/phone number.

Primary Navigation area

This is your primary navigation area, where you will have a consistent navigation menu across all pages of your website. Menu items can drop down, or you can even have an "uber menu" if you have many pages on your website.

Main Homepage Widget Area / Slider

This area is the most important "real estate" on your home page. This is the area that the eye focuses first upon landing on your page, and where your site visitors will expect to find the answer within 10 seconds to: "is this site relevant to me?"

Sliders (rotating areas of either images, text, or a combination) are commonly used here. Though the use of sliders is controversial among designers, when done right, they can be an effective tool. A static image/graphic and/or text can go here, as well.

Widget Area 2

This is another widget area on your home page, this particular widget area is comprised of three 1/3 width boxes, or "tiles." These could be used to highlight the 3 most important pages/products/services/messages on your site.

Widget area 3

Another editable widget area. In this wireframe, it is full-width, but these areas can be 1/2-1/2, 1/3-1/3-1/3, etc. up to 1/6. Just about anything can go here - text, images, video, calls-to-action, rotating testimonials, email sign-up boxes, etc.

Widget area 4

Another example of a widget area - this one in a 2/3 - 1/3 configuration.

Sidebar Area

This widgetized area is your sidebar and can contain any of the same types of content as the other widget areas. You could have a list of your most recent blog/news posts, a rotating photo gallery, text, ads, sign-up forms, etc.

Footer Area

Your footer area can be full-width, or it can be divided into fractional small widget areas like the above. Footers typically contain copyright citation, and often a bottom-level text navigation to links to main pages. Social media links also can be placed here.