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
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.
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 (%).
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.
