How to Add and Customize the Toggle Content Element in Elementor #
The Toggle Content Element by Master Addons is a dynamic widget that displays content based on the selection of a switch or toggle. This allows users to quickly switch between two different sets of information, pricing plans, or views without cluttering the page. It’s perfect for comparisons, showing different levels of detail, or offering light/dark mode previews.
Using the Toggle Content Element, you can:
- Define two separate Labels (e.g., Monthly/Annual, List/Grid, Yes/No).
- Insert any type of content (text, images, templates) that toggles between the two states.
- Control the appearance, style, and animation speed of the toggler switch and indicator.
- Fully customize the typography and spacing of the labels and the content area.
So, let’s see how to add and customize this element.
Adding and Configuring the Toggle Content Element #
Follow these steps to add and configure the Toggle Content Element on any page of your website.
Step 1: Create or Edit a Page #
- From your WordPress dashboard, go to Pages → Add New to create a new page. You can also select an existing page and click Edit.
- Next, click the “Edit with Elementor” button.
Step 2: Find the Toggle Content Element #
- In the left-hand Elementor panel, use the search bar to find “Toggle Content.”
- Drag and drop the addon onto your desired section of the page.
Step 3: Customize the Toggle Content Settings #
After placing the addon, you’ll find the customization sections in the left-hand panel, primarily under the Content and Style tabs.
Content Tab #
This is where you define the labels and the content for each toggle state.
Toggle Content: #
- Elements:
- Label One: Enter the text for the first state’s label.
- Label Two: Enter the text for the second state’s label.
- Add Item: Click to add the content that will be displayed when each label is selected (e.g., you would insert your content/templates here).
- Toggle Settings:
- Active Index: Set which label is active by default when the page loads.
- Position: Choose whether the indicator (the moving part of the switch) is positioned Before or After the labels.
- Indicator Speed: Control the transition speed of the indicator movement.
Style Tab #
This is where you control the appearance of the toggler switch, indicator, labels, and the content area.
Toggler: #
- Style: Choose the shape of the main toggler container: Round or Square.
- Background Color: Set the color of the background container.
- Border Radius: Set the rounded corners for the container.
- Align: Align the entire toggler element: Left, Center, or Right.
- Zoom: Adjust the overall size of the toggler.
- Width (%): Control the width of the toggler container.
- Border Type / Box Shadow: Apply border and shadow effects to the toggler container.
- Padding / Margin: Adjust the inner and outer spacing of the toggler container.
Indicator: #
- Background Color: Set the background color of the sliding indicator.
- Height / Width: Control the dimensions of the indicator.
- Color: Set the color of any icon/text used inside the indicator (if applicable).
- Border Radius / Box Shadow / Padding: Apply styling controls to the indicator element.
Labels: #
- Stack On: Define when the labels and switch stack vertically: None, All, Tablet & Mobile, or Mobile.
- Inline Align: When the labels are horizontal, align them: Left, Center, Right, Justify.
- Stacked Align: When the labels are stacked, align them: Left, Center, Right, Justify.
- Align Label Text: Align the text within the label box: Left, Center, Right.
- Typography: Control the font settings for the label text.
- Transition: Set the animation speed for color changes.
- Space Between: Adjust the spacing between the labels.
- Colors (Default/Hover/Active): Set the Color for the label text for the unselected (Default), hovered, and selected (Active) states.
Content (Styling): #
- Typography: Control the font settings for the content area below the toggler.
- Padding / Margin / Border Type / Border Radius: Standard styling controls for the content container.
- Color: Set the text color of the content.
- Background Type: Set the background type (Classic or Gradient) for the content area.
Step 4: Save and Publish Your Page #
Once you’ve customized everything to your liking:
- Click the “Publish” button (if it’s a new page) or “Update” (if editing an existing page).
- Visit your page on the frontend to preview the Toggle Content switch live.
