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.

VIDEO

CODE

Minimum BB plugin required: Lite Saved under: Wireframes
Skill level: Advanced Contributor: David Waumsley

Template Location

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:

Predesigned templates are beautiful, but styled to imagined content. After removing the non relevant sections they lose the design integrity.
Templates (even from the same authors) tend not to be styled consistently because page builders offer various places to adds styles.
Page Builder make it too easy for us to add more code than needed. A system can reduce that,
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.

Example

Code

CSS

/*******************************************************************
COLOR PALETTE
********************************************************************
Headers ---------------------- #111111 (darker gray) 
Body text -------------------- #333333 (dark grey) 
Background:------------------- #ffffff (white)
Alternate BG:----------------- #f7f7f7 (off white )
Button & links:--------------- #000000 (black)
Button & Links Hover:--------- #555555 (dark grey)
Accent:---------------------- #FF0000 (red)
2nd accent:------------------ #eeeeee (grey)

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




/*******************************************************************
GLOBAL PAGE STYLES 
********************************************************************/

/*Fonts------------------------------------------- */

HTML {font-size:62.5%;} /* this resets the rem value of 16px so that 1rem = 10px */

HTML BODY {
background-color: #eee;
font-family:"Lato", Sans-serif; /*The font and weight needs adding to the page*/
font-size: 1.6rem;
font-weight: 400;
line-height: 1.6;
/*Below sets where the page stops being fluid and centers content*/
box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1); /* Horizontal/Vertical/Blur/Spread/Color */
max-width:1920px;
margin: 0 auto;
}

