Tutorial & code

HomePage Framework One

An experimental wireframe for building Beaver Builder homepages. It aims to be a guide for gathering content, setting up brand assets and layout.

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

Template Location

Wireframetemplates

Video

Notes

This is part of a longer term ambition to have Beaver Junction’s collection of templates combined with Wireframes to make the building of most pages much quicker and done better. Much is likely to change with this idea over time, but the problems it is trying to solve are that:

  1. Predesigned templates are beautiful, but styled to imagined content.  After removing the non relevant sections they lose the design integrity.
  2. Templates (even from the same authors) tend not to be styled consistently because page builders offer various places to adds styles.
  3. Page Builder make it too easy for us to add more code than needed. A system can reduce that,
  4. Beaver Builder does not have global styling options like some page builders.  A good thing because,
    – WordPress always had global styles. You can’t run WP without a theme stylesheet.
    – Global page builder styles means increased bloat in you site’s database.
    – It further locks you in to a 3rd party system.
    – It will generally produce over qualified (poorer) code.
    – It still is not a time saver unless you have a system.

Of course, while code is seen  (incorrectly I think) as more difficult than learning options in page builder these problems will grow. Presently the market strongly favors DIY non-coding solutions. It’s customers are years from realizing the problems that come with them.

 

See the HomePage Framework One template in action.

Code

CSS

/*******************************************************************
COLOR PALETTE

Headers ---------------------- #111 (darker gray) 
Body text -------------------- #333 (dark grey) 
Background:------------------- #f7f7f7 (off white)
Alternate BG:----------------- #fff (white )
Button & links:--------------- #000 (black)
Button & Links Hover:--------- #555 (dark grey)
Accent:---------------------- #F00 (red)
2nd accent:------------------ #eee (grey)

From 
https://coolors.co/ff0000-333333-eeeeee-f7f7f7-ffffff
********************************************************************/


/*******************************************************************
GLOBAL PAGE STYLES 
********************************************************************/
BODY .fl-builder-content {
background-color: #fff;
font-family:"Lato", Sans-serif; /*The font and weight needs adding to the page*/
font-size: 18px;
font-weight: 400;
line-height: 1.6;
}

.fl-builder-content H1,.fl-builder-content H2,.fl-builder-content H3,
.fl-builder-content H4,.fl-builder-content H5,.fl-builder-content H6 {
font-family: "Dosis", Sans-Serif; /*The font and weight needs adding to the page*/
line-height: 1.6;
font-style:normal;
text-transform:none;
color: #111;
}

.fl-builder-content H1 {font-size: 42px;}
.fl-builder-content H2 {font-size: 36px;}
.fl-builder-content H3 {font-size: 28px; font-weight:600; line-height: 1.2;}
.fl-builder-content H4 {font-size: 24px;}
.fl-builder-content H5 {font-size: 20px;}

