Advanced Card Widget

The Advanced Card Widget from RTM Elements allows you to create stylish, eye-catching cards for your Elementor website. It’s perfect for showcasing services, products, team members, or featured content in a clean and engaging way.

With the Advanced Card Widget, you can add your content, choose a card style, and customize its look and hover effects to match your website’s design.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Advanced Card Widget is part of the RTMElements Addon, which is available with a Rometheme PRO subscription. Before you begin, make sure you have:

1. Installed and activated RTMKit on your WordPress website. (Go to Plugins → Add New Plugin, search for RTMKit, then click Install Now and Activate).
2. Subscribed to Rometheme PRO and connected your account to RTMKit.
   📘 Getting Started with Rometheme PRO
3. Activated the RTMElements Addon from WordPress Dashboard → RTMKit → Features → Addons → Install & Activate RTM Elements.
   📘 How to Activate Addons

Step 2 — Add the Advanced Card Widget

• Open the page with Elementor.
• Find RTM Elements → Advanced Card.
• Or search for Advanced Card in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Advanced Card Widget

• In the Content tab, you will find several sections to set up your cards.
• Cards: Choose a preset: Flip Card, Hover Expand, Hover Reveal, Folder, Swipe Deck, Arc Deck, or Fling Stack.
• Then add, duplicate, or remove your cards, and set the image resolution and title tag.
• Under Visibility, choose which elements (such as the number, title, or subtitle) appear before hover (Normal) and when the card opens (Hover).

• Button: Set the default button text for every card, add an icon, and choose where the button sits on the card. If the button is shown, the link is placed on the button. Otherwise, the whole card becomes clickable.

• Layout: Adjust the card height and width, the space above and below the cards, the content alignment, and the animation speed and easing.

• Deck Settings: For deck-style presets like Swipe Deck, Arc Deck, and Fling Stack, set which card appears first, how many cards are visible, and whether visitors can loop or drag the cards.
• You can also turn on autoplay and show arrows and dots for navigation.

• Text Animation: Choose how the text animates in when a card opens, such as fading up, and adjust the distance, duration, delay, and stagger between text lines.

Step 4 — Custom Style the Advanced Card Widget

• Go to the Style tab to customize the cards’ appearance to match your website’s design.
• Card: Set the card padding, border, corner radius, and shadow, with separate Normal and Hover styles.

• Image: Add a color or gradient overlay on top of the card image and apply CSS filters, with separate Normal and Hover styles.

• Caption: Style the card text, including the colors, fonts, and spacing of the number, title, subtitle, and description, plus the padding around the text on top of the image.

• Button: Customize the button’s font, padding, spacing from the text, icon size, colors, border, and background, with separate Normal and Hover styles.

• Navigation: For deck-style presets, style the arrows and dots, including their size, position, colors, border, and shadow, plus the spacing between the cards and the navigation.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make your Advanced Card live on your website.