The Toggle Box Widget allows you to create a content box with a toggle button that can show more information when clicking on it. You can use multiple graphic element source types to populate the content area in each box. It comes with lots of customization options to best suits with your Elementor page.
Let’s look at each of the options in the “Toggle Box Widget” below.
Install Toggle Box Widget for Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Toggle Box”
- Hover over the widget in the search results and click install
- Add your “Toggle Box” widget to any Elementor Page
Front Settings
Graphic Element
Select any of graphic element to show in toggle box.
- None
- Icon - Choose an icon to display.
- Image - Choose an image to display.
- Text - Use text editor to show text as element.
Front Title
Type the front title.
Front Text
Type the text to show on front.
Front Trigger
Type text to show as front trigger button.
Front Trigger Icon
Choose an icon for front trigger.
Back Settings
Back Title
Type the back title.
Back Text
Type the text to show on back.
Back Trigger
Type text to show as back trigger button.
Back Trigger Icon
Choose an icon for back trigger.
Toggle Box Widget Styling
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
General Styling
Style the height, radius, border, shadow and overlay.
Front Styling
You can style the front background, alignment, typography, and spacing.
Back Styling
You can style the back background, alignment, typography, and spacing.
Front Trigger Styling
In this section, set the front trigger background, padding, typography, horizontal snap, horizontal and vertical spacing.
Back Trigger Styling
You can set the back trigger background, padding, typography, horizontal snap, horizontal and vertical spacing.
Graphic Styling
This section lets you set the width, height, background color, border, radius, spacing, typography, and icon size.
Usage Examples
Here are some live use cases for the Toggle Box widget.
