Home page elements

Home page elements

The content of a website homepage requires a range of content to engage the user.


The header is largely constant throughout the website. It should not change from page to page.


The website logo will usually sit in the top left corner. A centred position is also popular. It should be linked to take the user to the home page from any page.

Primary navigation

The navigation will usually sit top right in line with the logo. It may also sit either side or below a centred logo.  There are many exceptions and different placements according to individual designs.

Shopping cart

Further right is the shopping cart icon.

Search field

The search icon is most commonly placed in the farthest right position.

Hero section

The hero section is a large, eye catching area. It should sit above the fold.

Hook or primary value statement

The first line of text in the hero section is large and bold. It can take the form of a hook such as a question or statement. It can also form the primary value statement spelling out the core value of the website offering.

Supporting or secondary value statement

This will be in a less substantial font, and will be wordier than the primary value statement. It may consist of one, two or sometimes even three sentences. It will support or expand upon the message in the primary value statement,

Primary call to action

The primary call to action is one of the most important elements on the front page. This button begs the user to click / tap it. For example, it may ask the user to sign up to a premium subscription. The primary and secondary value statements seek to convince the user to interact with this button.

Secondary call to action

The secondary call to action button isn’t always used next to the primary call to action button. It may also appear below the fold in a different section (or may not be used at all). Whereas the primary call to action may ask the user to sign up to a premium subscription, the secondary call to action button may be to sign up to a free subscription.


The hero section should contain an image that alludes to or supports the written content. It should be eye catching, and meaningful.


Services or products

The products on offer may be listed. This is pretty straightforward. For example, a digital design company may list their services in a row of icons such as web design, app design, etc.


The feature content is closely aligned to the services or products. They may even be mutually exclusive. The feature content simply spells out the features of the product or service on offer.


The benefits are also linked to both the features and services / products. The befits section will talk about the advantages the offering will provide the user, or perhaps how it is better than a competitor offering.

Problems solved

A different and perhaps more relevant way of looking at benefits is deferring to problems that the product or service solves. This indicates why the user needs the product in a similar way.

Purchase options

The purchase options may include the range or product offerings, a feature and price comparison, and the ability to purchase.

Trust building

Word of mouth has always been an effective method to spread good or bad experiences about a product or service. This is achieved on the home page by displaying the statements of the experience of other users. Social proof and trust building elements include:

  • Testimonials

  • Reviews

  • Statistics

  • Client logo list

  • Awards / certifications

Secondary call/s to action

Secondary calls to action may exist below the fold. This may be a repetition of the primary call to action, or a lesser action.

Link to resources / learn more

For the user to learn more about the product or service, there may be a link to a resource centre or another page within the website that provides more in-depth information.

Offering e.g. free article, subscription

Providing the user with some sort of free offer such as a free newsletter or white paper will validate the product or service.


The footer is similar to the header but in a more compact form. Additional information may be displayed such as social media and direct contact information. E.g.

  • Logo

  • Navigation

  • Contact information

  • Social media


The order of the content will form a hierarchy in terms of its relevance. However the layout may form a path which the eye follows such as:

  • Z model

  • Zig zag pattern

  • F pattern


Not all of the above needs to be included. The home page may be quite crowded if it was. However careful consideration of each of the elements above is worthwhile in deciding what to place on the homepage.