.fl-builder-content{background-color:#ffffff;}

.fl-builder-content .fl-module.fl-module-heading H1, .fl-builder-content .fl-module.fl-module-heading H2,
.fl-builder-content .fl-module.fl-module-heading H3, .fl-builder-content .fl-module.fl-module-heading H4,
.fl-builder-content .fl-module.fl-module-heading H5, .fl-builder-content .fl-module.fl-module-heading H6 {
font-family: "Dosis", Sans-Serif; /*The font and weight needs adding to the page*/
font-weight: 600;
font-style:normal;
text-transform:none;
color: #111111;
margin-bottom: 1.1rem !important;
}




.fl-builder-content H1 {font-size: 3.6rem; line-height: 1.6; /* color:#000000; font-weight:600; */}
.fl-builder-content H2 {font-size: 3rem; line-height: 1.6; /* color:#000000; font-weight:600; */}
.fl-builder-content H3 {font-size: 2.4rem; line-height: 1.6; /* color:#000000; font-weight:600; */}
.fl-builder-content H4 {font-size: 2rem; line-height: 1.6; /* color:#000000; font-weight:600; */}
.fl-builder-content H5 {font-size: 1.8rem; line-height: 1.6; /* color:#000000; font-weight:600; */}
.fl-builder-content H6 {font-size: 1.6rem; line-height: 1.6; /* color:#000000; font-weight:600; */}

/* Extra font styles as needed
letter-spacing:1px; text-shadow: 1px 1px rgba(0,0,0,0.5);*/


.fl-builder-content p { color:#333333; margin-bottom:2rem;}
.fl-builder-content UL LI {color:#000000;}
.fl-builder-content a {font-weight:500; color: #FF0000;}
.fl-builder-content a:hover {font-weight:500; color: #555555;}
.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: #000000;
font-weight:400;
border-radius:0;
padding:1.6rem 3rem;
border: 0;
text-transform: uppercase;
}

.fl-module-content .fl-button-wrap A.fl-button SPAN.fl-button-text {color: #ffffff; font-size:1.4rem;} /*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: #555555;
border: 0;
}

/*OTHER GLOBALS------------------------------------ */

.fl-module-content .fl-icon {color: #444444;}
.fl-module-content ::selection {background-color: #ff0000; color: #ffffff}

/*Lists - character codes: https://www.toptal.com/designers/htmlarrows/symbols */

.custom-list .fl-module-content UL { list-style: none;
padding: 0;
margin: 0 0 0 2.2rem;
text-indent: -3rem;
line-height: 1;
}
.custom-list .fl-module-content LI::before {
content: "•";
margin-right: 1.2rem;
font-size: 3.5rem;
position: relative;
top: 0.5rem;
}

.custom-hr{
border-top: 1px solid #000;
width: 100%;
}





/*******************************************************************
HEADER ROW
********************************************************************/
.header-row {
background-color: #ff0000;}

/* Header Column----------------------------------------*/

.header-row .header-column-one {background-color: inherit;}
.header-row .header-column-two {background-color: #ffffff;}


/* Header Modules ---------------------------------------*/

.header-column-two .fl-widget a { /* widget menu*/
color: #111111;
font-size: 1.2rem;
font-weight: 600;
list-style: none;
text-transform: uppercase;
}

.header-column-two UL {float: right;}
.header-column-two LI{
padding: .6rem;
float: left;
list-style: none;
}

.header-column-two .fl-widget a:hover {color: #FF0000; text-decoration:none;}

.fl-module-content .menu-cta a{ /*button like menu link in the header - need the class selector adding*/
background-color: #000000;
color:#ffffff;
padding: .6rem 2.2rem;
border-radius:0;
}


/*******************************************************************
HERO ROW
********************************************************************/

/* Hero Column-----------------------------------------*/

.hero-row {background-color: #ff0000;}
.hero-row .hero-column-one P {color: #ffffff;}
.hero-row .hero-column-one UL LI {color: #ffffff;}

.hero-row .hero-column-one {background-color: #ff0000;}
.hero-row .hero-column-two {background-color: #ffffff;}

/* Hero Modules ---------------------------------------*/

.hero-row H5.fl-heading .fl-heading-text {
color: #111111;
font-weight:700;
text-transform: uppercase;
}

.hero-row H1.fl-heading .fl-heading-text{
color: #ffffff;
font-weight: 900;
font-size: 5rem;
letter-spacing: 0.1rem;
}

.hero-blurb p {font-size:2rem;}

/*******************************************************************
CONTENT ROW 
********************************************************************/

.content-row{
background-color: #ffffff;
}


/* Content Column--------------------------------------*/

/* Content Modules -----------------------------------*/


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

/* Second Content Column----------------------------------*/

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

.second-content-column-three {background-color:#ffffff;}
.second-content-column-four {background-color:#ff0000;}


/* Second Content Modules-------------------------------*/


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

/*
.benefit-row h2 {color: #ffffff;}
.benefit-row h3 {color: #ffffff;}
.benefit-row p {color: #ffffff;}
*/

/* Benefit Column--------------------------------*/


.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:#ffffff;
box-shadow: 0 15px 50px -13px rgba(0, 0, 0, 0.5); /* Horizontal/Vertical/Blur/Spread/Color */
border-radius:0;
}
.benefit-row .fl-col-content img {border-radius:0;}

/* Benefit modules--------------------------------*/

.benefit-row .fl-col-content .bottom-aligned{
align-content: flex-end;
flex: 1 1 0;
display: grid;
}

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

/*
.feature-row h2 {color: #ffffff;}
.feature-row h3 {color: #ffffff;}
.feature-row p {color: #ffffff;}
*/

/* Feature Column-------------------------------------*/
.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 #cccccc;
background-color: #eeeeee;
}


/*
.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;}
*/

/* Feature modules-------------------------------------*/

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

.testimonial-row{background-color: #ffffff;}

/* Testimonial Column----------------------------------*/

.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: #eeeeee;
}

.testimonial-row .fl-col-content img{border-radius: 100%;}

/* Feature modules-----------------------------------*/


/*******************************************************************
TEAM ROW
********************************************************************/

.team-row{background-color: #ff0000;}

/* Team Column----------------------------------*/

.team-column-one .fl-col-content, .team-column-two .fl-col-content,
.team-column-three .fl-col-content, .team-column-four .fl-col-content,
.team-column-five .fl-col-content, .team-column-six .fl-col-content{
background-color: #eeeeee;
}

.team-row .fl-col-content img{border-radius: 100%;}

/* Feature modules-----------------------------------*/

.team-row .fl-col-content h5 {text-align:center;}

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

/* SP Column------------------------------------------*/

/* SP Module------------------------------------------*/

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

/* CTA Column------------------------------------------*/
.cta-column-one .fl-col-content {
background-color: #f7f7f7;

/* CTA Module------------------------------------------*/
}
/*******************************************************************
CONTACT
********************************************************************/
.contact-row { background-color: #f7f7f7;}

/* Contact Column---------------------------------------*/

.contact-column .fl-col-content{
border-right: 1px solid black;
}

/* Contact Modules---------------------------------------*/

/*******************************************************************
FOOTER
********************************************************************/
.footer-row {background-color: #ff0000;}

.footer-row P {font-size: 1.4rem;}

/* Footer Column---------------------------------------*/ 

/* Footer Modules------------------------------------*/ 
.footer-column .fl-heading { color: #fff;}

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

.footer-row .social-icons .fa:hover{background-color: #000000; color: #ff0000;}

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

/*-Medium devices-------------------------------------*/

@media (max-width: 992px){

/*global setting*/

/*header-row*/
.header-column-two .fl-widget{
display: flex;
align-items: center;
justify-content: center;
}
}







@media (min-width: 992px){

/*global setting*/

HTML {font-size:72%;} 

/*team-row*/
.team-column-one, .team-column-two, .team-column-three, .team-column-four,
.team-column-five, .team-column-six {
width: 33.33%!important;


}
}

/*-small devices-------------------------------------*/

@media (max-width: 768px){
/*global setting*/

/*header-row*/

.header-row .header-column-two {background-color: #ff0000;}

/*team-row*/

.team-row .fl-row-content-wrap .fl-row-content{ max-width: 100%;}

/*footer-row*/ 
.footer-row {color:inherit;}




}


/*******************************************************************
INFORMATION

Websafe fonts: https://www.w3schools.com/cssref/css_websafe_fonts.asp


********************************************************************/

Discounts On These Two Lifetime Deals:

MainWP. Discount code "digitalfreedoms" 15% off
WP Code Box. Discount code "beaverjunction" 25% off

--------------------------------------------------------------

Get the Beaver Junction Plugins here

Get it now

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 Comments

David Waumsley on April 28, 2021 at 10:33 pm

Do you have the BB code settings plugin installed as well?

https://www.dropbox.com/sh/92gwz0vivd721h7/AACuUlJEnabSl3Q31feH753Ca?dl=0

It is needed too.

Reply