Menu
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.
Shape
Choose between:
Design
A preview area that opens our design picker popup.
Dividers are categorized into three styles:
[ Tips ]
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
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.
Icon Family
Switch between:
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).
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.
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%!
Align
Horizontally position the divider with this, when its width is less than what’s available.
Type
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.
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.
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.
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.
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.
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
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
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.
Typography
Text Shadow
Text Color (Normal/Hover)
Background Color (Normal/Hover)
Border Color (Normal/Hover)
Border Width
Border Radius
Shadow
Padding
By interacting with this site, entering your email, using SVG Divider, you agree to our Terms of Service and Privacy Policy.
Developed and published by Firsh, the creator of Justified Image Grid
© SVG Divider for Elementor – Be Stylish!
