In this post, we’re looking at the Beaver Builder theme, the Beaver Builder Child Theme and why you’d want to use the Beaver Builder shortcodes in your layout. Let’s dive in…

The Beaver Builder Theme

If you’ve bought the Agency or Pro version of the Beaver Builder Page Builder then you’ll get the beaver Builder theme and child theme. Visit your Beaver Builder account and download the files. As we mentioned in previous posts, the theme is not a pre-requisite for using the Beaver Builder plugin. However, it is 100% compatible with the plugin and many seasoned WordPress designers and developers that otherwise would have used 3rd Party themes are now converting sites to the Beaver Builder theme for consistency and ease of use.

The theme is built on the Bootstrap 3.0 framework, so if you’re familiar with that it opens up a host of customisation options to you. The theme also uses Font Awesome 4.0 so, again, great for displaying font icons anywhere on your site. For instance to add this bell to your page, just drop in the Font Awesome code and your set:

The beaver Builder theme offers all of the standard page design element controls you would imagine with a WordPress theme and everything is controlled from the WordPress Customiser. Beaver Builder is investing a lot of time improving the features of the theme but there are a lot of powerful settings, options and tools available to do just about anything with the layout and design.

To find out about the Customiser theme settings, head over to the Beaver Builder knowledge base where you find a comprehensive description of all of the options.

If you’re wondering whether or not you should use the Beaver Builder theme or any other theme, BeaverAddons has a great article that might help you make a decision.

Working with the theme

The Beaver Builder theme, like any other WordPress theme, is comprised of 4 basic editable areas – header, footer, body and sidebar; collectively known and the content area. You can set options for any of these areas in the Customiser.

Beaver Builder Presets

There are a number of theme presets available if you’d like to get started with a theme framework design. For the most part, you’d want to build up a unique design so we always use the default preset.

Header Options

The Beaver Builder theme header options control the look and feel of the header for your site – you have options for menus, logo, layout and top bar. On this site, we’re using a top bar and a Nav Centred header layout which places our logo and menu centrally stacked on the page.

Explore the options including, side header layout, general header colours and more.

The one limitation with the Beaver Builder theme is transparent headers and that’s planned for the next version of the theme. To achieve the look, you currently need to use one of the available hacks or install Jon Mather’s excellent Beaverlodge Transparent Header plugin.

Content Options

The body and sidebar areas of your site make up the Content area and is controlled by the Content tab. Here you can set options for the general background colour for your site, the blog, archive and post layouts, and if you have WooCommerce installed, you can set options for that too.

The Beaver Builder blog page is any page you assign as your posts page in the WordPress–>Settings–>Reading settings. You can style this page using the Blog Tab in the Content Customiser.

Navigating to the Blog tab, you’re given the option to display a sidebar and set display options for the post meta; author, date and comment count.

The Archive tab offers further styling options for your blog, category, tags and author archives and you can choose to display header images, excerpts and read more links.

The Post Layout tab probably offers the most opportunity for improvement in the Beaver Builder theme. These options determine how your single posts are displayed and for many Beaver Builder theme users, these options are fairly limited. More options to control the header image size and position, the title layout options and meta text positions would be most welcome but for now, you’ll need to use child theme hacks or add-ons to achieve advanced controls. There is a lot of work being done by Beaver Builder and 3rd party developers in this area so expect quick changes here…

Footer Options

The footer tab controls the display of widgets in your footer and the layout and style of the footer below your widget area. Beaver Builder allows you to manipulate 4 columns in your footer where you can add widgets from the WordPress–>Appearance–>Widget settings or within the Widgets tab of the Customiser.

One of the cool features in the Beaver Builder footer theme is the Parallax Effect – enable this to allow the content area of your site to slide up over your footer and make the footer look as if it’s stuck to the base of your page. Scroll to the bottom of our site to see the effect.

Custom Code

You can add custom CSS and JavaScript to your theme by using the Code tab in the customiser. This is for global CSS and script resources and will render on every page on your site – Beaver Builder allows you to also insert code in specific areas; within the Head, the site Header and footer. For instance, you can use the code tab to insert your Google Analytics tracking code for your site.

WordPres Menu

