In this guide, we will show you how to add an “Expanding Content Cards widget” to your Elementor website. The Expanding Content Cards widget allows you to display multiple content cards in a vertical accordion layout. When users click on a card, it expands smoothly to reveal more information inside. Perfect for presenting detailed content in a compact and organized way, this widget helps you save space while keeping your design clean and engaging.
Let’s explore the customization options available in the “Expanding Content Cards widget” for Elementor below.
Elementor Expanding Content Cards Tutorial Video (Step by Step Guide)
Add a Free Expanding Content Cards to Elementor
Add a Free Expanding Content Cards Widget to an Elementor Page
Elementor Expanding Content Cards Widget 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.
Elementor Expanding Content Cards Widget 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.
Elementor Expanding Content Cards Widget Sequence Entrance Animation Settings
Set the entrance animation for content card.
Elementor Expanding Content Cards Widget 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.
Elementor Expanding Content Cards Widget 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.
Elementor Expanding Content Cards Widget Styling Settings
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.
Elementor Expanding Content Cards Widget General Styling Settings
Set the content width, element gap, alignment, and content layout in active and inactive mode.
Elementor Expanding Content Cards Widget Cards Styling Settings
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.
Elementor Expanding Content Cards Widget Graphic Element Styling Settings
You can set the background color, icon color, graphic element size, icon size, border radius, image width, height, and image fit.
Elementor Expanding Content Cards Widget Title Styling Settings
In this section, set the title typography, color, gap, and vertical title gap.
Elementor Expanding Content Cards Widget Sub Content Styling Settings
You can style the sub content typography, color, gap, width, and layout in active and inactive situation.
Elementor Expanding Content Cards Widget Button Styling Settings
This section lets you set the button text typography, padding, text color, background color, border radius, border, and button gap.
Elementor Expanding Content Cards Widget Background Image Styling Settings
You can set the background image blend mode.
Normal
Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Saturation
Color
Luminosity
Hard Light
Difference
Elementor Expanding Content Cards Widget Overlay Styling Settings
Set the overlay color and opacity in active, inactive and hover mode.
Expanding Content Cards Design Examples For Elementor
Here are some live use cases for the Expanding Content Cards widget.
Expanding Content Cards widget for Ecommerce Website.
Expanding Content Cards widget synced with Remote Arrows, Remote Counter and Content Carousel.
Thank you for using the Expanding Content Cards Widget for Elementor! This interactive tool lets you display multiple content cards in a vertical accordion layout, allowing users to click and expand each card to reveal more information. Ideal for showcasing detailed content, FAQs, or product features, it provides a clean and space-saving design that enhances user engagement. With customizable options and smooth animations, this widget helps you present information dynamically and efficiently. For questions or inspiration, feel free to reach out or explore our demo.
