Display
+ + +The Display section controls label markup, post output, and expand or collapse behavior. + +
+
Display Settings
+ + +
+` heading.
+- **h2:** Renders the label with an `
Label Tag Default: h2
+ + +Sets the HTML tag used for each accordion label. + +- **a:** Renders the label with an anchor element that keeps heading semantics. +- **h1:** Renders the label with an `` heading.
+- **h2:** Renders the label with an `` heading.
+- **h3:** Renders the label with an `` heading.
+- **h4:** Renders the label with an `` heading.
+- **h5:** Renders the label with an `` heading.
+- **h6:** Renders the label with an `` heading.
+- **div:** Renders the label with a `` element.
+- **span:** Renders the label with a `` element.
+
+
+
+
+Content Type (Post Only) Default: Post Content
+
+
+Selects whether post-based items render full post content or post excerpts. This field appears when **Content Source** is set to **Post**.
+
+- **Post Content:** Displays the full post content inside each accordion item.
+- **Post Excerpt:** Displays the post excerpt and reveals excerpt display settings.
+
+
+Excerpt Settings
+
+
+
+Excerpt Length (Post Excerpt Only)
+
+
+Sets the number of words shown in each post excerpt.
+
+
+
+Excerpt More Text (Post Excerpt Only) Default: ...
+
+
+Sets the text appended after each excerpt.
+
+
+
+More Link (Post Excerpt Only) Default: Hide
+
+
+Shows or hides a link below each post excerpt.
+
+- **Show:** Displays a link below the excerpt and reveals **More Link Text**.
+- **Hide:** Removes the excerpt link.
+
+
+More Link Text
+
+
+
+More Link Text (Show Only) Default: Read More
+
+
+Sets the label used for the post excerpt link when **More Link** is set to **Show**.
+
+
+
+
+
+
+
+Expand on Tab Default: No
+
+
+Expands an accordion item when its button receives keyboard focus through tab navigation.
+
+- **Yes:** Opens an accordion item when keyboard users tab to its label.
+- **No:** Keeps tab focus from expanding accordion items automatically.
+
+
+
+
+Collapse Inactive Default: Yes
+
+
+Keeps only one item open at a time or allows multiple items to remain open.
+
+- **Yes:** Keeps only one accordion item open at a time.
+- **No:** Allows multiple accordion items to stay open at the same time.
+
+
+
+
+Expand First Item Default: No
+
+
+Expands the first accordion item when the module loads.
+
+- **Yes:** Opens the first accordion item by default when the module loads.
+- **No:** Leaves all accordion items collapsed on load.
+
+
+
+
+
+### Style Tab
+
+The Style tab controls the size, spacing, colors, icons, and content styling used by the accordion.
+
+
+Item Size Default: Small
+
+
+Sets the preset size used for accordion labels.
+
+- **Small:** Keeps the accordion labels compact. Inherits the font size from the theme or parent element.
+- **Medium:** Uses a balanced label size for most layouts. Sets the label font size to 20px.
+- **Large:** Gives the accordion labels more visual emphasis. Sets the label font size to 26px.
+
+
+
+
+Item Spacing Default: 10; Supports: Responsive
+
+
+Sets the spacing between accordion items.
+
+
+
+Item Border Supports: Responsive
+
+
+Configures the border style, width, radius, and color for each accordion item.
+
+:::tip
+
+The Responsive Toggle lets you set different border values for desktop, tablet, and mobile. The **Width** and **Radius** controls also support Link Values so you can keep all sides or corners in sync.
+:::
+
+
+General
+
+
+
+Style Default: Default
+
+
+Selects the line style used for the border.
+
+
+Available options
+
+
+- Default
+- None
+- Solid
+- Dashed
+- Dotted
+- Double
+
+
+
+**Default** uses the module or theme's built-in border styling when one is available. Choose **None** to remove the visible border without clearing any saved width, color, or radius values.
+
+
+
+Color
+
+
+Sets the border color using the color picker. This field also supports alpha transparency.
+
+
+
+Width Supports: Responsive, Link Values
+
+
+Sets the border width for the top, right, bottom, and left sides using `px`.
+
+Click into any width field to open a slider, or type a value directly for more precise control.
+
+
+
+Radius & Shadow
+
+
+
+Radius Supports: Responsive, Link Values
+
+
+Rounds the corners by setting the top-left, top-right, bottom-right, and bottom-left radius in `px`.
+
+Larger matching values create softer corners, and very high values can produce pill or circular shapes when the element dimensions allow it.
+
+
+Box Shadow
+
+
+Adds a shadow around the element to create depth and separation from surrounding content.
+
+
+Box Shadow settings
+
+
+
+Color
+
+
+Sets the shadow color and opacity.
+
+
+
+X
+
+
+Sets the horizontal shadow offset. Positive values move the shadow to the right, and negative values move it to the left.
+
+
+
+Y
+
+
+Sets the vertical shadow offset. Positive values move the shadow downward, and negative values move it upward.
+
+
+
+Blur
+
+
+Softens the shadow edge. Higher values create a blurrier, more diffuse shadow.
+
+
+
+Spread
+
+
+Expands or contracts the overall size of the shadow. Positive values make the shadow larger, and negative values pull it inward.
+
+
+
+
+
+
+
+Label
+
+
+The Label section controls the appearance of accordion headings.
+
+
+Label Settings
+
+
+
+Text Color Supports: Field Connections
+
+
+Sets the label text color and icon color.
+
+
+
+Background Color Supports: Field Connections
+
+
+Sets the background color of the label row.
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Sets the inner spacing of the label row.
+
+
+
+Typography Supports: Responsive
+
+
+The font settings for accordion labels.
+
+
+Typography settings
+
+Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
+
+
+
+
+
+
+
+Icon
+
+
+The Icon section controls icon placement and icon states for accordion labels.
+
+
+Icon Settings
+
+
+
+Icon Position Default: Right
+
+
+Places the icon on the left or right side of the label.
+
+- **Left:** Places the icon before the label text.
+- **Right:** Places the icon after the label text.
+
+
+
+
+Icon Default: fas fa-plus; Supports: Field Connections
+
+
+Sets the icon shown when an item is collapsed.
+
+
+
+Active Icon Default: fas fa-minus; Supports: Field Connections
+
+
+Sets the icon shown when an item is expanded.
+
+
+
+DuoTone Icon Primary Color (DuoTone Icons Only) Supports: Field Connections
+
+
+Sets the primary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.
+
+
+
+DuoTone Icon Secondary Color (DuoTone Icons Only) Supports: Field Connections
+
+
+Sets the secondary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.
+
+
+
+
+
+Content
+
+
+The Content section controls the appearance of accordion panels.
+
+
+Content Settings
+
+
+
+Text Color (Custom Content Only) Supports: Field Connections
+
+
+Sets the text color for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**.
+
+
+
+Background Color Supports: Field Connections
+
+
+Sets the background color of the accordion content panel.
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Sets the inner spacing of the accordion content panel.
+
+
+
+Typography (Custom Content Only) Supports: Responsive
+
+
+The font settings for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**.
+
+
+Typography settings
+
+Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
+
+
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/acf-block.mdx b/beaver-builder/layouts/modules/acf-block.mdx
new file mode 100644
index 00000000..73cb875b
--- /dev/null
+++ b/beaver-builder/layouts/modules/acf-block.mdx
@@ -0,0 +1,43 @@
+---
+title: ACF Blocks
+icon: "cuboid"
+description: "Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts."
+---
+
+
+Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts.
+
+## Requirements
+
+The ACF Block module requires **Advanced Custom Fields Pro** to be installed and activated.
+
+## What are ACF Blocks?
+
+ACF Blocks are custom content blocks built with the Advanced Custom Fields (ACF) plugin. They let you create your own editor blocks using custom fields, making it easier to build consistent, reusable blocks for both Beaver Builder and the WordPress Block Editor through the familiar ACF field groups interface.
+
+To create an ACF Block for Beaver Builder, see our [ACF Blocks developer documentation](https://www.advancedcustomfields.com/resources/blocks/) for step-by-step instructions on registering, configuring, and making your block available in the Beaver Builder editor.
+
+:::note
+
+ACF blocks that declare JSX support are not compatible with Beaver Builder and will not appear in the available block list.
+:::
+
+## Accessing ACF Blocks
+
+Blocks created with ACF are available in the **Content Panel > Modules tab > ACF Blocks**. Any categories or icons used to organize and display your blocks in the WordPress Block Editor will also appear there.
+
+## Block Settings
+
+The ACF Block module settings are dynamically generated based on the selected block type.
+
+### Settings Tab
+
+The Settings tab displays the ACF field group associated with the selected block type. The fields shown depend entirely on how the ACF block was registered and configured by you or your developer.
+
+To view all available fields for a particular ACF block, go to **WordPress Admin Dashboard > ACF** and open the **Field Group** assigned to that block.
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/audio.mdx b/beaver-builder/layouts/modules/audio.mdx
new file mode 100644
index 00000000..e20eb674
--- /dev/null
+++ b/beaver-builder/layouts/modules/audio.mdx
@@ -0,0 +1,193 @@
+---
+title: Audio
+sidebar_label: Audio
+icon: "music"
+description: "Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL."
+---
+
+
+Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL.
+
+## Usage
+
+Use Audio to render a WordPress audio player from either files in the WordPress Media Library or a direct URL to a single audio file. Depending on how the source is configured, the module outputs either one audio player with standard playback controls or a playlist player with optional track display settings.
+
+Use Audio for podcasts, music tracks, interviews, sermons, voice recordings, and other layouts where visitors need inline playback without custom code. The module renders WordPress's native `[audio]` and `[playlist]` shortcodes, so the Media Library option fits audio managed in WordPress, while the Link option works when you already host a single audio file elsewhere and have its direct file URL.
+
+## Module Settings
+
+The Audio module settings control where audio comes from and how a single player or playlist behaves on the front end.
+
+### General Tab
+
+The General tab sets the audio source and reveals playback settings based on whether the module is rendering one file or a playlist.
+
+
+Audio Type
+
+
+Selects whether the module uses the WordPress Media Library or a direct audio file URL.
+
+- **Media Library:** Builds the player from audio files selected in the WordPress Media Library. Supports single-file playback and playlists when more than one file is selected.
+- **Link:** Builds the player from a direct URL to a single hosted audio file.
+
+
+Media Library
+
+
+
+Audio
+
+
+Selects one or more audio files from the WordPress Media Library. This custom field shows the current number of selected files and includes controls to **Select Audio**, **Edit Playlist**, or **Add Audio Files**. When one file is selected, the single-audio playback settings below apply. When more than one file is selected, playlist settings become available.
+
+
+Playlist
+
+
+
+Style Default: Light
+
+
+Sets the playlist appearance to a light or dark preset when more than one audio file is selected.
+
+
+
+Show Playlist Default: Yes
+
+
+Shows or hides the playlist track list beneath the player when more than one audio file is selected.
+
+
+Show Track Numbers
+
+
+
+Show Track Numbers (Show Playlist Only) Default: Yes
+
+
+Shows or hides track numbers in the playlist when **Show Playlist** is set to **Yes**.
+
+
+
+
+
+Show Thumbnail Default: Yes
+
+
+Shows or hides playlist thumbnail images when they are available for the selected audio files.
+
+
+
+Show Artist Name Default: Yes
+
+
+Shows or hides artist metadata in the playlist when it is available for the selected audio files.
+
+
+
+
+
+
+Link
+
+
+
+Link Supports: Field Connections
+
+
+Sets the direct URL to a single audio file when **Audio Type** is set to **Link**. The module passes this value directly to the WordPress audio shortcode to render the player.
+
+Because this field is used as the player source URL, use a direct file link such as `https://example.com/audio/episode-01.mp3` rather than a page URL or third-party embed page.
+
+
+
+
+Single Audio Playback
+
+
+
+Auto Play (Single Audio Only) Default: No
+
+
+Automatically starts playback when the module is rendering one audio file, whether that file comes from the Media Library or the **Link** option.
+
+
+
+Loop (Single Audio Only) Default: No
+
+
+Repeats the current audio file after it finishes when the module is rendering one audio file.
+
+
+
+
+## Advanced tab
+
+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.
+
+## Create a playlist
+
+To build a playlist in the Audio module, follow these steps:
+
+
+
+Step
+
+
+Open the Audio module settings.
+
+
+Step
+
+
+Set **Audio Type** to **Media Library**.
+
+
+Step
+
+
+In the **Audio** field, click **Add Audio Files** or **Select Audio** to open the WordPress Media Library.
+
+
+Step
+
+
+Choose multiple audio files, then create or insert the playlist from the Media Library modal.
+
+
+Step
+
+
+Return to the module settings and adjust playlist options such as **Style**, **Show Playlist**, **Show Thumbnail**, and **Show Artist Name** as needed.
+
+
+
+Once more than one file is selected, the module switches from single-audio playback to playlist mode and reveals the playlist display settings.
+
+
+![]()
+
+![]()
+
+
+## Supported audio formats
+
+The Audio module is built on the native WordPress audio and playlist shortcodes, which determine the file types it can accept. The module supports the following audio formats:
+
+- `.mp3`
+- `.m4a`
+- `.ogg`
+- `.wav`
diff --git a/beaver-builder/layouts/modules/bigcommerce.mdx b/beaver-builder/layouts/modules/bigcommerce.mdx
new file mode 100644
index 00000000..82817c6b
--- /dev/null
+++ b/beaver-builder/layouts/modules/bigcommerce.mdx
@@ -0,0 +1,98 @@
+---
+title: BigCommerce Products
+sidebar_label: BigCommerce
+icon: "shopping-cart"
+description: "Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination."
+---
+
+
+Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination.
+
+:::note
+
+This module is available only when the [BigCommerce for WordPress](https://wordpress.org/plugins/bigcommerce/) plugin is installed and active.
+:::
+
+## Usage
+
+Use BigCommerce Products to render the BigCommerce product gallery inside a Beaver Builder layout. The module outputs the `[bigcommerce_product]` shortcode and can limit the gallery to featured products, on-sale products, or recently imported products, while optionally splitting results across multiple pages.
+
+Use BigCommerce Products on store landing pages, sale pages, featured product sections, and other layouts where you want BigCommerce catalog content inside Beaver Builder without building shortcode attributes by hand. It works well for quickly surfacing a focused slice of your catalog in a visual layout.
+
+## Module Settings
+
+The BigCommerce Products module settings control which products appear in the gallery and whether the results are paginated.
+
+### Content Tab
+
+The Content tab controls pagination and the product filters applied to the gallery output.
+
+
+Pagination
+
+
+The Pagination section controls whether the gallery is split into multiple pages and how many products each page shows.
+
+
+Pagination Settings
+
+
+
+Use Pagination Default: No
+
+
+Splits the product gallery across multiple pages.
+
+
+Products per page
+
+
+
+Products per page Default: 8
+
+
+Sets how many products appear on each page when **Use Pagination** is set to **Yes**. The field supports values from 0 to 100.
+
+
+
+
+
+
+
+Filters
+
+
+The Filters section narrows which BigCommerce products appear in the gallery.
+
+
+Filter Settings
+
+
+
+Show only featured products? Default: No
+
+
+Limits the gallery to products marked as featured in BigCommerce.
+
+
+
+Show only on-sale products? Default: No
+
+
+Limits the gallery to products that are currently on sale.
+
+
+
+Show only recent products? Default: No
+
+
+Limits the gallery to recently imported products. On the front end, the shortcode treats recent products as items imported within the last two days unless that window is changed with the `bigcommerce/query/recent_days` filter.
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/box.mdx b/beaver-builder/layouts/modules/box.mdx
new file mode 100644
index 00000000..cb9f2c43
--- /dev/null
+++ b/beaver-builder/layouts/modules/box.mdx
@@ -0,0 +1,671 @@
+---
+title: Box Module
+sidebar_label: Box
+icon: "box"
+description: "A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing."
+---
+
+
+A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing.
+
+## Requirements
+
+The Box module depends on JavaScript code available in **WordPress 5.2** or later. If you are using an earlier version, the Box module will not appear in the Beaver Builder user interface (UI).
+
+## Usage
+
+The Box module is a container that holds other modules. It arranges its children using Flexbox, CSS Grid, or layered positioning, giving precise control over alignment, spacing, and sizing across any number of elements.
+
+Use the Box module when you need spatial control over a group of modules — positioning text beside an image with Flex, building a structured grid of feature cards with Grid, or overlaying a headline on a background photo with Layers. Because Boxes nest inside other Boxes, complex multi-level layouts stay organized through a single consistent building block.
+
+## Box Module Aliases
+
+The Box module includes preconfigured aliases for common layouts. They are a useful starting point, especially if you are new to CSS Grid or Flexbox, and can also help you learn by showing how each layout is configured.
+
+- **Flex Columns:** Uses flexbox to arrange three boxes horizontally within the parent container.
+- **3×2 Grid:** Creates a layout with three rows and two columns using grid boxes inside the parent container.
+- **4×2 Grid:** Creates a layout with four rows and two columns using grid boxes inside the parent container.
+- **Split Header:** Uses a three-column grid layout to create a distinct header structure.
+- **Photo Grid:** Creates a 4×3 grid layout that incorporates Photo modules within the parent container.
+
+## Module Settings
+
+The Box module settings are organized into two tabs: Container controls the Box itself, and Children controls the defaults applied to all modules placed inside it.
+
+### Container tab
+
+The Container tab controls the Box's layout mode, spacing, visual appearance, sizing, and link behavior.
+
+
+Display
+
+
+Selects how child elements are arranged inside the Box.
+
+- **Flex:** Arranges children along a single axis using CSS Flexbox. Ideal for one-dimensional layouts where items need to flow, wrap, grow, or shrink relative to one another.
+- **Grid:** Arranges children in a two-dimensional layout using CSS Grid. Ideal for structured layouts where precise control over both rows and columns is needed.
+- **Layers:** Stacks children on top of one another using CSS Grid. All children occupy the same grid cell by default, creating layered or overlay effects.
+
+
+Flex settings
+
+
+
+Direction Default: Row; Supports: Responsive
+
+
+Controls the main axis along which child elements are arranged. Changing the direction also affects how the **Align** setting maps to horizontal and vertical axes.
+
+- **Row:** Items are placed side by side horizontally, left to right.
+- **Column:** Items are stacked vertically, top to bottom.
+- **Reversed Row:** Items are placed horizontally in reverse order, right to left.
+- **Reversed Column:** Items are stacked vertically in reverse order, bottom to top.
+
+
+
+
+Wrap Default: Normal; Supports: Responsive
+
+
+Controls whether child elements stay on a single line or wrap onto additional lines when there is not enough space.
+
+- **Normal:** Items do not wrap and remain on a single line. Items may overflow the container if they exceed its width.
+- **None:** Explicitly sets `flex-wrap: nowrap`. Functionally similar to Normal but makes the no-wrap intent explicit in CSS.
+- **Wrap:** Items wrap onto additional lines when they no longer fit, flowing from top to bottom.
+- **Reversed:** Items wrap onto additional lines, but new lines are added above previous ones rather than below.
+
+
+
+
+Gap Default: 10px; Supports: Responsive
+
+
+Sets the space between child elements. This single value applies uniformly in all directions. Gap creates space only between items — it does not add space on the outer edges of the container. Use **Padding** to add space around the inside of the container boundary.
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements along the vertical and horizontal axes. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis.
+
+The behavior of each axis depends on **Direction**. When Direction is Row or Reversed Row, the horizontal axis is the main axis (`justify-content`) and the vertical axis is the cross axis (`align-items`). When Direction is Column or Reversed Column, the axes are swapped.
+
+- **Stretch:** Items stretch to fill the full container size along that axis.
+- **Start:** Items are packed toward the start of the axis.
+- **Center:** Items are centered along the axis.
+- **End:** Items are packed toward the end of the axis.
+- **Space Evenly:** Spacing between any two adjacent items and between items and the container edges is equal.
+- **Space Between:** Items are evenly distributed. The first item is flush with the start edge and the last item is flush with the end edge.
+- **Space Around:** Items are distributed with equal space on both sides of each item.
+
+
+
+
+
+Grid settings
+
+
+
+Grid Supports: Responsive
+
+
+Defines the column and row track structure of the grid. Each track is the space between two grid lines where content is placed. Add tracks using the **+** button, reorder them by dragging the handle, or duplicate and remove them from the ellipsis menu.
+
+:::tip
+
+The **Grid overlay** icon appears in the settings panel next to the Grid label. Clicking it toggles a visual grid guideline overlay on the canvas, making it easier to see column and row boundaries while building.
+:::
+
+Each track supports the following types:
+
+- **Multiple Tracks:** Repeats a track a specified number of times using the CSS `repeat()` function. For example, setting columns to `3` creates `repeat(3, 1fr)` — three equal-width columns.
+- **Freeform:** Accepts any valid CSS track size directly, such as `200px`, `minmax(100px, 1fr)`, or `repeat(4, auto)`.
+- **Auto:** Track size is determined by its content. Equivalent to the CSS `auto` keyword.
+- **1fr:** Adds a single fractional unit. The `fr` unit divides remaining available space proportionally. Multiple `1fr` tracks share space equally; a `2fr` track receives twice as much space as a `1fr` track.
+
+**Auto Columns** and **Auto Rows** define the size of implicitly created tracks when more items are placed in the grid than explicitly defined tracks can accommodate.
+
+
+
+Flow Direction Default: Row; Supports: Responsive
+
+
+Controls how grid items are automatically placed when their position is not explicitly defined. Maps to the CSS `grid-auto-flow` property.
+
+- **Row:** Items fill each row in turn, adding new rows as needed. Items flow left to right, then wrap to the next row.
+- **Column:** Items fill each column in turn, adding new columns as needed. Items flow top to bottom, then wrap to the next column.
+
+
+
+
+Gap Supports: Responsive
+
+
+Sets the space between rows and columns in the grid independently. Gap applies only between grid tracks and does not add space around the outer edges of the grid. Use **Padding** to add outer spacing.
+
+- **Row:** Space between horizontal rows. Default is `10px`.
+- **Column:** Space between vertical columns. Default is `10px`.
+
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements within the grid container along both axes. Two rows of icon buttons are shown — the top row controls the vertical axis (`align-items`) and the bottom row controls the horizontal axis (`justify-items`).
+
+Unlike Flex, Grid alignment operates independently of a direction setting — vertical always means the block axis and horizontal always means the inline axis.
+
+- **Stretch:** Items stretch to fill the full size of their grid cell.
+- **Start:** Items align to the start edge of their grid cell.
+- **Center:** Items center within their grid cell.
+- **End:** Items align to the end edge of their grid cell.
+
+
+
+
+
+Layers settings
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements within the layered container. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis. Both axes default to **Stretch** when switching to Layers so all children fill the container.
+
+- **Stretch:** Items fill the full size of the container. Use this when all layers should occupy the same space.
+- **Start:** Items align to the top (vertical) or left (horizontal) edge of the container.
+- **Center:** Items center within the container along that axis.
+- **End:** Items align to the bottom (vertical) or right (horizontal) edge of the container.
+
+
+
+
+
+
+Spacing
+
+
+Controls the internal spacing of the Box container.
+
+
+Spacing settings
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Internal spacing between the Box edges and its children.
+
+
+
+Gap (Flex and Grid Only) Supports: Responsive
+
+
+Space between child elements. This field appears when **Display** is set to **Flex** or **Grid**.
+
+
+
+
+
+Appearance
+
+
+Visual styling for the Box container.
+
+
+Appearance settings
+
+
+
+Background settings
+
+Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.
+
+
+
+
+Border settings
+
+Border settings control border style, width, color, radius, and related responsive border controls where available.
+
+
+
+
+
+
+
+Sizing & Placement
+
+
+Controls the Box's own dimensions and position within its parent.
+
+
+Sizing & Placement settings
+
+
+
+Aspect Ratio Supports: Responsive
+
+
+Sets a fixed width-to-height ratio for the Box. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16).
+
+
+
+Flex (Flex Parent Only) Supports: Responsive
+
+
+Sets how the Box grows, shrinks, and sizes itself when its parent container is set to Flex.
+
+
+Flex settings
+
+
+
+Grow Supports: Responsive
+
+
+A non-negative number that determines how much extra space the Box takes up relative to its siblings. A value of `0` prevents growth beyond the natural size.
+
+
+
+Shrink Default: 1; Supports: Responsive
+
+
+A non-negative number that determines how much the Box shrinks relative to its siblings when there is not enough space. A value of `0` prevents shrinking.
+
+
+
+Basis Supports: Responsive
+
+
+Sets the initial size of the Box before available space is distributed. Leave empty to use the Box's natural size (`auto`).
+
+
+
+
+
+Grid Column (Grid Parent Only) Supports: Responsive
+
+
+Sets the grid column the Box occupies when its parent container is set to Grid.
+
+
+
+Grid Row (Grid Parent Only) Supports: Responsive
+
+
+Sets the grid row the Box occupies when its parent container is set to Grid.
+
+
+
+Width Supports: Responsive
+
+
+Sets the width of the Box. Accepts auto, a custom value, or a percentage.
+
+
+
+Min Width Supports: Responsive
+
+
+Sets the minimum width of the Box. The Box will not shrink below this value.
+
+
+
+Max Width Supports: Responsive
+
+
+Sets the maximum width of the Box. The Box will not grow beyond this value.
+
+
+
+Height Supports: Responsive
+
+
+Sets the height of the Box.
+
+
+
+Min Height Supports: Responsive
+
+
+Sets the minimum height of the Box.
+
+
+
+Max Height Supports: Responsive
+
+
+Sets the maximum height of the Box.
+
+
+
+Alignment Supports: Responsive
+
+
+Aligns the Box within its parent container using inline margins. Options are **Left**, **Center**, and **Right**.
+
+
+
+Order Supports: Responsive
+
+
+Sets the display order of the Box when it is placed in a Flex or Grid parent. Lower values appear earlier.
+
+
+
+
+
+Link
+
+
+Makes the entire Box container clickable. When set, clicking anywhere on the Box navigates to the specified URL.
+
+:::warning
+
+When the Link option is enabled, any links inside modules placed within the Box will no longer work because HTML links cannot be nested.
+:::
+
+
+Link settings
+
+Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
+
+
+
+
+### Children tab
+
+The Children tab sets the default layout, spacing, and appearance values applied to all modules placed directly inside the Box.
+
+
+Flexbox (Flex Only) Supports: Responsive
+
+
+Sets default Flexbox child properties applied to all direct children when **Display** is set to **Flex**. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Flexbox child settings
+
+
+
+Grow Supports: Responsive
+
+
+A non-negative number that determines how much of the available extra space a child takes up relative to other children. A value of `0` prevents growth beyond the natural size. A value of `1` allows proportional growth.
+
+
+
+Shrink Default: 1; Supports: Responsive
+
+
+A non-negative number that determines how much a child shrinks relative to other children when there is not enough space. A value of `0` prevents shrinking. A value of `1` allows proportional shrinking.
+
+
+
+Basis Supports: Responsive
+
+
+Sets the initial size of a child element before available space is distributed. Accepts a numeric value with units: `px`, `%`, `em`, `rem`, `vw`. Leave empty to use the child's natural size (`auto`).
+
+
+
+
+
+Grid (Grid Only)
+
+
+Sets default grid placement values applied to all direct children when **Display** is set to **Grid**. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Grid child settings
+
+
+
+Grid Column Supports: Responsive
+
+
+Sets the default column position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-column` shorthand.
+
+
+Grid column settings
+
+
+
+Start Supports: Responsive
+
+
+The grid column line where children begin. Leave empty for automatic placement.
+
+
+
+Span Supports: Responsive
+
+
+The number of column tracks children span. Minimum value is `1`.
+
+
+
+End Supports: Responsive
+
+
+The grid column line where children end. Leave empty for automatic placement.
+
+
+
+
+
+Grid Row Supports: Responsive
+
+
+Sets the default row position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-row` shorthand.
+
+
+Grid row settings
+
+
+
+Start Supports: Responsive
+
+
+The grid row line where children begin. Leave empty for automatic placement.
+
+
+
+Span Supports: Responsive
+
+
+The number of row tracks children span. Minimum value is `1`.
+
+
+
+End Supports: Responsive
+
+
+The grid row line where children end. Leave empty for automatic placement.
+
+
+
+
+
+
+
+Layers (Layers Only)
+
+
+Sets default grid placement values applied to all direct children when **Display** is set to **Layers**. Defaults to full coverage — each child spans the entire width and height of the container. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Layers child settings
+
+
+
+Grid Column Supports: Responsive
+
+
+Sets the default column position for children. Defaults to `start: 1, end: -1`, spanning each child across the full width of the container.
+
+
+Grid column settings
+
+
+
+Start Default: 1; Supports: Responsive
+
+
+The grid column line where children begin.
+
+
+
+Span Supports: Responsive
+
+
+The number of column tracks children span. Leave empty when using Start and End together.
+
+
+
+End Default: -1; Supports: Responsive
+
+
+The grid column line where children end. Defaults to `-1` (the last line), ensuring full-width coverage.
+
+
+
+
+
+Grid Row Supports: Responsive
+
+
+Sets the default row position for children. Defaults to `start: 1, end: -1`, spanning each child across the full height of the container.
+
+
+Grid row settings
+
+
+
+Start Default: 1; Supports: Responsive
+
+
+The grid row line where children begin.
+
+
+
+Span Supports: Responsive
+
+
+The number of row tracks children span. Leave empty when using Start and End together.
+
+
+
+End Default: -1; Supports: Responsive
+
+
+The grid row line where children end. Defaults to `-1` (the last line), ensuring full-height coverage.
+
+
+
+
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Default internal padding applied to each child module within the Box.
+
+
+
+Sizing Supports: Responsive
+
+
+Default sizing values applied to all direct child modules. Individual children can override these values using their own Sizing & Placement settings.
+
+
+Sizing settings
+
+
+
+Width & Height Supports: Responsive
+
+
+Sets default width, minimum width, maximum width, height, minimum height, and maximum height constraints for child modules.
+
+
+
+Aspect Ratio Supports: Responsive
+
+
+Sets a default width-to-height ratio for child modules. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16).
+
+
+
+
+
+Appearance Supports: Responsive
+
+
+Default visual styling for child modules.
+
+
+Child appearance settings
+
+
+
+Text Color Supports: Responsive, Field Connections
+
+
+The default text color for child modules.
+
+
+
+Background Type
+
+
+Sets the default background type for child modules.
+
+- **Color:** Applies a solid background color.
+- **Advanced:** Opens the multi-layer background interface for gradients, images, and video.
+
+
+Color
+
+
+
+Background Color Supports: Responsive, Field Connections
+
+
+The solid background color applied to child modules when **Background Type** is set to **Color**.
+
+
+
+
+Advanced
+
+
+
+Background settings
+
+Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.
+
+
+
+
+
+
+Border settings
+
+Border settings control border style, width, color, radius, and related responsive border controls where available.
+
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/button-group.mdx b/beaver-builder/layouts/modules/button-group.mdx
new file mode 100644
index 00000000..ae4eed43
--- /dev/null
+++ b/beaver-builder/layouts/modules/button-group.mdx
@@ -0,0 +1,301 @@
+---
+title: Button Group
+sidebar_label: Button Group
+icon: "stretch-horizontal"
+description: "Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance."
+---
+
+
+Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance.
+
+## Usage
+
+The Button Group module displays multiple buttons in a single layout element. It renders a group container with a shared style baseline — configure layout, typography, colors, backgrounds, and borders at the group level, then override appearance settings on each individual button as needed.
+
+Use the Button Group module for paired calls to action, navigation groups, or any situation where two or more buttons appear together and share a consistent visual style.
+
+:::note
+
+The Button Group module is designed for multiple buttons displayed together. If you only need a single button, use the [Button](/beaver-builder/layouts/modules/button) module instead.
+:::
+
+## Module settings
+
+The Button Group module settings control the button list, shared group styling, and per-button behavior.
+
+### Buttons tab
+
+The Buttons tab is where you build and manage the list of buttons in the group.
+
+
+Button Group Label
+
+
+An optional accessibility label for the button group container. The value is added as an `aria-label` attribute on the rendered HTML element.
+
+For example, entering `Hero Buttons` outputs `aria-label="Hero Button Group"` in the HTML. Use this to improve screen reader context when the group's purpose is not clear from surrounding content.
+
+```html wrap
+
` heading.
+- **h4:** Renders the label with an `` heading.
+- **h5:** Renders the label with an `` heading.
+- **h6:** Renders the label with an `` heading.
+- **div:** Renders the label with a `` element.
+- **span:** Renders the label with a `` element.
+
+
+
+
+Content Type (Post Only) Default: Post Content
+
+
+Selects whether post-based items render full post content or post excerpts. This field appears when **Content Source** is set to **Post**.
+
+- **Post Content:** Displays the full post content inside each accordion item.
+- **Post Excerpt:** Displays the post excerpt and reveals excerpt display settings.
+
+
+Excerpt Settings
+
+
+
+Excerpt Length (Post Excerpt Only)
+
+
+Sets the number of words shown in each post excerpt.
+
+
+
+Excerpt More Text (Post Excerpt Only) Default: ...
+
+
+Sets the text appended after each excerpt.
+
+
+
+More Link (Post Excerpt Only) Default: Hide
+
+
+Shows or hides a link below each post excerpt.
+
+- **Show:** Displays a link below the excerpt and reveals **More Link Text**.
+- **Hide:** Removes the excerpt link.
+
+
+More Link Text
+
+
+
+More Link Text (Show Only) Default: Read More
+
+
+Sets the label used for the post excerpt link when **More Link** is set to **Show**.
+
+
+
+
+
+
+
+Expand on Tab Default: No
+
+
+Expands an accordion item when its button receives keyboard focus through tab navigation.
+
+- **Yes:** Opens an accordion item when keyboard users tab to its label.
+- **No:** Keeps tab focus from expanding accordion items automatically.
+
+
+
+
+Collapse Inactive Default: Yes
+
+
+Keeps only one item open at a time or allows multiple items to remain open.
+
+- **Yes:** Keeps only one accordion item open at a time.
+- **No:** Allows multiple accordion items to stay open at the same time.
+
+
+
+
+Expand First Item Default: No
+
+
+Expands the first accordion item when the module loads.
+
+- **Yes:** Opens the first accordion item by default when the module loads.
+- **No:** Leaves all accordion items collapsed on load.
+
+
+
+
+
+### Style Tab
+
+The Style tab controls the size, spacing, colors, icons, and content styling used by the accordion.
+
+
+Item Size Default: Small
+
+
+Sets the preset size used for accordion labels.
+
+- **Small:** Keeps the accordion labels compact. Inherits the font size from the theme or parent element.
+- **Medium:** Uses a balanced label size for most layouts. Sets the label font size to 20px.
+- **Large:** Gives the accordion labels more visual emphasis. Sets the label font size to 26px.
+
+
+
+
+Item Spacing Default: 10; Supports: Responsive
+
+
+Sets the spacing between accordion items.
+
+
+
+Item Border Supports: Responsive
+
+
+Configures the border style, width, radius, and color for each accordion item.
+
+:::tip
+
+The Responsive Toggle lets you set different border values for desktop, tablet, and mobile. The **Width** and **Radius** controls also support Link Values so you can keep all sides or corners in sync.
+:::
+
+
+General
+
+
+
+Style Default: Default
+
+
+Selects the line style used for the border.
+
+
+Available options
+
+
+- Default
+- None
+- Solid
+- Dashed
+- Dotted
+- Double
+
+
+
+**Default** uses the module or theme's built-in border styling when one is available. Choose **None** to remove the visible border without clearing any saved width, color, or radius values.
+
+
+
+Color
+
+
+Sets the border color using the color picker. This field also supports alpha transparency.
+
+
+
+Width Supports: Responsive, Link Values
+
+
+Sets the border width for the top, right, bottom, and left sides using `px`.
+
+Click into any width field to open a slider, or type a value directly for more precise control.
+
+
+
+Radius & Shadow
+
+
+
+Radius Supports: Responsive, Link Values
+
+
+Rounds the corners by setting the top-left, top-right, bottom-right, and bottom-left radius in `px`.
+
+Larger matching values create softer corners, and very high values can produce pill or circular shapes when the element dimensions allow it.
+
+
+Box Shadow
+
+
+Adds a shadow around the element to create depth and separation from surrounding content.
+
+
+Box Shadow settings
+
+
+
+Color
+
+
+Sets the shadow color and opacity.
+
+
+
+X
+
+
+Sets the horizontal shadow offset. Positive values move the shadow to the right, and negative values move it to the left.
+
+
+
+Y
+
+
+Sets the vertical shadow offset. Positive values move the shadow downward, and negative values move it upward.
+
+
+
+Blur
+
+
+Softens the shadow edge. Higher values create a blurrier, more diffuse shadow.
+
+
+
+Spread
+
+
+Expands or contracts the overall size of the shadow. Positive values make the shadow larger, and negative values pull it inward.
+
+
+
+
+
+
+
+Label
+
+
+The Label section controls the appearance of accordion headings.
+
+
+Label Settings
+
+
+
+Text Color Supports: Field Connections
+
+
+Sets the label text color and icon color.
+
+
+
+Background Color Supports: Field Connections
+
+
+Sets the background color of the label row.
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Sets the inner spacing of the label row.
+
+
+
+Typography Supports: Responsive
+
+
+The font settings for accordion labels.
+
+
+Typography settings
+
+Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
+
+
+
+
+
+
+
+Icon
+
+
+The Icon section controls icon placement and icon states for accordion labels.
+
+
+Icon Settings
+
+
+
+Icon Position Default: Right
+
+
+Places the icon on the left or right side of the label.
+
+- **Left:** Places the icon before the label text.
+- **Right:** Places the icon after the label text.
+
+
+
+
+Icon Default: fas fa-plus; Supports: Field Connections
+
+
+Sets the icon shown when an item is collapsed.
+
+
+
+Active Icon Default: fas fa-minus; Supports: Field Connections
+
+
+Sets the icon shown when an item is expanded.
+
+
+
+DuoTone Icon Primary Color (DuoTone Icons Only) Supports: Field Connections
+
+
+Sets the primary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.
+
+
+
+DuoTone Icon Secondary Color (DuoTone Icons Only) Supports: Field Connections
+
+
+Sets the secondary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.
+
+
+
+
+
+Content
+
+
+The Content section controls the appearance of accordion panels.
+
+
+Content Settings
+
+
+
+Text Color (Custom Content Only) Supports: Field Connections
+
+
+Sets the text color for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**.
+
+
+
+Background Color Supports: Field Connections
+
+
+Sets the background color of the accordion content panel.
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Sets the inner spacing of the accordion content panel.
+
+
+
+Typography (Custom Content Only) Supports: Responsive
+
+
+The font settings for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**.
+
+
+Typography settings
+
+Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
+
+
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/acf-block.mdx b/beaver-builder/layouts/modules/acf-block.mdx
new file mode 100644
index 00000000..73cb875b
--- /dev/null
+++ b/beaver-builder/layouts/modules/acf-block.mdx
@@ -0,0 +1,43 @@
+---
+title: ACF Blocks
+icon: "cuboid"
+description: "Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts."
+---
+
+
+Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts.
+
+## Requirements
+
+The ACF Block module requires **Advanced Custom Fields Pro** to be installed and activated.
+
+## What are ACF Blocks?
+
+ACF Blocks are custom content blocks built with the Advanced Custom Fields (ACF) plugin. They let you create your own editor blocks using custom fields, making it easier to build consistent, reusable blocks for both Beaver Builder and the WordPress Block Editor through the familiar ACF field groups interface.
+
+To create an ACF Block for Beaver Builder, see our [ACF Blocks developer documentation](https://www.advancedcustomfields.com/resources/blocks/) for step-by-step instructions on registering, configuring, and making your block available in the Beaver Builder editor.
+
+:::note
+
+ACF blocks that declare JSX support are not compatible with Beaver Builder and will not appear in the available block list.
+:::
+
+## Accessing ACF Blocks
+
+Blocks created with ACF are available in the **Content Panel > Modules tab > ACF Blocks**. Any categories or icons used to organize and display your blocks in the WordPress Block Editor will also appear there.
+
+## Block Settings
+
+The ACF Block module settings are dynamically generated based on the selected block type.
+
+### Settings Tab
+
+The Settings tab displays the ACF field group associated with the selected block type. The fields shown depend entirely on how the ACF block was registered and configured by you or your developer.
+
+To view all available fields for a particular ACF block, go to **WordPress Admin Dashboard > ACF** and open the **Field Group** assigned to that block.
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/audio.mdx b/beaver-builder/layouts/modules/audio.mdx
new file mode 100644
index 00000000..e20eb674
--- /dev/null
+++ b/beaver-builder/layouts/modules/audio.mdx
@@ -0,0 +1,193 @@
+---
+title: Audio
+sidebar_label: Audio
+icon: "music"
+description: "Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL."
+---
+
+
+Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL.
+
+## Usage
+
+Use Audio to render a WordPress audio player from either files in the WordPress Media Library or a direct URL to a single audio file. Depending on how the source is configured, the module outputs either one audio player with standard playback controls or a playlist player with optional track display settings.
+
+Use Audio for podcasts, music tracks, interviews, sermons, voice recordings, and other layouts where visitors need inline playback without custom code. The module renders WordPress's native `[audio]` and `[playlist]` shortcodes, so the Media Library option fits audio managed in WordPress, while the Link option works when you already host a single audio file elsewhere and have its direct file URL.
+
+## Module Settings
+
+The Audio module settings control where audio comes from and how a single player or playlist behaves on the front end.
+
+### General Tab
+
+The General tab sets the audio source and reveals playback settings based on whether the module is rendering one file or a playlist.
+
+
+Audio Type
+
+
+Selects whether the module uses the WordPress Media Library or a direct audio file URL.
+
+- **Media Library:** Builds the player from audio files selected in the WordPress Media Library. Supports single-file playback and playlists when more than one file is selected.
+- **Link:** Builds the player from a direct URL to a single hosted audio file.
+
+
+Media Library
+
+
+
+Audio
+
+
+Selects one or more audio files from the WordPress Media Library. This custom field shows the current number of selected files and includes controls to **Select Audio**, **Edit Playlist**, or **Add Audio Files**. When one file is selected, the single-audio playback settings below apply. When more than one file is selected, playlist settings become available.
+
+
+Playlist
+
+
+
+Style Default: Light
+
+
+Sets the playlist appearance to a light or dark preset when more than one audio file is selected.
+
+
+
+Show Playlist Default: Yes
+
+
+Shows or hides the playlist track list beneath the player when more than one audio file is selected.
+
+
+Show Track Numbers
+
+
+
+Show Track Numbers (Show Playlist Only) Default: Yes
+
+
+Shows or hides track numbers in the playlist when **Show Playlist** is set to **Yes**.
+
+
+
+
+
+Show Thumbnail Default: Yes
+
+
+Shows or hides playlist thumbnail images when they are available for the selected audio files.
+
+
+
+Show Artist Name Default: Yes
+
+
+Shows or hides artist metadata in the playlist when it is available for the selected audio files.
+
+
+
+
+
+
+Link
+
+
+
+Link Supports: Field Connections
+
+
+Sets the direct URL to a single audio file when **Audio Type** is set to **Link**. The module passes this value directly to the WordPress audio shortcode to render the player.
+
+Because this field is used as the player source URL, use a direct file link such as `https://example.com/audio/episode-01.mp3` rather than a page URL or third-party embed page.
+
+
+
+
+Single Audio Playback
+
+
+
+Auto Play (Single Audio Only) Default: No
+
+
+Automatically starts playback when the module is rendering one audio file, whether that file comes from the Media Library or the **Link** option.
+
+
+
+Loop (Single Audio Only) Default: No
+
+
+Repeats the current audio file after it finishes when the module is rendering one audio file.
+
+
+
+
+## Advanced tab
+
+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.
+
+## Create a playlist
+
+To build a playlist in the Audio module, follow these steps:
+
+
+
+Step
+
+
+Open the Audio module settings.
+
+
+Step
+
+
+Set **Audio Type** to **Media Library**.
+
+
+Step
+
+
+In the **Audio** field, click **Add Audio Files** or **Select Audio** to open the WordPress Media Library.
+
+
+Step
+
+
+Choose multiple audio files, then create or insert the playlist from the Media Library modal.
+
+
+Step
+
+
+Return to the module settings and adjust playlist options such as **Style**, **Show Playlist**, **Show Thumbnail**, and **Show Artist Name** as needed.
+
+
+
+Once more than one file is selected, the module switches from single-audio playback to playlist mode and reveals the playlist display settings.
+
+
+![]()
+
+![]()
+
+
+## Supported audio formats
+
+The Audio module is built on the native WordPress audio and playlist shortcodes, which determine the file types it can accept. The module supports the following audio formats:
+
+- `.mp3`
+- `.m4a`
+- `.ogg`
+- `.wav`
diff --git a/beaver-builder/layouts/modules/bigcommerce.mdx b/beaver-builder/layouts/modules/bigcommerce.mdx
new file mode 100644
index 00000000..82817c6b
--- /dev/null
+++ b/beaver-builder/layouts/modules/bigcommerce.mdx
@@ -0,0 +1,98 @@
+---
+title: BigCommerce Products
+sidebar_label: BigCommerce
+icon: "shopping-cart"
+description: "Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination."
+---
+
+
+Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination.
+
+:::note
+
+This module is available only when the [BigCommerce for WordPress](https://wordpress.org/plugins/bigcommerce/) plugin is installed and active.
+:::
+
+## Usage
+
+Use BigCommerce Products to render the BigCommerce product gallery inside a Beaver Builder layout. The module outputs the `[bigcommerce_product]` shortcode and can limit the gallery to featured products, on-sale products, or recently imported products, while optionally splitting results across multiple pages.
+
+Use BigCommerce Products on store landing pages, sale pages, featured product sections, and other layouts where you want BigCommerce catalog content inside Beaver Builder without building shortcode attributes by hand. It works well for quickly surfacing a focused slice of your catalog in a visual layout.
+
+## Module Settings
+
+The BigCommerce Products module settings control which products appear in the gallery and whether the results are paginated.
+
+### Content Tab
+
+The Content tab controls pagination and the product filters applied to the gallery output.
+
+
+Pagination
+
+
+The Pagination section controls whether the gallery is split into multiple pages and how many products each page shows.
+
+
+Pagination Settings
+
+
+
+Use Pagination Default: No
+
+
+Splits the product gallery across multiple pages.
+
+
+Products per page
+
+
+
+Products per page Default: 8
+
+
+Sets how many products appear on each page when **Use Pagination** is set to **Yes**. The field supports values from 0 to 100.
+
+
+
+
+
+
+
+Filters
+
+
+The Filters section narrows which BigCommerce products appear in the gallery.
+
+
+Filter Settings
+
+
+
+Show only featured products? Default: No
+
+
+Limits the gallery to products marked as featured in BigCommerce.
+
+
+
+Show only on-sale products? Default: No
+
+
+Limits the gallery to products that are currently on sale.
+
+
+
+Show only recent products? Default: No
+
+
+Limits the gallery to recently imported products. On the front end, the shortcode treats recent products as items imported within the last two days unless that window is changed with the `bigcommerce/query/recent_days` filter.
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/box.mdx b/beaver-builder/layouts/modules/box.mdx
new file mode 100644
index 00000000..cb9f2c43
--- /dev/null
+++ b/beaver-builder/layouts/modules/box.mdx
@@ -0,0 +1,671 @@
+---
+title: Box Module
+sidebar_label: Box
+icon: "box"
+description: "A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing."
+---
+
+
+A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing.
+
+## Requirements
+
+The Box module depends on JavaScript code available in **WordPress 5.2** or later. If you are using an earlier version, the Box module will not appear in the Beaver Builder user interface (UI).
+
+## Usage
+
+The Box module is a container that holds other modules. It arranges its children using Flexbox, CSS Grid, or layered positioning, giving precise control over alignment, spacing, and sizing across any number of elements.
+
+Use the Box module when you need spatial control over a group of modules — positioning text beside an image with Flex, building a structured grid of feature cards with Grid, or overlaying a headline on a background photo with Layers. Because Boxes nest inside other Boxes, complex multi-level layouts stay organized through a single consistent building block.
+
+## Box Module Aliases
+
+The Box module includes preconfigured aliases for common layouts. They are a useful starting point, especially if you are new to CSS Grid or Flexbox, and can also help you learn by showing how each layout is configured.
+
+- **Flex Columns:** Uses flexbox to arrange three boxes horizontally within the parent container.
+- **3×2 Grid:** Creates a layout with three rows and two columns using grid boxes inside the parent container.
+- **4×2 Grid:** Creates a layout with four rows and two columns using grid boxes inside the parent container.
+- **Split Header:** Uses a three-column grid layout to create a distinct header structure.
+- **Photo Grid:** Creates a 4×3 grid layout that incorporates Photo modules within the parent container.
+
+## Module Settings
+
+The Box module settings are organized into two tabs: Container controls the Box itself, and Children controls the defaults applied to all modules placed inside it.
+
+### Container tab
+
+The Container tab controls the Box's layout mode, spacing, visual appearance, sizing, and link behavior.
+
+
+Display
+
+
+Selects how child elements are arranged inside the Box.
+
+- **Flex:** Arranges children along a single axis using CSS Flexbox. Ideal for one-dimensional layouts where items need to flow, wrap, grow, or shrink relative to one another.
+- **Grid:** Arranges children in a two-dimensional layout using CSS Grid. Ideal for structured layouts where precise control over both rows and columns is needed.
+- **Layers:** Stacks children on top of one another using CSS Grid. All children occupy the same grid cell by default, creating layered or overlay effects.
+
+
+Flex settings
+
+
+
+Direction Default: Row; Supports: Responsive
+
+
+Controls the main axis along which child elements are arranged. Changing the direction also affects how the **Align** setting maps to horizontal and vertical axes.
+
+- **Row:** Items are placed side by side horizontally, left to right.
+- **Column:** Items are stacked vertically, top to bottom.
+- **Reversed Row:** Items are placed horizontally in reverse order, right to left.
+- **Reversed Column:** Items are stacked vertically in reverse order, bottom to top.
+
+
+
+
+Wrap Default: Normal; Supports: Responsive
+
+
+Controls whether child elements stay on a single line or wrap onto additional lines when there is not enough space.
+
+- **Normal:** Items do not wrap and remain on a single line. Items may overflow the container if they exceed its width.
+- **None:** Explicitly sets `flex-wrap: nowrap`. Functionally similar to Normal but makes the no-wrap intent explicit in CSS.
+- **Wrap:** Items wrap onto additional lines when they no longer fit, flowing from top to bottom.
+- **Reversed:** Items wrap onto additional lines, but new lines are added above previous ones rather than below.
+
+
+
+
+Gap Default: 10px; Supports: Responsive
+
+
+Sets the space between child elements. This single value applies uniformly in all directions. Gap creates space only between items — it does not add space on the outer edges of the container. Use **Padding** to add space around the inside of the container boundary.
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements along the vertical and horizontal axes. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis.
+
+The behavior of each axis depends on **Direction**. When Direction is Row or Reversed Row, the horizontal axis is the main axis (`justify-content`) and the vertical axis is the cross axis (`align-items`). When Direction is Column or Reversed Column, the axes are swapped.
+
+- **Stretch:** Items stretch to fill the full container size along that axis.
+- **Start:** Items are packed toward the start of the axis.
+- **Center:** Items are centered along the axis.
+- **End:** Items are packed toward the end of the axis.
+- **Space Evenly:** Spacing between any two adjacent items and between items and the container edges is equal.
+- **Space Between:** Items are evenly distributed. The first item is flush with the start edge and the last item is flush with the end edge.
+- **Space Around:** Items are distributed with equal space on both sides of each item.
+
+
+
+
+
+Grid settings
+
+
+
+Grid Supports: Responsive
+
+
+Defines the column and row track structure of the grid. Each track is the space between two grid lines where content is placed. Add tracks using the **+** button, reorder them by dragging the handle, or duplicate and remove them from the ellipsis menu.
+
+:::tip
+
+The **Grid overlay** icon appears in the settings panel next to the Grid label. Clicking it toggles a visual grid guideline overlay on the canvas, making it easier to see column and row boundaries while building.
+:::
+
+Each track supports the following types:
+
+- **Multiple Tracks:** Repeats a track a specified number of times using the CSS `repeat()` function. For example, setting columns to `3` creates `repeat(3, 1fr)` — three equal-width columns.
+- **Freeform:** Accepts any valid CSS track size directly, such as `200px`, `minmax(100px, 1fr)`, or `repeat(4, auto)`.
+- **Auto:** Track size is determined by its content. Equivalent to the CSS `auto` keyword.
+- **1fr:** Adds a single fractional unit. The `fr` unit divides remaining available space proportionally. Multiple `1fr` tracks share space equally; a `2fr` track receives twice as much space as a `1fr` track.
+
+**Auto Columns** and **Auto Rows** define the size of implicitly created tracks when more items are placed in the grid than explicitly defined tracks can accommodate.
+
+
+
+Flow Direction Default: Row; Supports: Responsive
+
+
+Controls how grid items are automatically placed when their position is not explicitly defined. Maps to the CSS `grid-auto-flow` property.
+
+- **Row:** Items fill each row in turn, adding new rows as needed. Items flow left to right, then wrap to the next row.
+- **Column:** Items fill each column in turn, adding new columns as needed. Items flow top to bottom, then wrap to the next column.
+
+
+
+
+Gap Supports: Responsive
+
+
+Sets the space between rows and columns in the grid independently. Gap applies only between grid tracks and does not add space around the outer edges of the grid. Use **Padding** to add outer spacing.
+
+- **Row:** Space between horizontal rows. Default is `10px`.
+- **Column:** Space between vertical columns. Default is `10px`.
+
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements within the grid container along both axes. Two rows of icon buttons are shown — the top row controls the vertical axis (`align-items`) and the bottom row controls the horizontal axis (`justify-items`).
+
+Unlike Flex, Grid alignment operates independently of a direction setting — vertical always means the block axis and horizontal always means the inline axis.
+
+- **Stretch:** Items stretch to fill the full size of their grid cell.
+- **Start:** Items align to the start edge of their grid cell.
+- **Center:** Items center within their grid cell.
+- **End:** Items align to the end edge of their grid cell.
+
+
+
+
+
+Layers settings
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements within the layered container. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis. Both axes default to **Stretch** when switching to Layers so all children fill the container.
+
+- **Stretch:** Items fill the full size of the container. Use this when all layers should occupy the same space.
+- **Start:** Items align to the top (vertical) or left (horizontal) edge of the container.
+- **Center:** Items center within the container along that axis.
+- **End:** Items align to the bottom (vertical) or right (horizontal) edge of the container.
+
+
+
+
+
+
+Spacing
+
+
+Controls the internal spacing of the Box container.
+
+
+Spacing settings
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Internal spacing between the Box edges and its children.
+
+
+
+Gap (Flex and Grid Only) Supports: Responsive
+
+
+Space between child elements. This field appears when **Display** is set to **Flex** or **Grid**.
+
+
+
+
+
+Appearance
+
+
+Visual styling for the Box container.
+
+
+Appearance settings
+
+
+
+Background settings
+
+Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.
+
+
+
+
+Border settings
+
+Border settings control border style, width, color, radius, and related responsive border controls where available.
+
+
+
+
+
+
+
+Sizing & Placement
+
+
+Controls the Box's own dimensions and position within its parent.
+
+
+Sizing & Placement settings
+
+
+
+Aspect Ratio Supports: Responsive
+
+
+Sets a fixed width-to-height ratio for the Box. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16).
+
+
+
+Flex (Flex Parent Only) Supports: Responsive
+
+
+Sets how the Box grows, shrinks, and sizes itself when its parent container is set to Flex.
+
+
+Flex settings
+
+
+
+Grow Supports: Responsive
+
+
+A non-negative number that determines how much extra space the Box takes up relative to its siblings. A value of `0` prevents growth beyond the natural size.
+
+
+
+Shrink Default: 1; Supports: Responsive
+
+
+A non-negative number that determines how much the Box shrinks relative to its siblings when there is not enough space. A value of `0` prevents shrinking.
+
+
+
+Basis Supports: Responsive
+
+
+Sets the initial size of the Box before available space is distributed. Leave empty to use the Box's natural size (`auto`).
+
+
+
+
+
+Grid Column (Grid Parent Only) Supports: Responsive
+
+
+Sets the grid column the Box occupies when its parent container is set to Grid.
+
+
+
+Grid Row (Grid Parent Only) Supports: Responsive
+
+
+Sets the grid row the Box occupies when its parent container is set to Grid.
+
+
+
+Width Supports: Responsive
+
+
+Sets the width of the Box. Accepts auto, a custom value, or a percentage.
+
+
+
+Min Width Supports: Responsive
+
+
+Sets the minimum width of the Box. The Box will not shrink below this value.
+
+
+
+Max Width Supports: Responsive
+
+
+Sets the maximum width of the Box. The Box will not grow beyond this value.
+
+
+
+Height Supports: Responsive
+
+
+Sets the height of the Box.
+
+
+
+Min Height Supports: Responsive
+
+
+Sets the minimum height of the Box.
+
+
+
+Max Height Supports: Responsive
+
+
+Sets the maximum height of the Box.
+
+
+
+Alignment Supports: Responsive
+
+
+Aligns the Box within its parent container using inline margins. Options are **Left**, **Center**, and **Right**.
+
+
+
+Order Supports: Responsive
+
+
+Sets the display order of the Box when it is placed in a Flex or Grid parent. Lower values appear earlier.
+
+
+
+
+
+Link
+
+
+Makes the entire Box container clickable. When set, clicking anywhere on the Box navigates to the specified URL.
+
+:::warning
+
+When the Link option is enabled, any links inside modules placed within the Box will no longer work because HTML links cannot be nested.
+:::
+
+
+Link settings
+
+Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
+
+
+
+
+### Children tab
+
+The Children tab sets the default layout, spacing, and appearance values applied to all modules placed directly inside the Box.
+
+
+Flexbox (Flex Only) Supports: Responsive
+
+
+Sets default Flexbox child properties applied to all direct children when **Display** is set to **Flex**. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Flexbox child settings
+
+
+
+Grow Supports: Responsive
+
+
+A non-negative number that determines how much of the available extra space a child takes up relative to other children. A value of `0` prevents growth beyond the natural size. A value of `1` allows proportional growth.
+
+
+
+Shrink Default: 1; Supports: Responsive
+
+
+A non-negative number that determines how much a child shrinks relative to other children when there is not enough space. A value of `0` prevents shrinking. A value of `1` allows proportional shrinking.
+
+
+
+Basis Supports: Responsive
+
+
+Sets the initial size of a child element before available space is distributed. Accepts a numeric value with units: `px`, `%`, `em`, `rem`, `vw`. Leave empty to use the child's natural size (`auto`).
+
+
+
+
+
+Grid (Grid Only)
+
+
+Sets default grid placement values applied to all direct children when **Display** is set to **Grid**. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Grid child settings
+
+
+
+Grid Column Supports: Responsive
+
+
+Sets the default column position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-column` shorthand.
+
+
+Grid column settings
+
+
+
+Start Supports: Responsive
+
+
+The grid column line where children begin. Leave empty for automatic placement.
+
+
+
+Span Supports: Responsive
+
+
+The number of column tracks children span. Minimum value is `1`.
+
+
+
+End Supports: Responsive
+
+
+The grid column line where children end. Leave empty for automatic placement.
+
+
+
+
+
+Grid Row Supports: Responsive
+
+
+Sets the default row position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-row` shorthand.
+
+
+Grid row settings
+
+
+
+Start Supports: Responsive
+
+
+The grid row line where children begin. Leave empty for automatic placement.
+
+
+
+Span Supports: Responsive
+
+
+The number of row tracks children span. Minimum value is `1`.
+
+
+
+End Supports: Responsive
+
+
+The grid row line where children end. Leave empty for automatic placement.
+
+
+
+
+
+
+
+Layers (Layers Only)
+
+
+Sets default grid placement values applied to all direct children when **Display** is set to **Layers**. Defaults to full coverage — each child spans the entire width and height of the container. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Layers child settings
+
+
+
+Grid Column Supports: Responsive
+
+
+Sets the default column position for children. Defaults to `start: 1, end: -1`, spanning each child across the full width of the container.
+
+
+Grid column settings
+
+
+
+Start Default: 1; Supports: Responsive
+
+
+The grid column line where children begin.
+
+
+
+Span Supports: Responsive
+
+
+The number of column tracks children span. Leave empty when using Start and End together.
+
+
+
+End Default: -1; Supports: Responsive
+
+
+The grid column line where children end. Defaults to `-1` (the last line), ensuring full-width coverage.
+
+
+
+
+
+Grid Row Supports: Responsive
+
+
+Sets the default row position for children. Defaults to `start: 1, end: -1`, spanning each child across the full height of the container.
+
+
+Grid row settings
+
+
+
+Start Default: 1; Supports: Responsive
+
+
+The grid row line where children begin.
+
+
+
+Span Supports: Responsive
+
+
+The number of row tracks children span. Leave empty when using Start and End together.
+
+
+
+End Default: -1; Supports: Responsive
+
+
+The grid row line where children end. Defaults to `-1` (the last line), ensuring full-height coverage.
+
+
+
+
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Default internal padding applied to each child module within the Box.
+
+
+
+Sizing Supports: Responsive
+
+
+Default sizing values applied to all direct child modules. Individual children can override these values using their own Sizing & Placement settings.
+
+
+Sizing settings
+
+
+
+Width & Height Supports: Responsive
+
+
+Sets default width, minimum width, maximum width, height, minimum height, and maximum height constraints for child modules.
+
+
+
+Aspect Ratio Supports: Responsive
+
+
+Sets a default width-to-height ratio for child modules. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16).
+
+
+
+
+
+Appearance Supports: Responsive
+
+
+Default visual styling for child modules.
+
+
+Child appearance settings
+
+
+
+Text Color Supports: Responsive, Field Connections
+
+
+The default text color for child modules.
+
+
+
+Background Type
+
+
+Sets the default background type for child modules.
+
+- **Color:** Applies a solid background color.
+- **Advanced:** Opens the multi-layer background interface for gradients, images, and video.
+
+
+Color
+
+
+
+Background Color Supports: Responsive, Field Connections
+
+
+The solid background color applied to child modules when **Background Type** is set to **Color**.
+
+
+
+
+Advanced
+
+
+
+Background settings
+
+Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.
+
+
+
+
+
+
+Border settings
+
+Border settings control border style, width, color, radius, and related responsive border controls where available.
+
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/button-group.mdx b/beaver-builder/layouts/modules/button-group.mdx
new file mode 100644
index 00000000..ae4eed43
--- /dev/null
+++ b/beaver-builder/layouts/modules/button-group.mdx
@@ -0,0 +1,301 @@
+---
+title: Button Group
+sidebar_label: Button Group
+icon: "stretch-horizontal"
+description: "Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance."
+---
+
+
+Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance.
+
+## Usage
+
+The Button Group module displays multiple buttons in a single layout element. It renders a group container with a shared style baseline — configure layout, typography, colors, backgrounds, and borders at the group level, then override appearance settings on each individual button as needed.
+
+Use the Button Group module for paired calls to action, navigation groups, or any situation where two or more buttons appear together and share a consistent visual style.
+
+:::note
+
+The Button Group module is designed for multiple buttons displayed together. If you only need a single button, use the [Button](/beaver-builder/layouts/modules/button) module instead.
+:::
+
+## Module settings
+
+The Button Group module settings control the button list, shared group styling, and per-button behavior.
+
+### Buttons tab
+
+The Buttons tab is where you build and manage the list of buttons in the group.
+
+
+Button Group Label
+
+
+An optional accessibility label for the button group container. The value is added as an `aria-label` attribute on the rendered HTML element.
+
+For example, entering `Hero Buttons` outputs `aria-label="Hero Button Group"` in the HTML. Use this to improve screen reader context when the group's purpose is not clear from surrounding content.
+
+```html wrap
+
` heading.
+- **h6:** Renders the label with an `` heading.
+- **div:** Renders the label with a `` element.
+- **span:** Renders the label with a `` element.
+
+
+
+
+Content Type (Post Only) Default: Post Content
+
+
+Selects whether post-based items render full post content or post excerpts. This field appears when **Content Source** is set to **Post**.
+
+- **Post Content:** Displays the full post content inside each accordion item.
+- **Post Excerpt:** Displays the post excerpt and reveals excerpt display settings.
+
+
+Excerpt Settings
+
+
+
+Excerpt Length (Post Excerpt Only)
+
+
+Sets the number of words shown in each post excerpt.
+
+
+
+Excerpt More Text (Post Excerpt Only) Default: ...
+
+
+Sets the text appended after each excerpt.
+
+
+
+More Link (Post Excerpt Only) Default: Hide
+
+
+Shows or hides a link below each post excerpt.
+
+- **Show:** Displays a link below the excerpt and reveals **More Link Text**.
+- **Hide:** Removes the excerpt link.
+
+
+More Link Text
+
+
+
+More Link Text (Show Only) Default: Read More
+
+
+Sets the label used for the post excerpt link when **More Link** is set to **Show**.
+
+
+
+
+
+
+
+Expand on Tab Default: No
+
+
+Expands an accordion item when its button receives keyboard focus through tab navigation.
+
+- **Yes:** Opens an accordion item when keyboard users tab to its label.
+- **No:** Keeps tab focus from expanding accordion items automatically.
+
+
+
+
+Collapse Inactive Default: Yes
+
+
+Keeps only one item open at a time or allows multiple items to remain open.
+
+- **Yes:** Keeps only one accordion item open at a time.
+- **No:** Allows multiple accordion items to stay open at the same time.
+
+
+
+
+Expand First Item Default: No
+
+
+Expands the first accordion item when the module loads.
+
+- **Yes:** Opens the first accordion item by default when the module loads.
+- **No:** Leaves all accordion items collapsed on load.
+
+
+
+
+
+### Style Tab
+
+The Style tab controls the size, spacing, colors, icons, and content styling used by the accordion.
+
+
+Item Size Default: Small
+
+
+Sets the preset size used for accordion labels.
+
+- **Small:** Keeps the accordion labels compact. Inherits the font size from the theme or parent element.
+- **Medium:** Uses a balanced label size for most layouts. Sets the label font size to 20px.
+- **Large:** Gives the accordion labels more visual emphasis. Sets the label font size to 26px.
+
+
+
+
+Item Spacing Default: 10; Supports: Responsive
+
+
+Sets the spacing between accordion items.
+
+
+
+Item Border Supports: Responsive
+
+
+Configures the border style, width, radius, and color for each accordion item.
+
+:::tip
+
+The Responsive Toggle lets you set different border values for desktop, tablet, and mobile. The **Width** and **Radius** controls also support Link Values so you can keep all sides or corners in sync.
+:::
+
+
+General
+
+
+
+Style Default: Default
+
+
+Selects the line style used for the border.
+
+
+Available options
+
+
+- Default
+- None
+- Solid
+- Dashed
+- Dotted
+- Double
+
+
+
+**Default** uses the module or theme's built-in border styling when one is available. Choose **None** to remove the visible border without clearing any saved width, color, or radius values.
+
+
+
+Color
+
+
+Sets the border color using the color picker. This field also supports alpha transparency.
+
+
+
+Width Supports: Responsive, Link Values
+
+
+Sets the border width for the top, right, bottom, and left sides using `px`.
+
+Click into any width field to open a slider, or type a value directly for more precise control.
+
+
+
+Radius & Shadow
+
+
+
+Radius Supports: Responsive, Link Values
+
+
+Rounds the corners by setting the top-left, top-right, bottom-right, and bottom-left radius in `px`.
+
+Larger matching values create softer corners, and very high values can produce pill or circular shapes when the element dimensions allow it.
+
+
+Box Shadow
+
+
+Adds a shadow around the element to create depth and separation from surrounding content.
+
+
+Box Shadow settings
+
+
+
+Color
+
+
+Sets the shadow color and opacity.
+
+
+
+X
+
+
+Sets the horizontal shadow offset. Positive values move the shadow to the right, and negative values move it to the left.
+
+
+
+Y
+
+
+Sets the vertical shadow offset. Positive values move the shadow downward, and negative values move it upward.
+
+
+
+Blur
+
+
+Softens the shadow edge. Higher values create a blurrier, more diffuse shadow.
+
+
+
+Spread
+
+
+Expands or contracts the overall size of the shadow. Positive values make the shadow larger, and negative values pull it inward.
+
+
+
+
+
+
+
+Label
+
+
+The Label section controls the appearance of accordion headings.
+
+
+Label Settings
+
+
+
+Text Color Supports: Field Connections
+
+
+Sets the label text color and icon color.
+
+
+
+Background Color Supports: Field Connections
+
+
+Sets the background color of the label row.
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Sets the inner spacing of the label row.
+
+
+
+Typography Supports: Responsive
+
+
+The font settings for accordion labels.
+
+
+Typography settings
+
+Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
+
+
+
+
+
+
+
+Icon
+
+
+The Icon section controls icon placement and icon states for accordion labels.
+
+
+Icon Settings
+
+
+
+Icon Position Default: Right
+
+
+Places the icon on the left or right side of the label.
+
+- **Left:** Places the icon before the label text.
+- **Right:** Places the icon after the label text.
+
+
+
+
+Icon Default: fas fa-plus; Supports: Field Connections
+
+
+Sets the icon shown when an item is collapsed.
+
+
+
+Active Icon Default: fas fa-minus; Supports: Field Connections
+
+
+Sets the icon shown when an item is expanded.
+
+
+
+DuoTone Icon Primary Color (DuoTone Icons Only) Supports: Field Connections
+
+
+Sets the primary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.
+
+
+
+DuoTone Icon Secondary Color (DuoTone Icons Only) Supports: Field Connections
+
+
+Sets the secondary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style.
+
+
+
+
+
+Content
+
+
+The Content section controls the appearance of accordion panels.
+
+
+Content Settings
+
+
+
+Text Color (Custom Content Only) Supports: Field Connections
+
+
+Sets the text color for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**.
+
+
+
+Background Color Supports: Field Connections
+
+
+Sets the background color of the accordion content panel.
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Sets the inner spacing of the accordion content panel.
+
+
+
+Typography (Custom Content Only) Supports: Responsive
+
+
+The font settings for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**.
+
+
+Typography settings
+
+Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
+
+
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/acf-block.mdx b/beaver-builder/layouts/modules/acf-block.mdx
new file mode 100644
index 00000000..73cb875b
--- /dev/null
+++ b/beaver-builder/layouts/modules/acf-block.mdx
@@ -0,0 +1,43 @@
+---
+title: ACF Blocks
+icon: "cuboid"
+description: "Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts."
+---
+
+
+Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts.
+
+## Requirements
+
+The ACF Block module requires **Advanced Custom Fields Pro** to be installed and activated.
+
+## What are ACF Blocks?
+
+ACF Blocks are custom content blocks built with the Advanced Custom Fields (ACF) plugin. They let you create your own editor blocks using custom fields, making it easier to build consistent, reusable blocks for both Beaver Builder and the WordPress Block Editor through the familiar ACF field groups interface.
+
+To create an ACF Block for Beaver Builder, see our [ACF Blocks developer documentation](https://www.advancedcustomfields.com/resources/blocks/) for step-by-step instructions on registering, configuring, and making your block available in the Beaver Builder editor.
+
+:::note
+
+ACF blocks that declare JSX support are not compatible with Beaver Builder and will not appear in the available block list.
+:::
+
+## Accessing ACF Blocks
+
+Blocks created with ACF are available in the **Content Panel > Modules tab > ACF Blocks**. Any categories or icons used to organize and display your blocks in the WordPress Block Editor will also appear there.
+
+## Block Settings
+
+The ACF Block module settings are dynamically generated based on the selected block type.
+
+### Settings Tab
+
+The Settings tab displays the ACF field group associated with the selected block type. The fields shown depend entirely on how the ACF block was registered and configured by you or your developer.
+
+To view all available fields for a particular ACF block, go to **WordPress Admin Dashboard > ACF** and open the **Field Group** assigned to that block.
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/audio.mdx b/beaver-builder/layouts/modules/audio.mdx
new file mode 100644
index 00000000..e20eb674
--- /dev/null
+++ b/beaver-builder/layouts/modules/audio.mdx
@@ -0,0 +1,193 @@
+---
+title: Audio
+sidebar_label: Audio
+icon: "music"
+description: "Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL."
+---
+
+
+Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL.
+
+## Usage
+
+Use Audio to render a WordPress audio player from either files in the WordPress Media Library or a direct URL to a single audio file. Depending on how the source is configured, the module outputs either one audio player with standard playback controls or a playlist player with optional track display settings.
+
+Use Audio for podcasts, music tracks, interviews, sermons, voice recordings, and other layouts where visitors need inline playback without custom code. The module renders WordPress's native `[audio]` and `[playlist]` shortcodes, so the Media Library option fits audio managed in WordPress, while the Link option works when you already host a single audio file elsewhere and have its direct file URL.
+
+## Module Settings
+
+The Audio module settings control where audio comes from and how a single player or playlist behaves on the front end.
+
+### General Tab
+
+The General tab sets the audio source and reveals playback settings based on whether the module is rendering one file or a playlist.
+
+
+Audio Type
+
+
+Selects whether the module uses the WordPress Media Library or a direct audio file URL.
+
+- **Media Library:** Builds the player from audio files selected in the WordPress Media Library. Supports single-file playback and playlists when more than one file is selected.
+- **Link:** Builds the player from a direct URL to a single hosted audio file.
+
+
+Media Library
+
+
+
+Audio
+
+
+Selects one or more audio files from the WordPress Media Library. This custom field shows the current number of selected files and includes controls to **Select Audio**, **Edit Playlist**, or **Add Audio Files**. When one file is selected, the single-audio playback settings below apply. When more than one file is selected, playlist settings become available.
+
+
+Playlist
+
+
+
+Style Default: Light
+
+
+Sets the playlist appearance to a light or dark preset when more than one audio file is selected.
+
+
+
+Show Playlist Default: Yes
+
+
+Shows or hides the playlist track list beneath the player when more than one audio file is selected.
+
+
+Show Track Numbers
+
+
+
+Show Track Numbers (Show Playlist Only) Default: Yes
+
+
+Shows or hides track numbers in the playlist when **Show Playlist** is set to **Yes**.
+
+
+
+
+
+Show Thumbnail Default: Yes
+
+
+Shows or hides playlist thumbnail images when they are available for the selected audio files.
+
+
+
+Show Artist Name Default: Yes
+
+
+Shows or hides artist metadata in the playlist when it is available for the selected audio files.
+
+
+
+
+
+
+Link
+
+
+
+Link Supports: Field Connections
+
+
+Sets the direct URL to a single audio file when **Audio Type** is set to **Link**. The module passes this value directly to the WordPress audio shortcode to render the player.
+
+Because this field is used as the player source URL, use a direct file link such as `https://example.com/audio/episode-01.mp3` rather than a page URL or third-party embed page.
+
+
+
+
+Single Audio Playback
+
+
+
+Auto Play (Single Audio Only) Default: No
+
+
+Automatically starts playback when the module is rendering one audio file, whether that file comes from the Media Library or the **Link** option.
+
+
+
+Loop (Single Audio Only) Default: No
+
+
+Repeats the current audio file after it finishes when the module is rendering one audio file.
+
+
+
+
+## Advanced tab
+
+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.
+
+## Create a playlist
+
+To build a playlist in the Audio module, follow these steps:
+
+
+
+Step
+
+
+Open the Audio module settings.
+
+
+Step
+
+
+Set **Audio Type** to **Media Library**.
+
+
+Step
+
+
+In the **Audio** field, click **Add Audio Files** or **Select Audio** to open the WordPress Media Library.
+
+
+Step
+
+
+Choose multiple audio files, then create or insert the playlist from the Media Library modal.
+
+
+Step
+
+
+Return to the module settings and adjust playlist options such as **Style**, **Show Playlist**, **Show Thumbnail**, and **Show Artist Name** as needed.
+
+
+
+Once more than one file is selected, the module switches from single-audio playback to playlist mode and reveals the playlist display settings.
+
+
+![]()
+
+![]()
+
+
+## Supported audio formats
+
+The Audio module is built on the native WordPress audio and playlist shortcodes, which determine the file types it can accept. The module supports the following audio formats:
+
+- `.mp3`
+- `.m4a`
+- `.ogg`
+- `.wav`
diff --git a/beaver-builder/layouts/modules/bigcommerce.mdx b/beaver-builder/layouts/modules/bigcommerce.mdx
new file mode 100644
index 00000000..82817c6b
--- /dev/null
+++ b/beaver-builder/layouts/modules/bigcommerce.mdx
@@ -0,0 +1,98 @@
+---
+title: BigCommerce Products
+sidebar_label: BigCommerce
+icon: "shopping-cart"
+description: "Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination."
+---
+
+
+Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination.
+
+:::note
+
+This module is available only when the [BigCommerce for WordPress](https://wordpress.org/plugins/bigcommerce/) plugin is installed and active.
+:::
+
+## Usage
+
+Use BigCommerce Products to render the BigCommerce product gallery inside a Beaver Builder layout. The module outputs the `[bigcommerce_product]` shortcode and can limit the gallery to featured products, on-sale products, or recently imported products, while optionally splitting results across multiple pages.
+
+Use BigCommerce Products on store landing pages, sale pages, featured product sections, and other layouts where you want BigCommerce catalog content inside Beaver Builder without building shortcode attributes by hand. It works well for quickly surfacing a focused slice of your catalog in a visual layout.
+
+## Module Settings
+
+The BigCommerce Products module settings control which products appear in the gallery and whether the results are paginated.
+
+### Content Tab
+
+The Content tab controls pagination and the product filters applied to the gallery output.
+
+
+Pagination
+
+
+The Pagination section controls whether the gallery is split into multiple pages and how many products each page shows.
+
+
+Pagination Settings
+
+
+
+Use Pagination Default: No
+
+
+Splits the product gallery across multiple pages.
+
+
+Products per page
+
+
+
+Products per page Default: 8
+
+
+Sets how many products appear on each page when **Use Pagination** is set to **Yes**. The field supports values from 0 to 100.
+
+
+
+
+
+
+
+Filters
+
+
+The Filters section narrows which BigCommerce products appear in the gallery.
+
+
+Filter Settings
+
+
+
+Show only featured products? Default: No
+
+
+Limits the gallery to products marked as featured in BigCommerce.
+
+
+
+Show only on-sale products? Default: No
+
+
+Limits the gallery to products that are currently on sale.
+
+
+
+Show only recent products? Default: No
+
+
+Limits the gallery to recently imported products. On the front end, the shortcode treats recent products as items imported within the last two days unless that window is changed with the `bigcommerce/query/recent_days` filter.
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/box.mdx b/beaver-builder/layouts/modules/box.mdx
new file mode 100644
index 00000000..cb9f2c43
--- /dev/null
+++ b/beaver-builder/layouts/modules/box.mdx
@@ -0,0 +1,671 @@
+---
+title: Box Module
+sidebar_label: Box
+icon: "box"
+description: "A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing."
+---
+
+
+A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing.
+
+## Requirements
+
+The Box module depends on JavaScript code available in **WordPress 5.2** or later. If you are using an earlier version, the Box module will not appear in the Beaver Builder user interface (UI).
+
+## Usage
+
+The Box module is a container that holds other modules. It arranges its children using Flexbox, CSS Grid, or layered positioning, giving precise control over alignment, spacing, and sizing across any number of elements.
+
+Use the Box module when you need spatial control over a group of modules — positioning text beside an image with Flex, building a structured grid of feature cards with Grid, or overlaying a headline on a background photo with Layers. Because Boxes nest inside other Boxes, complex multi-level layouts stay organized through a single consistent building block.
+
+## Box Module Aliases
+
+The Box module includes preconfigured aliases for common layouts. They are a useful starting point, especially if you are new to CSS Grid or Flexbox, and can also help you learn by showing how each layout is configured.
+
+- **Flex Columns:** Uses flexbox to arrange three boxes horizontally within the parent container.
+- **3×2 Grid:** Creates a layout with three rows and two columns using grid boxes inside the parent container.
+- **4×2 Grid:** Creates a layout with four rows and two columns using grid boxes inside the parent container.
+- **Split Header:** Uses a three-column grid layout to create a distinct header structure.
+- **Photo Grid:** Creates a 4×3 grid layout that incorporates Photo modules within the parent container.
+
+## Module Settings
+
+The Box module settings are organized into two tabs: Container controls the Box itself, and Children controls the defaults applied to all modules placed inside it.
+
+### Container tab
+
+The Container tab controls the Box's layout mode, spacing, visual appearance, sizing, and link behavior.
+
+
+Display
+
+
+Selects how child elements are arranged inside the Box.
+
+- **Flex:** Arranges children along a single axis using CSS Flexbox. Ideal for one-dimensional layouts where items need to flow, wrap, grow, or shrink relative to one another.
+- **Grid:** Arranges children in a two-dimensional layout using CSS Grid. Ideal for structured layouts where precise control over both rows and columns is needed.
+- **Layers:** Stacks children on top of one another using CSS Grid. All children occupy the same grid cell by default, creating layered or overlay effects.
+
+
+Flex settings
+
+
+
+Direction Default: Row; Supports: Responsive
+
+
+Controls the main axis along which child elements are arranged. Changing the direction also affects how the **Align** setting maps to horizontal and vertical axes.
+
+- **Row:** Items are placed side by side horizontally, left to right.
+- **Column:** Items are stacked vertically, top to bottom.
+- **Reversed Row:** Items are placed horizontally in reverse order, right to left.
+- **Reversed Column:** Items are stacked vertically in reverse order, bottom to top.
+
+
+
+
+Wrap Default: Normal; Supports: Responsive
+
+
+Controls whether child elements stay on a single line or wrap onto additional lines when there is not enough space.
+
+- **Normal:** Items do not wrap and remain on a single line. Items may overflow the container if they exceed its width.
+- **None:** Explicitly sets `flex-wrap: nowrap`. Functionally similar to Normal but makes the no-wrap intent explicit in CSS.
+- **Wrap:** Items wrap onto additional lines when they no longer fit, flowing from top to bottom.
+- **Reversed:** Items wrap onto additional lines, but new lines are added above previous ones rather than below.
+
+
+
+
+Gap Default: 10px; Supports: Responsive
+
+
+Sets the space between child elements. This single value applies uniformly in all directions. Gap creates space only between items — it does not add space on the outer edges of the container. Use **Padding** to add space around the inside of the container boundary.
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements along the vertical and horizontal axes. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis.
+
+The behavior of each axis depends on **Direction**. When Direction is Row or Reversed Row, the horizontal axis is the main axis (`justify-content`) and the vertical axis is the cross axis (`align-items`). When Direction is Column or Reversed Column, the axes are swapped.
+
+- **Stretch:** Items stretch to fill the full container size along that axis.
+- **Start:** Items are packed toward the start of the axis.
+- **Center:** Items are centered along the axis.
+- **End:** Items are packed toward the end of the axis.
+- **Space Evenly:** Spacing between any two adjacent items and between items and the container edges is equal.
+- **Space Between:** Items are evenly distributed. The first item is flush with the start edge and the last item is flush with the end edge.
+- **Space Around:** Items are distributed with equal space on both sides of each item.
+
+
+
+
+
+Grid settings
+
+
+
+Grid Supports: Responsive
+
+
+Defines the column and row track structure of the grid. Each track is the space between two grid lines where content is placed. Add tracks using the **+** button, reorder them by dragging the handle, or duplicate and remove them from the ellipsis menu.
+
+:::tip
+
+The **Grid overlay** icon appears in the settings panel next to the Grid label. Clicking it toggles a visual grid guideline overlay on the canvas, making it easier to see column and row boundaries while building.
+:::
+
+Each track supports the following types:
+
+- **Multiple Tracks:** Repeats a track a specified number of times using the CSS `repeat()` function. For example, setting columns to `3` creates `repeat(3, 1fr)` — three equal-width columns.
+- **Freeform:** Accepts any valid CSS track size directly, such as `200px`, `minmax(100px, 1fr)`, or `repeat(4, auto)`.
+- **Auto:** Track size is determined by its content. Equivalent to the CSS `auto` keyword.
+- **1fr:** Adds a single fractional unit. The `fr` unit divides remaining available space proportionally. Multiple `1fr` tracks share space equally; a `2fr` track receives twice as much space as a `1fr` track.
+
+**Auto Columns** and **Auto Rows** define the size of implicitly created tracks when more items are placed in the grid than explicitly defined tracks can accommodate.
+
+
+
+Flow Direction Default: Row; Supports: Responsive
+
+
+Controls how grid items are automatically placed when their position is not explicitly defined. Maps to the CSS `grid-auto-flow` property.
+
+- **Row:** Items fill each row in turn, adding new rows as needed. Items flow left to right, then wrap to the next row.
+- **Column:** Items fill each column in turn, adding new columns as needed. Items flow top to bottom, then wrap to the next column.
+
+
+
+
+Gap Supports: Responsive
+
+
+Sets the space between rows and columns in the grid independently. Gap applies only between grid tracks and does not add space around the outer edges of the grid. Use **Padding** to add outer spacing.
+
+- **Row:** Space between horizontal rows. Default is `10px`.
+- **Column:** Space between vertical columns. Default is `10px`.
+
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements within the grid container along both axes. Two rows of icon buttons are shown — the top row controls the vertical axis (`align-items`) and the bottom row controls the horizontal axis (`justify-items`).
+
+Unlike Flex, Grid alignment operates independently of a direction setting — vertical always means the block axis and horizontal always means the inline axis.
+
+- **Stretch:** Items stretch to fill the full size of their grid cell.
+- **Start:** Items align to the start edge of their grid cell.
+- **Center:** Items center within their grid cell.
+- **End:** Items align to the end edge of their grid cell.
+
+
+
+
+
+Layers settings
+
+
+
+Align Default: Stretch; Supports: Responsive
+
+
+Controls the alignment of child elements within the layered container. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis. Both axes default to **Stretch** when switching to Layers so all children fill the container.
+
+- **Stretch:** Items fill the full size of the container. Use this when all layers should occupy the same space.
+- **Start:** Items align to the top (vertical) or left (horizontal) edge of the container.
+- **Center:** Items center within the container along that axis.
+- **End:** Items align to the bottom (vertical) or right (horizontal) edge of the container.
+
+
+
+
+
+
+Spacing
+
+
+Controls the internal spacing of the Box container.
+
+
+Spacing settings
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Internal spacing between the Box edges and its children.
+
+
+
+Gap (Flex and Grid Only) Supports: Responsive
+
+
+Space between child elements. This field appears when **Display** is set to **Flex** or **Grid**.
+
+
+
+
+
+Appearance
+
+
+Visual styling for the Box container.
+
+
+Appearance settings
+
+
+
+Background settings
+
+Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.
+
+
+
+
+Border settings
+
+Border settings control border style, width, color, radius, and related responsive border controls where available.
+
+
+
+
+
+
+
+Sizing & Placement
+
+
+Controls the Box's own dimensions and position within its parent.
+
+
+Sizing & Placement settings
+
+
+
+Aspect Ratio Supports: Responsive
+
+
+Sets a fixed width-to-height ratio for the Box. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16).
+
+
+
+Flex (Flex Parent Only) Supports: Responsive
+
+
+Sets how the Box grows, shrinks, and sizes itself when its parent container is set to Flex.
+
+
+Flex settings
+
+
+
+Grow Supports: Responsive
+
+
+A non-negative number that determines how much extra space the Box takes up relative to its siblings. A value of `0` prevents growth beyond the natural size.
+
+
+
+Shrink Default: 1; Supports: Responsive
+
+
+A non-negative number that determines how much the Box shrinks relative to its siblings when there is not enough space. A value of `0` prevents shrinking.
+
+
+
+Basis Supports: Responsive
+
+
+Sets the initial size of the Box before available space is distributed. Leave empty to use the Box's natural size (`auto`).
+
+
+
+
+
+Grid Column (Grid Parent Only) Supports: Responsive
+
+
+Sets the grid column the Box occupies when its parent container is set to Grid.
+
+
+
+Grid Row (Grid Parent Only) Supports: Responsive
+
+
+Sets the grid row the Box occupies when its parent container is set to Grid.
+
+
+
+Width Supports: Responsive
+
+
+Sets the width of the Box. Accepts auto, a custom value, or a percentage.
+
+
+
+Min Width Supports: Responsive
+
+
+Sets the minimum width of the Box. The Box will not shrink below this value.
+
+
+
+Max Width Supports: Responsive
+
+
+Sets the maximum width of the Box. The Box will not grow beyond this value.
+
+
+
+Height Supports: Responsive
+
+
+Sets the height of the Box.
+
+
+
+Min Height Supports: Responsive
+
+
+Sets the minimum height of the Box.
+
+
+
+Max Height Supports: Responsive
+
+
+Sets the maximum height of the Box.
+
+
+
+Alignment Supports: Responsive
+
+
+Aligns the Box within its parent container using inline margins. Options are **Left**, **Center**, and **Right**.
+
+
+
+Order Supports: Responsive
+
+
+Sets the display order of the Box when it is placed in a Flex or Grid parent. Lower values appear earlier.
+
+
+
+
+
+Link
+
+
+Makes the entire Box container clickable. When set, clicking anywhere on the Box navigates to the specified URL.
+
+:::warning
+
+When the Link option is enabled, any links inside modules placed within the Box will no longer work because HTML links cannot be nested.
+:::
+
+
+Link settings
+
+Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.
+
+
+
+
+### Children tab
+
+The Children tab sets the default layout, spacing, and appearance values applied to all modules placed directly inside the Box.
+
+
+Flexbox (Flex Only) Supports: Responsive
+
+
+Sets default Flexbox child properties applied to all direct children when **Display** is set to **Flex**. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Flexbox child settings
+
+
+
+Grow Supports: Responsive
+
+
+A non-negative number that determines how much of the available extra space a child takes up relative to other children. A value of `0` prevents growth beyond the natural size. A value of `1` allows proportional growth.
+
+
+
+Shrink Default: 1; Supports: Responsive
+
+
+A non-negative number that determines how much a child shrinks relative to other children when there is not enough space. A value of `0` prevents shrinking. A value of `1` allows proportional shrinking.
+
+
+
+Basis Supports: Responsive
+
+
+Sets the initial size of a child element before available space is distributed. Accepts a numeric value with units: `px`, `%`, `em`, `rem`, `vw`. Leave empty to use the child's natural size (`auto`).
+
+
+
+
+
+Grid (Grid Only)
+
+
+Sets default grid placement values applied to all direct children when **Display** is set to **Grid**. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Grid child settings
+
+
+
+Grid Column Supports: Responsive
+
+
+Sets the default column position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-column` shorthand.
+
+
+Grid column settings
+
+
+
+Start Supports: Responsive
+
+
+The grid column line where children begin. Leave empty for automatic placement.
+
+
+
+Span Supports: Responsive
+
+
+The number of column tracks children span. Minimum value is `1`.
+
+
+
+End Supports: Responsive
+
+
+The grid column line where children end. Leave empty for automatic placement.
+
+
+
+
+
+Grid Row Supports: Responsive
+
+
+Sets the default row position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-row` shorthand.
+
+
+Grid row settings
+
+
+
+Start Supports: Responsive
+
+
+The grid row line where children begin. Leave empty for automatic placement.
+
+
+
+Span Supports: Responsive
+
+
+The number of row tracks children span. Minimum value is `1`.
+
+
+
+End Supports: Responsive
+
+
+The grid row line where children end. Leave empty for automatic placement.
+
+
+
+
+
+
+
+Layers (Layers Only)
+
+
+Sets default grid placement values applied to all direct children when **Display** is set to **Layers**. Defaults to full coverage — each child spans the entire width and height of the container. Individual children can override these values using their own **Sizing & Placement** settings.
+
+
+Layers child settings
+
+
+
+Grid Column Supports: Responsive
+
+
+Sets the default column position for children. Defaults to `start: 1, end: -1`, spanning each child across the full width of the container.
+
+
+Grid column settings
+
+
+
+Start Default: 1; Supports: Responsive
+
+
+The grid column line where children begin.
+
+
+
+Span Supports: Responsive
+
+
+The number of column tracks children span. Leave empty when using Start and End together.
+
+
+
+End Default: -1; Supports: Responsive
+
+
+The grid column line where children end. Defaults to `-1` (the last line), ensuring full-width coverage.
+
+
+
+
+
+Grid Row Supports: Responsive
+
+
+Sets the default row position for children. Defaults to `start: 1, end: -1`, spanning each child across the full height of the container.
+
+
+Grid row settings
+
+
+
+Start Default: 1; Supports: Responsive
+
+
+The grid row line where children begin.
+
+
+
+Span Supports: Responsive
+
+
+The number of row tracks children span. Leave empty when using Start and End together.
+
+
+
+End Default: -1; Supports: Responsive
+
+
+The grid row line where children end. Defaults to `-1` (the last line), ensuring full-height coverage.
+
+
+
+
+
+
+
+Padding Supports: Responsive, Link Values
+
+
+Default internal padding applied to each child module within the Box.
+
+
+
+Sizing Supports: Responsive
+
+
+Default sizing values applied to all direct child modules. Individual children can override these values using their own Sizing & Placement settings.
+
+
+Sizing settings
+
+
+
+Width & Height Supports: Responsive
+
+
+Sets default width, minimum width, maximum width, height, minimum height, and maximum height constraints for child modules.
+
+
+
+Aspect Ratio Supports: Responsive
+
+
+Sets a default width-to-height ratio for child modules. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16).
+
+
+
+
+
+Appearance Supports: Responsive
+
+
+Default visual styling for child modules.
+
+
+Child appearance settings
+
+
+
+Text Color Supports: Responsive, Field Connections
+
+
+The default text color for child modules.
+
+
+
+Background Type
+
+
+Sets the default background type for child modules.
+
+- **Color:** Applies a solid background color.
+- **Advanced:** Opens the multi-layer background interface for gradients, images, and video.
+
+
+Color
+
+
+
+Background Color Supports: Responsive, Field Connections
+
+
+The solid background color applied to child modules when **Background Type** is set to **Color**.
+
+
+
+
+Advanced
+
+
+
+Background settings
+
+Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.
+
+
+
+
+
+
+Border settings
+
+Border settings control border style, width, color, radius, and related responsive border controls where available.
+
+
+
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/button-group.mdx b/beaver-builder/layouts/modules/button-group.mdx
new file mode 100644
index 00000000..ae4eed43
--- /dev/null
+++ b/beaver-builder/layouts/modules/button-group.mdx
@@ -0,0 +1,301 @@
+---
+title: Button Group
+sidebar_label: Button Group
+icon: "stretch-horizontal"
+description: "Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance."
+---
+
+
+Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance.
+
+## Usage
+
+The Button Group module displays multiple buttons in a single layout element. It renders a group container with a shared style baseline — configure layout, typography, colors, backgrounds, and borders at the group level, then override appearance settings on each individual button as needed.
+
+Use the Button Group module for paired calls to action, navigation groups, or any situation where two or more buttons appear together and share a consistent visual style.
+
+:::note
+
+The Button Group module is designed for multiple buttons displayed together. If you only need a single button, use the [Button](/beaver-builder/layouts/modules/button) module instead.
+:::
+
+## Module settings
+
+The Button Group module settings control the button list, shared group styling, and per-button behavior.
+
+### Buttons tab
+
+The Buttons tab is where you build and manage the list of buttons in the group.
+
+
+Button Group Label
+
+
+An optional accessibility label for the button group container. The value is added as an `aria-label` attribute on the rendered HTML element.
+
+For example, entering `Hero Buttons` outputs `aria-label="Hero Button Group"` in the HTML. Use this to improve screen reader context when the group's purpose is not clear from surrounding content.
+
+```html wrap
+
` element.
+- **span:** Renders the label with a `` element.
+
+
+
+![]()
+
+![]()
+
+
+## Supported audio formats
+
+The Audio module is built on the native WordPress audio and playlist shortcodes, which determine the file types it can accept. The module supports the following audio formats:
+
+- `.mp3`
+- `.m4a`
+- `.ogg`
+- `.wav`
diff --git a/beaver-builder/layouts/modules/bigcommerce.mdx b/beaver-builder/layouts/modules/bigcommerce.mdx
new file mode 100644
index 00000000..82817c6b
--- /dev/null
+++ b/beaver-builder/layouts/modules/bigcommerce.mdx
@@ -0,0 +1,98 @@
+---
+title: BigCommerce Products
+sidebar_label: BigCommerce
+icon: "shopping-cart"
+description: "Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination."
+---
+
+
+Use BigCommerce Products to display a filtered BigCommerce product gallery with optional pagination.
+
+:::note
+
+This module is available only when the [BigCommerce for WordPress](https://wordpress.org/plugins/bigcommerce/) plugin is installed and active.
+:::
+
+## Usage
+
+Use BigCommerce Products to render the BigCommerce product gallery inside a Beaver Builder layout. The module outputs the `[bigcommerce_product]` shortcode and can limit the gallery to featured products, on-sale products, or recently imported products, while optionally splitting results across multiple pages.
+
+Use BigCommerce Products on store landing pages, sale pages, featured product sections, and other layouts where you want BigCommerce catalog content inside Beaver Builder without building shortcode attributes by hand. It works well for quickly surfacing a focused slice of your catalog in a visual layout.
+
+## Module Settings
+
+The BigCommerce Products module settings control which products appear in the gallery and whether the results are paginated.
+
+### Content Tab
+
+The Content tab controls pagination and the product filters applied to the gallery output.
+
+
+
+
+Content Type (Post Only) Default: Post Content
+ + +Selects whether post-based items render full post content or post excerpts. This field appears when **Content Source** is set to **Post**. + +- **Post Content:** Displays the full post content inside each accordion item. +- **Post Excerpt:** Displays the post excerpt and reveals excerpt display settings. + +
+
+Excerpt Settings
+ + +
+
+
+Excerpt Length (Post Excerpt Only)
+ + +Sets the number of words shown in each post excerpt. +
+
+
+Excerpt More Text (Post Excerpt Only) Default: ...
+ + +Sets the text appended after each excerpt. +
+
+More Link (Post Excerpt Only) Default: Hide
+ + +Shows or hides a link below each post excerpt. + +- **Show:** Displays a link below the excerpt and reveals **More Link Text**. +- **Hide:** Removes the excerpt link. + +
+
+More Link Text
+ + +
+
+More Link Text (Show Only) Default: Read More
+ + +Sets the label used for the post excerpt link when **More Link** is set to **Show**. +
+
+
+Expand on Tab Default: No
+ + +Expands an accordion item when its button receives keyboard focus through tab navigation. + +- **Yes:** Opens an accordion item when keyboard users tab to its label. +- **No:** Keeps tab focus from expanding accordion items automatically. + +
+
+
+Collapse Inactive Default: Yes
+ + +Keeps only one item open at a time or allows multiple items to remain open. + +- **Yes:** Keeps only one accordion item open at a time. +- **No:** Allows multiple accordion items to stay open at the same time. + +
+
+
+
+
+### Style Tab
+
+The Style tab controls the size, spacing, colors, icons, and content styling used by the accordion.
+
+Expand First Item Default: No
+ + +Expands the first accordion item when the module loads. + +- **Yes:** Opens the first accordion item by default when the module loads. +- **No:** Leaves all accordion items collapsed on load. + +
+
+
+Item Size Default: Small
+ + +Sets the preset size used for accordion labels. + +- **Small:** Keeps the accordion labels compact. Inherits the font size from the theme or parent element. +- **Medium:** Uses a balanced label size for most layouts. Sets the label font size to 20px. +- **Large:** Gives the accordion labels more visual emphasis. Sets the label font size to 26px. + +
+
+
+Item Spacing Default: 10; Supports: Responsive
+ + +Sets the spacing between accordion items. +
+
+
+Item Border Supports: Responsive
+ + +Configures the border style, width, radius, and color for each accordion item. + +:::tip + +The Responsive Toggle lets you set different border values for desktop, tablet, and mobile. The **Width** and **Radius** controls also support Link Values so you can keep all sides or corners in sync. +::: + +
+
+General
+ + +
+
+
+Style Default: Default
+ + +Selects the line style used for the border. + +
+
+
+**Default** uses the module or theme's built-in border styling when one is available. Choose **None** to remove the visible border without clearing any saved width, color, or radius values.
+Available options
+ + +- Default +- None +- Solid +- Dashed +- Dotted +- Double + +
+
+
+Color
+ + +Sets the border color using the color picker. This field also supports alpha transparency. +
+
+Width Supports: Responsive, Link Values
+ + +Sets the border width for the top, right, bottom, and left sides using `px`. + +Click into any width field to open a slider, or type a value directly for more precise control. +
+
+Radius & Shadow
+ + +
+
+Radius Supports: Responsive, Link Values
+ + +Rounds the corners by setting the top-left, top-right, bottom-right, and bottom-left radius in `px`. + +Larger matching values create softer corners, and very high values can produce pill or circular shapes when the element dimensions allow it. +
+
+Box Shadow
+ + +Adds a shadow around the element to create depth and separation from surrounding content. + +
+
+Box Shadow settings
+ + +
+
+
+Color
+ + +Sets the shadow color and opacity. +
+
+
+X
+ + +Sets the horizontal shadow offset. Positive values move the shadow to the right, and negative values move it to the left. +
+
+
+Y
+ + +Sets the vertical shadow offset. Positive values move the shadow downward, and negative values move it upward. +
+
+
+Blur
+ + +Softens the shadow edge. Higher values create a blurrier, more diffuse shadow. +
+
+Spread
+ + +Expands or contracts the overall size of the shadow. Positive values make the shadow larger, and negative values pull it inward. +
+
+
+Label
+ + +The Label section controls the appearance of accordion headings. + +
+
+Label Settings
+ + +
+
+
+Text Color Supports: Field Connections
+ + +Sets the label text color and icon color. +
+
+
+Background Color Supports: Field Connections
+ + +Sets the background color of the label row. +
+
+
+Padding Supports: Responsive, Link Values
+ + +Sets the inner spacing of the label row. +
+
+Typography Supports: Responsive
+ + +The font settings for accordion labels. + +
+
+Typography settings
+ +Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available. + +
+
+
+Icon
+ + +The Icon section controls icon placement and icon states for accordion labels. + +
+
+Icon Settings
+ + +
+
+
+Icon Position Default: Right
+ + +Places the icon on the left or right side of the label. + +- **Left:** Places the icon before the label text. +- **Right:** Places the icon after the label text. + +
+
+
+Icon Default: fas fa-plus; Supports: Field Connections
+ + +Sets the icon shown when an item is collapsed. +
+
+
+Active Icon Default: fas fa-minus; Supports: Field Connections
+ + +Sets the icon shown when an item is expanded. +
+
+
+DuoTone Icon Primary Color (DuoTone Icons Only) Supports: Field Connections
+ + +Sets the primary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style. +
+
+DuoTone Icon Secondary Color (DuoTone Icons Only) Supports: Field Connections
+ + +Sets the secondary icon color for Font Awesome DuoTone icons. This field applies when the selected icon uses the DuoTone style. +
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/acf-block.mdx b/beaver-builder/layouts/modules/acf-block.mdx
new file mode 100644
index 00000000..73cb875b
--- /dev/null
+++ b/beaver-builder/layouts/modules/acf-block.mdx
@@ -0,0 +1,43 @@
+---
+title: ACF Blocks
+icon: "cuboid"
+description: "Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts."
+---
+
+
+Display Advanced Custom Fields (ACF) blocks inside your Beaver Builder layouts.
+
+## Requirements
+
+The ACF Block module requires **Advanced Custom Fields Pro** to be installed and activated.
+
+## What are ACF Blocks?
+
+ACF Blocks are custom content blocks built with the Advanced Custom Fields (ACF) plugin. They let you create your own editor blocks using custom fields, making it easier to build consistent, reusable blocks for both Beaver Builder and the WordPress Block Editor through the familiar ACF field groups interface.
+
+To create an ACF Block for Beaver Builder, see our [ACF Blocks developer documentation](https://www.advancedcustomfields.com/resources/blocks/) for step-by-step instructions on registering, configuring, and making your block available in the Beaver Builder editor.
+
+:::note
+
+ACF blocks that declare JSX support are not compatible with Beaver Builder and will not appear in the available block list.
+:::
+
+## Accessing ACF Blocks
+
+Blocks created with ACF are available in the **Content Panel > Modules tab > ACF Blocks**. Any categories or icons used to organize and display your blocks in the WordPress Block Editor will also appear there.
+
+## Block Settings
+
+The ACF Block module settings are dynamically generated based on the selected block type.
+
+### Settings Tab
+
+The Settings tab displays the ACF field group associated with the selected block type. The fields shown depend entirely on how the ACF block was registered and configured by you or your developer.
+
+To view all available fields for a particular ACF block, go to **WordPress Admin Dashboard > ACF** and open the **Field Group** assigned to that block.
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/audio.mdx b/beaver-builder/layouts/modules/audio.mdx
new file mode 100644
index 00000000..e20eb674
--- /dev/null
+++ b/beaver-builder/layouts/modules/audio.mdx
@@ -0,0 +1,193 @@
+---
+title: Audio
+sidebar_label: Audio
+icon: "music"
+description: "Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL."
+---
+
+
+Use Audio to add a single audio player or playlist from the WordPress Media Library or a direct audio file URL.
+
+## Usage
+
+Use Audio to render a WordPress audio player from either files in the WordPress Media Library or a direct URL to a single audio file. Depending on how the source is configured, the module outputs either one audio player with standard playback controls or a playlist player with optional track display settings.
+
+Use Audio for podcasts, music tracks, interviews, sermons, voice recordings, and other layouts where visitors need inline playback without custom code. The module renders WordPress's native `[audio]` and `[playlist]` shortcodes, so the Media Library option fits audio managed in WordPress, while the Link option works when you already host a single audio file elsewhere and have its direct file URL.
+
+## Module Settings
+
+The Audio module settings control where audio comes from and how a single player or playlist behaves on the front end.
+
+### General Tab
+
+The General tab sets the audio source and reveals playback settings based on whether the module is rendering one file or a playlist.
+
+Content
+ + +The Content section controls the appearance of accordion panels. + +
+
+Content Settings
+ + +
+
+
+Text Color (Custom Content Only) Supports: Field Connections
+ + +Sets the text color for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**. +
+
+
+Background Color Supports: Field Connections
+ + +Sets the background color of the accordion content panel. +
+
+
+Padding Supports: Responsive, Link Values
+ + +Sets the inner spacing of the accordion content panel. +
+
+Typography (Custom Content Only) Supports: Responsive
+ + +The font settings for custom content shown inside accordion panels. This field appears when **Content Source** is set to **Custom Content**. + +
+
+Typography settings
+ +Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available. + +
+
+
+## Advanced tab
+
+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.
+
+## Create a playlist
+
+To build a playlist in the Audio module, follow these steps:
+
+
+Audio Type
+ + +Selects whether the module uses the WordPress Media Library or a direct audio file URL. + +- **Media Library:** Builds the player from audio files selected in the WordPress Media Library. Supports single-file playback and playlists when more than one file is selected. +- **Link:** Builds the player from a direct URL to a single hosted audio file. + +
+
+
+Media Library
+ + +
+
+Audio
+ + +Selects one or more audio files from the WordPress Media Library. This custom field shows the current number of selected files and includes controls to **Select Audio**, **Edit Playlist**, or **Add Audio Files**. When one file is selected, the single-audio playback settings below apply. When more than one file is selected, playlist settings become available. + +
+
+Playlist
+ + +
+
+
+Style Default: Light
+ + +Sets the playlist appearance to a light or dark preset when more than one audio file is selected. +
+
+
+Show Playlist Default: Yes
+ + +Shows or hides the playlist track list beneath the player when more than one audio file is selected. + +
+
+Show Track Numbers
+ + +
+
+Show Track Numbers (Show Playlist Only) Default: Yes
+ + +Shows or hides track numbers in the playlist when **Show Playlist** is set to **Yes**. +
+
+
+Show Thumbnail Default: Yes
+ + +Shows or hides playlist thumbnail images when they are available for the selected audio files. +
+
+Show Artist Name Default: Yes
+ + +Shows or hides artist metadata in the playlist when it is available for the selected audio files. +
+
+
+Link
+ + +
+
+Link Supports: Field Connections
+ + +Sets the direct URL to a single audio file when **Audio Type** is set to **Link**. The module passes this value directly to the WordPress audio shortcode to render the player. + +Because this field is used as the player source URL, use a direct file link such as `https://example.com/audio/episode-01.mp3` rather than a page URL or third-party embed page. +
+
+Single Audio Playback
+ + +
+
+
+Auto Play (Single Audio Only) Default: No
+ + +Automatically starts playback when the module is rendering one audio file, whether that file comes from the Media Library or the **Link** option. +
+
+Loop (Single Audio Only) Default: No
+ + +Repeats the current audio file after it finishes when the module is rendering one audio file. +
+
+Step
+ + +Open the Audio module settings. +
+
+Step
+ + +Set **Audio Type** to **Media Library**. +
+
+Step
+ + +In the **Audio** field, click **Add Audio Files** or **Select Audio** to open the WordPress Media Library. +
+
+Step
+ + +Choose multiple audio files, then create or insert the playlist from the Media Library modal. +
+
+
+
+Once more than one file is selected, the module switches from single-audio playback to playlist mode and reveals the playlist display settings.
+
+
+Step
+ + +Return to the module settings and adjust playlist options such as **Style**, **Show Playlist**, **Show Thumbnail**, and **Show Artist Name** as needed. +
+
+
+Pagination
+ + +The Pagination section controls whether the gallery is split into multiple pages and how many products each page shows. + +
+
+Pagination Settings
+ + +
+
+Use Pagination Default: No
+ + +Splits the product gallery across multiple pages. + +
+
+Products per page
+ + +
+
+Products per page Default: 8
+ + +Sets how many products appear on each page when **Use Pagination** is set to **Yes**. The field supports values from 0 to 100. +
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/box.mdx b/beaver-builder/layouts/modules/box.mdx
new file mode 100644
index 00000000..cb9f2c43
--- /dev/null
+++ b/beaver-builder/layouts/modules/box.mdx
@@ -0,0 +1,671 @@
+---
+title: Box Module
+sidebar_label: Box
+icon: "box"
+description: "A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing."
+---
+
+
+A flexible container to arrange content using Flexbox, CSS Grid, or layered positioning with full control over spacing, backgrounds, and sizing.
+
+## Requirements
+
+The Box module depends on JavaScript code available in **WordPress 5.2** or later. If you are using an earlier version, the Box module will not appear in the Beaver Builder user interface (UI).
+
+## Usage
+
+The Box module is a container that holds other modules. It arranges its children using Flexbox, CSS Grid, or layered positioning, giving precise control over alignment, spacing, and sizing across any number of elements.
+
+Use the Box module when you need spatial control over a group of modules — positioning text beside an image with Flex, building a structured grid of feature cards with Grid, or overlaying a headline on a background photo with Layers. Because Boxes nest inside other Boxes, complex multi-level layouts stay organized through a single consistent building block.
+
+## Box Module Aliases
+
+The Box module includes preconfigured aliases for common layouts. They are a useful starting point, especially if you are new to CSS Grid or Flexbox, and can also help you learn by showing how each layout is configured.
+
+- **Flex Columns:** Uses flexbox to arrange three boxes horizontally within the parent container.
+- **3×2 Grid:** Creates a layout with three rows and two columns using grid boxes inside the parent container.
+- **4×2 Grid:** Creates a layout with four rows and two columns using grid boxes inside the parent container.
+- **Split Header:** Uses a three-column grid layout to create a distinct header structure.
+- **Photo Grid:** Creates a 4×3 grid layout that incorporates Photo modules within the parent container.
+
+## Module Settings
+
+The Box module settings are organized into two tabs: Container controls the Box itself, and Children controls the defaults applied to all modules placed inside it.
+
+### Container tab
+
+The Container tab controls the Box's layout mode, spacing, visual appearance, sizing, and link behavior.
+
+Filters
+ + +The Filters section narrows which BigCommerce products appear in the gallery. + +
+
+Filter Settings
+ + +
+
+
+Show only featured products? Default: No
+ + +Limits the gallery to products marked as featured in BigCommerce. +
+
+
+Show only on-sale products? Default: No
+ + +Limits the gallery to products that are currently on sale. +
+
+Show only recent products? Default: No
+ + +Limits the gallery to recently imported products. On the front end, the shortcode treats recent products as items imported within the last two days unless that window is changed with the `bigcommerce/query/recent_days` filter. +
+
+
+Display
+ + +Selects how child elements are arranged inside the Box. + +- **Flex:** Arranges children along a single axis using CSS Flexbox. Ideal for one-dimensional layouts where items need to flow, wrap, grow, or shrink relative to one another. +- **Grid:** Arranges children in a two-dimensional layout using CSS Grid. Ideal for structured layouts where precise control over both rows and columns is needed. +- **Layers:** Stacks children on top of one another using CSS Grid. All children occupy the same grid cell by default, creating layered or overlay effects. + +
+
+
+Flex settings
+ + +
+
+
+Direction Default: Row; Supports: Responsive
+ + +Controls the main axis along which child elements are arranged. Changing the direction also affects how the **Align** setting maps to horizontal and vertical axes. + +- **Row:** Items are placed side by side horizontally, left to right. +- **Column:** Items are stacked vertically, top to bottom. +- **Reversed Row:** Items are placed horizontally in reverse order, right to left. +- **Reversed Column:** Items are stacked vertically in reverse order, bottom to top. + +
+
+
+Wrap Default: Normal; Supports: Responsive
+ + +Controls whether child elements stay on a single line or wrap onto additional lines when there is not enough space. + +- **Normal:** Items do not wrap and remain on a single line. Items may overflow the container if they exceed its width. +- **None:** Explicitly sets `flex-wrap: nowrap`. Functionally similar to Normal but makes the no-wrap intent explicit in CSS. +- **Wrap:** Items wrap onto additional lines when they no longer fit, flowing from top to bottom. +- **Reversed:** Items wrap onto additional lines, but new lines are added above previous ones rather than below. + +
+
+
+Gap Default: 10px; Supports: Responsive
+ + +Sets the space between child elements. This single value applies uniformly in all directions. Gap creates space only between items — it does not add space on the outer edges of the container. Use **Padding** to add space around the inside of the container boundary. +
+
+Align Default: Stretch; Supports: Responsive
+ + +Controls the alignment of child elements along the vertical and horizontal axes. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis. + +The behavior of each axis depends on **Direction**. When Direction is Row or Reversed Row, the horizontal axis is the main axis (`justify-content`) and the vertical axis is the cross axis (`align-items`). When Direction is Column or Reversed Column, the axes are swapped. + +- **Stretch:** Items stretch to fill the full container size along that axis. +- **Start:** Items are packed toward the start of the axis. +- **Center:** Items are centered along the axis. +- **End:** Items are packed toward the end of the axis. +- **Space Evenly:** Spacing between any two adjacent items and between items and the container edges is equal. +- **Space Between:** Items are evenly distributed. The first item is flush with the start edge and the last item is flush with the end edge. +- **Space Around:** Items are distributed with equal space on both sides of each item. + +
+
+
+Grid settings
+ + +
+
+
+Grid Supports: Responsive
+ + +Defines the column and row track structure of the grid. Each track is the space between two grid lines where content is placed. Add tracks using the **+** button, reorder them by dragging the handle, or duplicate and remove them from the ellipsis menu. + +:::tip + +The **Grid overlay** icon appears in the settings panel next to the Grid label. Clicking it toggles a visual grid guideline overlay on the canvas, making it easier to see column and row boundaries while building. +::: + +Each track supports the following types: + +- **Multiple Tracks:** Repeats a track a specified number of times using the CSS `repeat()` function. For example, setting columns to `3` creates `repeat(3, 1fr)` — three equal-width columns. +- **Freeform:** Accepts any valid CSS track size directly, such as `200px`, `minmax(100px, 1fr)`, or `repeat(4, auto)`. +- **Auto:** Track size is determined by its content. Equivalent to the CSS `auto` keyword. +- **1fr:** Adds a single fractional unit. The `fr` unit divides remaining available space proportionally. Multiple `1fr` tracks share space equally; a `2fr` track receives twice as much space as a `1fr` track. + +**Auto Columns** and **Auto Rows** define the size of implicitly created tracks when more items are placed in the grid than explicitly defined tracks can accommodate. +
+
+
+Flow Direction Default: Row; Supports: Responsive
+ + +Controls how grid items are automatically placed when their position is not explicitly defined. Maps to the CSS `grid-auto-flow` property. + +- **Row:** Items fill each row in turn, adding new rows as needed. Items flow left to right, then wrap to the next row. +- **Column:** Items fill each column in turn, adding new columns as needed. Items flow top to bottom, then wrap to the next column. + +
+
+
+Gap Supports: Responsive
+ + +Sets the space between rows and columns in the grid independently. Gap applies only between grid tracks and does not add space around the outer edges of the grid. Use **Padding** to add outer spacing. + +- **Row:** Space between horizontal rows. Default is `10px`. +- **Column:** Space between vertical columns. Default is `10px`. + +
+
+Align Default: Stretch; Supports: Responsive
+ + +Controls the alignment of child elements within the grid container along both axes. Two rows of icon buttons are shown — the top row controls the vertical axis (`align-items`) and the bottom row controls the horizontal axis (`justify-items`). + +Unlike Flex, Grid alignment operates independently of a direction setting — vertical always means the block axis and horizontal always means the inline axis. + +- **Stretch:** Items stretch to fill the full size of their grid cell. +- **Start:** Items align to the start edge of their grid cell. +- **Center:** Items center within their grid cell. +- **End:** Items align to the end edge of their grid cell. + +
+
+Layers settings
+ + +
+
+Align Default: Stretch; Supports: Responsive
+ + +Controls the alignment of child elements within the layered container. Two rows of icon buttons are shown — the top row controls the vertical axis and the bottom row controls the horizontal axis. Both axes default to **Stretch** when switching to Layers so all children fill the container. + +- **Stretch:** Items fill the full size of the container. Use this when all layers should occupy the same space. +- **Start:** Items align to the top (vertical) or left (horizontal) edge of the container. +- **Center:** Items center within the container along that axis. +- **End:** Items align to the bottom (vertical) or right (horizontal) edge of the container. + +
+
+
+Spacing
+ + +Controls the internal spacing of the Box container. + +
+
+Spacing settings
+ + +
+
+
+Padding Supports: Responsive, Link Values
+ + +Internal spacing between the Box edges and its children. +
+
+Gap (Flex and Grid Only) Supports: Responsive
+ + +Space between child elements. This field appears when **Display** is set to **Flex** or **Grid**. +
+
+
+Appearance
+ + +Visual styling for the Box container. + +
+
+Appearance settings
+ + +
+
+
+Background settings
+ +Background settings control background type, color, image, gradient, overlay, and related responsive background options where available. + +
+
+
+Border settings
+ +Border settings control border style, width, color, radius, and related responsive border controls where available. + +
+
+
+Sizing & Placement
+ + +Controls the Box's own dimensions and position within its parent. + +
+
+Sizing & Placement settings
+ + +
+
+
+Aspect Ratio Supports: Responsive
+ + +Sets a fixed width-to-height ratio for the Box. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16). +
+
+
+Flex (Flex Parent Only) Supports: Responsive
+ + +Sets how the Box grows, shrinks, and sizes itself when its parent container is set to Flex. + +
+
+Flex settings
+ + +
+
+
+Grow Supports: Responsive
+ + +A non-negative number that determines how much extra space the Box takes up relative to its siblings. A value of `0` prevents growth beyond the natural size. +
+
+
+Shrink Default: 1; Supports: Responsive
+ + +A non-negative number that determines how much the Box shrinks relative to its siblings when there is not enough space. A value of `0` prevents shrinking. +
+
+Basis Supports: Responsive
+ + +Sets the initial size of the Box before available space is distributed. Leave empty to use the Box's natural size (`auto`). +
+
+
+Grid Column (Grid Parent Only) Supports: Responsive
+ + +Sets the grid column the Box occupies when its parent container is set to Grid. +
+
+
+Grid Row (Grid Parent Only) Supports: Responsive
+ + +Sets the grid row the Box occupies when its parent container is set to Grid. +
+
+
+Width Supports: Responsive
+ + +Sets the width of the Box. Accepts auto, a custom value, or a percentage. +
+
+
+Min Width Supports: Responsive
+ + +Sets the minimum width of the Box. The Box will not shrink below this value. +
+
+
+Max Width Supports: Responsive
+ + +Sets the maximum width of the Box. The Box will not grow beyond this value. +
+
+
+Height Supports: Responsive
+ + +Sets the height of the Box. +
+
+
+Min Height Supports: Responsive
+ + +Sets the minimum height of the Box. +
+
+
+Max Height Supports: Responsive
+ + +Sets the maximum height of the Box. +
+
+
+Alignment Supports: Responsive
+ + +Aligns the Box within its parent container using inline margins. Options are **Left**, **Center**, and **Right**. +
+
+Order Supports: Responsive
+ + +Sets the display order of the Box when it is placed in a Flex or Grid parent. Lower values appear earlier. +
+
+
+### Children tab
+
+The Children tab sets the default layout, spacing, and appearance values applied to all modules placed directly inside the Box.
+
+Link
+ + +Makes the entire Box container clickable. When set, clicking anywhere on the Box navigates to the specified URL. + +:::warning + +When the Link option is enabled, any links inside modules placed within the Box will no longer work because HTML links cannot be nested. +::: + +
+
+Link settings
+ +Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available. + +
+
+
+Flexbox (Flex Only) Supports: Responsive
+ + +Sets default Flexbox child properties applied to all direct children when **Display** is set to **Flex**. Individual children can override these values using their own **Sizing & Placement** settings. + +
+
+Flexbox child settings
+ + +
+
+
+Grow Supports: Responsive
+ + +A non-negative number that determines how much of the available extra space a child takes up relative to other children. A value of `0` prevents growth beyond the natural size. A value of `1` allows proportional growth. +
+
+
+Shrink Default: 1; Supports: Responsive
+ + +A non-negative number that determines how much a child shrinks relative to other children when there is not enough space. A value of `0` prevents shrinking. A value of `1` allows proportional shrinking. +
+
+Basis Supports: Responsive
+ + +Sets the initial size of a child element before available space is distributed. Accepts a numeric value with units: `px`, `%`, `em`, `rem`, `vw`. Leave empty to use the child's natural size (`auto`). +
+
+
+Grid (Grid Only)
+ + +Sets default grid placement values applied to all direct children when **Display** is set to **Grid**. Individual children can override these values using their own **Sizing & Placement** settings. + +
+
+Grid child settings
+ + +
+
+
+Grid Column Supports: Responsive
+ + +Sets the default column position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-column` shorthand. + +
+
+Grid column settings
+ + +
+
+
+Start Supports: Responsive
+ + +The grid column line where children begin. Leave empty for automatic placement. +
+
+
+Span Supports: Responsive
+ + +The number of column tracks children span. Minimum value is `1`. +
+
+End Supports: Responsive
+ + +The grid column line where children end. Leave empty for automatic placement. +
+
+Grid Row Supports: Responsive
+ + +Sets the default row position for children. When both **Start** and **End** are set, **Span** is ignored. These values generate the CSS `grid-row` shorthand. + +
+
+Grid row settings
+ + +
+
+
+Start Supports: Responsive
+ + +The grid row line where children begin. Leave empty for automatic placement. +
+
+
+Span Supports: Responsive
+ + +The number of row tracks children span. Minimum value is `1`. +
+
+End Supports: Responsive
+ + +The grid row line where children end. Leave empty for automatic placement. +
+
+
+Layers (Layers Only)
+ + +Sets default grid placement values applied to all direct children when **Display** is set to **Layers**. Defaults to full coverage — each child spans the entire width and height of the container. Individual children can override these values using their own **Sizing & Placement** settings. + +
+
+Layers child settings
+ + +
+
+
+Grid Column Supports: Responsive
+ + +Sets the default column position for children. Defaults to `start: 1, end: -1`, spanning each child across the full width of the container. + +
+
+Grid column settings
+ + +
+
+
+Start Default: 1; Supports: Responsive
+ + +The grid column line where children begin. +
+
+
+Span Supports: Responsive
+ + +The number of column tracks children span. Leave empty when using Start and End together. +
+
+End Default: -1; Supports: Responsive
+ + +The grid column line where children end. Defaults to `-1` (the last line), ensuring full-width coverage. +
+
+Grid Row Supports: Responsive
+ + +Sets the default row position for children. Defaults to `start: 1, end: -1`, spanning each child across the full height of the container. + +
+
+Grid row settings
+ + +
+
+
+Start Default: 1; Supports: Responsive
+ + +The grid row line where children begin. +
+
+
+Span Supports: Responsive
+ + +The number of row tracks children span. Leave empty when using Start and End together. +
+
+End Default: -1; Supports: Responsive
+ + +The grid row line where children end. Defaults to `-1` (the last line), ensuring full-height coverage. +
+
+
+Padding Supports: Responsive, Link Values
+ + +Default internal padding applied to each child module within the Box. +
+
+
+Sizing Supports: Responsive
+ + +Default sizing values applied to all direct child modules. Individual children can override these values using their own Sizing & Placement settings. + +
+
+Sizing settings
+ + +
+
+
+Width & Height Supports: Responsive
+ + +Sets default width, minimum width, maximum width, height, minimum height, and maximum height constraints for child modules. +
+
+Aspect Ratio Supports: Responsive
+ + +Sets a default width-to-height ratio for child modules. Options are grouped into Basics (Auto, Square), Wide (5:4, 3:2, Video 16:9, Ultra-wide Video 21:9), and Tall (4:5, 2:3, Poster 3:4, Portrait Video 9:16). +
+
+
+## Advanced tab
+
+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.
diff --git a/beaver-builder/layouts/modules/button-group.mdx b/beaver-builder/layouts/modules/button-group.mdx
new file mode 100644
index 00000000..ae4eed43
--- /dev/null
+++ b/beaver-builder/layouts/modules/button-group.mdx
@@ -0,0 +1,301 @@
+---
+title: Button Group
+sidebar_label: Button Group
+icon: "stretch-horizontal"
+description: "Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance."
+---
+
+
+Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance.
+
+## Usage
+
+The Button Group module displays multiple buttons in a single layout element. It renders a group container with a shared style baseline — configure layout, typography, colors, backgrounds, and borders at the group level, then override appearance settings on each individual button as needed.
+
+Use the Button Group module for paired calls to action, navigation groups, or any situation where two or more buttons appear together and share a consistent visual style.
+
+:::note
+
+The Button Group module is designed for multiple buttons displayed together. If you only need a single button, use the [Button](/beaver-builder/layouts/modules/button) module instead.
+:::
+
+## Module settings
+
+The Button Group module settings control the button list, shared group styling, and per-button behavior.
+
+### Buttons tab
+
+The Buttons tab is where you build and manage the list of buttons in the group.
+
+Appearance Supports: Responsive
+ + +Default visual styling for child modules. + +
+
+Child appearance settings
+ + +
+
+
+Text Color Supports: Responsive, Field Connections
+ + +The default text color for child modules. +
+
+
+Background Type
+ + +Sets the default background type for child modules. + +- **Color:** Applies a solid background color. +- **Advanced:** Opens the multi-layer background interface for gradients, images, and video. + +
+
+
+Color
+ + +
+
+Background Color Supports: Responsive, Field Connections
+ + +The solid background color applied to child modules when **Background Type** is set to **Color**. +
+
+Advanced
+ + +
+
+Background settings
+ +Background settings control background type, color, image, gradient, overlay, and related responsive background options where available. + +
+
+Border settings
+ +Border settings control border style, width, color, radius, and related responsive border controls where available. + +
+