The Beaver Builder Menu tab gives you access to the menus you would like displayed on your site. Beaver Builder includes three menu locations; Top Bar, Header Menu and Footer Menu. Use the menu settings as you would for any WordPress site and if you’d like to add a mega-menu just add the CSS class ‘mega-menu’ to the top level menu item to achieve this.

Beaver Builder Child Themes

Child themes are the best way to achieve a unique look for your site and enable you to customise your site without messing with the main Beaver Builder theme files – if you do, you may lose your customisations when you update the Beaver Builder theme.

Beaver Builder supplies you with their own child theme which means you can alter and add your own code without worrying about overwriting your work when you update the main theme. The Beaver Builder child theme is a good starting point for your own customisations. If you’re code savvy then the child theme offers plenty of opportunity to build on the main theme.

Other 3rd party designers have already customised and published their own Beaver Builder child themes. There are plenty of theme authors creating Beaver Builder child themes that you can buy and install to get you started quickly. For the most part, these child themes are designed for specific industries, so find one that suits your target audience and customise it further for a unique look.

An example child theme for fitness sites by BeyondBeaver

In our next series we’ll talk you through where to find great child themes but if you search for child themes on our site, you’ll find plenty of cool resources.

Beaver Builder Shortcodes

Beaver Builder makes website creation super simple and it does so without leaving you with nasty shortcodes if you ever decide to stop using it. Some of the more well-known page builders use shortcodes to display content whereas Beaver Builder leaves your content intact if you ever decide to stop using it. This is one of the best features of the plugin because it means your carefully crafted content is always available no matter what theme or plugin you decide to use for page building.

Beaver Builder does let you use shortcodes to display content on your site, so if you’ve built a page with a subscription form on it, you can add that page to a post on your site by adding shortcodes:

You can use the shortcode with a slug or page id and you can even add multiple layouts by adding multiple IDs in the code.

Shortcodes are great for re-using content so you can centralise a layout design and update multiple pages at once wherever your shortcode is displayed. You can find out more about using the shortcode on the Beaver Builder knowledge base.

Wrapping up

So that’s about all for the third post in our series. Be sure to visit some of the resources in our sidebar where you’ll find more information about today’s topic. If you get stuck you can always check out the knowledge base for answers. Beaver Builder has a ton of great resources and articles on their knowledge base where you discover more tips and how-to articles.

Our next post will take a closer look at 3rd part developers and designers and community resources to help you create an awesome Beaver Builder site.

Subscribe

Subscribe to our blog posts to be notified just as soon as we hit that publish button!

One of the benefits of using Beaver Builder, as pointed out in Part 1, is the ability to use templates and reusable elements to get a site built quickly and efficiently. In this post, we’ll look at how to use row and module templates to do just that.

If you’re new to the TAKE-OFF! series, you may want to catch up on previous posts here.

Beaver Builder Global Settings

One of the first things you’ll want to look at when starting a new website with BB is the global settings. Global settings determine whether or not BB shows your page titles, default row margin and padding settings, and responsive options for your entire site. These are all important options and you should adjust these settings to suit your particular theme options.

Most of the options in the Global Settings modal can be overridden on a page by page basis. So if you’ve left your default row settings to fixed, you can always override this in each of your individual row’s settings.

Getting to the Global Settings dialogue is a little tricky as you have to navigate to a page on your site, initiate the page builder, click on the ‘Tools’ button and then click the Global Settings button in the dialogue that pops up. Pretty long winded! But once you’ve set the options up, you won’t need to visit the settings page too often.

Global CSS and Javascript

You’ll also notice two other tabs in the Global Settings dialogue: the CSS and Javascript tabs where you can add custom code to your website. We add Google Analytics code to the Javascript tab and any if we need to refine the look and feel of our site, we add custom code to the CSS tab. Word of warning: anything you add to these tabs will no longer work if you ever deactivate the Beaver Builder plugin, so if you want your Google Analytics to work despite uninstalling the plugin, then don’t add your analytics code to this box.

Advanced Modules

In our previous post, we took a brief look at some of the basic Beaver Builder modules that come with every version of the plugin. If you’ve bought the Standard, Pro or Agency package then you’ll also get access to premium modules. A full list of all modules available in Beaver Builder is published here. Premium modules currently

