The Expanding Content Cards Widget allows you to display multiple content cards in an interactive vertical accordion. You just have to click or hover on the card and it will automatically expand to show the content inside of it. You can use multiple source types to populate the content area in each card. You can even load Elementor Templates to achieve complex designs. It also supports advanced options such as Remote Connection and syncing with other widgets.
Let’s look at each of the options in the “Expanding Content Cards Widget” below.
Install Expanding Content Cards 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 “Expanding Content Cards”
- Hover over the widget in the search results and click install
- Add your “Expanding Content Cards” widget to any Elementor Page
General Settings
Expand Card On
Select the expand trigger.
- Click
- Hover
Default Active Item
This item will show on starting by default.
Transition Duration
Set the transition duration in milliseconds.
Responsive Breakpoint
Set the breakpoint for responsive layout.
Columns on Breakpoint
Set the number of columns to display in the responsive layout.
Layout Settings
Show or hide elements in expanding content cards.
Show Graphic Element
Show/Hide graphic element like icon or image.
Background Overlay
Show/Hide the background overlay.
Show Title
Show/Hide title element.
Show Vertical Title
Show/Hide the vertical title of in inactive element.
Show Sub Content
Show/Hide sub content on the carousel.
Show Button
Show/Hide button element on the carousel.
Button Text
Type text for button.
Enable Link
Enable/Disable link for card.
Sequence Entrance Animation Settings
Set the entrance animation for content card.
Connected Widgets Settings
Enable Remote Connection
Use remote control widgets to create advanced creative layouts.
Widget Name for Connection
This name will be used to connect and controls this widget by other widgets.
Sync
You can connect two item-based widgets and sync them.
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings
Manage the slides of the content cards using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set a Title for your content card item.
Background Image
Choose an Image for the background.
Background Image Size
Choose the size of background image from below options.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
Sub Content Source
Select the sub content source.
- Text Area - To show the text as sub content.
- Editor - Use the editor to show sub content.
- Template - Use Elementor template as sub content source.
Graphic Element Source
Select graphic element source from given options.
- Icon
- Image
Link
Paste URL to link with card.
Icon Color
Set the icon color.
Graphic Background Color
Set the graphic background color.
Card Background Color
Set the card background color.
Expanding Content Cards 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
Set the content width, element gap, alignment, and content layout in active and inactive mode.
Cards Styling
You can style the card background color, card height, gap and border. You can also set the card padding, and border radius in inactive, active and hover position.
Graphic Element Styling
You can set the background color, icon color, graphic element size, icon size, border radius, image width, height, and image fit.
Title Styling
In this section, set the title typography, color, gap, and vertical title gap.
Sub Content Styling
You can style the sub content typography, color, gap, width, and layout in active and inactive situation.
Button Styling
This section lets you set the button text typography, padding, text color, background color, border radius, border, and button gap.
Background Image Styling
You can set the background image blend mode.
- Normal
- Multiply
- Screen
- Overlay
- Darken
- Lighten
- Color Dodge
- Saturation
- Color
- Luminosity
- Hard Light
- Difference
Overlay Styling
Set the overlay color and opacity in active, inactive and hover mode.
Usage Examples
Here are some live use cases for the Expanding Content Cards widget.
Expanding Content Cards widget synced with Remote Arrows, Remote Counter and Content Carousel.
