Documentation

Getting started is easy!

Requirements

  1. Same as Elementor
  2. Elementor 2.8+
  3. PHP 5.4+
  4. WordPress 5+

Installation

Upload the .ZIP you got from CodeCanyon to your WordPress Dashboard’s ‘Plugins >> Add New page’. Just like for any other premium plugin. There is no need to extract anything on your PC.

Adding a Divider - Where to Find?

You’ll see that this plugin adds a new Elementor Widget.

  1. Upon editing a Page/Post with Elementor, look on the ‘Elements tab’.
  2. Under the ‘General section’, find SVG Divider with a Hello icon.
  3. ‘Drag and drop’ it wherever you want and begin customizing it to your liking.

[ Tips ]

To be faster just search for it with any of these words: ‘svg’, ‘divider’, ‘sde’.

Settings Reference

Most settings are conditional, meaning that they are hidden until they become meaningful. Keep this in mind when looking for a setting. They are controlled by others via control conditions to reduce clutter and increase the chances you find only what you actually need.

Content tab >> Basics

Shape

Choose between:

  • ‘Drawn’, a true SVG Divider that is designed by us and has optional animations
  • ‘Classic’, one that has simpler lines and allows for a middle element

Design

A preview area that opens our design picker popup.

Dividers are categorized into three styles:

  • ‘Style A’ has simpler lines and motifs, like hearts and words
  • ‘Style B’ shows repeated patterns
  • ‘Style C’ is decorative, from sheet music to floral designs

[ Tips ]

  • Move the mouse over any design to play its animation.
  • The light grey part of a design is the optional glitter layer (see below).
  • When changing the design, the popup scrolls to and selects your previous choice, so you continue where you left off.
  • Double click or use the green button to insert an artwork.

Middle Element

Choose what to place between the lines of a ‘Classic’ divider. These cannot be placed onto the ‘Drawn’ shapes because they’d interfere with the design.

Content tab >> Basics >> Text

Content

A few words to see on your ‘Classic’ divider. You can edit this live in the preview area.

HTML Tag

The HTML wrapper for your text.

Content tab >> Basics >> Icon / Icon in the Button

Icon Family

Switch between:

  • Our bundled Let’s Go icon set that carries free and exclusive icons like travel and restaurant. It includes various non-UI icons that you might find interesting.
  • Font Awesome that came with Elementor.

Icon

It’s a preview area and a launcher for our or Elementor’s icon picker. When working with Let’s Go icons, the popup should be familiar from the ‘Design’ setting. Although, in this version, you can search in the name of our icons. You’ll see the number of results on each tab. It works the same in every other way.

The icon can stand alone or reside inside the button (see below).

Content tab >> Basics >> Button

Button Text

A few words to see on the button of the ‘Classic’ divider. You can edit this live in the preview area.

Link

Activate the hand cursor and point your button somewhere.

Inner Icon

In which position should an icon show up, inside the button. It’s the four sides of the text. If you use no text, use left or right.

Content tab >> Basics >> Dimensions

Max Width

Set a maximum width for any type of divider. For the ‘Drawn’ shapes, the native width is 960. To let the divider grow larger, increase this setting. To crop or make it smaller, decrease it. With this, you can crop to the middle parts of a design to make them simpler or reduce them to an icon.

Gap

Adds whitespace to the top and bottom of a divider in addition to space it usually takes up. In some scenarios, such as over 960 ‘Max Width’ or using thick lines, it’s necessary to increase this to avoid clipping the top and bottom of the SVG lines. It’s normal, but the divider is calibrated for a specific size and line width in mind.

Allow Cropping

With this, decreasing the ‘Max Width’ below 960 will crop the artworks instead of scaling them tiny. It opens up the following settings so you can still adjust their size…

Scale %

Adjust the size of your ‘Drawn’ divider based on the native 960-pixel width as a reference. Since everything is a vector, no pixelation will occur above 100%, of course.

Scale the Cropped

You’ll only see the effect of this setting when you set ‘Max Width’ below 960 and move the ‘Scale’ from 100%!

  • When using this, the ‘Max Width’ number is only useful for cropping, as it’ll also scale with the %. The cropped SVG scales as a complete unit.
  • Otherwise, the system obeys the ‘Max Width’ number and scale the SVG behind a window created by it. This makes cropping less precise and incidental.

Align

Horizontally position the divider with this, when its width is less than what’s available.

Content tab >> Basics >> Animation Effects

Type

Choose how animations behave:

  • ‘Static/Stopped’: Disables all of our line animations, the divider will act like an image. This is also what older browsers fall back to.
  • ‘Reveal then stop’: Animate lines as usual, but when everything is revealed, stop all movement.
  • ‘Reveal then Glitter Loop’: If you are using the Glitter, you’ll see that they linger on like dust particles in a sunbeam. This is the full effect that continues indefinitely after the usual reveal.