.fl-builder-content p { color:#333;}
.fl-builder-content UL LI {color:#444;}
.fl-builder-content a {font-weight:500; color: #000;}
.fl-builder-content a:hover {font-weight:500; color: #555;}
.fl-builder-content a:active {position: relative;top: 1px;} /*button like jump on all links*/

/*BUTTONS */

.fl-module-content.fl-node-content .fl-button-wrap A.fl-button{
background-color: #000;
font-weight:400;
border-radius:0;
border: 0;
}

.fl-module-content .fl-button-wrap A.fl-button SPAN.fl-button-text {color: #fff;} /*over qualified to work on all themes */
.fl-module-content.fl-node-content .fl-button-wrap A.fl-button:hover {
font-weight:400;
background-color: #555;
border: 0;
}

/*OTHER GLOBALS */
.fl-module-content .fl-icon {color: #444;}
.fl-module-content ::selection {background-color: #f00; color: #fff}

/*******************************************************************
HEADER ROW
********************************************************************/
.header-row {
background-color: #f00;
}
.header-column-two UL
{
float: right;
}
.header-column-two LI
{
padding: 15px;
float: left;
}
.header-column-two .fl-widget a { /* widget menu*/
color: #111;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.header-column-two .fl-widget a:hover {
color: #fff;
}

.fl-module-content .menu-cta a{ /*button like menu link in the header - need the class selector adding*/
background-color: #000;
color:#fff;
padding:10px 30px;
border-radius:0;
}


/*******************************************************************
HERO ROW
********************************************************************/
.hero-row {background-color: #f00;}

.hero-row .hero-column-two {
background-color: #111;
}

.hero-row H1.fl-heading .fl-heading-text{
color: #fff;
font-weight: 900;
font-size: 60px;
}

.hero-row H5.fl-heading .fl-heading-text {
color: #111;
font-size: 24px;
font-weight:700;
text-transform: uppercase;
}

.hero-row p{
color: #fff;
}

.hero-row .hero-column-one a.fl-button {
background-color: #000;
}


/*******************************************************************
CONTENT ROW 
********************************************************************/
.content-row{
background-color: #fff;
}

/*******************************************************************
SECOND CONTENT ROW 
********************************************************************/
.second-content-row {background-color:inherit;}

.second-content-column-one, .second-content-column-two,
.second-content-column-three, .second-content-column-four{
background-color: inherit;
}

.second-content-column-three .fl-col-content {background-color:#eee;}
.second-content-column-four .fl-col-content {background-color:#f00;}
.second-content-column-four .fl-col-content h3 {color:#fff;}


/*******************************************************************
BENEFITS ROW
********************************************************************/
.benefit-row {background-color:#f7f7f7;}

.benefit-column-one .fl-col-content, .benefit-column-two .fl-col-content, 
.benefit-column-three .fl-col-content, .benefit-column-four .fl-col-content {
background-color:#fff;
box-shadow: 0 15px 50px -13px rgba(0, 0, 0, 0.5); /* Horizontal/Vertical/Blur/Spread/Color */
}


/*******************************************************************
FEATURES ROW
********************************************************************/
.feature-row {background-color: #f7f7f7;}

.feature-column-one .fl-col-content, .feature-column-two .fl-col-content,
.feature-column-three .fl-col-content, .feature-column-four .fl-col-content{
border: 1px solid #ccc;
background-color: #eee;
}


/*
.feature-column-two .fl-col-content{background-color:white;}
.feature-column-two .fl-col-content h3 {color: coral;}
.feature-column-two .fl-col-content p {color: gray;}
.feature-column-two .fl-col-content ul li {color: black;}
*/

/*******************************************************************
TESTIMONIALS ROW
********************************************************************/

.testimonial-row{
background-color: #fff;
}
.testimonial-column-one .fl-col-content, .testimonial-column-two .fl-col-content,
.testimonial-column-three .fl-col-content, .testimonial-column-four .fl-col-content{
background-color: #eee;
}

.testimonial-column img{
border-radius: 100%;
}

/*******************************************************************
SOCIAL PROOF ROW
********************************************************************/
.sp-row {background-color: #f7f7f7;}


/*******************************************************************
CALL TO ACTION ROW
********************************************************************/
.cta-row {
background-color: #fff;
}

.cta-column-one .fl-col-content {
background-color: #f7f7f7;
}
/*******************************************************************
CONTACT
********************************************************************/
.contact-row { background-color: #f7f7f7;} 
.contact-column .fl-col-content{
border-right: 1px solid black;
}

/*******************************************************************
FOOTER
********************************************************************/
.footer-row {
background-color: #f00;
font-size:14px;
}
.footer-column .fl-heading {
color: #fff;
}

.footer-row .social-icons .fa{
background-color: #000;
}

.footer-row .social-icons .fa:hover{
background-color: #000;
color: #f00;
}

/*******************************************************************
RESPONSIVE (MEDIA QUERIES)
********************************************************************/

@media (max-width: 992px)
{
.header-column-two .fl-widget{
display: flex;
align-items: center;
justify-content: center;
}
}

@media (max-width: 768px)
{
.footer-row {color:inherit;}
}

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