Showcase of Website Page Subheader Styles

You have an excellent homepage designed. Now how do you handle the headers and subheaders on the inner pages of your website? Here is a visual showcare of different types of subheader styles that you could use to style the top of your website’s inner pages.

A majority of websites today start with a “hero” style image with text overlay on the homepage. This is effective to get a message across and to let the user immediately what the website is about. The logo usually sits at the top left of the page with the navigation to the right. Maybe it is centered or the website starts off with just a mobile navigation menu icon. However this is set-up, it can be difficult to decide how to handle the look of the inner pages. An example of the inner page would be an “About Us” page. How do you handle the top part of this page if the homepage starts with a large image, large text with a call to action?  Below are some possibilities:

First let’s start off with a typical popular style of homepage for 2018:

A popular hero style website homepage in 2018

This is a very popular website homepage landing page style. Large image with bold text and a call to action. This style screams what your website is about quickly and efficiently. Many times the image acts as the background for the header other times the header is separated from the hero image. This looks great, but how do we handle separating the written content and images on the inner pages? Below are some examples with screenshots taken from various themes and websites on the web.

Here is a list of possible solutions to styling your inner pages:

1. Large Image with Large Title Text

Large Text with Large Image

This style is almost an extension of the original design. Each page requires a large high-resolution image with the title of the page overlayed on the image itself. This does require an image for the top of each page and requires the user to scroll to read the content below. Visually appealing but can be difficult to come up with a custom image for each page your website requires.

2. Separate Header and Subheader

Logo and Navigation separated from the Page title with image background.

In this example, the logo and navigation is separated with a subheader to divide the header from the content. If you used a white logo like in the homepage example you would need to load a dark version of your logo for the inner pages. The image for the subheader must be in a wide format since it is narrow. This can be difficult to obtain images especially when there are people or a focus area in the image. This style is good to reduce the amount of scrolling required to view the page content.

3. Narrow Header – Text Subheader

This style uses a sub-header to divide the header from the content. Very simple, uniform style good for all pages. This style is good for a website that is page heavy. Subheader contains the page title and breadcrumbs to the right with a different shade to create the division. The title can be centered with breadcrumbs centered below.

4. Narrow Header – No Subheader

This is a common style for e-commerce websites where the content is important to view without need to scroll. Title of the page is incorporated into the content, images pushed high on the page. To divide the header logo and navigation, the header is colored dark and a small breadcrumb navigation with a light border is placed for easy page navigation. At times, it the header is also a white background, the border used in the breadcrumb navigation woudl be enough to create separation from the content and the header.

5. Hero Style on All Main Landing Pages

Why should you be required to change the style of you site header and even create a subheader? For all main landing pages you could treat them as the homepage. This is good if a visitor finds your website in search but does not land on the homepage. this style carries the great design on the homepage to all major pages throughout the site. This way no matter where the user lands, they will get a similar experience as the homepage. Use different hero text to explain the page purpose with secondary text and call to action that could lead to a form on the page. This style is good for various services or categories where the visitor would visit first before even seeing the homepage.

More styles added as we find them. Feel free to use this post as a reference for your next web project.