Divider Shortcode Example

You may have noticed in WordPress that it can be a challenge to have a hard return (or worse yet: a double hard return or extra paragraph break) when using the WYSIWYG editor. WordPress is trying to be “helpful” and remove accidental double hard returns for you. However, sometimes you want that extra space and it can be a little tricky to get it in there. A “divider” adds a good chunk of space between content blocks, you could use it when you’d like two paragraph returns. Our divider shortcode  is perfect to use to break up content and draw the users eye to the next section. Each divider short code also has a spacer element included that allows you to adjust the spacing to obtain more or less around the divider.

10 Divider Styles

Normal

Get the code

Shadow

Get the code

Dashed

Get the code

Dotted

Get the code

Double Line

Get the code

Double Dashed

Get the code

Double Dotted

Get the code

Double Dotted – Under Development

You could use it to put a image as a divider, although this feature is under development.

Icon

You need select the style as “Icon” and click a icon from the a lot of icon list, then you will see it.

Get the code

Back to Top

Get the code

Custom Alignment

The alignment have the left and center, but not the right. This align feature only work on the Normal Style. Other styles are all align left no matter what you set.

Get the code

Custom Width

You could set the divider width by pixels or percent, like 300px or 50%.

Get the code

Custom Margin Top And Bottom

You could set the divider top margin or bottom nargin by pixels, like 0px, 25px, 50px.

Get the code

Custom Border Size

Any bolder size in pixels you could set to the divider, like 3px, 10px, 20px.
Notice: Some styles maybe can’t change the boeder size, like shadow style.

Get the code

Custom Color

There are unlimited border color you could use, but please notice there are some styles can only use the default color and can’t change, like icon style and shadow style.

Get the code