BB and Genesis for Landing Pages

Trying to get BB to work with Genesis to create landing pages - the plugin only works on content areas. I’ve attempted different page templates (.php) but once the loop is removed, the plugin stops working.

Anyone have any luck with BB and Genesis creating landing pages? Any links to page template code or do I have to wipe out all the native page styling in the child theme that I’m using and build everything back up with BB?

Cheers!

Works great when you add Dynamik Website Builder to Genesis :slight_smile:

I tried it with just Genesis (doesn’t have a Landing Page template) and a couple Genesis child themes that do have Landing Pages as a built-in page template. Works with the ones that have the built-in Landing Pages, although the Genesis-only version of a Landing Page is not the same as one with DWB.

The DWB one is the way I understand a LP should be: no header, nav or footer.

The Genesis ones still have all three.

Thanks Lyle - yeah I could see somewhat extensive help for this with DWB but nothing for the Genesis Framework or any of its other child themes. Too bad - this plugin looks quite good.

Hey John,

Thanks for getting in touch! You are correct in that BB only works in the content area of any given theme and requires the loop. I’m not sure I understand your issue fully, would you mind explaining in a bit more detail what you are trying to do with Genesis that is affecting BB so I can see if I can assist?

Best,
Billy

Hi Billy,

Okay, what attracted me to the BB plugin was the thought that I could continue to use my Genesis child theme (Epik in my case) concurrently with BB when I wanted to construct landing pages. So, before I purchased BB, I could see that this scenario is possible with Genesis and the DWB (Dynamik) child theme by adding custom css code and by creating a custom BB page template that allows you to construct full width landing pages that aren’t constrained by the structure of the content area of a normal DWB page.

This is the lure of the BB plugin for me - to be able to opt out of the constraints of my child theme and then to easily construct landing pages when I need them. If it can be done for the Dynamik child them, it should be possible to do this for Genesis child themes in general. It’s only an issue of posting the code for it, just as someone did over at the cobaltapss.com forum for the DWB child theme.

John

I successfully did this (with forum help) for Magazine Pro. At first I tried over-kill CSS. Which caused other problems with the header/nav http://www.studiopress.com/forums/topic/magazine-pro-how-to-css-increase-site-inner-edge-to-edge-but-not-headernav/

I ended up using simpler CSS based on the beaver-page body class added in the custom page template.

The full-width page template I based on DWB/JuniorAtoms and it works for Magazine Pro (with specific CSS). Try it with Epik.

<?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 breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove Home Featured
remove_action( 'genesis_after_header', 'generate_home_featured' );

//* Remove Site-Tagline
remove_action( 'genesis_after_header', 'minimum_site_tagline' );
 
//* 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' );

//* 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
genesis();


For CSS - you need to adjust based on Epik.
/* Beaver Builder Junior Atoms KLM*/

.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%; 
	padding-left: 0;
    padding-right: 0 !important;
	padding-top: 0px;
}

Another challenge - the media queries. Beaver builder support helped diagnose the media query problem!

 @media only screen and (max-width: 768px) {
    
    .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%;
    	padding-left: 0;
        padding-right: 0 !important;
}
	 
	.site-inner, .wrap {
	/*	max-width: 650px; */
		padding-left: 3%;
		padding-right: 3%; 
}
	 

}

Hi Kelly,

Thanks for going to the effort to post this - it’s really helped immensely! I’ll post the updated css for the Epik child theme once I figure it out completely - it’s similar but with changes.

Thanks for posting that Kelly!

Here’s an Edit - I use Genesis Extender, so I don’t add the page template name within the code. But if you don’t use Extender, you need the full code for Junior Atoms’ page template (for Genesis child themes):

<?php

/**
* Template Name: Beaver Builder 
* Description: Used for edge-to-edge Beaver Builder Page
*/ 
*/ 

//* 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 breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove Home Featured
remove_action( 'genesis_after_header', 'generate_home_featured' );

//* Remove Site-Tagline
remove_action( 'genesis_after_header', 'minimum_site_tagline' );
 
//* 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' );

//* 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
genesis();

Check this plugin
https://wordpress.org/plugins/dynamik-website-builder-and-beaver-builder-integration/