Divider Widget Tutorial

Intro

Premium Divider Widget for Elementor allows you to create highly customizable dividers and separators with lots of customization options.

Click here to check Premium Divider Widget demo.

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

• Separator
• Divider Type

1. Separator

• Number of Lines: Select between one to five lines. The lines will display below each other.
• Style: Select a style for the lines. Choose between the following:
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
  • Shadow
  • Gradient
  • Curved bottom
  • Curved Top
  • Custom: Select or upload two images from the Media Library: One for the left side and one for the right side.
• Container Width: Adjust the container width in pixels, em or %.
• Link: Enable or disable a link. Enabling the link will make the whole divider clickable.
  • Select an existing page, or enter a custom URL.
  • Link Title: Add a link title.
• Alignment: Align the divider to the left, center or right.

2. Divider Type

• Show/Hide Icon: Show or hide the selected element.
• Icon/Text/Image: Select between showing an icon, a custom text or an image in the center of the divider between the lines.
• Icon: Select an icon from a list of Font Awesome icons.
• Image: Select or upload an image via the Media Library. If this option is selected, you can also select the image size:
  • Thumbnail – 150 x 150
  • Medium – 300 x 300
  • Medium Large – 768 x 0
  • Large – 1024 x 1024
  • Post-thumbnail – 1568 x 9999
  • Full
  • Custom: Enter values for width and height. You can crop the original image size to any custom size. You can also set a single value for height or width in order to keep the original size ratio.
• Text: Add text to the center of the separator widget.
  • HTML Tag: Select the tag that will be used to display the text. Choose between H1 or H6, where H1 is the largest and H6 is the smallest. The default is H3.
• Lottie Animation: Insert Lottie animation link.

---

Style

• Separator
• Container

1. Separator

Icon

• Size: Select the size of the icon in pixels, em or %.
• Color: Select color and opacity for the icon.
• Hover Color: Select a color that will be used when a visitor hovers over the icon.
• Background: Select a background color behind the icon.
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border radius will add circular corners to the container. You can adjust the border radius in pixels, % or em.
• Advanced Border Radius: Apply custom radius values for Elementor Divider widget separator icon. Get the radius value from here.
• Border Radius: Insert border radius values.
• Box Shadow: Add a shadow around the container. Select the color and the following settings:
  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset
• Text Shadow: Add a shadow behind the text, if a text has been included. Select from the following options:
  • Color
  • Horizontal position
  • Vertical position
  • Blur
• Margin: Margin is the space between the icon and the rest of the content. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the icon and the edge of it’s container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.

Separator

• Left Width: Select the width of the left line, in %.
• Right Width: Select the width of the right line, in %.
• Height: Select a height for both lines in pixels or em.
• Space: Between Lines -With this option you can change the vertical space between lines, if multiple lines are used. Adjust the space using pixels, em or %.
• Left Color: Select the color and opacity of the left line.
• Right Color: Select the color and opacity of the right line.

2. Container

• Background Type: -The available background type options are:
  • Color and opacity
  • Gradient
  • Image -Select or upload an image via the Media Library. If an image is selected, the following options become available:
  • Position:
    • Default
    • Top Left
    • Top Center
    • Top Right
    • Center Left
    • Center Center
    • Center Right
    • Bottom Left
    • Bottom Center
    • Bottom Right
    • Custom -Adjust the image’s X and Y positions using pixels, em % or vw.
  • Attachment -Default, Scroll or fixed.
  • Repeat:
    • Default
    • No-repeat
    • Repeat
    • Repeat-x
    • Repeat-y
  • Size:
    • Default
    • Auto
    • Cover
    • Contain
    • Custom -Adjust the image width using pixels, em % or vw.
• Margin: Margin is the space between the widget and the rest of the page content. Adjust the margin using pixels, em or %.
• Padding: Padding is the space between the divider and its container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.