No announcement yet.

Fun with Beaver Builder

  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    Dear Junior Atoms and Forum Members,

    I would like to use Beaver Builder in combination with Genesis Extender.

    How & where do I need to modify the code snippets you have provided above ?

    I look forward to your suggestions.

    Kind regards,



    • Kellylise
      Kellylise commented
      Editing a comment
      The existing code from Junior Atoms works with Magazine Pro & Extender.

      Extender > Custom > Template - create 2 templates: beaver-builder and beaver-builder-landing with Junior Atoms' code.
      Extender > Custom > CSS - add Junior Atoms' CSS

      In Beaver Builder, for full width color row backgrounds, for Row Settings, be sure to select the Row wrench, width full width (not fixed) and also Row Background > Color, pick a color, and save.

  • #17
    Last edited by Junior Atoms; 03-20-2015, 06:06 PM.


    • Sogwap
      Sogwap commented
      Editing a comment
      Will this import work with DWB?

    • Junior Atoms
      Junior Atoms commented
      Editing a comment
      No, it only works with Generate Pro.
      Last edited by Junior Atoms; 11-30-2014, 12:09 AM.

  • #18
    What Kellylise said or use what JA has kindly provided

    1. install and activate Genesis framework 2.1.2 - no need for a child theme to test this out
    2. install and activate Dynamik Extender 1.5.1
    3. install and activate BB lite (or Pro or whatever flavour you have)
    4. Genesis > Extender Settings > Import/Export > Import Options/Custom Options > Choose File > navigate to the downloaded JA file provided above > Import Custom Options
    5. Pages > Add New (or use and existing one) > Template > select Beaver Builder > Update (or Publish)
    6. return to page and launch BB and have at it!


    • #19
      Having a bit of a problem and not sure why. I am trying to add the 2 code snippets. But I follow the instructions, click save changes and the snippets disappear and the BB templates are not available in the template drop down in page creation. Here is a screencast.

      Are my expectations about what should happen different than what they should be? This is my first attempt at using the custom templates.


      • #20
        Try not clicking Add the second time; no need to. Just do as you did and once you add the Template Name @ 0:26 just click Save Changes.


        • #21
          Originally posted by 2ninerniner2 View Post
          Try not clicking Add the second time; no need to. Just do as you did and once you add the Template Name @ 0:26 just click Save Changes.
          You were right. It worked if I did one at a time with no use of the add button. I assume that's some small bug somewhere. Thanks a bunch.


          • #22
            Has anyone had any problems using Font Awesome icons?

            I can add Font Awesome icons above text content in a single column/rows text editor, but if I try to do the same to a row that has three columns the text editor wipes the Font Awesome html and leaves " " instead.


            • #23
              Originally posted by jluebke View Post

              ... I assume that's some small bug somewhere.


              • #24
                Fun with Beaver Builder, Extender, and Magazine Pro. Good news/bad news
                Trying to use edge-to-edge Beaver Builder Templates with Magazine Pro and Extender. I have edge to edge, but problem is Header and Nav are edge to edge, too.

                Edit > Solved

                Good News - I managed (a hack) to make Beaver Builder Template edge-to-edge with Magazine Pro!

                Key: eliminating Magazine pro margin/padding
                PHP Code:

                .site-inner {

                site-inner, .wrap {
                margin0 auto;

                Bad News: On every page, Header is now edge to edge. So are primary and secondary nav

                Here is what the Magazine Pro Header looked like before edge-to-edge Beaver Builder Page Code

                Here is what the Header looks like on a nonBB page After edge-to-edge Beaver Builder Page Code:

                My hack of the Beaver Builder Templates for Dynamik and Generate Pro is the obvious cause, but I don't know how to fix it.

                This is the selector I used based on the Firebug body class (overkill?) .page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content..beaver-page.fl-builder

                So here is the CSS I'm using:
                HTML Code:
                /* Beaver Builder Junior Atoms (hack by KL)
                --------------------------------------------- */
                /* Beaver Builder */
                .page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content..beaver-page.fl-builder .entry {
                    background-color: none;
                    box-shadow: none;
                    padding: 0;
                .page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page .entry {
                    margin-bottom: 0;
                .page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page .site-inner {
                    clear: both;
                    padding-top: 0;
                .page-template-my-templatesbeaver-builder-php.fl-builder.full-width-content.beaver-page .site-inner .wrap {
                    margin: 0 auto;
                    max-width: none;
                /* Media Query */
                @media only screen and (max-width: 1023px) {
                    .extender-full-width .nav-primary {
                        margin-top: 0;
                Here is the page template - Straight from Junior Atoms for Generate Pro:
                PHP Code:

                //* Add beaver-page body class
                add_filter'body_class''beaver_body_class' );
                beaver_body_class$classes ) {
                $classes[] = 'beaver-page';

                //* Force full width content
                add_filter'genesis_pre_get_option_site_layout''__genesis_return_full_width_content' );
                //* Remove breadcrumbs
                remove_action'genesis_before_loop''genesis_do_breadcrumbs' );

                //* Remove Home Featured
                remove_action'genesis_after_header''generate_home_featured' );
                //* Remove entry header
                remove_action'genesis_entry_header''genesis_entry_header_markup_close'15 );
                remove_action'genesis_entry_header''genesis_do_post_title' );

                //* Remove edit link
                add_filter'genesis_edit_post_link' '__return_false' );

                //* Remove comments template
                remove_action'genesis_after_entry''genesis_get_comments_template' );

                //* Run the Genesis loop

                Last edited by Kellylise; 12-10-2014, 02:21 PM. Reason: Delete comma from .site-inner, .wrap {


                • Kellylise
                  Kellylise commented
                  Editing a comment
                  Solution from the StudioPress Forum:

                  I added
                  .site-header .wrap {
                  max-width: 1100px;

                  .site-header .widget-area {
                  float: right;
                  text-align: right;
                  width: 720px;

                  .nav-secondary .wrap,
                  .nav-primary .wrap {
                  max-width: 1100px;

                  To Extender > Custom > CSS after my edge-to-edge site-content CSS and Success!!!!

              • #25
                Thanks to everyone here for helping me figure out how to get all these pieces to work!! I am excited and having fun with Genesis Extender and Beaver Builder.

                I'm running into an odd scenario. I set-up the page using one of the Beaver Builder pre-built Templates and have the Page template set to Junior Atoms Beaver Builder page template and all looks great. But as soon as I make it the home page it stops being full width:

                Test page:
       ( you will need password mike to see)
                This all looks great, the layout I am going for

                Home page:
                Same template - but updated with some test graphics and set as home page
       ( you will need password Mike to see)
                1) the navigation/header spacing goes back to full size
                2) Top row no longer full width

                Is there anything else I need to do to make this work on a home page? I've tried not using child theme and same things happens on the home page.

                WordPress 4.1
                Genesis Version: 2.1.2
                Modern Portfolio Pro
                Genesis Extender
                Beaver Builder

                Any insights or resources you can point me to would be greatly appreciated!!


                • Junior Atoms
                  Junior Atoms commented
                  Editing a comment
                  Last edited by Junior Atoms; 03-20-2015, 06:06 PM.

                • martag
                  martag commented
                  Editing a comment
                  THANK YOU!! Thank you so much for all your work and your willingness to share. That worked great!

              • #26
                I am trying to accomplish essentially the same full width layout that Junior has shown in this post. I've added the page templates, set the BB elements to full width and made sure the proper page templates are selected and I still can't seem to get the page to go full width.

                My Site:

                What I am trying to do:

                Plugins/Themes Installed:

                WP - 4.1
                Genesis 2.1.2
                Dynamik 1.7.1
                Beaver Builder
                Gravity Forms
                Genesis Simple Edits
                Google XML Sitemaps

                I would be able to build something like this quickly with just Genesis and DWB and was excited to find these threads about beaver builder because of how easy it looked, now I've spent several hours on this and still can't get it right, lol.... Any assistance would be greatly appreciated.


                • csmark
                  csmark commented
                  Editing a comment
                  OK - I think I solved it... how's it looking for you now? I had to turn "ON" the Genesis HTML 5 settings which seems to make the full width page work... Damn... so simple and I spent a lot of time on it today. However, I am loving this builder more and more. I bought Beaver Builder and CSS Hero on these recommendations and now that I am getting the hang of it, it's truly a great combination of tools.

              • #27
                Thank you Junior Atom for the code, saved me a lot of time and a few headaches.
                After reading all the great reviews about Beaver Builder I decided to go see for myself, must say it is very good, my only reservation is how would I stop clients editing pages in standard WP editor and messing up BB markup?


                • Sogwap
                  Sogwap commented
                  Editing a comment
                  In some case you can't, especially considering it's their site.
                  Simply tell them to NEVER touch those page. If they do let them know your (un-discounted) hourly rate applies .

              • #28
                Junior Atoms : awesome contribution as usual !!

                Quick question : where does the nice menu you have here comes from ?

                Is it a DWB option hidden somewhere or did you hand-code it ;-)




                • SiGa
                  SiGa commented
                  Editing a comment
                  Looks hand coded. A three-column-widgets-after-header-area with custom CSS to hide it and add absolute position and a trigger in header right to toggle it is my guess.

              • #29
                Junior Atoms Interested as well by a tutorial of that menu


                • #30
                  I don't know anything about JS, so I can't do a tutorial on the widget-drawer menu thing. I just tried things till it kinda worked.
                  Last edited by Junior Atoms; 02-19-2015, 02:47 AM.