fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

wordpress-black-friday-deals
toggle-button-for-elementor
elementor-widget-library

Expanding Content Cards for Elementor

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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Expanding Content Cards”
  3. Hover over the widget in the search results and click install
  4. Add your “Expanding Content Cards” widget to any Elementor Page

General Settings #

1

Expand Card On

Select the expand trigger.

  • Click
  • Hover
2

Default Active Item

This item will show on starting by default.

3

Transition Duration

Set the transition duration in milliseconds.

4

Responsive Breakpoint

Set the breakpoint for responsive layout.

5

Columns on Breakpoint

Set the number of columns to display in the responsive layout.

Layout Settings #

Show or hide elements in expanding content cards.

1

Show Graphic Element

Show/Hide graphic element like icon or image.

2

Background Overlay

Show/Hide the background overlay.

3

Show Title

Show/Hide title element.

4

Show Vertical Title

Show/Hide the vertical title of in inactive element.

5

Show Sub Content

Show/Hide sub content on the carousel.

6

Show Button

Show/Hide button element on the carousel.

7

Button Text

Type text for button.

8

Enable Link

Enable/Disable link for card.

Sequence Entrance Animation Settings #

Set the entrance animation for content card.

Connected Widgets Settings #

1

Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2

Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3

Sync

You can connect two item-based widgets and sync them.

4

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
1

Title

Set a Title for your content card item.

2

Background Image

Choose an Image for the background.

3

Background Image Size

Choose the size of background image from below options.

  • Medium Large
  • Large
  • Medium
  • Thumbnail
  • Full Size
  • 1536*1536
  • 2048*2048
4

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.
5

Graphic Element Source

Select graphic element source from given options.

  • Icon
  • Image
6

Link

Paste URL to link with card.

7

Icon Color

Set the icon color.

8

Graphic Background Color

Set the graphic background color.

9

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.

Video Overview #

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!