Divider Widget Tutorial

Elementor Divider widget in Premium Addons Pro for Elementor plugin is a quick and easy way to add stylish animated dividers to your WordPress website. Whether you’re a beginner or a pro, our step-by-step tutorial will show you how to create eye-catching dividers in no time. Elevate your design with this powerful Elementor feature!

Check the widget demo page to see real examples.

Elementor Divider Widget got a facelift


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

Key features

  • Divider
  • Element


  • Left Separator: Choose to display or hide the left end of the divider.
  • Right Separator: Choose to display or hide the right end of the divider.
  • Style: Choose the style of the divider line, such as solid, dotted, or dashed.
  • Number of Lines: Select how many lines the divider will consist of, with ‘One’ being the current selection.
  • Link: Decide whether the divider will act as a clickable link.
  • Alignment: Set the divider’s horizontal alignment on the page, with options like left, center, or right alignment.
Divider settings controls for elementor divider widget
Elementor Divider Widget – Divider Settings


  • Element: Show or hide the element.
  • Text: Enter text associated with the element, which may be displayed as a label.
  • Element Type: Choose the type of element, like an icon or a shape, indicated by various symbols.
  • Icon: Enable the use of an icon within the element.
  • Draw Icon: Activate an animated drawing of the icon.
  • Path Thickness: Set the line thickness for the icon’s drawing animation.
  • Draw All Paths Together: Choose whether to animate all parts of the icon simultaneously.
  • Speed: Control the speed of the animation, with a note indicating that a larger value corresponds to a longer animation duration.
  • Loop: Enable the animation to repeat indefinitely.
  • Reverse: Reverse the animation playback.
  • End Point (%): Set the percentage at which the animation should end.
  • Yoyo Effect: Allow the animation to play forward and then backward, creating a yoyo-like effect.
  • Offset (%): Set the starting point of the animation in percentage.
  • Only Play on Hover: Make the animation play only when the mouse is hovered over the element.
Enable element option star as icon on Elementor editor
Elementor Divider Widget – Element Settings


  • Divider
  • Element


  • Left Width (%): Set the percentage width of the divider’s left segment.
  • Right Width (%): Configure the percentage width of the divider’s right segment.
  • Height: Determine the thickness of the divider in pixels.
  • Space Between Lines: Change the vertical spacing between multiple divider lines, if applicable, in pixels.
  • Left Color: Choose a color for the left part of the divider.
  • Right Color: Select a color for the right part of the divider.
Styling option for Premium Divider widget's divider
Elementor Divider Widget – Divider Style


  • Divider
    • Size: Adjust the size of the element, usually the thickness, in pixels.
    • Color: Select the primary color of the element.
    • Stroke Color: Choose the color of the element’s outline or stroke.
    • After Draw Fill Color: Choose the fill color that appears after any drawing animation is completed.
    • Hover Color: Set the color the element changes to when interacted with by a mouse hover.
  • Container
    • Background: Choose the background color or image for the container.
    • Box Shadow: Add a shadow effect to the container for depth or emphasis.
    • Border Type: Pick the style of the container’s border from options like solid, dashed, etc.
    • Border Radius: Modify the roundness of the container’s corners.
    • Advanced Border Radius: Enable or disable custom values for each corner’s radius.
    • Padding: Control the inner spacing of the container, with individual adjustments for top, right, bottom, and left.
    • Margin: Define the outer spacing of the container, with separate values for each side.
styling controls for both divider and container of the element
Elementor Divider Widget – Element Style


  • Rotate (degrees): Adjust the container’s orientation on the page, by degrees.
  • Container Width: Specify the width of the container as a percentage of its parent element.
  • Background Type: Choose the type of background for the container, such as color or image.
  • Padding: Set the space between the container’s content and its borders, with individual control for top, right, bottom, and left.
  • Margin: Define the outer space around the container, with individual adjustments for top, right, bottom, and left.
styling customizers for Elementor Divider widget by premium addons
Elementor Divider Widget – Container Style


Summing up, the Premium Divider Widget is an essential tool for WordPress users to enhance their site’s layout and design through Elementor. It’s user-friendly and effective for creating visually distinct sections.

Related Docs:

Download Now it's free!

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

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.