Welcome to this guide on using the Gutenberg Banner Block by Premium Blocks—a flexible solution for showcasing key content on your WordPress site. Whether you’re highlighting important information or creating a clickable call to action, this block helps you capture attention effectively. With a wide range of customization options, you can choose from six distinct banner styles, adjust image height, and enable a persistent hover effect for continuous visibility. The Banner Block is also fully responsive, allowing you to hide descriptions on smaller screens to maintain a clean and focused layout.
Add your image using the Premium Banner Block for Gutenberg, then customize the styling options to seamlessly match your website’s design.
General Settings
Once you select the image, you will be able to adjust the following controls.
Image: A function to edit or delete the banner’s current image.
Banner Style: Choose from the dropdown menu the visual style of the banner.
Image Hover Effect: A dropdown menu that lets you choose from different effects that will activate when hovering over the image.
Always Hovered: Enable/Disable the hover effect on the banner active all the time, eliminating the need for mouse interaction to trigger it.
Height: This setting allows you to choose the banner height.
Custom Height: Set a custom height for the banner image.
TitleTag: This section allows you to set the HTML tag for the title, providing options from H1 to H6.
Align Content: Choose the horizontal alignment of the content within the banner.
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.
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.
No follow :Use to stop search engines from passing page authority to a linked destination.
Gutenberg Banner Block – General Settings
Gutenberg Banner Block Styling Controls
General and Title Settings
These tabs allow you to configure settings and title styles.
Overlay: Add a color overlay over the banner.
Hover Overlay: Add a hover overlay color 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.
Margin: Set the margin around the title.
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.
Box Shadow: Apply a shadow around the container.
Padding: Adjust the space between the container’s border and its contents.
Gutenberg Banner Block Container Styling Controls
Conclusion
In conclusion, the Gutenberg Banner Block empowers you to create visually impactful sections that draw attention without compromising layout clarity. With its flexible styling controls and responsive behavior, you can design banners that remain engaging across all devices. When used strategically, banners can guide users, emphasize key messages, and enhance the overall flow of your WordPress pages.
Need Further Help?
Have a question or need assistance? Premium Blocks 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.