• Accordion module overview
• Callout and Call to Action
• Contact form
• Content slider
• Countdown
• Gallery
• Icon and Icon Group
• Map
• Menu
• Number Counter
• Posts, Posts Carousel and Posts Slider
• Pricing Table
• Sidebar
• Slideshow
• Social Buttons
• Subscribe Form
• Tabs
• Testimonials
• Woocommerce – only shows up if you have it installed.

Page Templates

Beaver Builder Templates are a big time saver and one of the most powerful features of the premium plugin. Reuse entire page layouts, complete rows or even single elements to quickly build layouts for your site.

To use Templates, head over to your Page Builder settings in the WordPress backend and make sure you enable all templates from the dropdown and check the tick box, ‘Enable Templates Admin’. Templates act like ordinary WordPress posts and once enabled, will show up in your sidebar as a post type.

There are two types of templates available to you – Core Templates; those designed by Beaver Builder that are included with your plugin purchase and User Templates; those that you will create and save for your own use.  In a later post, we’ll talk about 3rd party templates that you can purchase and import into your site.

Core Page Templates

Beaver Builder Core Templates are often a good way to get a site laid out quickly. They are categorised as Landing Page and Content Page templates. Landing pages give you a total top to bottom layout design. Content pages are designed for particular pages like your About Page,  Contact and Portfolio pages.

You can edit these templates as you like and save them for later use. When you do that, Beaver Builder places your customised template in a ‘Your Templates’ area that you can access in the Templates section of your WordPress admin.

Row Templates

Row templates are powerful reusable elements that can drive whole sections of your site. There are two types; single and global row templates. Single row templates give you access to a saved design that you can amend and change once you’ve dropped them onto your page. In other words, they’re not tied to the original template.

Global row templates are different. You design global row templates once and add them to as many pages as you like. After that, when you update your original global row template design, every row template that is linked to the original will automagically update too!

We use a global row template to add a section for our social links and a menu just above our footer on every page of our site. We use a global row template so that we don’t have to add this separately or edit it separately on every page of our site – that would be a bit of a chore! You can tell if you’re about to edit a global row template because when you hover over it, it turns orange instead of the usual blue of an ordinary row.

You create row templates and global row templates by clicking on the rows spanner icon, click ‘Save As…’ and then give your row a name and choose ‘yes or no’ from the Global drop-down. Click save and your new row template will then be available as a draggable element from the Page Builder ‘Add Content’ sidebar.

Module Templates

Like row templates, you can also make module templates that can be reused over and over. So if you want to design a button that you’d like as a consistent element across your site, then add the button module to you page, style it as you like and then save it as a module template to use elsewhere on your site.

This will save you hours of time tweaking button settings and trying to remember your customised button colours.

Like rows, you can also create global module templates. Global modules are brilliant for adding consistent buttons, forms, menus and FAQs anywhere in your site. Again, like custom rows, if you edit your original global module, every page containing that module will update accordingly. This is a huge time saver and ensures that your site has a consistent look and feel to it.

You can tell if you are editing a global module if you hover over it and it turns orange like the example above. Also, when you save a global module, it will be listed in the sidebar with a ‘Global’ marker.

Wrapping up

So that’s about all for this second post in our series. We hope this shows you just how useful and powerful the Beaver Builder plugin is and how much time you can save by using templates and rows creatively!

Be sure to visit some of the resources in our sidebar where you’ll find more information about today’s topic. If you get stuck you can always refer to the Knowledge Base.

Our next post will take a closer look at the Beaver Builder theme, how to use Beaver Builder child themes and why you’d want to use the Beaver Builder shortcodes in your layout. Until then, be a better Beaver!

Subscribe

Subscribe to our blog posts to be notified just as soon as we hit that publish button!

This first post is an introduction to the Beaver Builder products and will give you an overview of the purchasing options, capabilities and technical aspects of both the plugin and theme. Follow the links in the sidebar to access additional resources. Let’s get started…

What is Beaver Builder?

Beaver Builder is a WordPress plugin and an optional theme that you can install on your website. Both the plugin and theme are installed just like any other WordPress plugin or theme. The plugin, otherwise known as a drag and drop page builder enables you to edit the content of pages on the front end of your website. Drag and drop page builders are becoming common place but Beaver Builder is definitely the best choice for a number of reasons:

• Superb support
• Easy drag and drop front page editing
• No messy shortcodes if you uninstall the plugin
• You can make a start quickly with temaplates and re-use elements everywhere.
• Beaver Builder won’t slow your site down like some other page builders.
• It’s really easy for you and your clients to update content on your site.
• A fantastic and friendly community is available to help you be a better Beaver!
• New add-ons and resources are being developed every day – extending your design capabilities even further.

You need WordPress version 3.5 and above and PHP 5.2.4 as a minimum to use the Beaver Builder plugin.

The Plugin

The plugin, otherwise known as a drag and drop page builder enables you to edit the content of pages on the front end of your website. You compose pages using rows and columns and you can move elements around the page by clicking and dragging them into desired positions.

The plugin comes with a series of content modules that you drag to the page allowing you to add elements like text, pictures, buttons, video and audio. All of this happens on the front-end of your site meaning you get to see how your pages look straight away without having to navigate back and forth between the back-end admin interface and the public facing side of your website.

Here’s Beaver Builder’s introductory video:

The Theme

The theme is optional – you don’t need it to make the plugin work and it comes with the Pro and Agency versions of the product.

The theme, like other WordPress themes, drives the whole look and feel of your site and gives you the ability to set the menu, header and footer styles and the fonts and colours used throughout your site. It allows you to set blog post page sidebar positions, featured image options, post and archive layouts and more, all controlled from within the WordPress Customiser.

The Beaver Builder theme is built to be 100% compatible with the plugin which is designed to work with any 3rd party theme. There are other themes that work well with the plugin. Genesis and GeneratePress Child themes are popular choices. We’ll cover themes in more detail in another post.

What does it cost?

Beaver Builder Lite

A ‘Lite’ version of the Beaver Builder plugin is available for free on the WordPress repository. It gives you access to the basic page builder and comes with the following features:

• Content Modules: HTML, Photo, Text Editor, Audio, Video, & Sidebar.
• Full-width, column-based layouts.
• Photo, colour, and video row backgrounds.
• Mobile-friendly, responsive layouts.
• Add your own CSS classes and IDs.
• Use WordPress Widgets and shortcodes.
• Works with Pages, Posts, and Custom Post Types.

Standard, Pro and Agency Versions

Beaver Builder comes in three price levels: Standard, Pro and Agency. You can see the prices and features here, but basically, the Standard is plugin only, whereas the Pro and Agency versions come with the Theme too. You can install the paid for plugin on as many sites as you like and the Pro and Agency versions work on WordPress Multisite setups.

The Agency version allows you to White Label the plugin to align with your own company branding. All of the paid versions give you access to additional premium modules, pre-designed templates and support from the Beaver Builder crew.

• Additional modules: Contact Form, Tabs, Slider, Pricing Table, Map, Blog Posts, Subscribe Form, Social Icons, and more.
• Beautiful pre-made layout templates.
• Save, export, and reuse full-page layouts, rows, and modules.
• Build your own custom modules

Setup the Beaver Builder plugin

You can buy the plugin from Beaver Builder or download the free Lite version from WordPress. To get it installed and setup, follow the advice on the Beaver Builder knowledge base page.

Install the free ‘Lite’ version of Beaver Builder from the WordPress repository

Once you have the plugin installed, you’ll notice a new section labelled ‘Page Builder’ in your WordPress admin Settings menu. This new settings area is the only backend administration area of the plugin you’ll see – the rest all happens on the front end of your site.

Settings for the Lite version of the Beaver Builder plugin

The pro versions add advanced modules to the Beaver Builder module settings tab

You’ll notice some differences in the free and paid for versions; there is a Licensing tab that replaces the Upgrade tab, there is an additional Templates, Icons and Help Button tab in the paid for versions and if you’ve bought the Agency version you’ll see a Branding tab.

The modules tab

The most important tab across all versions is the Modules tab. This is what drives the features available to you on the front end of your site. Using this panel, you can turn on or off the various standard and advanced modules as you need them. For this exercise, we’ll leave them all checked, or switched on.

The post types tab

The next most important tab is the Post Types tab – this tells Beaver Builder which post types you’d like to use the page builder with. By default, only pages are selected and if you have a standard WordPress install, you’ll see posts unchecked. It’s tempting to switch the builder on for all post types, but we recommend you only turn it on for pages first until you get a feel for the way the builder works.

Setup the Beaver Builder Theme

