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.
