Gutenberg Image Separator Block Tutorial

Separate between two sections using Gutenberg Image Separator Block with lots of customization options. Add an image or icon and apply many creative ideas to website.

Check Gutenberg Image Separator Block demo page from here.

Gutenberg Image Separator Block
Gutenberg Image Separator Block


Image Separator Gutenberg Block Layout Settings

  1. Separator Type: Select separator type from icon or image.
    1. Icon: Select icon from font awesome or dash icons libraries.
    2. Image: Upload or select an image from WordPress media library.
  2. Width/Size: Set width/size for icon/image separator.
  3. Height: Set height for image separator.
  4. Image Fit: Select how should image will be resized in block.
  5. Gutter: Adjust the gutter % value to change the separator's vertical position. “-50 %” is the default and aligns the image to the middle.
  6. Alignment: Align image separator block to left, center or right.
  7. Link: Enable to assign link for separator block. Also, you can open link in a new tab.
  8. Mask Image Shape: Enable the mask image shape option and upload the image. It should be in PNG format.
    1. Mask Size: Contain or Cover the current image.
    2. Mask Position: Select the mask position on the image center center, top center, or bottom center.

Style Settings for Image Separator Gutenberg Block

Customize Premium Image Separator Block styling options for separator.

Gutenberg Image Separator Block Style Options
Style Gutenberg Image Separator Block

Separator Style for Gutenberg Image Separator Block

  1. Css Filter: Set css filter for image on normal and hover
  2. Border
  3. Advanced Border Radius: Set custom border radius.

Related Docs: