Free Download

Gutenberg Banner Block Tutorial

Table Of Content

Introduction

Welcome to a quick guide on using Gutenberg Banner Block by Premium Blocks. This tool is designed to help you highlight key content on your site. Whether it’s to spotlight information or to serve as a clickable call to action, this block is versatile.
Gutenberg Banner Block allows for detailed customization. You can select from six different styles, adjust the image height, and even set the banner to permanently hover for constant visibility. It’s also mobile-friendly, giving you the option to hide the description on smaller screens to keep things tidy.

Visit Demo Page
Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Banner Block?

Add your separator with our Premium Banner Block for Gutenberg, then customize the styling options to match your website’s aesthetic.

01. General Settings

Once you select the image, you will be able to adjust the following controls.

  • Remove Image: A function to delete the banner’s current image.
  • Link: An option that, when enabled, allows you to add a hyperlink to the banner.
  • Open link in new tab: When this is toggled on, any link added to the banner will open in a new browser tab.
  • Banner Style: Choose from the dropdown menu the visual style of the banner.
  • Always Hovered: Enable/Disable the hover effect on the banner active all the time, eliminating the need for mouse interaction to trigger it.
  • Image Hover Effect: A dropdown menu that lets you choose from different effects that will activate when hovering over the image.
  • Height: This setting allows you to choose the banner height.
  • Hide Description on Mobiles: Enable to hide the description text when the banner is viewed on mobile devices, helping to ensure a cleaner and more focused presentation on smaller screens.
  • Align Content: Choose the horizontal alignment of the content within the banner.
  • Title HTML Tag: This section allows you to set the HTML tag for the title, providing options from H1 to H6. H4 is currently highlighted, indicating it is the selected choice for the title’s HTML tag.
general settings for Gutenberg Banner Block
Gutenberg Banner Block – General Settings

Gutenberg Banner Block Styling Controls

General and Title Settings

  • These tabs allow you to configure settings for two different states Normal & Hover.
  • General Settings: Tabs to configure settings for two states Normal/Hover.
  • Overlay: Add a color or image overlay over the banner.
  • CSS Filters: Apply different visual effects to the banner image, such as blur, brightness, and Hue using CSS.
  • Title: This tab allows you to configure settings for the title.
  • Typography: Controls for setting the font style and size of the banner title.
  • Text Color: Change the color of the title text.
  • Text Shadow: Add a shadow to the title text for depth or emphasis.
Gutenberg Image Separator Block Styling Controls for normal and hover status
Gutenberg Banner Block General Styling Controls

Description Settings

  • Typography: Customize the font properties of the text.
  • Text Color: Change the color of the text.
  • Text Shadow: Add a shadow effect to the text and customize the shadow, with options to adjust the shadow color, opacity, blur, and position.
Gutenberg Banner Block Description Styling Controls
Gutenberg Banner Block Description Styling Controls

Container Style Options

  • Box Shadow: Apply a shadow around the container.
  • Border: Define the border of the container.
  • Border Radius: Round the corners of the container.
  • Padding: Adjust the space between the container’s border and its contents.
Gutenberg Banner Block Container Styling Controls
Gutenberg Banner Block Container Styling Controls

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support
Facebook Group

Global Features

Help Center

Our Products

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks