Content Controls
Label
The controls in this section let you define the labels and add interactive content that users will use to interact with the Content Toggle Element.
- Label Left – Specify the text for the label on the left side of the toggle.
- Label Right – Specify the text for the label on the right side of the toggle.
- Add Content – Add new interactive or informational content sections that will be toggled between.
Design Controls
Layout
This section includes controls that affect the overall layout and visibility of your content, allowing for a more engaging user experience.
- Width – Adjust the width of the content area to suit your design needs.
- Fade Content – Choose whether the content fades in or simply appears when toggled.
Switch
These controls let you customize the toggle switch’s appearance, making it visually appealing and consistent with your site’s design.
- Width – Set the width of the toggle switch to ensure it’s easily noticeable and accessible.
- Height – Modify the toggle switch’s height to improve visibility and user interaction.
- Padding – Adjust the padding around the toggle switch for better aesthetics and usability.
- Radius – Define the roundness of the toggle switch’s corners for a smoother or sharper appearance.
- Toggle – Customize the toggle button within the switch.
- Size – Change the toggle button’s size for better visibility and interaction.
- Radius – Adjust the button’s corner roundness to match your design preference.
- Inactive – Choose the color of the toggle when it’s inactive or off.
- Active – Choose the color of the toggle when it’s active or on.
- Background – Set the background colors for the toggle switch.
- Inactive – Select the background color for the switch when it’s not toggled.
- Active – Select the background color for the switch when it’s toggled on.
- Vertical at – Specify the screen size breakpoint at which the switch should stack vertically.
Label
Here, you can manipulate the typography and visual emphasis of the labels to ensure they are coherent with your site’s branding.
- Typography – Adjust font settings for the labels to enhance readability and fit your site’s style.
- Active Color – Pick a color for the label when the associated content is actively displayed.
Spacing
This section provides controls to adjust the spacing in various parts of the content toggle, ensuring a balanced and well-organized layout.
- Below Toggle – Control the amount of space below the toggle switch for a cleaner look.
- After Labels – Determine the spacing after the labels to avoid a cluttered appearance.
- Wrapper – Adjust the outer margins of the entire content toggle element for better positioning on your page.
- Margin Top – Set the space above the content toggle wrapper to separate it from previous elements.
- Margin Bottom – Set the space below the content toggle wrapper to avoid content overlap.
