Elementor Divider Widget Tutorial

With Elementor Divider widget of Premium Addons Pro for Elementor, you can quickly and easily add stylish moving dividers to your WordPress site. This step-by-step tutorial will make this quick and easy for you and will help you to add divider or separator in Elementor.

Check the widget demo page to see real examples.

Requirements:

• 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

Divider

• 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.

Element

• 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.

Style

• Divider
• Element

Divider

• 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.

Element

• 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.

Container

• 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.

Conclusion

To sum up, Premium Divider Widget is a useful tool for WordPress users who want to add separator in Elementor pages.