Skip Navigation
Acheter
Home » Course » WordPress Design » Styling Different Parts of a Site » Creating a Hero Section in WordPress

Creating a Hero Section in WordPress

A Hero Section is a big area featured at the top of a page. This is what provides your users first impression of your site, so it’s important that it follows best design practices. Learn how to create your Hero Section and fully design it with Toolset.

Duration

What to Know Before Getting Started

Designing a Hero Section requires some planning. Here are some guidelines to keep in mind. 

Align the text to the background

Make sure that you’re aligning text with the background image in mind. This means checking that your text is still visible and readable if your image has various colors. Please note that what might look good on desktop might not fit on mobile screens, so always check before publishing. 

In the left example below, the text “C&B Properties – Real Estate Site”  is hardly visible because of the house in the background image. In the correct example, it looks much better and more professional. 

A Hero Section with text and content aligned in the center

A Hero Section with text and content aligned on the left

Maintain useful contrast

Maintain good contrast between your text and background. If your background image is light, then use dark text and vice versa. 

In the example below, the correct example is easy to read and stands apart from the background image. 

A Hero Section with hardly visible text

A Hero Section with white text

Consider using an Overlay Color

You should use an overlay if you can’t create a good enough contrast from your text and background. This applies also if your background image is complex or “busy”.  You can apply an Overlay Color by selecting your Container and expanding the Background panel on the right sidebar. When picking the color, make sure it complements your site palette.

A Hero Section with difficult-to-read text

A Hero Section with a dark overlay and bright text

Remember to use appropriate spacing

You must use white space (negative space) properly. Always apply a reasonable amount of space between content blocks so that they are easy to read and look professional. In the examples below, you can see that on the right image the text is easier to understand than on the left.

A Hero Section with minimal spacing between content elements

A Hero Section with appropriate spacing between content elements

Style Call-To-Action buttons appropriately

If your hero section has two or more CTA buttons, make sure their style is different according to priority. Simply make the less important button’s background a less noticeable color or even transparent such as in the example below.

An example of a Hero Section with buttons using the same design

An example of a Hero Section with buttons using different designs

With this information all in mind, you’re ready to get started with creating and styling a Hero Section. 

Creating and Styling a Hero Section

Before creating your Hero Section, you should disable the Page Title and, if you have, your sidebar as well. If you are not sure where to do this, check your theme documentation or contact them.

Once you are done, follow the examples below to learn how to design an appealing Hero Section.

Add a Full width Section

  1. Insert the Container block.
  2. In the right sidebar, expand the Background section and set the Type option to Image. Set the image you want to use here. 
  3. Expand the Advanced panel at the bottom of the right sidebar. Under Block Alignment, select the option Full width. 
  4. Expand the Inner Content panel and set the Max-Width to 900 px or less. This prevents the text from becoming too wide, which decreases readability. 
  5. After this, expand the Additional Styles panel and enable the Margin / Padding option. Set the top and bottom padding to 80px or more.

The Background panel provides plenty of customization options, such as being able to add an Overlay Color or enable the Fixed Position option for a parallax effect. 

Setting the Overlay Color to semi-transparent black for the Hero Section

Add the Main Message

  1. Insert the Toolset Heading block inside the Container to display the main message.
  2. Select the Heading block from block navigation. In the right sidebar, expand the Typography section and adjust the font styles for your heading.

The Font Size must be big enough that users understand it immediately. Don’t forget that the contrast between the text and background image must also be good enough that your text does not disappear into the image.

Add the Hero Section text

  1. Insert the Toolset Fields and Text block to insert the main text.
  2. In the right sidebar, expand the Typography section for the text to adjust the font styles.

It’s best that you use a normal or medium Font Size for your Hero Section text, around 16 to 20. Like the Header text, make sure the font color doesn’t clash with the background. 

Add a Call to Action button

  1. Insert the Toolset Button block to add a call to action.
  2. Edit the Button text and link by clicking on the Button block in block navigation.
  3. In the right sidebar, expand the Typography section to adjust the font styles for the text. Make sure the Button font size is between 16 and 20, and remember to make sure your text color is visible enough. 
  4. Expand the Style Settings section to adjust the Border Radius, Colors, Hover, and other options. Make sure to use the same style as you do for all other site buttons. 

Sometimes the button color can be different, but it depends on where you place it. Otherwise, your button color should be the same as your site’s accent color for consistency. 

After setting up the Button, we add in a Hover state. This applies whenever a cursor hovers over the button, showing users that it is clickable. Since our button is an off-white color, we use our accent color green as the hover color. 

Main Toolset Block Used in this Lesson

Container

Regroupez les blocs et stylisez-les

Cloe
Updated
mai 7, 2021
Send feedback to our documentation team