Tutorial & code


A collection of styled separators (horizontal rules) using the Beaver Builder HTML module. Helps Beaver Builder Lite user who do not have the Separator module.

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

Template Location

Bj Custom Rows Nav 1



Mostly of use to Beaver Builder Lite users who do not have a Separator Module.

See the Separators template in action.



<hr class="custom-hr">

This for the one with text included:

<hr class=”custom-hr” data-content=”AND”><p>And</p>

For other see here:


Simple Horizontal Rule (same as Beaver Builders separator module)

border-top: 4px solid #ffffff; /* thickness/style/color/ Suitable styles: solid, dotted, dashed & double */
margin:0 auto; /* align left or right replace with: float: left; */
width: 50%; /*change horizontal width*/

hr{border:0;}/*for themes that have not reset styles*/

This it the CSS for the example that include text.
/* This uses (:before or :after). 
Because <hr>s are no-content style elements (they have no closing tag) it is not supposed to work.
It does, and perhaps will always, but if concerned don't use.*/

.custom-hr {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: center;
height: 15px;
opacity: 1;

.custom-hr:before {
content: "";
background: linear-gradient(to right, transparent, black, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 3px;
.custom-hr:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 0.5em;
line-height: 1em;
color: black;
font-size: 23px;
background-color: #f2f2f2;

margin: 0;
font-size: 0;
padding: 0;

You can support my work by buying the tools I use through my affiliate links:

Exclusive 25% Off These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"


WP Rocket | ShortPixel | Beaver Builder |

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.


  1. Jamie Caporaso on December 16, 2020 at 10:30 pm

    i’m perplexed. Started using beaver junction today. I was using Seperators and had a nice line with a glow. Something must have change as the glow is not gone. I tried re-adding the seperator but now luck. Any thoughts on what might have happened?

  2. David Waumsley on December 17, 2020 at 6:18 am

    Hi Jamie,

    Can you share the url of where you have added it so I can look at the issue.

Leave a Comment