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.
Designing a Hero Section requires some planning. Here are some guidelines to keep in mind.
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 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
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
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
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.
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.
- Insert the Container block.
- In the right sidebar, expand the Background section and set the Type option to Image. Set the image you want to use here.
- Expand the Advanced panel at the bottom of the right sidebar. Under Block Alignment, select the option Full width.
- 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.
- 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.
- Insert the Toolset Heading block inside the Container to display the main message.
- 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.
- Insert the Toolset Fields and Text block to insert the main text.
- 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.
- Insert the Toolset Button block to add a call to action.
- Edit the Button text and link by clicking on the Button block in block navigation.
- 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.
- 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.
Group blocks and style them
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- Show all related topics...
- How to Design and Choose Images and Illustrations
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- YouTube Videos with Advanced Options
- Styling Front-End Forms
- Adding Dynamic Content to Your Homepage
- Creating Responsive Columns and Grids
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally