Image Separator Widget Tutorial

Intro

Premium Image Separator Widget for Elementor Page Builder adds the option to have an image as a separator between 2 sections. This decorative element comes with many customization options.

Click here to check Premium Image Separator Widget demo.

Key Features

  • Upload Your Image
  • Image Size
  • Image Gutter (%)
  • Image Alignment
  • Image Link

Image Settings

  • Image: Upload or select a custom image from the Media Library.
  • Image Size: Select the image size in pixels, em or %.
  • Image Gutter: Adjust the gutter % value to change the images vertical position. “-50 %” is the default and aligns the image to the middle. “0” value will align the top of the image with the top edge of the separators container.
  • Image Alignment: Align the image horizontally to the left, center, or right.
  • Link: Enable or disable the link option. When enabled, the following options are available:
    • Link/URL: Select a link to an existing page or enter a custom URL.
    • Image Hovering Title: Add a link title to the image that will be visible when a visitor hovers over the image.
    • Link Target: Select between blank, parent, self and top.
Blank: The link will be loaded in a new window.
Parent: The link will be loaded in the parent frame-set.
Self: The link will be loaded in the same frame as it was clicked.
Top: The link will be loaded in the full body of the window.
Image Separator Main Settings

Style

Image

CSS Filters: You can customize the image by adjusting the following settings:

  • Blur
  • Brightness
  • Contrast
  • Saturation
  • Hue
Image Separator CSS Filters