The Customizer

The customizer section deals with the overall style of the theme, so anything that will affect the whole site e.g. fonts, headers, footers, blog layout etc. If you have used WordPress before you will probably be familiar with this section. The customizer on Beaver Builder has many customizable options and this is more than likely the first place you will visit when starting the design of your website.

Note: If you decide to use the top bar element you will have to use CSS to style this section for mobile devices. 

Our recent practices see us using beaver builder to create all elements on the page and then hooking the elements which should appear on every page e.g. header, footer, navigation etc. The Beaver Builder elements are alot more customisable and you can achieve a more complex design than you can with the theme header and footer which you will read about below. 

Learn About Hooks

Presets

We generally do not use this option as the preset options tend to be quite basic and there are not many choices, however they are there to be used if you feel that one fits the design you had in mind.

General

You will need to change some options in the general tab. 

  • Layout - Generally, we do not touch this section as we do not need to change the width or change the CSS framework. However, if you have long pages of content and want to add a scroll to top button this is where you can find it.
  • Background - You will probably not need to change the background colour as it does not affect most designs
  • Accent Colour - This is default colour for elements such as links and buttons as well as icon backgrounds. You can change all of these colours manually as you create the element, however, adding the colour here will likely save you time in the future.
  • Headings - This is where you need to add the styles of headings. Font, colour and even size can be decided here. When designing if the size, colour or font is not suitable for a particular element you can overwrite it within the element itself but you should always change the font and colours in this section to save you time.
  • Text - This is where you need to add the style of the body font. Again font, colour and even size can be decided here. When designing if the size, colour or font is not suitable for a particular element you can overwrite it within the element itself but you should always change the font and colours in this section to save you time.
  • Buttons - We would normally just design the buttons as we are creating the elements as the design of the button will depend on the section it is in and the background colour.
  • Social links - If you choose to use the themes header, topbar or footer instead of hooks you will have the option of adding a social links section. This is the section where you would actually add the links. Then when you choose to add a social link section any links you have added here will automatically be added to that section.

Header

If you are using the theme's header instead of a hook this is where you need to style it. In this section you need to:

  • Add the logo
  • Choose the layout (where the logo and navigation should be)
  • Choose the navigation fonts
  • Add a top bar - top bars can include contact details, plain text, navigation or social icons which need to be added from the social links section as talked about above
  • Background and font colours for every section in the header
The top bar is the red section and the header is the white section. This header has a nav right layout
The top bar is the red section and the header is the white section. This header has a nav right layout

Content

This section only needs to be used if you have a blog/portfolio on the site or the site is e-commerce. If you do have either of these types of sites this is where you can choose the layout of your blog or products page.

Footer

If you are using the theme's footer instead of a hook this is where you need to style it. In this section, you can choose fonts and colours. There are 2 different footer sections - The footer and the footer widgets. 

Using the theme's footer can be quicker, however, it is quite restrictive on what you can customize. The widgets can be added in WordPress by going to appearance > widgets. You can add up to 4 columns. The footer section is like the top bar. You can add contact details, plain text or social links.

The navy section is the footer widget section and the section in white is the footer. You can add up to 4 columns in the footer widget section
The navy section is the footer widget section and the section in white is the footer. You can add up to 4 columns in the footer widget section

Widgets

You can change the widgets in this section but it is probably just easiest to go to appearance > widgets. There are many different widgets you can add to this section including text, images, social media feeds (widgets appear via plugins).

Code

You should not need to use this section.

Settings

This is one of the first sections you should visit, after creating the pages. WordPress makes the blog the homepage by default but this is the section where you need to change it to the homepage you created. You can also change the name of the site in this section but this should already be done for you.

Menus

Again you can change the menus in this section but it is probably just easiest to go to appearance > menus.

Additional CSS

This is the section you can use to add additional CSS. There are some things you may not be able to achieve with beaver builder, so you will have to use CSS. You will be able to see the live changes on the site as you add the CSS. You do not have to publish the page and refresh to see the changes.

Export/Import

You should not need to use this section.