Announcement

Collapse
No announcement yet.

Fun with Beaver Builder

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • #31
    Originally posted by Junior Atoms View Post
    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.
    It appears to be using fairly simple jQuery:
    Having worked with jQuery myself, you have to know the basics. Otherwise be prepared to spend some time getting something like this working. I must say looks quite clever.

    <script src="http://juniordemo.com/dynabeaver/wp-content/uploads/dynamik-gen/theme/custom-scripts.js?ver=1.7.1" type="text/javascript">
    ( function( $ ) { // Add a toggle button $( '.title-area' ).after( '<button id="dynadrawer-toggle-button" class="dynadrawer-toggle" role="button" aria-pressed="false"><span class="screen-reader-text">Menu</span></button>' ); // Add an active class to dynadrawer-toggle when clicked and toggle the dynadrawer $( ".dynadrawer-toggle" ).click( function(e) { $( ".dynadrawer-toggle" ).toggleClass( "active" ); $( ".dynadrawer" ).slideToggle( "slow" ); } ); } )( jQuery ); </script>

    Comment


    • #32
      Gosh. Looks like I'm late to the Beaver Builder Party. Where'd the code go? Junior? Please?

      Will KL's post on the previous page get me going with Genesis and DWB?

      Thanks any and all for any help and directions to the BB Party!!

      Comment


    • #33
      I miss this too - Colin's article only has the full width BB code, but I recall Junior also had an option for a landing page as well - does anyone have the PHP and CSS for that.
      All of a sudden I need it & I'm kicking myself that I did not make a note of it

      TIA, Dave

      Comment


      • #34
        Note: This code that was originally posted here by Junior Atoms.
        The Ez Fat Footer (if used) is retained on the normal full width template. I also removed the dotted underline on anchor links.

        To create the Templates go to Dashboard > Genesis > Dynamik Custom > Templates

        For the normal full width template
        File Name: beaver-builder
        Template Name: Beaver Builder Page
        Type: Page Template

        PHP Code:
        <?php

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

        $classes[] = 'beaver-page';
        return 
        $classes;

        }

        //* Force full width content
        add_filter'genesis_pre_get_option_site_layout''__genesis_return_full_width_content' );

        //* Remove Feature Top
        remove_action'wp_head''ez_feature_top_structure' );

        //* Remove breadcrumbs
        remove_action'genesis_before_loop''genesis_do_breadcrumbs' );

        //* Remove entry header
        remove_action'genesis_entry_header''genesis_entry_header_markup_open');
        remove_action'genesis_entry_header''genesis_entry_header_markup_close'15 );
        remove_action'genesis_entry_header''genesis_do_post_title' );

        //* Remove Dynamik content filler
        remove_action'genesis_loop''dynamik_content_filler' );

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

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

        //* Remove Fat Footer, Uncomment next line to remove Ez Fat Footer
        // remove_action( 'wp_head', 'ez_fat_footer_structure' );

        //* Run the Genesis loop
        genesis();


        Here is the Landing page template
        File Name: beaver-builder-landing
        Template Name: Beaver Builder Landing Page
        Type: Page Template
        PHP Code:
         <?php

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

        //* Force full width content
        add_filter'genesis_pre_get_option_site_layout''__genesis_return_full_width_content' );
         
        //* Remove feature top
        remove_action'wp_head''ez_feature_top_structure' );

        //* Remove navigation
        remove_action'genesis_before_header''genesis_do_nav' );
        remove_action'genesis_after_header''genesis_do_nav' );
        remove_action'genesis_before_header''genesis_do_subnav' );
        remove_action'genesis_after_header''genesis_do_subnav' );
        remove_action'genesis_before_header''dynamik_mobile_nav_1' );
        remove_action'genesis_after_header''dynamik_mobile_nav_1' );
        remove_action'genesis_before_header''dynamik_mobile_nav_2' );
        remove_action'genesis_after_header''dynamik_mobile_nav_2' );
        remove_action'genesis_before_header''dynamik_dropdown_nav_1' );
        remove_action'genesis_after_header''dynamik_dropdown_nav_1' );
        remove_action'genesis_before_header''dynamik_dropdown_nav_2' );
        remove_action'genesis_after_header''dynamik_dropdown_nav_2' );

        //* Remove site header elements
        remove_action'genesis_header''genesis_header_markup_open');
        remove_action'genesis_header''genesis_do_header' );
        remove_action'genesis_header''genesis_header_markup_close'15 );

        //* Remove breadcrumbs
        remove_action'genesis_before_loop''genesis_do_breadcrumbs' );
         
        //* Remove entry header
        remove_action'genesis_entry_header''genesis_entry_header_markup_open');
        remove_action'genesis_entry_header''genesis_entry_header_markup_close'15 );
        remove_action'genesis_entry_header''genesis_do_post_title' );

        //* Remove Dynamik content filler
        remove_action'genesis_loop''dynamik_content_filler' );

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

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

        //* Remove fat footer
        remove_action'wp_head''ez_fat_footer_structure' );

        //* Remove site footer elements
        remove_action'genesis_footer''genesis_footer_markup_open');
        remove_action'genesis_footer''genesis_do_footer' );
        remove_action'genesis_footer''genesis_footer_markup_close'15 );

        //* Run the Genesis loop
        genesis();


        Add this to your Custom CSS
        Code:
        /* Beaver Builder */
        
        .beaver-page.fl-builder .content,
        .beaver-page.fl-builder .content .page,
        .beaver-page.fl-builder .content-sidebar-wrap,
        .beaver-page.fl-builder .site-container,
        .beaver-page.fl-builder .site-inner {
            background: none;
            border: 0;
            float: none;
            margin: 0 auto;
            padding: 0;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        
        .beaver-page.fl-builder .content,
        .beaver-page.fl-builder .content .page,
        .beaver-page.fl-builder .content-sidebar-wrap,
        .beaver-page.fl-builder .site-inner {
            max-width: 100%;
            width: 100%;
        }
        
        .fl-builder .entry-content,
        .fl-builder .entry-content p,
        .fl-builder .entry-content ul li,
        .fl-builder .entry-content ol li,
        .fl-builder .entry-content h1,
        .fl-builder .entry-content h2,
        .fl-builder .entry-content h3,
        .fl-builder .entry-content h4,
        .fl-builder .entry-content h5,
        .fl-builder .entry-content h6 {
            color: inherit;
        }
        
        .fl-builder .entry-content a {
            color: inherit;
            text-decoration: none;
            /* border-bottom: 1px dotted; */
        }
        Last edited by Sogwap; 04-20-2015, 01:32 AM.

        Comment


        • Anakyst
          Anakyst commented
          Editing a comment
          Thanks for this above Sogwap. Appreciate that.

        • Zcode
          Zcode commented
          Editing a comment
          Thank you for posting, Sogwap. Much appreciated.

          I've only just this minute discovered all things Beaver Builder Party!!
          Last edited by Zcode; 05-13-2015, 09:51 AM.

      • #35
        Thanks Sogwap - I actually found it shortly after posting, but good for anyone else requiring it! (I had used it on a local play site)
        Cheers, Dave

        Comment


        • #36
          do you have to purchase the beaver builder to use this code? i've been watching the videos and following the instructions without any luck.

          Comment


          • #37
            Hi Johnny, Junior says in the third entry here that he uses the free version.
            Have you selected the page template correctly ?
            HTH, Dave

            Comment


            • #38
              I still have one old site on Catalyst + dynamik, I guess its finally time to switch it to genesis in order to implement this right here. Ive become a fan of beaver builder + dynamik, thanks for the development of this.

              Comment


              • #39
                FYI A custom page template for #GenesisWP to play nice with page builders by making the content area full width. Works great with the Beaver Builder
                https://gist.github.com/blogjunkie/1...ge-builder-php

                Comment


                • Sniffle Valve
                  Sniffle Valve commented
                  Editing a comment
                  You still need custom CSS to get 'edge-to-edge' full width with a fluid wrap.

              • #40
                Just like to say a huge thank you to those who contributed to this thread - I'm blown away with BB. Recently I've started using Weebly for clients with very small sites - because the overheads of setting everything up in WP+Genesis+Dynamik wasn't worth it BB has completely changed this and I will now go back to doing all sites in WP

                Comment

                Working...
                X