Banner Block Tutorial

Intro

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 eye-catching call to actions by adding an internal or external link to it. Watch the demo page from here.

Key Features

  • CSS Filters
  • Banner Style
  • Image Hover Effect
  • Banner Height Controls
  • Overlay Color and Opacity Controls
  • Border Type and Border Radius Controls
  • Enable/Disable Banner’s Link
  • Description Responsive Control
  • Banner’s Title and Description

1. CSS Filters

Add visual effects like “Blur, Brightness, Contrast, Hue, and Saturation” to banner’s image using CSS Filters.

2. Banner Style

6 styles are available in Premium Banner Block for Gutenberg, have a look at it all from here.

We have included another option called “Always Hovered” which allows you to decide whether if you want your banner looks like if it always hovered by mouse or you can just keep the switcher “Off” if you want to make the banner get hovered only by mouse.

6 hover effects available in Premium Banner Block for Gutenberg

2. Image Hover Effects

Not only hover effects for the banner but we have added 7 hover effects for the image itself, those effects are:

  • Zoom In
  • Zoom Out
  • Scale
  • Gray Scale
  • Blue
  • Bright
  • Sepia

And you have the option to choose one from it or you can choose “None” if you don’t want to use any!

7 hover effects has been added to the image in Premium Banner Block for Gutenberg

3. Banner Height Controls

You have the option to choose whether if you want to keep your banner appears with the default height which depends on image height or you can use a custom height for the banner.

In addition, you will have the ability to manage the vertical alignment of your banner depends on the custom height value which you have entered. Vertical alignment options are:

  • Top
  • Middle
  • Bottom
  • Full
Banner block’s custom height and vertical alignment options

4. Overlay Color and Opacity Controls

Make your banner content more visible by adding an overlay color to it and manage its opacity from overlay opacity control.

Overlay color and opacity controls are available in Premium Banner Block for Gutenberg

5. Border Type and Border Radius Options

Make your banner look framed by adding a border to it, or you can just control banner’s corners/edges from border radius option by choosing whether if you want your banner to appear rounded or with sharp edges. Border types are:

  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove

Or you can choose “None” if you don’t want to add border to your banner.

Control border type and border radius in Premium Banner Block for Gutenberg

6. Enable/Disable Banner’s Link

Make your banner linkable by enabling link option or switch it off if you don’t want it to be clickable.

Link option is available in Premium Banner Block for Gutenberg

7. Description Responsive Control

If your banner contains a long paragraph and you don’t want to show it on small screens, you have an option to hide it on mobile devices.

Show or hide banner’s description on mobile devices

8. Banner’s Title and Description

When you land to the title and description settings, you will be able to control the following options:

A. Title
  • Font
    • HTML Tag from H1 to H6
    • Font Size
    • Font Weight
    • Line Height
  • Text Color
  • Text Shadow
    • Blur Value
    • Horizontal Position
    • Vertical Position
Title’s customization options in Premium Banner Block for Gutenberg
B. Description
  • Font
    • Font Size
    • Font Weight
    • Line Height
  • Text Color
  • Text Shadow
    • Blur Value
    • Horizontal Position
    • Vertical Position
Premium Banner’s description styling options
Close Menu