If you’ve bought the Pro or Agency package, you’ll also get access to the Beaver Builder theme. Download the theme from your Beaver Builder account and install it like you would any other WordPress theme. Activate it and then head over to the WordPress Customizer ( Appearance > Customize ) to access the theme settings. Things are going to look a little sparse at first but don’t worry, we’re about to change all that.

The first tab in the customizer gives you access to a series of Presets. These are default preset settings for the theme and you can play around and choose one that suits your style. (Hint – plenty more new presets are coming in the next theme update) Once you have a preset selected head over to the general tab and check out the settings there. One of the first things you can do to make your site unique is to choose from the available Google fonts in the Headings and Text tabs in the General settings.

Playing around with the font options gives your Beaver Builder WordPress site an instant unique look

Likewise, playing around with the header settings and uploading a logo to the Header Logo tab immediately changes the look of your site. There are many Customizer options to play with and if you’d like to learn more about them, check out the articles on Beaver Builder’s new knowledge base.

Quickly build a unique look and feel for your site using the Beaver Builder theme customiser

Front page editing

This is definitely where all the magic happens! Now that you have the plugin and theme installed let’s head to the homepage of our site and see how this thing works. Navigate to your homepage – or any page you like – and you’ll see in the WordPress admin bar along the top of your viewport, a new menu item called ‘Page Builder’. Click on that to activate the front end page builder. You can also access the page builder from the page menu, individual pages or the front end. Check out this video for more information and guidance on activating the page builder:

The first time you open the page builder, a dialogue will open asking if you’d like to take a tour – give it a spin to learn more. Once you’ve completed the tour, you’ll see a screen similar to this:

The page builder is activated and ready to start dragging modules.

You’re now ready to start dragging modules to your page – click and hold any module and drag it to the page to get started. Click the ‘Add Content’ button if the right-hand module panel closes, to add more content and more modules. Go Wild! Add photos, videos, headings and more. Play around with the advanced modules and see what you can build.

Drag the modules around the screen and reposition them – you can do that by clicking and holding the cross-hair icon on the very top left of every module. Click on a module to bring up the modal to edit the content. You can even copy modules on the page by clicking the copy icon on each of the modules. To find out what each module does refer to this guide.

You can use the pre-built templates in Beaver Builder if you’d like to start a standard layout design really quickly – this video shows you how:

The pre-built templates are great as they not only set up you page really quickly but they also illustrate finer settings like animation and row backgrounds. Try a few of the templates, each time overwriting the last to get a feel for how they work. We particularly like the Fullscreen template as a learning tool as it showcases animation, buttons, row background and more.

Once you’ve had a play with the modules and templates, click on the big blue ‘Done’ button to save your changes and admire your splendid creation!

Wrapping up

So that’s about all for this first post in our series and we hope this gives you a good overview of the Beaver Builder plugin and theme. There are many resources available and as we progress through the series you’ll see links appear in the right-hand sidebar. Follow these to discover even more knowledge and resources and if you get stuck you can always take a look at the Knowledge Base.

Our next post will delve a little deeper into advanced Beaver Builder usage including advanced modules, templates and global settings. Until then, be a better Beaver!

Subscribe

Subscribe to our blog posts to be notified just as soon as we hit that publish button!

Beaver Builder provides a solid starting point for creating powerful websites and in this series, we’re going to take you through the very basics – a step by step guide on downloading and installing Beaver Builder, an intro to the free and Pro versions, the page builder basics and using the Beaver Builder theme.

We’ll also take a look at using alternative themes and introduce you to some of the add-ons being developed by 3rd parties. Throughout the series, we’ll also show you where to find advice, knowledge base articles, forums and community resources. We’ll also show you a few example sites from our showcase that illustrate the kind of layouts and functionality that you can achieve.

By the time we’re done, you should have a good basic knowledge of the Beaver Builder plugin and theme, what additional and alternative resources are available to you, and where to find add-ons, child themes and landing page templates.

Each of these resources will add to your website building knowledge and skills.

Some of these posts will be basic know-how for many of you – but it’s knowledge that we often take for granted. I hope that by sharing these posts, we’ll help new users get to grips with using the plugin and theme and the rapidly expanding Beaver Builder ecosystem.

Our first post in the series – coming tomorrow, is a brief introduction to the Beaver Builder plugin and theme. So make sure you’re subscribed and share this post with anyone who may be interested.

Be a better Beaver!

Subscribe