• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer
The Webscaper

The Webscaper

Website Design and Maintenance for Nonprofits and Businesses

  • Contact
  • About
  • Services
    • Overview of Services
    • Custom Website Design
    • Website Maintenance & Support
    • WordPress Websites
    • Web Solutions Consultation
    • Third-Party Vendor Management
  • Our Clients
    • Overview of Who We Serve
    • Nonprofit Organizations
    • School Associations & Organizations
    • Preschools
    • Churches & Ministries
  • Our Work
  • Blog
  • Contact

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.

Our Specialization:

Parent-Teacher Organizations
School Associations
Preschools
Nonprofit Organizations
Social Club
Churches and Ministries
Faith-Based Organizations
Small Businesses

Client Tools

Make a Payment
Purchase Web Bucket Support Hours
Submit Secure Information
Recommended Tools & Vendors

Get in Touch

Contact Us Online

Request a 1/2 Hour “Ask Anything” Consultation

Call: (484) 985-9325

We are located in Chester County, Pennsylvania, and serve clients locally in the suburban Philadelphia region as well as across the United States.

Copyright © 2023 · The Webscaper · All Rights Reserved