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.
- 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.
- Divider Type
- 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:
- 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
- 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.
- 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:
- Border Radius: Increasing the border radius will add circular corners to the container. You can adjust the border radius in pixels, % or em.
- Box Shadow: Add a shadow around the container. Select the color and the following settings:
- Horizontal position
- Vertical position
- Position: Outline or Inset
- Text Shadow: Add a shadow behind the text, if a text has been included. Select from the following options:
- Horizontal position
- Vertical position
- 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 %.
- 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.
- Background Type: -The available background type options are:
- Color and opacity
- Image -Select or upload an image via the Media Library. If an image is selected, the following options become available:
- 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.
- 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 %.