Purchased a template from themeforest and would like to use the beaver builder with it. However running into an issue and would like you to take a look.
Basically as I add rows and columns I’m having to address padding on both the row and then also on the inner blocks themselves to get it to show the full width of what appears correct with the theme.
Here is the test page where you can see the builder in action. The top row is where I made the changes and the bottom row is without those changes.
My question is there a change I can either make in beaver builder or within the theme that would save me from having to address each row and then each block inside the rows?
Looks like I ran into another issue also, as you can see above in step 1, when you go full width your not actually going full width your only going full width within the normal size of the content area. Meaning if I want to create a true full width section with this theme I won’t be able to accomplish it the way it is setup now.
You can change the padding and margins on a global level to save you changing them individually on each row and module.
Open any page with the Page Builder, then click on TOOLS up in the top right. Choose Global Settings and you’ll see the global margin and padding settings.
As for your full width dilemma, there two things you can check:
First, make sure your page Layout Setting is set on a full width page and not one with a sidebar. Secondly, check to see if there is a “full width wrap” option in the page Template drop-down? You’ll see it on the right in the Page Attributes section.
If you don’t have any luck there, then you’re probably looking at some custom work to adjust the theme’s content structure to accommodate Beaver Builder.
If you were using the Beaver theme or a theme on a framework like Genesis, I would probably be able to help you because I know the page structures they use. Unfortunately, most of the themes at ThemeForest use custom code and css hacks to control the page structure so it’s really difficult to make changes to them without spending some time working out how they built it.
Sorry I can’t be more help. Hopefully the Fastline guys will have a better answer for you in morning.
In addition to Colin’s excellent suggestions, there may be a case to where you may need to do a bit of custom work to allow full width which appears to the root of your problem. If the above don’t work for you, please also try the following from our documentation:
To make full width rows work on a third party theme, you'll need to make the theme's content wrapper for builder pages full width. That's actually pretty easy to do if you know a little CSS since every builder page gets a classname on the body called .fl-builder. Here's how...
Find the id or classname of your theme’s content wrapper (e.g. #content).
Target the content wrapper for builder pages and make it full width by adding the following CSS where #content is the selector for your content wrapper…
If the top row is styled the way you want it and you need additional rows that are styled the same, you can just duplicate the row as required and adjust the contents accordingly.
Also, if you require this style on other pages, but not universally as with the Global Settings, just save it as your own template.
As for full width ‘full width’, as Colin and Billy have mentioned, this is a function of the theme and not BB. That setting in BB is for what the theme is providing for the selected area as ‘full width’.
Just add that code to your custom CSS area (or the style.css if you don’t have a custom css area) and you should have Beaver Builder working with the full width of your page.
Colcar, thanks for your time and trying to give me a hand, very much appreciated. However no dice, still locking into the main size of the normal container.
Just took a look at that page in the inspector and it appears there is a secondary class that may be keeping your pages from going full width which is slightly interesting. Give this a shot as well and see if that solves your issues:
