Toggle Element in Max Addons for Bricks Builder allows you to display and switch between two types of content using an interactive toggle switch. It’s a great way to compare content layouts, pricing plans, features, or any two sets of information in a clean and user-friendly format.
With easy customization options, flexible styling controls, and smooth interaction settings, you can create attractive toggle sections directly inside Bricks Builder without using any extra code.
Getting Started#
Before using the Toggle Element, make sure the following tools are installed and activated on your WordPress website:
Once both tools are active, you’re ready to start using the Toggle Element on your page.
How to Add the Toggle Element#
Follow these steps to add the Toggle Element to your page:
- Open an existing page in Bricks Builder or create a new page.
- Click Edit with Bricks to launch the builder.
- Inside the editor, click the element search bar.
- Type “Toggle” in the search field.
- Add the Toggle Element to your page.
- Make sure you see the MAX label in the top-left corner of the element.
Once the element is added, you’ll see two main tabs in the element panel: Content & Style
Content Tab#
Content tab includes all the main settings required to configure the Toggle Element. Inside this tab, you’ll find the following sections:
- Tabs
- Settings
- Toggle Style
- Content Style
Each section gives you control over the toggle element's content, layout, appearance, and behavior. We’ll go through each option in detail in the next sections of this documentation.
Tabs Section#
Tabs section allows you to create and manage the toggle items displayed in the Toggle Element. Here, you can define the labels, content type, and content for each side of the toggle switch.
This section is useful when you want to display two different types of content, such as:
- Monthly vs Yearly Pricing
- Before vs After Content
- Features Comparison
- Personal vs Business Plans.
Switch Style#
Switch Style option lets you choose the appearance of the toggle switch. Available styles include: Round, Rectangular, Round Line, Rectangular Line & Button.
Select your preferred style from the dropdown menu to instantly change the toggle switch's appearance.
Tabs#
Under the Tabs option, you can configure both toggle items individually. By default, you’ll see: Primary & Secondary.
Each tab contains its own settings and content area.
- Label: Label field allows you to define the text displayed on the toggle button. For example: Monthly, Yearly, Basic, Pro, Left, Right
- Content Type: Content Type dropdown lets you choose the type of content you want to display inside the selected toggle tab. Available content types may vary depending on the element settings, but commonly include: Content & Template.
- Content: Content editor appears when the Content Type is set to Content. Here, you can add: Text, Headings, Images, Links, Lists, & Custom formatted content. The editor includes both Visual Mode & Code Mode. You can also use the Add Media button to insert images or media files directly into the content area.
Settings Section#
Settings section allows you to control the overall layout and positioning of the Toggle Element. Using these options, you can adjust the alignment, toggle placement, and spacing between the toggle switch and content area.
- Alignment: Alignment option lets you control the horizontal alignment of the Toggle Element.
- Toggle Position: Toggle Position dropdown allows you to define where the toggle switch appears relative to the content area: Before Content or After Content.
- Spacing: Spacing option controls the distance between the toggle switch and the content area.
Toggle Style#
Toggle Style section allows you to customize the appearance of toggle labels, icons, and the switch design. Using these styling options, you can match the Toggle Element with your website’s overall design and branding.
This section includes the following styling controls:
- Typography: Typography option lets you style the toggle label text. You can customize: Font family, Font size, Font weight, and more.
- Icon Spacing: Icon Spacing option controls the distance between the icon and the toggle label.
- Title Spacing: The Title Spacing option controls the spacing between the toggle items.
Color Sub-Section#
Color section lets you customize the colors of toggle labels and icons.
- Title Active Color: controls the color of the active toggle label.
- Icon Color: lets you set the default color for toggle icons.
- Icon Active Color: sets the icon color for the active toggle item.
Toggle Switch Style#
Toggle Switch Style section allows you to style the actual toggle switch. You can fully customize its size and colors for both normal and active states.
- Size: Size option controls the toggle switch's overall size.
- Color: Color option controls the default color of the toggle switch indicator. This is the color shown when the toggle is inactive.
- Active Color: Active Color option controls the color of the toggle switch when it becomes active.
- Background Color: Background Color option lets you define the background color of the toggle switch in its normal state.
- Background Active Color: Background Active Color option controls the background color of the toggle switch when active.
Content Style Section#
Content Style section allows you to customize the appearance of the content area within the Toggle Element. Using these options, you can control:
- Padding: Padding option controls the inner spacing inside the content area.
- Text Align: Text Align option controls the alignment of the content text inside the toggle area.
- Typography: Typography option allows you to style the content text. You can customize Font family, Font size, Font weight, Line height, Letter spacing, and Text Transform.
- Background: Background option allows you to apply a background style to the content area.
- Border: Border option lets you add and customize borders around the content area.
- Box Shadow: Box Shadow option allows you to add shadow effects around the content container.
Wrapping Up!#
Toggle Element makes it easy to create interactive content sections inside Bricks Builder. You can showcase pricing plans, compare features, or switch between different content layouts!