Customizer settings: The General tab

New in Beaver Builder Theme Version 1.7:

  • In typography settings, font weight includes Italic settings whenever the Google font family includes an italic version.
  • Gutenberg blocks display type as formatted in Customizer settings.

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. In Version 1.7, determine versions of Bootstrap and Font Awesome.
  • 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.
  • Text
    Set default typography for text in the theme areas and Beaver Builder layouts.
  • Buttons (NEW in Beaver Builder Theme 1.7)
    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 (NEW in Beaver Builder Theme 1.7)

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 (NEW in Beaver Builder Theme 1.7)

Beaver Builder Theme Version 1.7, there's a new field called Font Awesome icons, which lets you control whether Font Awesome loads on your website pages and which version loads, which gives you more control in overcoming the backwards-incompatibility of Font Awesome Version 5 with Font Awesome Version 4. If you're not sure which setting to choose, use None, but check for missing links. See the Related Article below for more information about what the other Font Awesome settings do.

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

This is where you can set custom font information and style in all the headings, from <h1> to <h6>.

The default heading settings that appear on this tab come from the theme preset, but you can set custom defaults here. These custom defaults can then be overridden in individual Heading modules in the Beaver Builder editor, and color can be customized in rows, columns, and many modules.

As of Beaver Builder Theme 1.7, you can set a custom H1 heading style that's different from the H2 - H6 headings. There's a new field on the Customize > General > Headings tab called Style headings. If you change that setting to Custom H1 style, a new set of style options open specifically for H1 headings.

Text

You can set custom font and other style defaults for non-heading text. Like headings, the initial default settings come from the theme preset you selected, and these settings can be overridden in individual rows, columns, and modules in the Beaver Builder editor.

Buttons

As of Beaver Builder Theme 1.7, 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.