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
Select the expand trigger.
- Click
- Hover
This item will show on starting by default.
Set the transition duration in milliseconds.
Set the breakpoint for responsive layout.
Set the number of columns to display in the responsive layout.
Layout Settings
Show or hide elements in expanding content cards.
Show/Hide graphic element like icon or image.
Show/Hide the background overlay.
Show/Hide title element.
Show/Hide the vertical title of in inactive element.
Show/Hide sub content on the carousel.
Show/Hide button element on the carousel.
Type text for button.
Enable/Disable link for card.
Sequence Entrance Animation Settings
Set the entrance animation for content card.
Connected Widgets Settings
Use remote control widgets to create advanced creative layouts.
This name will be used to connect and controls this widget by other widgets.
You can connect two item-based widgets and sync them.
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
Set a Title for your content card item.
Choose an Image for the background.
Choose the size of background image from below options.
- Medium Large
- Large
- Medium
- Thumbnail
- Full Size
- 1536*1536
- 2048*2048
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.
Select graphic element source from given options.
- Icon
- Image
Paste URL to link with card.
Set the icon color.
Set the graphic 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.
