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.
You’ll see that this plugin adds a new Elementor Widget.
[ Tips ]
To be faster just search for it with any of these words: ‘svg’, ‘divider’, ‘sde’.
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.
A preview area that opens our design picker popup.
Dividers are categorized into three styles:
[ Tips ]
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.
A few words to see on your ‘Classic’ divider. You can edit this live in the preview area.
The HTML wrapper for your text.
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).
A few words to see on the button of the ‘Classic’ divider. You can edit this live in the preview area.
Activate the hand cursor and point your button somewhere.
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.
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.
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.
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…
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%!
Horizontally position the divider with this, when its width is less than what’s available.
Choose how animations behave:
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.
Pick a color for the primary lines of the ‘Drawn’ shape or any line in the ‘Classic’ divider shape.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
These are similar to what you’d find on an Elementor Button Widget and are not our specialty settings.
Text Color (Normal/Hover)
Background Color (Normal/Hover)
Border Color (Normal/Hover)
Have a question?
Need more help? SVG Divider users enjoy premium support.