Customizer settings: The General tab
New on the General tab in Beaver Builder Theme Version 1.7.3:
- In General > Layout you can adjust the theme breakpoints for medium and small devices. See the description below.
The General tab contains the following subtabs. Follow the links for more details.
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.
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.
Set default typography for headings in the theme areas and Beaver Builder layouts. See this article for details.
Set default typography for text in the theme areas and Beaver Builder layouts. See this article for details.
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.
The Layout tab has the following settings.
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.
With a full-width layout, rows in your content layouts can span edge to edge in the browser window, as shown in this screenshot.
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.
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.
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.
Theme Medium Breakpoint and Mobile Breakpoint
The number of pixels below which medium device behavior starts (for the Medium Breakpoint setting) or small device behavior starts (for the Mobile Breakpoint setting). Defaults are 992px and 768px, respectively. These settings affect theme behavior only with respect to header and nav layouts. For details about breakpoints and how they affect behavior in the Theme, see this article.
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.
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.
You can set heading styles that serve as the defaults in the Beaver Builder plugin (including 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.
You can set custom font and other style defaults for non-heading text. See this article for details about responsive default text styles.
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.
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.