Gutenberg Banner Block Tutorial

Banner Block for Gutenberg is a powerful tool to attract your visitors to specific information on your website. Information only?! No, you will be able to use it for any purpose, for instance, you can create an eye-catching call to action by adding an internal or external link to it.

Check Gutenberg Banner Block demo page from here.

Banner Gutenberg Block Layout Settings

Customize Gutenberg Banner block settings like style, hover effect, title tag and much more.

Gutenberg Banner Block Layout Settings

  1. Remove Image: Click to remove image from the block.
  2. Link: Enable to assign link for image.
    1. Open link in new tab: Enable to open image link on new tab.
  3. Banner Style: Select from 6 styles that are available in Premium Banner Block for Gutenberg.
  4. Always Hovered: Enable this option if you want to use these effects without hovering over the image.
  5. Image Hover Effect: Select the effects that affects the background image itself.
  6. Height: Select banner height default or custom:
    1. Min Height (PX): Set minimum height for image.
    2. Vertical Align: Set banner vertical align top, middle, bottom or full.
  7. Hide Description on Mobiles: Enable to hide description on mobiles for better UI.
  8. Align Content: Algin content to left, center or right.

Gutenberg Banner Block Heading Settings

  • HTML Tag: Set banner heading tag from H1 to H6.

Style Settings for Banner Gutenberg Block

Style Banner block overlay, title, description and container.

General Style for Gutenberg Banner Block

  1. Overlay: Set overlay for banner on Normal and Hover.
  2. Css Filter

Title & Description Style for Gutenberg Banner Block

  1. Typography
  2. Text Color
  3. Text Shadow

Container Style for Gutenberg Banner Block

  1. Box Shadow
  2. Border
  3. Padding


Create attractive banners along with Heading, Description, and CTA using Premium Banner Block for Gutenberg.

Related Docs: