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.
Add your separator with our Premium Banner Block for Gutenberg, then customize the styling options to match your website’s aesthetic.
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.
TitleHTML Tag: This section allows you to set the HTML tag for the title, providing options from H1 to H6.
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.
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 Typography: Controls for setting the font style and size of the banner title.
Title Text Color: Change the color of the title text.
Title Text Shadow: Add a shadow to the title text for depth or emphasis.
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.
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
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.
