Section Block

Hero Block

The Hero Gutenberg block for WordPress allows you to create a striking hero section to catch your visitors’ attention above the fold. You can also include a brief description and a call to action to make sure people are encouraged to explore further.

With our Hero Block, you can…

  • Create striking hero sections
  • Feature your Website’s Main Headline
  • Add a large call to action
  • Design your site’s “above the fold” area

This is a Hero Block.

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

Block Layouts

Choose from the following block layouts:

  • Default
  • Horizontal
  • Half Overlay
  • Center Overlay
  • Side Overlay
  • Half

Styling Options

Style your block with the following inspector and toolbar options:

  • Block Background, Size & Spacing, Borders & Shadows Options
  • Alignment Option
  • Container Background, Size & Spacing, Borders & Shadows Options
  • Content Width Option
  • Top & Bottom Separators
  • Dynamic Content
  • Transform & Transition Effects
  • Motion Effects

Best Used With

Customize your call to action to your website’s needs with the following blocks:

Here are some other samples of our block

You may also check out how these samples were designed by watching our video on it or copying the block’s code.

This is a Hero Block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ex eros, egestas id ornare aliquet, convallis ut ligula. Sed risus orci, ullamcorper nec metus eu, malesuada pulvinar leo.

hero block with a nested video popup block and bottom separator toggled on

This is a Hero Block.

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

hero block with a nested divider and subtitle & social buttons inside a 2-column block

Subtitle for this block

This is a Hero Block.

Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.

  • This is space for icon list item 1
  • This is space for icon list item 2
  • This is space for icon list item 3
  • This is space for icon list item 4

hero block with a nested icon list block

Discover a whole new experience of web design

No matter who you are, blogger, merchant, designer, developer, we guarantee you’ll want Stackable.