Beaver Builder is a commercial drag and drop page builder for WordPress.
I recorded my screen as I tested it in a site where Parallax Pro is active to re-create the homepage in an inner page. Beaver makes it really easy to create multiple sections of content (fixed and full width) with image or Parallax or video background and more.
The idea is to add rows (or sections as I call them) and fill each row with different kind of modules (heading, text, HTML, widget etc.) by dragging them in. Modules can be duplicated but not rows, well at least not in a direct way. I show a workaround in the video.
42m step by step video split into four parts:
Part 1
Part 2
Part 3
Part 4
Code used in the screencast
page_beaverbuilder.php:
<?php | |
/* | |
Template Name: Beaver Builder Page | |
*/ | |
//* Force full width content | |
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); | |
//* Remove the breadcrumb | |
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); | |
//* Remove Entry Header | |
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 ); | |
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 ); | |
remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); | |
genesis(); |
style.css:
/* Beaver Builder Page Styling | |
--------------------------------------------- */ | |
/* .site-header { | |
position: static; | |
} */ | |
.fl-builder.full-width-content .content { | |
padding: 0; | |
} | |
.fl-builder .site-inner { | |
max-width: none; | |
margin-top: 0; | |
} | |
.fl-row { | |
text-align: center; | |
font-size: 28px; | |
} | |
.fl-row-bg-parallax, | |
.fl-row-bg-parallax h4 { | |
color: #fff; | |
} | |
.fl-row-bg-parallax a.button { | |
border: 3px solid #fff; | |
background: transparent; | |
padding: 15px 25px; | |
} | |
.fl-row-bg-parallax a.button:hover { | |
background: #fff; | |
color: #000; | |
} | |
.fl-row-bg-none a.button { | |
border: 3px solid #000; | |
background: transparent; | |
color: #000; | |
padding: 15px 25px; | |
} | |
.fl-row-bg-none a.button:hover { | |
background: #000; | |
color: #fff; | |
} | |
.fl-builder .entry-content ul { | |
margin-left: 0; | |
} | |
.fl-builder .entry-content ul > li { | |
list-style-type: none; | |
} | |
.pricing-table a.button { | |
background-color: #000; | |
color: #fff; | |
} | |
.pricing-table a.button:hover { | |
background-color: #f04848; | |
} | |
.fl-builder .simple-social-icons ul li a, | |
.fl-builder .simple-social-icons ul li a:hover { | |
padding: 30px; | |
} | |
.fl-builder .entry { | |
margin-bottom: 0; | |
} | |
@media only screen and (max-width: 768px) { | |
.site-inner { | |
padding: 0; | |
} | |
.fl-row-bg-none .fl-row-content-wrap { | |
padding-left: 5% !important; | |
padding-right: 5% !important; | |
} | |
} |