Sridhar Katakam

Genesis and WordPress Tutorials

[Video] Re-creating Parallax Pro’s homepage using Beaver Builder

by 9 Comments

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.

beaver-builder-genesis-wordpress

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.

Note: Beaver’s (or any similar plugin) ease of use does come at the cost of extra markup in the generated HTML. If you are comfortable editing PHP files, by all means do so and don’t use a drag and drop builder to build your pages. For everyone else Beaver Builder is a fantastic option that will save time and money. While you can get away not knowing PHP, you still need to know HTML and CSS to make full use of Beaver Builder.

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();
view raw page_beaverbuilder.php hosted with ❤ by GitHub

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;
}
}
view raw style.css hosted with ❤ by GitHub

  • I’m a big fan of you, Sridhar … but I’m not a big fan of all these drag & drop page builders that are popping up every day.

    Yes, the extra generated html output is a drag — literally. All the spans and divs they create are a real pain.

    Mostly, however, I refuse to use these page builders for SEO purposes.

    I’m not talking about all these SEO plugins people use, as SEO plugins basically just add meta data and not much more. I know, a lot of these SEO plugin makers market their product to make the consumer think that if they install their plugin, their SERPs (search engine ranking positions) will be helped.

    That’s just not true. An SEO plugin deals with your on-page SEO, which accounts for roughly 5% of your total SEO, and many SEOs (like me) would argue that having a meta description is not even a good thing; it’s better to have Google determine your meta description so it’s seen on a broader scale of searches.

    SEO is severely hampered by page builders, as are page load times, in my opinion.

    Reply

    • Hey Jason,

      Justin here, one of the Beaver Builder developers. I understand your frustration with page builders. Coming from an agency that does a lot of client work, we’ve never really been happy with many of them ourselves. That’s why we set out to build a better page builder that we would actually want to use.

      You touch on two very important issues when it comes to page builders, markup bloat and page speed.

      When it comes to markup bloat, if you look at a page builder like ours, you’ll see nested rows and columns that aren’t much different than what you would see if using a framework like bootstrap. Sure, our markup is a bit heavier, but I don’t think it’s so heavy as to affect SEO in a negative way.

      When it comes to page load times, the reason many builders fail here is that they load all of the css/js assets on every page for every module. We only load in the necessary (compressed and cached) css/js assets for a given page based on the modules you’re using.

      I’m not saying we’re perfect, but we’re definitely trying to get as close as we can in those areas as we know they are important and often overlooked. Our site is entirely built with Beaver Builder and ranks well for a number of competitive keywords after only half a year. I have a background in SEO, so that helps, but I don’t think the page builder is hurting us either.

      If you’re interested in checking it out and seeing if we’re legit, we just released a lite version on the wordpress.org repo that you can try for free.

      https://wordpress.org/plugins/beaver-builder-lite-version/

      I’d love to hear what you think!

      Justin

      Reply

      • Hi Jason, I really appreciate your thoughtful reply here and am happy to see the Beaver Lite version. I’ve been wanting to give Beaver a test run but not able to purchase the full licence right now, so Beaver Lite will allow me to play with it.

        Thanks!

        Reply

  • Hey Sridhar, I watched all 4 videos and really like how you demo Beaver Builder. You’re a really good teacher and I like how you take your time to explain things. Also, I learned some good CSS coding from you. I have decided to bite the bullet and purchase Beaver!

    Reply

  • Thanks Sridhar. That was, as always, useful, thoughtful and informative. Much appreciated. As an aside, others have now done this with Dynamik too… What more could we wish for 🙂

    Reply

  • If you use a bare bones genesis child theme like Dynamik Theme builder, will you not have to make so many edits to the theme itself and just use drag and drop features of beaver builder to create that page?

    Reply
    • >