Animation Speed (seconds)

The native timing of our animations is 3 seconds, but it doesn’t mean you can’t re-sync them. However, the Glitter loop is unaffected by this setting, as it’s designed to be subtle and has a fixed speed. This way, speeding up the reveal won’t cause annoying flickers for the Glitter.

Animation Delay (ms)

Animations are automatically lazy-loaded, meaning they only start when scrolled into view. You can further delay this, though.

Style tab >> Look & Feel

Line Color

Pick a color for the primary lines of the ‘Drawn’ shape or any line in the ‘Classic’ divider shape.

Line Width

The primary line width. The native line width of the ‘Drawn’ dividers is 3. Your mileage may vary by changing this on specific designs, as small objects will inevitably turn into solid shapes. Increase the ‘Gap’ setting if you experience clipping from the Top/Bottom.

Style tab >> Look & Feel >> Drawn

Flip

Change the orientation of the divider on any axis (mirroring). This also carries over to the animations, so for RTL sites, this could be of interest.

Style tab >> Look & Feel >> Shiny Extras

Glitter

Toggle the additional decorative layer, whose animations can linger on. If you feel that some designs are too much, consider trying a more minimal version by turning this off.

Glitter Color

Color this layer separately. If their looping animation is too strong, instead of disabling it, you can decrease any distracting effect by making the Glitter color more subtle.

Glitter Thickness

Change the prominence of the Glitter lines and objects. The native line width for the Glitters is 2. Decreasing this will make dots more subtle dust-like.

Style tab >> Look & Feel >> Classic

Line Style

Choose between single, double, or dashed lines. These are not what you normally get with CSS borders! See below the ‘Space Between Lines’, or the ‘Dash Length’ and ‘Gap Length’ settings.

Space Between Lines

Only when using double lines, adjust the space between them. This goes hand in hand with the ‘Line Width’ setting.

Dash Length

For dashed lines, this is the length of the visible little line segments that repeat. ‘Line Width’ is added to this setting – this prevents you from making barcodes, but lets you quickly create squares or dots.

Gap Length

Also for dashed lines, this is the gap between the dashes. When the ‘Line Width’ is thicker than 1, this number is not taken literally, so you’ll need to increase it by at least 1 over the ‘Line Width’. These settings manipulate the stroke-dasharray SVG property behind the scenes.

Line Shape

Use this to round the dashes to create dots when the ‘Line Width’ is thick enough. With an increased ‘Dash Length’ too, you’ll create pills. Just play with it! This uses the stroke-linecap SVG property behind the scenes.

Middle Element Spacing

The whitespace from the two sides of the middle element, towards the lines. When the divider consists of only two components (see next setting), this is only applied in one direction. This setting can go negative so you can pull the lines into or behind your middle element if you wish to do so.

Middle Element Position

Compatible with, but distinct from the ‘Align’ setting from the ‘Content tab’, this makes the ‘Classic’ divider one-sided. That is only one line and only one middle element, and no line on its other side.

Style tab >> Text Style

These collectively control the looks of the text as a middle element. The inputs are fundamentally the same as found in various Elementor Widgets with supplemental text and aren’t customized by us.

Typography

Text Shadow

Text Color

Style tab >> Icon Style

These adjust the icon in a middle element, either standalone or in a button, and regardless of the ‘Icon Family’ (Let’s Go vs. Font Awesome). The controls are the most useful ones from various Elementor Widgets, such as Icon or CTA, and their behavior isn’t altered.

View

Shape

Primary Color

Secondary Color

Icon Size

Icon Line Width

Only for the Let’s Go Icon Family, this controls the thickness of our icons. It’s not available for Font Awesome as they are drawn differently.

Icon Padding

Border Width

Border Radius

Style tab >> Icon Style >> Icon in the Button

Space Between Icon and Text

This adjusts whitespace intelligently, without requiring you to change a margin/padding setting in a specific direction. When you move the icon to the other side of the text (inside the button), this setting will know where to add the space.

Style tab >> Button Style

These are similar to what you’d find on an Elementor Button Widget and are not our specialty settings.

Typography

Text Shadow

Text Color (Normal/Hover)

Background Color (Normal/Hover)

Border Color (Normal/Hover)

Border Width

Border Radius

Shadow

Padding

Help Center

Have a question?
Need clarification?

Support Request

Need more help? SVG Divider users enjoy premium support.

Your Question

Have you got a question that is not answered in our FAQs or Pre-sales Questions? Then please feel free to ask it here.

Please do not use this form for support requests. For existing customers, the Documentation Page is here.