With this widget, you can create a unique 3D scrolling effect where your cards rotate and move as you scroll, making your content more fun and engaging.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- This is a pro widget, so make sure you have either WDesignKit pro license or have activated The Plus Addons for Elementor pro key in your WDesignKit account.
- Make sure you’ve downloaded the Scrolling 3D Cards widget.
How to Activate the Scrolling 3D Cards Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
How to Use the Scrolling 3D Cards Widget in Elementor?
Add the Scrolling 3D Cards widget to the page.
Content
Once you add the widget, By default, you’ll see three repeater items under the Items section, open one item.
In this repeater, you’ll see the menu items divided into two parts: Front and Back.
Let’s start with the Front section,
From the Overlay Image section, you have to choose an image here to see the scrolling 3d cards effect.
From the Title Heading Tags dropdown, you can set the title heading tag.
In the Title section, you can add a title to the image.
In the Subtitle section, you can add a subtitle to the image.
In the Button Text field, you can add a button text to the image.
Then in the Button URL field, you can add the button URL.
You can add an icon or SVG to the image from the Icons Control section.
After that, you can manage the Title Color, Subtitle Color, Button Text Color, Button Icon Color, Button SVG Color, Button Background Color, and Background Type for frontside.
Now, move on to the Back section.
From the Title Heading Tags dropdown, you can set the title heading tag.
In the Title section, you can add a title to the backside of the item.
From the Items section, you can add the content for the backside of the item.
Note: Use the pipe symbol ( | ) to separate multiple items. For example: item 1 | item 2 | item 3.
After that, you can manage the Title Color, Item Color, and Background Type for the backside.
Then, you can click the + Add Item button to add more image cards.
Make sure to disable the Backend Enable toggle when using multiple widgets to avoid conflicts and keep everything running smoothly.
Then from the Style tab, you can further customize the style of the Scrolling 3D Cards.