Beaver Builder Global Settings

The Global Settings section in Beaver Builder is a powerful tool that allows you to make site-wide changes to your layout, design, and functionality. These settings apply to all posts and pages on your website, making it easy to maintain consistency. However, it’s important to use this feature carefully, as any changes made here will affect the entire site. This guide will help you understand and utilize the Global Settings in Beaver Builder effectively.

Understanding Global Settings

Global Settings are divided into several tabs: General, CSS, JavaScript, and Shapes. These settings allow you to control default behaviors and styles across your entire website.

General Settings

1. Default Page Heading

  • Purpose: Control the display of the default page heading.
  • Options:
    • Show: Choose whether to display the default page heading (Yes or No).
    • CSS Selector: Specify the CSS selector for the page heading.
  • Usage: Set to “No” if you prefer to use custom headings for individual pages or templates.

Example:

  • If you want a custom-designed header for each page, set “Show” to “No” and manage headers manually.

2. Rows

  • Purpose: Configure the default settings for rows on your site.
  • Options:
    • Margins: Set the default margins for rows (top, right, bottom, left).
    • Padding: Set the default padding for rows (top, right, bottom, left).
    • Max Width: Define the maximum width for rows.
    • Default Row Width: Choose between Full Width or Fixed.
    • Default Row Content Width: Choose between Full Width or Fixed.
  • Usage: Adjust these settings to maintain consistent spacing and layout for all rows across your site.

Example:

  • Set the padding to ensure there is always space around the content within each row, providing a cleaner look.

3. Columns

  • Purpose: Configure the default settings for columns within rows.
  • Options:
    • Margins: Set the default margins for columns.
    • Padding: Set the default padding for columns.
    • Max Width: Define the maximum width for columns.
    • Default Column Width: Choose between Full Width or Fixed.
    • Default Column Content Width: Choose between Full Width or Fixed.
  • Usage: Adjust these settings to ensure consistent column behavior across your site.

CSS Settings

Purpose: Add custom CSS that will apply site-wide.

  • Usage: Enter your custom CSS in this tab to style elements across your entire website.
  • Example: Use custom CSS to adjust fonts, colors, or other styles that need to be consistent throughout your site.

Example:

  • To change the default font color site-wide, you could add:

JavaScript Settings

Purpose: Add custom JavaScript that will apply site-wide.

  • Usage: Enter your custom JavaScript in this tab to add functionality or scripts across your entire website.
  • Example: Use custom JavaScript to add tracking codes, custom animations, or other interactive features.

Example:

  • To add a site-wide Google Analytics tracking code, you could add:

Shapes Settings

Purpose: Manage global settings for shapes used within your designs.

  • Usage: Configure shapes to be used consistently across your site for elements like dividers, backgrounds, and overlays.
  • Example: Define shapes and styles that match your branding to ensure a cohesive look.

Important Considerations

  • Global Impact: Any changes made in the Global Settings will affect the entire website. Ensure you review changes thoroughly before applying them.
  • Consistency: Use Global Settings to maintain a consistent look and feel across your site, which helps in providing a unified user experience.
  • Efficiency: Making site-wide changes through Global Settings can save time and ensure uniformity, but always double-check the impact to avoid unintended design issues.

Example Use Case

Setting Up Default Padding for Rows:

  1. Access Global Settings:
    • Navigate to the Beaver Builder interface and open the Tools section.
    • Click on “Global Settings” or use the shortcut CTRL + U.
  2. Adjust Row Padding:
    • In the General tab, locate the Rows section.
    • Set the padding values (e.g., 20px for top, right, bottom, and left).
    • This ensures that every row on your site will have consistent padding, providing a clean and uniform appearance.
  3. Save Changes:
    • Click “Save” to apply the changes across your entire site.

Conclusion

Utilizing the Global Settings in Beaver Builder allows you to control and optimize the design and functionality of your entire website efficiently. These settings are crucial for maintaining consistency and implementing site-wide changes quickly. However, always proceed with caution as changes here impact every page and post on your site. Experiment with these settings to find the best configuration that works for your website’s needs. Happy building!