Image Separator Widget Tutorial

Intro

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

Click here to check Premium Image Separator Widget demo.

Requirements:

  • You will need Premium Addons free plugin installed and activated on your website.
  • Also, make sure that this widget/feature/addon is enabled so you can find it in the Elementor editor
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Image Separator Widget for Elementor

Elementor Image Separator Widget
Elementor Image Separator Widget

Key Features

  • Separator Type
  • Width/Size
  • Gutter (%)
  • Alignment
  • Link

Image Settings

  • Separator Type: Select separator type: icon, lottie animation and image.
  • Icon:
    • Select an Icon: Select an icon from font awesome library.
  • Image:
    • Image: Upload separator image.
    • Image Fit: Select how should image will be resized to fit its container.
  • Lottie Animation:
    • Animation JSON URL: Insert the JSON URL.
    • Loop: Make the Lottie animation run forever.
    • Reverse: Make the Lottie animation run backward.
    • Only Play on Hover: Play the animation only on hover.
  • Width/Size: Select the separator size in pixels, em or %.
  • Gutter: Adjust the gutter % value to change the separator vertical position. “-50 %” is the default and aligns the image to the middle.
  • Alignment: Align the separator 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 Title: Add a link title to the separator that will be visible when a visitor hovers over the image.
    • Link Target: Select between blank, parent, self and top.
Elementor Image Separator Widget Main Settings
Elementor Image Separator Main Settings

Style

Icon

  • Color: Pick a color for icon.
  • Hover Color: Pick on hover color for icon.
  • Background Color: Set a background color for icon.
  • Hover Background Color: Set on hover background color for icon.
  • Border Radius: Set Border Radius for separator using pixels (PX), percentage (%), or em (EM).
  • Icon Shadow: Adjust icon shadow using the following controls:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
  • Padding: Creates space around the separator in Pixel (px), Em (em), or Percentage (%).
Elementor Image Separator Widget Main Settings
Style Icon for Elementor Image Separator

Image / Lottie Animation

  • CSS Filters: Customize separator by adjusting the following settings:
    • Blur
    • Brightness
    • Contrast
    • Saturation
    • Hue
  • Hover CSS Filters: Customize separator by adjusting the following settings on hover:
    • Blur
    • Brightness
    • Contrast
    • Saturation
    • Hue
  • Border Radius: Set Border Radius for separator using pixels (PX), percentage (%), or em (EM).
  • Advanced Border Radius: Apply custom radius values for Elementor Image separator widget. Get the radius value from here.
  • Border Radius: Insert border radius values.
Style Image for Elementor Image Separator
Style Image for Elementor Image Separator

Related Docs:

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.