Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion bb-ai/developer/design-kit-format.md
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ Key rules from the format contract:
- All visible text, images, and meaningful icons should carry `data-field` so they are editable after import.
- Any group of two or more same-kind siblings is a repeater. Never use numbered keys like `item1_title`; use one key inside a repeater.
- Fields must not nest inside other fields; use sibling elements.
- Repeater items needing different visual treatments use a descriptive CSS class per item, which the importer turns into a variation selector. See [Modules and blocks](../build/modules-and-blocks.md#variations).
- Repeater items needing different visual treatments use a descriptive CSS class per item, which the importer turns into a variation selector. See [Modules and blocks](modules-and-blocks.md#variations).

## `globals/header.html` and `globals/footer.html` (optional)

Expand Down
2 changes: 1 addition & 1 deletion bb-ai/developer/rest-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ DELETE /generate/{job_id} Cancel a job
GET /providers List configured providers and their models
```

Generation is rate limited per user (30 requests per minute, 3 concurrent jobs) and subject to the per-user credit quota; see [AI assistant](../ai-assistant.md#credits-and-limits).
Generation is rate limited per user (30 requests per minute, 3 concurrent jobs) and subject to the per-user credit quota.

## Usage

Expand Down
2 changes: 1 addition & 1 deletion beaver-builder/advanced/performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Avoid using multiple caching solutions at the same time, also known as *compound

Optimizing assets like images, videos, and scripts is essential for improving website performance. Large or uncompressed files can slow down your site, increase bandwidth usage, and negatively impact the user experience. Many plugins and services are available to help with image optimization, such as tools that automatically compress and resize images without sacrificing quality.

For videos, we strongly recommend **not** uploading them directly to your WordPress media library. Hosting videos on your server can quickly consume storage space, slow down load times, and put unnecessary strain on your hosting resources. Instead, upload your videos to a platform such as YouTube or Vimeo, then embed them on your site using the [Video module](../layouts/modules/video/video.mdx). This reduces server load, improves streaming quality, and provides a smoother experience for your visitors.
For videos, we strongly recommend **not** uploading them directly to your WordPress media library. Hosting videos on your server can quickly consume storage space, slow down load times, and put unnecessary strain on your hosting resources. Instead, upload your videos to a platform such as YouTube or Vimeo, then embed them on your site using the [Video module](../layouts/modules/video.mdx). This reduces server load, improves streaming quality, and provides a smoother experience for your visitors.

Managing scripts and stylesheets with optimization plugins requires caution when configuring settings. Minifying files is safe and reduces file size, but options like “combine CSS” or “combine JavaScript” should generally be avoided. Combining CSS can cause styling issues, while combining JavaScript may load assets out of order and break layouts or functionality. Since HTTP/2 efficiently manages multiple requests, combining is unnecessary. For best results, stick to minification and only combine files if absolutely required and thoroughly tested.

Expand Down
4 changes: 2 additions & 2 deletions beaver-builder/basics/inline-editing.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,14 @@ Inline editing allows you to see how your content will look while you type and i
Any module that contains a text field or text editor area can be edited
inline. Here are some examples:

- [Button module](layouts/modules/button/button.mdx)
- [Button module](layouts/modules/button.mdx)
You can edit the text in the button.

- [Callout module](layouts/modules/callout.mdx)
You can edit the heading, the text area, and the call-to-action text if you've
selected text rather than a button..

- [Number counter module](layouts/modules/number-counter.mdx)
- [Number counter module](layouts/modules/numbers.mdx)
You can edit both the text and the number inline.

## Disable inline editing
Expand Down
2 changes: 1 addition & 1 deletion beaver-builder/introduction/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ conformance level for each:

The [WAI-ARIA standard](https://www.w3.org/TR/wai-aria/#aria-label) is a set of specifications on how to use "aria labels" to provide semantic information about widgets, structures, and behaviors to assistive devices. Beaver Builder adds default ARIA labels and some modules have an aria setting that lets you assign your own ARIA label.

Here's an example of HTML output from a [Menu module](/beaver-builder/layouts/modules/menu/menu.mdx), which has the custom ARIA label set to "primary menu":
Here's an example of HTML output from a [Menu module](/beaver-builder/layouts/modules/menu.mdx), which has the custom ARIA label set to "primary menu":

```html
<nav aria-label="primary menu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement" class="focus">
Expand Down
20 changes: 10 additions & 10 deletions beaver-builder/introduction/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,23 +50,23 @@ The video below offers a comprehensive comparison, and for more details, please

The lite (free) version of Beaver Builder contains the following subset of modules:

- [ACF Blocks](../developer/acf-blocks.mdx)
- [ACF Blocks](../layouts/modules/acf-block.mdx)
- [Audio](../layouts/modules/audio.mdx)
- [Box](../layouts/modules/box/index.mdx)
- [Button](../layouts/modules/button/button.mdx)
- [Box](../layouts/modules/box.mdx)
- [Button](../layouts/modules/button.mdx)
- [Button-Group](../layouts/modules/button-group.mdx)
- [Callout](../layouts/modules/callout-and-call-to-action.mdx)
- [CTA](../layouts/modules/callout-and-call-to-action.mdx)
- [Callout](../layouts/modules/callout.mdx)
- [CTA](../layouts/modules/cta.mdx)
- [Heading](../layouts/modules/heading.mdx)
- [HTML](../layouts/modules/html.mdx)
- [Icon](../layouts/modules/icon.mdx)
- [Menu](../layouts/modules/menu/menu.mdx)
- [Numbers](../layouts/modules/number-counter.mdx)
- [Photo](../layouts/modules/photo/photo.mdx)
- [Text](../layouts/modules/text.mdx)
- [Menu](../layouts/modules/menu.mdx)
- [Numbers](../layouts/modules/numbers.mdx)
- [Photo](../layouts/modules/photo.mdx)
- [Text](../layouts/modules/rich-text.mdx)
- [Sidebar](../layouts/modules/sidebar.mdx)
- [Star Rating](../layouts/modules/star-rating.mdx)
- [Video](../layouts/modules/video/video.mdx)
- [Video](../layouts/modules/video.mdx)
- [WordPress Patterns](../layouts/modules/wordpress-patterns.mdx) _(Reusable-Blocks)_
- [WordPress Widgets](../layouts/modules/widgets.mdx) _(Disabled by default)_

Expand Down
2 changes: 1 addition & 1 deletion beaver-builder/layouts/advanced-tab/css-js.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ CSS and JavaScript are the only sections found in the Advanced tab that are enab

The CSS section can be found in the [Advanced tab](index.md) and is available for all nodes (rows, columns, and modules). By using the CSS section, you can add custom CSS that will only be applied to that specific node.

For example, suppose you have a [Text module](layouts/modules/text.mdx) with a node id class name of `fl-node-1d43q3gf56s` and you add custom CSS to style the `<p>` tags with a specific color or font size. The following CSS rule will only affect paragraph (`<p>`) tags for that Text module.
For example, suppose you have a [Text module](layouts/modules/rich-text.mdx) with a node id class name of `fl-node-1d43q3gf56s` and you add custom CSS to style the `<p>` tags with a specific color or font size. The following CSS rule will only affect paragraph (`<p>`) tags for that Text module.

```css
p {
Expand Down
4 changes: 2 additions & 2 deletions beaver-builder/layouts/modules/accordion.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -596,10 +596,10 @@ Learn how to create a link that navigates to a specific accordion item.

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).
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.
See the [Advanced tab](../advanced-tab/html-element.md#id) article for more information about `ID` selectors.

3. Save changes.

Expand Down
2 changes: 1 addition & 1 deletion beaver-builder/layouts/modules/heading.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ The Style tab controls the visual appearance of the heading, including text colo
<summary><strong>Color</strong> <small>Supports: Responsive</small></summary>


The text color of the heading. Uses the [Color Picker](/beaver-builder/essentials/color-picker).
The text color of the heading. Uses the [Color Picker](../../basics/color-picker).
</details>

<details>
Expand Down
2 changes: 1 addition & 1 deletion beaver-builder/layouts/modules/photo.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ effects to images.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/u4i9rkAB1Rw" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
</div>

1. Add a [Photo module](/beaver-builder/layouts/modules/photo/photo.mdx) to your page.
1. Add a [Photo module](/beaver-builder/layouts/modules/photo.mdx) to your page.
2. Configure the Photo module as you normally would.
3. Click the **Advanced** Tab
4. In the **HTML element** section, add one of the following values to the **Class** field, depending on which effect you want. See the description of each effect in the sections below.
Expand Down
2 changes: 1 addition & 1 deletion beaver-builder/user-interface/global-settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ The CSS and JavaScript tabs allow you to apply custom CSS and JavaScript globall
![Global Settings](/img/beaver-builder/user-interface--global-settings--1.jpg)

:::tip
[Debug Mode](troubleshooting/debugging/enable-beaver-builder-debug-mode.md) lets you access any code you've added to the **Global Settings** and [Layout CSS & JavaScript](layout-css-js.md) options, so you can troubleshoot whether your custom code is causing a conflict with Beaver Builder.
[Debug Mode](troubleshooting/debugging/enable-beaver-builder-debug-mode.md) lets you access any code you've added to the **Global Settings** and [Layout Settings](layout-settings.md) options, so you can troubleshoot whether your custom code is causing a conflict with Beaver Builder.
:::

### CSS tab
Expand Down
4 changes: 2 additions & 2 deletions beaver-builder/user-interface/layout-settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ The option is only visible to users who can delete others' posts or have unfilte

The CSS tab adds custom CSS that applies only to the page or post you are editing. Use it for one-off styling that you do not want loaded site-wide.

The code editor includes syntax highlighting and runs only on the current layout. Styles added here are stored with the post and load alongside the layout on the front end. For site-wide CSS, use [Global Settings](/beaver-builder/essentials/global-settings) instead.
The code editor includes syntax highlighting and runs only on the current layout. Styles added here are stored with the post and load alongside the layout on the front end. For site-wide CSS, use [Global Settings](global-settings.md) instead.

:::tip
Debug Mode lets you view any code added through Global Settings or Layout Settings, which makes it easier to identify whether your custom code is causing a conflict with Beaver Builder.
Expand All @@ -33,7 +33,7 @@ The code editor includes syntax highlighting and runs only on the current layout

The JavaScript tab adds custom JavaScript that applies only to the page or post you are editing. Use it for behaviour that needs to run on a single page rather than across the whole site.

The code editor includes syntax highlighting and runs only on the current layout. Scripts added here are stored with the post and execute on the front end after the layout renders. For site-wide JavaScript, use [Global Settings](/beaver-builder/essentials/global-settings).
The code editor includes syntax highlighting and runs only on the current layout. Scripts added here are stored with the post and execute on the front end after the layout renders. For site-wide JavaScript, use [Global Settings](global-settings.md).

<Warning>
Custom JavaScript runs on the front end with the same privileges as your theme code. Only users who can edit unfiltered HTML can save changes here.
Expand Down
4 changes: 2 additions & 2 deletions beaver-builder/user-interface/tools-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ Keyboard shortcut are customizable and let you remove, modify, or register your
| Enter [Responsive Editing Mode](layouts/responsive-design/editor.md) & Cycle Breakpoints | <kbd>R</kbd> |
| Enter [Responsive Editing Mode](layouts/responsive-design/editor.md) & Cycle Breakpoints (Reverse Order) | <kbd>⇧ Shift</kbd> + <kbd>R</kbd> |
| Open [Global Settings](global-settings.md) | <kbd>⌘ command</kbd> + <kbd>U</kbd> |
| Open [Layout Settings](layout-css-js.md) | <kbd>⌘ command</kbd> + <kbd>Y</kbd> |
| Open [Layout Settings](layout-settings.md) | <kbd>⌘ command</kbd> + <kbd>Y</kbd> |
| Display Module Search | <kbd>⌘ command</kbd> + <kbd>I</kbd> |
| Save Layout | <kbd>⌘ command</kbd> + <kbd>S</kbd> |
| Publish changes without leaving builder | <kbd>⌘ command</kbd> + <kbd>P</kbd> |
Expand All @@ -178,7 +178,7 @@ Keyboard shortcut are customizable and let you remove, modify, or register your
| Enter [Responsive Editing Mode](layouts/responsive-design/editor.md) & Cycle Breakpoints | <kbd>R</kbd> |
| Enter [Responsive Editing Mode](layouts/responsive-design/editor.md) & Cycle Breakpoints (Reverse Order) | <kbd>⇧ Shift</kbd> + <kbd>R</kbd> |
| Open [Global Settings](global-settings.md) | <kbd>Ctrl</kbd> + <kbd>U</kbd> |
| Open [Layout Settings](layout-css-js.md) | <kbd>Ctrl</kbd> + <kbd>Y</kbd> |
| Open [Layout Settings](layout-settings.md) | <kbd>Ctrl</kbd> + <kbd>Y</kbd> |
| Display Module Search | <kbd>Ctrl</kbd> + <kbd>I</kbd> |
| Save Layout | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
| Publish changes without leaving builder | <kbd>Ctrl</kbd> + <kbd>P</kbd> |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ To display single products, use the Singular Themer layout type. See [this artic

To customize layouts for archive pages generated by WordPress that display the entire set of products, products by category, or products by brand, use an Archive Themer layout type. See [this article](/beaver-themer/integrations/bigcommerce/products-posts-module-for-bigcommerce.md) for more information.

The BigCommerce integration inserts a new section called **BigCommerce** into the **Themer group** in the Content panel, with one module, called the Products module. This module appears in the BigCommerce section only in Archive-type Themer layouts, but you can also access all of its features in the Posts module in the **Standard modules** section of the Content panel. See [this article](/beaver-builder/layouts/modules/bigcommerce-products) for more information.
The BigCommerce integration inserts a new section called **BigCommerce** into the **Themer group** in the Content panel, with one module, called the Products module. This module appears in the BigCommerce section only in Archive-type Themer layouts, but you can also access all of its features in the Posts module in the **Standard modules** section of the Content panel. See [this article](/beaver-builder/layouts/modules/bigcommerce) for more information.

Note that both the BigCommerce plugin and Beaver Themer have to be installed to access these features.

Expand Down
2 changes: 1 addition & 1 deletion beaver-themer/integrations/tec/modules/event-cost.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_label: "Singular: Event Cost"
description: The article covers the Event Cost module which displays an event's cost.
---

The Event Cost module is based on the Beaver Builder [Text Editor module](/beaver-builder/layouts/modules/text). It uses an instance of the classic WordPress editor and displays the [event cost](https://theeventscalendar.com/knowledgebase/k/creating-an-event/#Event_Cost) if one is added to your events. A value of "Free" is returned when "0" is entered as the event cost.
The Event Cost module is based on the Beaver Builder [Text Editor module](/beaver-builder/layouts/modules/rich-text). It uses an instance of the classic WordPress editor and displays the [event cost](https://theeventscalendar.com/knowledgebase/k/creating-an-event/#Event_Cost) if one is added to your events. A value of "Free" is returned when "0" is entered as the event cost.

It does this by automatically inserting the [`the_event_calendar_cost`](../field-connections.md#event-cost) field connection into the text area, as shown in the image below.

Expand Down
2 changes: 1 addition & 1 deletion beaver-themer/integrations/tec/modules/event-date-time.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ The Events Date & Time module display an event's date and time e.g. August 1st @

![](/img/beaver-themer/integrations--tec--event-date-time--1.jpg)

The Event Date & Time module is based on the Beaver Builder [Text Editor module](/beaver-builder/layouts/modules/text). It uses an instance of the classic WordPress editor and automatically inserts the [`the_events_calendar_date_and_time`](../field-connections.md#event-date-and-time) field connection into the text area, as shown in the image below.
The Event Date & Time module is based on the Beaver Builder [Text Editor module](/beaver-builder/layouts/modules/rich-text). It uses an instance of the classic WordPress editor and automatically inserts the [`the_events_calendar_date_and_time`](../field-connections.md#event-date-and-time) field connection into the text area, as shown in the image below.

![](/img/beaver-themer/integrations--tec--event-date-time--2.jpg)

Expand Down
2 changes: 1 addition & 1 deletion beaver-themer/integrations/tec/modules/event-posts.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ sidebar_label: "Archive: Event Posts"

The Event Posts module is in **The Events Calendar Modules section** in the **Themer Modules group** in the Content panel when you're editing an Archive- type Themer layout in Beaver Themer and you have The Events Calendar plugin installed.

The Event Posts module has all of the [regular Posts module settings](/beaver-builder/layouts/modules/posts/) on the **Layout** tab plus an extra **Events Calendar** section, which lets you show or hide the **Event date** (and time) and the **Event address**.
The Event Posts module has all of the [regular Posts module settings](/beaver-builder/layouts/modules/post-grid/) on the **Layout** tab plus an extra **Events Calendar** section, which lets you show or hide the **Event date** (and time) and the **Event address**.

When a Posts module is used in a Themer layout, the **Source** field on the **Content** tab is usually set to **Main Query**. This displays a list of posts that is filtered to match the location in which it occurs. For example, if you create an Archive Themer layout and specify the location as all Event Category archives, then add a Posts module to the Themer layout, every event category archive page will display the posts for just that category.
Loading
Loading