Skip to content

Update Beaver Builder settings screenshots and expand module guides #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dannyholt merged 1 commit into from
Jun 9, 2026
Merged

Update Beaver Builder settings screenshots and expand module guides #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions beaver-builder/layouts/modules/accordion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -587,3 +587,142 @@ Typography settings control font family, size, weight, line height, letter spaci
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the [Advanced tab](../advanced-tab/index.md) section for more information.

## Link to a Specific Item

Learn how to create a link that navigates to a specific accordion item.

### Adding an `ID`

To begin, first assign an `ID` to the Accordion module, which can be accomplished by following the instructions below:

1. Open the Accordion module settings and click the [Advanced tab](../../advanced-tab/index.md).

2. Scroll to the `ID` setting, and set a unique `ID` name for the module.
See the [Advanced tab](../../advanced-tab/html-element.md#id) article for more information about `ID` selectors.

3. Save changes.

### Index Values

Every item in the Accordion module is given a unique index value that starts at `0`. The index value of the initial Accordion item is `0`, the second item is assigned an index value of `1`, the third item has an index value of `2`, and so on. By using these index values in an HTML link, you can generate a link to a specific Accordion item and set it as the active item.

The below HTML code example demonstrates how the index values are allocated to each Accordion item. In this instance, the Accordion module has been given a unique ID name of `my-accordion` and consists of three Accordion items.

```html
<div id="my-accordion" class="fl-module fl-module-accordion">
<div class="fl-module-content fl-node-content">
<div class="fl-accordion">
<div id="my-accordion-0" class="fl-accordion-item"></div>
<div id="my-accordion-1" class="fl-accordion-item"></div>
<div id="my-accordion-2" class="fl-accordion-item"></div>
</div>
</div>
</div>
```

### Link Structure

The link structure will differ based on whether the Accordion module is on the same page as your link. To create the link, you can use either the Button or HTML modules in your layout.

#### Same Page

When the link is on the same page as the Accordion module, you can use a hash character (`#`) followed by an `ID` name and the item's index value separated by a hyphen. For instance, using our example `ID` name of `my-accordion`, the link would be structured as follows:

```html title='Button module link option'
#my-accordion-1
```

```html title='HTML module link'
<a href="#my-accordion-1">My Accordion link</a>
```

#### Different Page

To create a link to the Accordion module from a different page on your website, use the complete URL of the target page along with the hash symbol (`#`) followed by the `ID` and index value. For instance, if you want to add the link to your homepage, and the Accordion module is located on a page named Sample Page, the link should appear like this:

```html title='Button module link option'
https://my-website.com/sample-page#my-accordion-1
```

```html title='HTML module link'
<a href="https://my-website.com/sample-page#my-accordion-1">My Accordion link</a>
```

## CSS Customization

Use this section to learn how custom CSS can extend the Accordion module’s styling beyond the options available in the module settings. The examples below show different ways to customize the appearance of accordion items, labels, icons, and other elements.

:::tip
The examples below use the Accordion module's `fl-module-accordion` parent class, which, depending on where you add your CSS, will style all Accordion modules used on your website. However, if you wish to customize a specific Accordion module, you should add a custom class name to the module and replace `fl-module-accordion` with the new custom class name.

```css
.my-custom-class .fl-accordion-item-active {
background-color: #f4f4f4;
}
```

:::

### Active Accordion Item

The following CSS examples demonstrate how to modify the appearance of the active accordion item. Doing so can increase the visibility in comparison to the inactive items:

#### Background Color

```css
.fl-module-accordion .fl-accordion-item-active {
background-color: #f4f4f4;
}
```

#### Label Color

```css
.fl-module-accordion .fl-accordion-item-active .fl-accordion-button-label {
color: #ff0000;
}
```

#### Accordion Content Color

```css
.fl-module-accordion .fl-accordion-item-active .fl-accordion-content {
background-color: #f4f4f4;
color: #000000;
}
```

### Replace Expand/Collapse Icons with Images

You can use the CSS provided below to replace the icons of the collapsed and expanded states in the Accordion module with images of your choice.

```css
.fl-module-accordion .fl-accordion-button {
width: 100%;
position: relative;
}

/* Hide Accordion Icons */
.fl-module-accordion .fl-accordion-button .fl-accordion-button-icon {
display: none;
}

/* Collapsed Image */
.fl-module-accordion .fl-accordion-button-label:after {
content: '';
width: 30px;
height: 30px;
background-image: url(IMAGE URL);
background-size: cover;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

/* Expanded Image (Active Accordion) */
.fl-module-accordion .fl-accordion-item-active .fl-accordion-button-label:after {
background-image: url(IMAGE URL);
}
```
69 changes: 57 additions & 12 deletions beaver-builder/layouts/modules/contact-form.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -562,18 +562,63 @@ The Advanced tab includes all the standard settings for margins, visibility, ani

See the [Advanced tab](../advanced-tab/index.md) section for more information.

## Feature Guides
## Add a Google reCAPTCHA

### Set up reCAPTCHA
Google reCAPTCHA blocks automated spam submissions on the Contact Form and [Subscribe Form](subscribe-form.mdx) modules. You configure it in the module's **Captcha** tab using a key pair from Google. Beaver Builder supports three validation types, so you can choose between a visible checkbox and background scoring.

Use this workflow when the form needs Google reCAPTCHA protection.
### Before you begin

1. Open the **Captcha** tab and set **reCAPTCHA Field** to **Show**.
2. Choose **Validate Type** based on the submission flow: **"I'm not a robot" checkbox (V2)**, **Invisible (V2)**, or **Invisible (V3)**.
3. Register the site in the Google reCAPTCHA Admin Console using the same validation type selected in the module.
4. Use a different key pair for each validation type when the site uses both v2 and v3 forms.
5. Paste the public key into **Site Key** and the private key into **Secret Key**.
6. Set **Theme** to **Light** or **Dark** for visible widgets.
7. If **Validate Type** is **Invisible (V3)**, add an **Action** value that matches the verification flow for that form.
8. Publish the page and submit the form from the front end.
9. If verification fails, recheck the selected validation type, hostname, and key pair.
You need a few things in place before you configure the module.

- A published page that contains a Contact Form or Subscribe Form module.
- A Google account with access to the [reCAPTCHA admin console](https://www.google.com/recaptcha/admin).
- The domain name where the form runs, so you can register it with Google.

:::info
Each validation type uses a different key pair. If you switch a form between the checkbox and an invisible type, register new keys in the admin console and update the module.
:::

### Choose a reCAPTCHA type

Pick the validation type that fits how you want visitors to verify themselves. You select the matching type later in the module's **Validate Type** setting.

- **"I'm not a robot" checkbox (v2):** Visitors check a box, and Google may show an image challenge. This is the most visible option and the only one where the **Theme** setting (light or dark) changes the widget's appearance.
- **Invisible (v2):** No checkbox appears. Verification runs when the visitor submits the form, and Google shows a challenge only when a submission looks suspicious. A reCAPTCHA badge displays in the corner of the page.
- **Invisible (v3):** Runs silently and returns a score instead of showing a challenge. Beaver Builder accepts submissions that score 0.5 or higher. This type supports an optional **Action** label and also displays a badge.

:::info
Google requires the reCAPTCHA badge on invisible (v2 and v3) forms, or a text disclosure that links to Google's [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms).
:::

### Get your reCAPTCHA keys

Register your site with Google to generate the site key and secret key.

1. Sign in to the [Google reCAPTCHA admin console](https://www.google.com/recaptcha/admin).
2. Add a label so you can identify the site later.
3. Select the reCAPTCHA type that matches the validation type you chose: **reCAPTCHA v2 "I'm not a robot" Checkbox**, **reCAPTCHA v2 Invisible badge**, or **reCAPTCHA v3**.
4. Add your domain. Omit `http://`, `https://`, and any path.
5. Accept the terms and submit the form.
6. Copy the **Site Key** and **Secret Key**. Keep the secret key private.

### Add reCAPTCHA to your form

Enter your keys in the module to turn on protection.

1. Open the form module's settings and select the **Captcha** tab.
2. Set **reCAPTCHA Field** to **Show**.
3. Set **Validate Type** to the type you registered with Google.
4. Paste your **Site Key** and **Secret Key**.
5. For the checkbox type, set **Theme** to **Light** or **Dark**.
6. For **Invisible (v3)**, optionally enter an **Action** label.
7. Save the module and publish the page.

### Test your form

Confirm the protection works from the front end after publishing.

1. Open the published page in a logged-out browser or private window.
2. Complete the form and submit it.
3. For the checkbox type, confirm the widget appears and must be checked before the form sends.
4. For invisible types, confirm the badge appears and the form submits without a challenge under normal use.
5. Verify the notification email arrives at the configured address.
66 changes: 66 additions & 0 deletions beaver-builder/layouts/modules/gallery.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,3 +137,69 @@ The border style, width, color, and radius applied to each photo, plus an option
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the [Advanced tab](../advanced-tab/index.md) section for more information.

## Gallery Lightbox

The Button module has a built-in lightbox feature, but if you put in the shortcode for a gallery, the entire gallery will display in the lightbox, rather than the individual gallery images.

You can configure the button click to display the individual gallery images in the lightbox, with previous and next navigation, as shown in this screenshot:

![](/img/how-to-tips-open-gallery-button-1.jpg)

The instructions here will show you how to create a Button module an a Gallery module, add custom IDs, and copy in some jQuery to make it all work.

### 1. Create a Button module

Create your button and give it a custom ID also, using these instructions.

1. Drag a Button module into your layout.
Leave the Click Action set to **Link** but don't add a link.
The link will be set by the jQuery.
2. On the **Advanced** tab in the **HTML element** section, enter an ID for your button in the **ID** field.
In this example, we'll use `gallery-1-button` as the ID value.
4. Enter any other style settings you want for the button and save the module.

### 2. Create a Gallery module

Create your gallery and give it a custom ID using these instructions.

1. Add a Gallery module to your layout.
Placing the gallery in a row under the button is a good place. The jQuery will keep the gallery from being displayed on your main page.
2. Add photos to the Gallery module in the normal fashion.
3. On the **General** tab, set **Click action** to **Lightbox** and select the size of image you want to display in the lightbox.
4. On the **Advanced** tab, in the **HTML element** section, enter an ID for your gallery in the **ID** field.
In this example, we'll use `gallery-1` as the ID value,
5. Save the module.

### 3. Add the jQuery code

Add the jQuery code using the following instructions.

1. In the Beaver Builder editor, click the down arrow in the Title bar in the upper left corner to open the **Tools** menu, then choose **Layout CSS & JavaScript**.
2. Click the **JavaScript** tab, then paste in the following code.
```js
jQuery(document).ready(function ($) {
var galleryid = "#gallery-1"; //Gallery ID
var buttonid = "#gallery-1-button"; //Button ID

if ("undefined" !== typeof FLBuilderConfig) {
return;
}

jQuery(galleryid + " .fl-photo-img").hide();

jQuery(buttonid).on("click", function (e) {
e.preventDefault();
$(galleryid + " img")
.first()
.trigger("click");
});
});
```
3. Change lines 2 and 3 to the ID values that you assigned to the Gallery module and the Button module respectively.
4. Click **Save** to save the code.
5. Publish the page. Hold down the Shift key and click the Refresh icon to clear your browser cache, then test your button.

:::tip
If you're using more than one button and gallery lightbox on the same page, duplicate this jQuery code and change the `ID` values to match each button and gallery.
:::
52 changes: 52 additions & 0 deletions beaver-builder/layouts/modules/menu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -854,3 +854,55 @@ Typography settings control font family, size, weight, line height, letter spaci
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the [Advanced tab](../advanced-tab/index.md) section for more information.

---

## Link a Menu Item to a Page Section

<div className="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PofxCzgqbN8" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>

You can add a menu item whose link goes to a specific section on the same page
or a section on a different page. This works both with menus you set up in your theme and menus in the Beaver Builder Menu module. It's particularly useful for single-page websites where you have a menu for the various sections on that page.

:::info
If the section is on the same page as the link, there's a smooth scroll to the
linked section. If the link goes to a section on a different page, there's an
immediate jump to that section on the other page.
:::

This technique involves two steps: adding a unique ID (called an *anchor*) to the target section in a Beaver Builder layout, then adding the link with that anchor to your menu.

### 1. Create the anchor for the link target

:::tip
You can add the ID to a module, a column, or a row, but the target tends to position best if you add the ID to the row containing the item you want to link to. Also, if the section is near the end of the page, the scrolling may not go all the way down to the section with the ID. This is a property of how browsers handle links to anchors.
:::

1. In the Beaver Builder editor, open the row (or column or module) that you plan to link to.
2. Click the **Advanced** tab and scroll down to the **HTML elements** section.
3. For the **ID** setting, add a unique value such as `my-unique-id`.
ID values may only contain alphanumeric characters, hyphens, or underscores.

:::tip
It's a best practice to prefix ID and class values with a namespace. The namespace prefix plays a double role.

First, it helps identify where the ID or class comes from. For example, Beaver Builder uses the namespace `fl-`, so when you're inspecting the HTML source for a page, it's easy to identify the Beaver Builder code as opposed to, say, that of other plugins.

Second, a namespace helps to avoid accidentally using words that are reserved for use in coding languages like [PHP](https://www.php.net/manual/en/reserved.php) and [JavaScript](https://www.w3schools.com/js/js_reserved.asp) or duplicating IDs and classes from other products.

For example, if your business name is Best Website Designs, you might choose `bwd-` as your namespace prefix and your ID value might be `bwd-menutarget-1`. Just make sure each ID value is unique on your site.
:::

### 2. Add the unique ID to a menu item

1. On the WordPress admin menu, click **Appearance > Menus** and make sure the menu you want to use is displayed.
2. In the left column expand the **Custom links** category.
![](/img/how-to-tips-add-menu-that-links-1.png)

3. Enter the full URL of the target page in which the section occurs, followed by the pound sign and your ID. For example, if the section occurs on the page *`https://www.example.com/goals/`* , then your URL would be:
*`https://www.example.com/goals/#my-unique-id`*

4. Enter whatever link text you want your menu item to display.
5. Click **Add to menu**.
Loading
Loading