The Icon Box Accordion Widget help you layouts your content into and interactive accordion in your Elementor website. You can customize the widget using its wide range of customization options.
Let’s look at each of the options in the “Icon Box Accordion Widget” below.
Install Icon Box Accordion 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 “Icon Box Accordion”
- Hover over the widget in the search results and click install
- Add your “Icon Box Accordion” widget to any Elementor Page
General Settings #
Accordion Height
Set the accordion height.
Layout
Select the layout of icon box accordion.
- row
- column
Gap
Set the gap between box accordion items.
Entrance Animation
Set entrance animation for icon box accordion.
- puff-in-center
- slide-in-blurred-top
- slide-in-top
Item Animation Duration
Set the duration of item animation.
Animation Time Step
Set the animation time step in milliseconds.
Show Button
Show/hide the button.
Items Settings #
Manage the items of icon box accordion using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Type text to show as title.
Graphic Element
Select graphic element to show from below options.
- None
- Icon
- Text
- Image
Icon
Choose icon to display.
Button Text
Type text to show in button.
Link
Type or paste your URL to link with accordion.
Background Color
Set the background color.
Show Background Image
Show/Hide the background image.
Graphic Element Background
Set the graphic element background.
Graphic Element Color
Set the color of graphic element.
Icon Box Accordion 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.
Item Styling #
Set the item padding, border, radius, and item shadow.
Graphic Element Styling #
You can style the width, height, background color, border, radius, spacing, color, typography, icon size, offset and opacity of graphic element.
Title Styling #
You can set the title color, typography, spacing, opacity, and offset.
Button Styling #
Set the button typography, padding, radius, background color, text color, border, offset, and opacity.
Background Image Styling #
In this section, set the background image opacity and background image opacity hover.
Usage Examples #
Here are some live use cases for the Icon Box Accordion widget.
