[New Element] Design Stacked Cards on Elementor with Essential Addons

Looking to present your Elementor website’s content that is visually engaging and organized at the same time? Essential Addons for Elementor now offers the ‘Stacked Cards’ element that allows you to do just that. With this handy element, you can create a smooth & immersive experience for web visitors and drive engagement on your websites with ease. In this blog, we will show you how to design Stacked cards on Elementor with Essential Addons. We will also discuss the key benefits of using the element. Let us get started! 

What Are Stacked Cards? Why Use Stacked Cards on Websites

Stacked Cards can be a great way to present content in an interactive and visually engaging stacked layout. Using Stacked Cards, you can showcase several cards with smooth transitions, creating an immersive visitor experience on your website. 

With this approach, you can display testimonials, product highlights, team members or any other content in a sleek and stylish way. As a result, your website gets to stand out and be more visitor-friendly with the use of Stacked Cards. Let us explore the key benefits of using Stacked Cards on your websites in detail:

1. Boost the Visual Appeal of Your Websites

A well-designed Stacked Cards section adds a sleek and modern look to your website. The layered effect and smooth animations make your content stand out, leaving a lasting impression on web visitors. As a result, you can improve metrics like Average Time on Page and retain more visitors in the long run.

2. Ensure Effortless Web Navigation

Instead of cluttering a page with excessive text or images, Stacked Cards allow users to navigate through bite-sized content effortlessly. So, you can neatly present various sections of content without overwhelming visitors. Whether showcasing testimonials, portfolio items or product features, this layout helps create a well-organized structure. This improves readability and ensures key information on your website is easy to access.

3. Enhance Web Visitor Engagement

Stacked Cards create a dynamic browsing experience for your website’s visitors, encouraging them to interact with your content. Web visitors are kept engaged for longer thanks to the smooth card transitions and animations. So, you get to increase the chances of conversions on your website.

Introducing Essential Addons Stacked Cards

Essential Addons now comes with a dedicated Stacked Cards element. As part of the 100+ powerful elements provided by the plugin, the Stacked Cards element lets you easily give a fresh new look to what your website looks like.

Stacked Cards is part of the 15+ Creative Elements available on Essential Addons. Featuring a variety of options for Content & Media Direction, Card Style, Transform, Filter Effects and more, Essential Addons Stacked Cards provides a complete customization experience to users.

How to Design Stacked Cards on Elementor Using Essential Addons?

We will now show you how to design Stacked Cards on Elementor websites. Follow the step-by-step guide below to easily add stacked cards using Essential Addons and elevate Elementor web design. For more details, check out this documentation.

Note: Essential Addons Stacked Cards is a PRO element. So, make sure you have installed & activated both Essential Addons Free and Essential Addons PRO plugins on your website.

Step 1: Enable & Add Essential Addons Stacked Cards

First, navigate to the ‘Essential Addons’ tab in the left side panel of your WordPress website’s admin dashboard. Next, go to the ‘Elements’ tab. Here, go to the ‘Creative Elements’ section, find the ‘Stacked Cards’ element and toggle to enable it. Click on the ‘Save Settings’ button to save the changes.

Now, open the page or post where you want to add stacked cards. Search for ‘Essential Addons Stacked Cards’ in the search bar on the left side panel. Then, drag & drop the element where you need it.

Step 2: Configure the Card Items

In the ‘Content’ tab on the left side panel, you have options to customize the card’s content & media by modifying the Title, Title Tag, Images, Text and more. Plus, you can adjust the Color, Height, Width and others for every card. You also get to add as many cards as you want. Also, you have 2 Content Type options: Content and Saved Templates.

From the Media controls, you can choose images, videos or icons as your source. Plus, you can change the direction of the media or content from left to right. Do it for each card as per your preferences.

Step 3: Adjust Content Settings

Besides content and media customizations for each card item, you can fine-tune the card settings and effects in the ‘Settings’ section under the ‘Content’ tab. In this tab, you have the options to change Card Style, Transform, Filter Effects, Card Endpoint etc.

If you choose the ‘Vertical’ card style, the cards will move from top to bottom while scrolling. On the other hand, the ‘Horizontal’ card style will make the cards move from left to right.

From the ‘Transform’ section, you can choose from 3 different effects: Rotate, Translate and Scale. Select the effect that meets your visual goals. Furthermore, you can adjust the depth of each effect.

You also have another handy option that lets you choose the position on the page from where you want to start or end the cards while scrolling. There is also a marker option that shows the page position and card positions clearly.

Step 4: Configure Style Settings

Under the ‘Style’ tab, you get to adjust the Height, Width, Color, Size, Typography, Alignment and more for the Container, Icons, Titles, Content, Buttons and Media. The changes made here will be applied to all the cards altogether.

Step 5: Customize Advanced Options

From the ‘Advanced’ tab, you have additional options like Layout, Content Protection, Conditional Display, Motion Effects, Transform and more. You can tweak these to further customize the stacked cards.

What the Newly Added Stacked Cards Will Look Like

Once you are finished with all the customizations, publish or update the page or post. The newly added and designed Stacked Cards will then be visible on the front end. This is how easily you can design Stacked Cards on Elementor. This is what the Stacked Cards will look like to your web visitors:

Explore the 100+ Additional Elements from Essential Addons

Stacked Cards is just one of the many elements that Essential Addons for Elementor offers. As the no. 1 Elementor addon, Essential Addons offers a vast library of 100+ additional elements to simplify Elementor web design. From Interactive Animations & Breadcrumbs to Woo Product Images and many more, you will get access to all the versatile Elementor elements you need. For an in-depth preview of the 100+ elements, check out the Essential Addons demo. 

Offering multiple element categories for content, marketing, creative, social, WooCommerce, extensions and more, Essential Addons now powers 2 million+ websites worldwide. Thanks to the host of features and options, the plugin helps build one website in every one second. As a result, it is the most popular Elementor addon out there, making it a highly useful tool for any Elementor user.

Design Stacked Cards on Elementor Websites for a Stunning Visual Experience

Stacked Cards offer a smart, organized and sleek way to present your web content to your audience. Instead of burdening web visitors with too much content at once, you can highlight information in different cards through smooth transitions. So, you get to drive engagement and boost conversions in the long run.

We hope you have found this blog useful. Subscribe to our blogs for the latest news. And join our Facebook community so that you do not miss any important updates. Happy web building!