1. Home
  2. Docs
  3. Image Elements
  4. Image Separator

Image Separator SA Element

Image Separator EA widget lets you add a cool image separator between Elementor Page Builder’s rows which can be used in many creative ideas while designing your website. Here in this tutorial, you’re going to learn how to use the Image Separator element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


How to Customize the Image Separator Element




Image Settings

⇒Image: Choose the separator image from the media library or upload the image from your system.

⇒Image Size: Customize the fixed size of the separator image from our pre-defined size type.

⇒Image Gutter (%): Set image gutter. -50% is the default value of the gutter. Increase the value to push the image outside or decrease to pull the image inside.

⇒Image Alignment: Set the image alignment either left, right or center.

⇒Link: Enable/disable the link on the image. Then, add a custom link or select an existing page link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link




⇒CSS Filters: Customize the CSS filters for the image separator. Manually edit the blur, brightness, contrast, saturation, and hue of the image.



Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Image Separator Element.

Was this article helpful to you? Yes No

How can we help?