code – Beaver Brains

How fast can we create a new child theme for Beaver Builder?

Michael Davis — Tue, 20 Dec 2016 20:54:16 +0000

Just released today, Child Themer from Cobalt Apps, turns the process of creating a child theme into just a few clicks. Once your child theme is created, you also have a powerful new editor to access and edit your child theme files. Watch as we go step-by-step through creating a new child theme using Child Themer.

Child Themer on Beaver Brains

Extending your Beaver Builder layout using hooks

Michael Davis — Tue, 05 Jul 2016 08:38:55 +0000

Beaver Builder on its own is a great page layout tool – you can design layouts in ways that were never before possible on the front end of your website. Using hooks and filters extends your layout options further by allowing you to add content to additional areas on the page.

For instance, you might want to add a subscribe or contact form at the bottom of all of your pages without having to go to each page individually to add it. Hooks make that possible.

You can achieve this in two ways – use Beaver Tunnels or add code to your theme’s function and child themes files. If that sounds like the impossible, read this brilliant article from Beaver Child Themes where they spell out in detail just how easy it can be to harness the power of hooks in your website.

Full width pages in Genesis with Beaver Builder

Michael Davis — Mon, 04 Jul 2016 18:43:46 +0000

Here’s a useful bit of CSS for your Genesis child theme to achieve a full-width page layout brought to you by Neil Gowran. The code includes CSS for a Genesis child themes, Altitude Pro, Executive Pro, Outreach Pro, Enterprise Pro, mobile and general child themes.

Add the CSS to your child themes stylesheet and you should be able to create full-width rows in your layout.

To get this to work, install the Genesis Framework and activate your child theme and the Beaver Builder Plugin. Open up your Genesis theme settings panel and look for the default Layout section. Choose the full width, no sidebar layout option. If you choose sidebars, then adding the CSS code above will force the sidebars to site above and below the full-width content so it’s not what we want to achieve.

Here’s the standard sample page with a full-width layout – no sidebars.

Open up the page builder, click on the row settings and choose ‘Full width’. Click on the Tools button in the menu bar…

…click the Global settings button in the dialog…

Copy and paste and the add the CSS code in the CSS section of the global settings dialog

As soon as you add the CSS code you’ll notice the red row in the background is now full width.

The final result of adding the CSS to our page – a glorious full-width row!

Add Google Analytics to your pages using Beaver Builder

Michael Davis — Mon, 04 Jul 2016 15:58:44 +0000

With Beaver Builder installed, you don’t need additional plugins to get Google Analytics working on your site. Just add the Google Analytics code into the Beaver Builder JavaScript section of the Global Settings dialog box.