Tutorial & code

Separators

A collection of styled separators using the Beaver Builder HTML module.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Rows Nav 1

Video

Bb Vid Cs

Notes

Coming

See the Separators template in action.

Code

HTML

Simple Horizontal rule


<hr class="custom-hr">

Scalable Vector Graphic (SVGs)


<svg height="12" width="300">
<path d="M 0 6
C 0 6 140 6 150 0 
C 160 6 300 6 300 6 
C 300 6 160 6 150 12 
C 150 12 140 6 0 6
Z"/>
</svg>

CSS

.custom-hr{
 border-top: 8px double white; float: left; width: 100%;
 }

.custom-hr{
text-align: center;
border: 0;
}

.custom-hr::before{
content: "★★★★★";
font-size: 22px;
color: #ffc719;
top: -20px;
position: relative;
letter-spacing: 1px;
}

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment