Beaver Builder Tools Section

The Tools section in Beaver Builder provides a variety of options that help you manage your layout, customize settings, and streamline your workflow. Here’s a detailed explanation of each tool available in the Tools section and how to use them effectively.

Tools Section Overview

The Tools section can be accessed from the top left of the Beaver Builder interface. It offers a range of functionalities, from saving templates to managing revisions. Here’s a breakdown of the available tools and their intended uses:


1. Publish Layout (CTRL + P)

  • Purpose: Publish the current layout to make your changes live.
  • Usage: Once you’ve made changes to your layout, click on “Publish Layout” or use the shortcut CTRL + P to save and publish your changes.
  • Example: Use this tool after finishing your design adjustments to make the updated layout visible to visitors.

2. Save Template (CTRL + J)

  • Purpose: Save the current layout as a template for future use.
  • Usage: Click on “Save Template” or use the shortcut CTRL + J to save the current layout. Enter a name for your template and save it.
  • Example: Use this tool to save a custom-designed landing page layout that you want to reuse on other pages.

3. Duplicate Layout

  • Purpose: Create a copy of the current layout.
  • Usage: Click on “Duplicate Layout” to create an exact copy of your current layout. This can be useful for making variations without altering the original.
  • Example: Use this tool to test different design variations while keeping the original layout intact.

4. Preview Layout (P)

  • Purpose: Preview the layout as it will appear to visitors.
  • Usage: Click on “Preview Layout” or use the shortcut P to see how your layout will look on the front end without publishing it.
  • Example: Use this tool to review your design and ensure everything looks perfect before publishing.

5. Responsive Editing (R)

  • Purpose: Adjust the layout for different screen sizes.
  • Usage: Click on “Responsive Editing” or use the shortcut R to switch between desktop, tablet, and mobile views. Make necessary adjustments for each device.
  • Example: Use this tool to ensure your website looks great on all devices by customizing the layout for each screen size.

6. Revisions

  • Purpose: View and revert to previous versions of your layout.
  • Usage: Click on “Revisions” to see a list of saved revisions. Select a revision to preview and revert to it if needed.
  • Example: Use this tool to recover a previous version of your layout if you make changes that you want to undo.

7. History

  • Purpose: View the history of your recent changes.
  • Usage: Click on “History” to see a chronological list of recent actions. Select an action to revert to that point in time.
  • Example: Use this tool to quickly undo multiple recent changes and revert to a previous state.

Advanced Settings

8. Layout CSS & Javascript (CTRL + Y)

  • Purpose: Add custom CSS and JavaScript to the current layout.
  • Usage: Click on “Layout CSS & Javascript” or use the shortcut CTRL + Y to open a panel where you can enter custom CSS and JavaScript code.
  • Example: Use this tool to add custom styles or scripts specific to the current layout.

9. Global Settings (CTRL + U)

  • Purpose: Access and modify global settings for Beaver Builder.
  • Usage: Click on “Global Settings” or use the shortcut CTRL + U to open the global settings panel. Adjust settings like default colors, fonts, and breakpoints.
  • Example: Use this tool to set default styling options that apply across your entire website.

10. Global Styles (CTRL + G)

  • Purpose: Manage global styles for consistency across your site.
  • Usage: Click on “Global Styles” or use the shortcut CTRL + G to open the global styles panel. Configure styles that apply to all layouts globally.
  • Example: Use this tool to ensure consistent styling for headings, buttons, and other elements throughout your site.

11. Themer Layouts

  • Purpose: Manage layouts created with Beaver Themer.
  • Usage: Click on “Themer Layouts” to view and manage layouts built with Beaver Themer. These layouts can be applied to different parts of your site like headers, footers, and archive pages.
  • Example: Use this tool to edit a custom header or footer created with Beaver Themer.

Additional Tools

12. Change UI Brightness (Light/Dark)

  • Purpose: Toggle the brightness of the Beaver Builder interface.
  • Usage: Click on “Change UI Brightness” to switch between light and dark modes for the Beaver Builder interface.
  • Example: Use this tool to reduce eye strain by switching to a dark interface when working in low-light environments.

13. Media Library

  • Purpose: Access the WordPress media library.
  • Usage: Click on “Media Library” to open the WordPress media library and manage your media files.
  • Example: Use this tool to upload new images or manage existing media files.

14. WordPress Admin

  • Purpose: Access the WordPress admin dashboard.
  • Usage: Click on “WordPress Admin” to navigate to the main WordPress admin dashboard.
  • Example: Use this tool to switch between Beaver Builder and other WordPress admin tasks.

15. Help

  • Purpose: Access Beaver Builder help and documentation.
  • Usage: Click on “Help” to open the Beaver Builder help center, where you can find documentation and support resources.
  • Example: Use this tool if you need assistance or want to learn more about Beaver Builder features.

16. Keyboard Shortcuts

  • Purpose: View a list of keyboard shortcuts for Beaver Builder.
  • Usage: Click on “Keyboard Shortcuts” to see a list of available shortcuts that can help speed up your workflow.
  • Example: Use this tool to learn and utilize shortcuts for more efficient editing.


By understanding and utilizing the Tools section in Beaver Builder, you can streamline your design process, manage your layouts more effectively, and ensure consistency across your website. Each tool is designed to enhance your workflow and provide you with the flexibility to create beautiful, responsive websites. Experiment with these tools to see how they can improve your site-building experience. Happy building!