Prerequisite Topics
Getting Started
Editing rows, columns, and modules in Page Builder is simple. To start, hover over the object you want to edit.
When you hover over a row, column, or module, it will be highlighted in blue (or gray, if it's a row) and a toolbar will appear in the top left-hand corner. You will have the following options:
- Move the object by clicking and dragging
- Edit Module Settings or Row Settings
- Duplicate the module or row
- Row Actions (not available in a module's toolbar)
- Edit Column (not available in a row’s toolbar)
- Remove the object from the page
To start editing, select Row Settings or Module Settings, the wrench icon. A window will pop up, and there you can change your settings. When you are done editing, press Save.
Different modules have different options for settings. However, most modules will have the following tabs.
General Settings
The General tab typically includes all the basic content and styling for a module. Some settings or styles may be required. The module will alert you if you try to submit edits without filling in the required information.
Style Settings
Depending on the module, sometimes styles are set in their own tab instead of the General tab. The Style tab may include Backgrounds, Colors, Text, Structure, Mobile Structure, or others sections.
Advanced Settings
Advanced settings give you more options for customizing your module and are generally the same for all modules. Here’s a breakdown of each section:
Margins and Padding
Margins determine how much empty space is around your row or module. Padding determines how much empty space is within your row or module. Margins prevent your rows and modules from crowding too close, while padding prevents inner content—such as text—from pressing too close to the edge of a row or column.
For more details about margins and padding, check out Page Builder's article: Basic Approach to Margins and Padding.
Responsive Layout
Users may view your page from many different devices. It is good practice to design for large devices, medium devices, and small devices. Columns will automatically stack and modules will adjust to smaller screen sizes. However, if you have some content you only want to display on certain screen sizes, you can choose display settings here.
For more details about responsive layouts, check out Page Builder's article: Responsive Behavior in the Beaver Builder Plugin.
Visibility
In this section, you can choose who can or cannot view the module or row. This is useful if you have information you want only logged in users to be able to see. However, there are very few instances where this is necessary. By default, all rows and modules are visible to the public, and it's generally best to keep them that way.
For more details about setting visibility, check out Page Builder's article: Change Element Visibility By User Login and Capability.
Animation
Set an animation on your module and set a time delay before the animation begins. Animations can help draw attention to important items or make your site feel more interactive. However, too many animations may distract from the content of your site. If you use them, use them sparingly and with good reason.
For more details about animating modules, check out Page Builder's article: Animate a Module.
HTML Element
This section is for users with some knowledge of web design who intend to add their own custom styling. You can add custom CSS and Javascript by selecting Layout CSS & JavaScript under Tools.
For more details about adding HTML elements to a module, check out Page Builder's article: Add a CSS ID or Class Name to a Module.
Other Settings
There are some modules that have more tabs than General, Style, and Advanced. These tabs are very specific to the module. If you come across something new, the best way to see what it does is to test out all its options. If you don't like the results, you can set them back to the default, or you can close the window by clicking Cancel instead of Save. When you hit Cancel to exit, all your changes will be lost and your module will revert back to its previous saved state.