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’.
Width/Size: Adjust the size of the separator.
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.

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

Hover Color: This option allows you to set the color that the separator will change to when the cursor hovers over it.
Background: Choose a background fill for the separator.
Border Color: This option lets you set the color of the separator’s border.

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

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