Beaverbuilder + Genesis Framework

Beaver Builder
1

I’m trying out Beaverbuilder with Genesis + Parallax Pro child theme. I can’t seem to get Beaverbuilder to save a page or indeed to show full width.

Do you have some documentation I can look at or advice?

2

Hello Athlone,

i tryed with parallax pro, and it works. But you have to finetune the theme first.

in your functions.php add the following:

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’ );

this will remove the header and the entry title.

edit your style css and add this:

.label-fluid-page .site-inner,
.label-fluid-page .content-sidebar-wrap,
.label-fluid-page .content {
width: 100%;
max-width: 100%;
padding: 0 !important;
}
.home-after-header-wrap-inner,
.home-main-wrap-inner,
.home-before-footer-wrap-inner {
max-width: 1140px;
margin: 0 auto;
padding: 20px;
}

this will make the theme full width.

in the css file you have some margin to remove:

.site-inner
{
clear: both;
margin-top: 170px; <- delete or comment this line
}

create a new custom template, I called it beaver-home.php. Add this file inside your theme, with this content:

<?php
/*

  • Template Name: Beaver Home
    */
    ?>

<?php
add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );

genesis();

?>

this should do the trick. Sorry my english.

3

Hi flamerz,

Thank you for your reply, much appreciated.

Have you tried using it on pages other than home as I wasn’t specifically going to use it on home?

And I understood perfectly, thanks again. :slight_smile:

4

oh, check the responsive css too.

.site-inner {
/*	margin-top: 80px;*/ &lt;- comment this one :)
}

you can see how it looks here:

http://www.ryanstudios.com/acuario/beaverparallax.png

yes, no problem to set another pages… just choose the template in the page atributes.

5

Thanks so much for helping, Diego!

6

looks great.

http://www.ryanstudios.com/acuario/beaverparallax2.png

yesterday i tryed with genesis+dynamik+beaverbuilder.

it really rocks.

7

You sure you tried it on pages as I’ve tried it and on pages I have the page title still showing as well as no full width.

8

Hi Support

Any assistance with this as the suggestions posted by flamerz is not working for me?

Thanks in advance.

9

Hi Billy,

Thank you for your reply.

As I mentioned previously full width was not happening and also the site title on pages was not being removed.

Warmest regards,

Athlone

10

Thanks Athlone, would you mind sending a private reply with login credentials so we can take a look today?

Best,
Billy

11

[Content Hidden]

12

Thanks Athlone, we’ve issued a bug for this and will be taking a look shortly. As soon as we have resolution, we’ll let you know!

Best,
Billy

13

Hi Athlone,

Can you tell me which page template you’re trying to make full-width? It looks like the default template has a sidebar so I’m assuming it’s not that one. Let me know and we can go from there.

Regarding the page title, that can be disabled under Tools > Global settings. I’ve already done that for you.

Justin

14

Hi Justin

Thank you for your reply.

I was following Flamerz advice to get a new page to display full width, so was no particular page.

Warmest regards,

Athlone

15

Hi Athlone,

I was able to make a builder page full-width by selecting the “Landing” page template and applying the following CSS…

.fl-builder .site-inner {
    margin: 0;
    max-width: none;
}
.fl-builder.full-width-content .content {
    padding: 0;
}

That CSS should go in your style.css file. Let me know how it goes!

Justin

16

Hi flamerz

You said “yesterday i tryed with genesis+dynamik+beaverbuilder. it really rocks.”

I’m really interested in getting this combination working with full width pages. Were you able to get Beaver Builder to work with full width content with Dynamik?

Thanks,

Colin

17

Hi Justin

First, my apologies for the late reply. I tried this today and it worked perfectly! Thank you for taking the time to assist. And to everyone else who took the time to reply, thank you each one of you :slight_smile:

Warmest regards,

Athlone

18

Hi,

What do you mean check the responsive CSS too? Where is that located? Are you suppose to paste that code in there? thanks

19

Hi Lark

Usually that will just be checking your site, what it displays like when viewed on a mobile device like a phone or tablet. And if it needs some tweaking to display correctly you’ll then do so in the media queries section of your CSS.

Here is a cool tool for checking how your site will display across various mobile devices: Visit http://quirktools.com/ then click Screenfly.

20

Thanks for chiming in, Athlone! :slight_smile: