Skip Navigation

Creating a Hero Section

Hero section is a big area featured at the top of the page. Its purpose is to present the main message of the whole page. You can design beautiful hero sections using Toolset's blocks.

Duration

Steps to Create a Hero Section

Adjust your theme options for the homepage

For a great looking hero section, you should adjust the following theme options for your homepage:

  1. Stretch your page content to the full width of your screen.
  2. Disable the page title.

Add a full-width section

For full effect, hero section should stretch to the full width of the page:

  1. Insert the Container block.
  2. In the right sidebar, expand the Background section and set the Type option to Image.
  3. Optionally, adjust options for the background image. For example, you might set an overlay color or enable the Fixed Position option to add the parallax effect.
  4. In the Advanced section, under Block Alignment select Full Width.
  5. Use the Additional Styles section to adjust margin and padding.

Hero section is all about the message. Use Toolset blocks to add the content to the hero section. For best visually effect, center align all blocks.

Add the main heading

  1. Insert the Toolset Heading block to display the main message.
  2. In the right sidebar, expand the Typography section for the heading to adjust the font styles for the heading.

Add 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 for the heading.

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 the editor.
  3. In the right sidebar, expand the Typography section for the button to adjust the font styles for the heading.
  4. Expand the Style Settings section to adjust the border radius, colors, hovers, and other options.

Originally written
May 13, 2020
Updated
July 14, 2020