Customizer settings: The General tab

 New on the General tab in Beaver Builder Theme Version 1.7.2:

  • In General > Headings and General > Text, you can set default text size responsively for large, medium, and small devices. See this article for more information. These responsive default heading and text settings also apply to Gutenberg blocks by default, though you have to preview or view the page to see the styles.

The General tab contains the following subtabs. Follow the links for more details.

  • Layout
    Set page layout width and content width for the theme areas of the page (header and footer). Enable or disable a Scroll to Top icon that appears at the bottom of the page. Determine versions of Bootstrap and how Font Awesome loads.
  • Background
    Set a custom background color or image that displays outside the boundaries of the layout.
  • Accent color
    Set a default accent color for text such as links and buttons in the theme areas of the page and Beaver Builder layouts.
  • Headings
    Set default typography for headings in the theme areas and Beaver Builder layouts. See this article for details.
  • Text
    Set default typography for text in the theme areas and Beaver Builder layouts. See this article for details.
  • Buttons
    Set default button style and typography that applies to buttons used in Beaver Builder layouts.
  • Social links
    Set links to your social media that will function in the icons you can add in theme areas (on other Customizer tabs) and in Beaver Builder layouts.

Layout

The Layout tab has the following settings.

Width

Choose whether you want a full-width or boxed layout, as described below.

Note: You need to set rows to full width in your Beaver Builder content layouts to take advantage of full-width layout in the theme.

Full width

With a full-width layout, rows in your content layouts can span edge to edge in the browser window, as shown in this screenshot.

Boxed

With a boxed layout, your page appears to be "boxed" or have a border around it. You can add more space at the top of the box or add a shadow to it, as described in the following sections.

See the Related Article below with details and examples of full-width and boxed layouts and content widths and how these settings work.

Content width

Sets the maximum width of the header and footer text within the full-width or boxed layout.

Note: The default maximum content width for header and footer content is 1100 pixels. Setting the Content width value higher can result in header and footer margin problems when resizing the browser window--make sure to test.

Tip: If you want row content in your content layout to have the same width as your header and footer content width, set the same width as a global setting for rows in the Beaver Builder editor. See the article on setting global row widths for instructions.

Spacing (boxed layouts only)

This field only appears when you choose a boxed layout width. You can customize the number of pixels of spacing on the top and bottom of the box.

Drop shadow size (boxed layouts only)

Set the number of pixels that will be used for a drop shadow along the box border. The larger the pixel amount, the larger the shadow.

Drop shadow color (boxed layouts only)

Choose a color for the drop shadow. In general, dark grays resemble shadows more realistically.

Scroll to top button

If this setting is enabled, then an upward arrow icon appears in the lower right corner of the page view once you have scrolled a certain distance down the page. Clicking the button executes a smooth scroll back to the top of the page.

CSS Framework

You can choose Bootstrap 3 or 4. If you're not sure, choose None. See the Related Article below for more information about Bootstrap versions.

Font Awesome Icons

You can control whether Font Awesome 5 loads only if Beaver Builder detects it is needed, or whether you want to load it on every page, or convert existing Font Awesome 4 icons. See this article for details.

Background

Sets a background color or image for the entire browser window. For more details, see the article about setting a background color or image for the browser window.

Accent Color

By default, the accent and hover colors that appear in this section are set by the theme's preset style, which is set at Customize > Presets. See the Related Articles for more information about presets.

You can override the preset default colors by setting your own. These custom defaults can then be overridden in individual rows, columns, and modules in the Beaver Builder editor.

The accent color is used to color elements such as links and buttons. Note that you can override the color of buttons in individual modules.

The hover color sets the color of linked text and buttons when the cursor hovers over it.

Headings

You can set heading styles that serve as the defaults in Beaver Builder, Beaver Themer, and Gutenberg layouts. Heading size can be configured responsively, in other words you can have different font sizes for large, medium, and small devices. See this article for details about responsive default heading styles.

Text

You can set custom font and other style defaults for non-heading text. See this article for details about responsive default text styles.

Buttons

You can set a default style for buttons in the Beaver Builder plugin editor, such as the Button module, the Callout module, and so on. See the Related Article below on setting a global button style for more details.

Social Links

Note: The Social Links subtab was moved from Customize > Settings to Customize > General In Version 1.6.

Configure which social icons appear in your theme by entering links to your page for each social site you want to show. You can also set the icon color as either monochrome or branded with the colors of each social site.

Here are the Customizer locations where you can add social icons to your theme's layout:

  • Header > Top bar layout
    Choose social icons for either Column 1 or Column 2.
    Monochrome icons appear in the link color you defined in Header > Top bar style.
    Branded icons appear with their branded letter and their brand color:
  • Header > Header layout
    Choose the Nav Bottom layout, and in the Content Layout setting choose social icons. They will appear to the right of the header logo area.
    Monochrome icons appear in a circle in the link color you defined in Header > Header style.
    Branded icons appear in a circle with their branded letter font and their brand color in a circle:
  • Footer > Footer layout
    Choose social icons for either Column 1 or Column 2.
    Monochrome icons appear in a circle in the link color you defined in Footer > Footer style.
    Branded icons appear in a circle with their branded letter font and their brand color in a circle.