Tutorial & code

Fancy Headings

A collection of CSS styled headings using the Beaver Builder heading module.

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

Template Location

Bj Custom Rows Nav 1

Video

Notes

Static headings with CSS. Effects with clipped images, outline strokes and fills and gradients are not supported by older browsers.
Animated and rotated text effects to come.

See the Fancy Headings template in action.

Code

CSS

/* I LOVE STRAWBERIES - Works on lastest version of Chrome/Edge/Safari, but text and bg image is fixed with FireFox*/

.fl-module-content {
background: black; /* fallback color */
background-image: url(https://designs.beaverjunction.com/wp-content/uploads/stencil.500-square-2.jpg); 
/* images on your domain only need this part of the URL: /wp-content/uploads/stencil.500-square-2.jpg) */
background-attachment: fixed;
background-repeat: repeat; /* no-repeat, repeat-x, repeat-y,*/
background-size: auto; /* auto, length, cover, contain, initial, inherit;*/
background-position:center; /* left top, left center, left bottom, right top, right center, right bottom ,center top, center center, center,bottom also 50% 50% etc*/
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
}
 /* OUTLINE HEADING This only shows when there is browser support for it (https://caniuse.com/?search=-webkit-text-stroke)*/
 @supports(-webkit-text-stroke: 4px #fff) {
.fl-module-content { 
-webkit-text-stroke: 4px #fff;
-webkit-text-fill-color: transparent; }
 }
/* TRANSPARENT HEADING*/
 .fl-module-content {
 background-color: white; background-color: rgba(255,255,255,1);
 mix-blend-mode: screen; padding: 50px 0px; }

 /* MY SPLIT COLOR HEADING 
The HTML reads "My Split <em>color heading</em>Heading". Can be added with BB inline editor by selecting "i". */
 em {
 font-style: normal;
 color: #FF0000 !important; /* only leave !important here is you have set the header color in the module*/ } 

/* MY SPLIT STYLES HEADING The HTML reads "My Split <em>color heading</em>Heading".
 Can be added with BB inline editor by selecting "i". */
 em {
 font-style: normal; 
color: #89D3E0 !important;
 font-family: "Arial Black", Gadget, sans-serif;
 /* Need to use a font that is already used or websafe fonts:
 https://www.w3schools.com/cssref/css_websafe_fonts.asp*/
 font-size: 80px; 
text-transform: uppercase;
 font-weight: bold; }
 /* My Color Background Heading*/
 span {
 font-style: normal;
 background: #FF0000;
 padding: 6px 6px;
 border-radius: 2px;
 margin-right: 2px; }

/* MY GRADIENT HEADING
Boundless fun can be had here https://cssgradient.io */

.fl-module-content {
background: rgb(195,34,34);
background: linear-gradient(0deg, rgba(195,34,34,1) 0%, rgba(253,200,45,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* My Highlighted Header*/
em {
background: linear-gradient(transparent 70%, yellow 30%); /*Adjust the thickness by changing yellow 30%.Make the numbers = 100% */
font-style: normal; /*stops the (usually italic font) em style being applied */
}

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