Gutenberg Image Separator Block Tutorial

Introduction

Welcome to our guide on Gutenberg Image Separator Block by Premium Blocks. This guide is for our customers who are looking to finely tune their web page’s layout with a touch of creativity. We’re going to walk you through the dynamic functionalities and detailed settings of this handy tool. Whether you’re aiming to craft custom separators using images or icons, we’ve got you covered. Our guide is laid out clearly, making it easy to apply these features in your web design projects, no matter how complex they might be.

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 Image Separator Block?

Add your separator with our Premium Image Separator Block, 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.

Type: Choose the kind of separator. Options include ‘Icon’, ‘Image’, ‘SVG’, and ‘Lottie’.
Select Icon: Choose a custom icon.
Width/Size: Adjust the size of the separator.
Image Fit: Select how should image will be resized to fit its container.
Mask Image Shape: enable the mask image shape.
Image: Upload mask image.
Mask Size: Select the mask size value from contain or cover.
Mask Position: Select the mask position value.
Gutter (%): Modify the vertical spacing around the separator.
Alignment: Choose the horizontal alignment of the separator.
Link: Enable this option allows the separator to act as a clickable link.
URL: Enter the web address you want the separator to link to.
Open link in New Tab: Toggle this to decide whether the linked page should open in a new tab or the current one.
No Follow : Toggle to enable/disable rel=”nofollow” on the heading link , to control SEO impact. Use for untrusted or low-value destinations.

Image Separator Block for Gutenberg Editor

Gutenberg Image Separator Block Styling Controls

These tabs allow you to configure settings for two different states Normal & Hover.

Separator Style

CSS Filters: Customize the filters on the separator for normal or hover states.
Width: Slider and input field to set the width of the separator.
Height: Slider and input field to set the height of the separator.
Color: Color picker to select the color of the separator icon for normal or hover states.
Background Type: Choose between a solid color, gradient, or image background for normal or hover states.
Border: Define the border style around the separator.
Border Radius: Customize the roundness of the separator’s corners.

Gutenberg Image Separator Block Styling Controls for normal and hover status — Gutenberg Image Separator Block Styling Controls

Margin: Adjust the space outside the Image Separator block’s border on Gutenberg’s editor.
Padding: Configure the space inside the Premium Image Separator block’s border.
Advanced Border Radius: This option allows you to apply custom values to the border-radius.

gutenberg image separator block margin, padding, and border radius controls — Gutenberg Image Separator Block Margin & Padding Controls

Conclusion

In conclusion, the Gutenberg Image Separator Block gives you a creative way to structure your content and enhance visual flow across your pages. With flexible options for using images or icons and fine-tuning their appearance, you can design separators that feel both functional and visually engaging. When used thoughtfully, this block helps break up content, improve readability, and add a polished touch to your overall page layout.

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.

Contact Support

Facebook Group