Advanced Widgets Stacked Cards Estimated reading: 4 minutes 138 views Make your website pop with Stacked Cards! Add, customize, and animate cards in minutes, giving your pages a lively, professional look that draws attention. With just a few clicks, you can control how the cards appear, tilt, and move across the screen. Perfect for showcasing content, services, or features in an engaging and interactive way. Requirement Elementor (Page Builder) Animations Addons (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Stacked Cards Go to your WordPress Dashboard. Click on Animation Addons. Head to the Widgets Tab. Under Advanced, toggle on Stacked Cards. Step 1: Unlock the Stacked Cards Click the ‘+’ icon, type Stacked Cards in the search bar, then select it. Step 2: Customize Your Card Content After selecting Stacked Cards, you’ll see three customization options: Layout, Content, and Animation. Let’s begin with Layout. Layout In Layout, choose Left, Top, Right, or Bottom to set where the cards appear and the direction they animate from. For example, it’s set to ‘Right’ here, but you can choose any option you prefer. Content For example, three items are added here, but you can add more by clicking ‘+Add Item’. Next, set the content ‘Title Tag’ according to your preference; here, it’s set to H3. Now, click on ‘Content’ to customize the stacked card items as you like. Right after clicking on content, you will have all the customization options. Start with content type. Content Type: Content type has two options: Content and Saved templates. The Content option lets you make cards right in the widget, and Save Template lets you use a ready-made Elementor template for the cards. For instance, it’s set to Content here, but you can choose any option you prefer. Icon: From the Icon option, you can upload a custom icon or choose one from the library. The choice is yours. Title: Set the title however you like. For example, it’s set to ‘Seamless Smooth Scrolling Animation for WordPress’ here. Text: Next, in the Text option, you can add text according to your content. Button Text: Button Text lets you choose what appears on the button. For example, it’s set to ‘Explore Animation’ here, but you can enter any text you like. Button Icon: In Button Icon, you can select an icon or upload a custom one of your choice. For example, here it’s selected to an arrow icon. Link: Link settings turn your card into a clickable link. You can paste any link as per your choice. However, no link is set here. Image: In the Image option, you can choose any image you like. Note: (Similarly, you can customize your other ‘Content Items’ the same way.) Step 3: Set How the Cards Flow Decide where the cards appear on the screen and how they move. Start Position sets the entry point, like top, center, bottom, or a custom spot. Rotation turns the cards a little to make them look stacked. Animation Settings Animation settings options let you control where the animation begins on the screen. Let’s take a look at what each option does: Start Position Top Top: Animation starts at the top of the screen or section. Top Center: Animation starts from the top, in the middle. Top Bottom: Cards start from the top, near the bottom side. Center Top: Animation starts in the middle and moves from top. Center Center: Cards start from the very middle. Center Bottom: Animation starts in the middle and moves from the bottom. Bottom Top: Cards start from the bottom, but near the top side. Bottom Center: Animation starts at the bottom and moves from the middle. Bottom Bottom: Cards start from the very bottom corner. Custom: You can choose your own starting spot. For example, it’s set to ‘Top Top’ here. But you can choose any option as per your choice. Rotation Rotation makes the cards tilt or turn a little, so they look stacked on each other. For example, it’s set to 45 here, but you can choose any value you prefer. Final Result You Did It Congratulations! You’ve successfully added, customized, and animated your Stacked Cards. Your cards now move, tilt, and showcase your content exactly how you want, making your website look dynamic and professional. Additionally, If you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help. View Live Demo
