How To Use The Interactive Card Widget By Atomic Addons

The Interactive Card widget by Atomic Addons builds a single card: an image with an optional badge on it, and copy made of a sub title, a title, some text and a read more button with an arrow. The image can sit above, below or beside the copy, it zooms in gently on hover, and the whole card can link to one address. It suits services, features and featured posts. This guide covers adding the widget and setting up the card, the button and the badge.

Enable the Interactive Card Widget

Interactive Card is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Interactive Card. You can also open the Creative category.

4. 4

   Turn the Interactive Card widget on.

5. 5

   Click Save Settings.

Add the Interactive Card Widget

Interactive Card works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Interactive Card. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

For a row of cards, place one widget in each column of a container.

Layout

Open the widget and go to Content → Layout:

1. 1

   Image: The card’s picture. It accepts dynamic tags, such as the featured image.

2. 2

   Image Size: Which image size WordPress serves, Full by default.

3. 3

   Title: The card’s heading, “Interactive Card Title” by default.

4. 4

   Title Link: Turns the title into a link. Type the address in Title Link URL.

5. 5

   Show Sub Title: Shows a small line above the title, typed in Sub Title. On by default, with “This is a Label”.

6. 6

   Text: The card’s text, in a rich text editor.

7. 7

   Read More Button: Shows the button under the text. On by default; it is set up in its own section below.

8. 8

   Badge: Adds a label on the image, such as “POPULAR”. Off by default; it is set up in its own section below.

9. 9

   Title HTML Tag: The title’s markup: H1 to H6, div, span or p. H3 by default.

10. 10

    Alignment: Left, center, right or justified alignment of the copy, per screen size.

11. 11

    Position: Where the image sits: Top (the default) puts it above the copy and Bottom below it. Left and Right set the image and copy side by side, half the card each; on phones they stack.

12. 12

    Global Link: Makes the whole card a link. Type the address in Global Link URL. A Title Link or the Read More button inside the card still opens its own address.

Read More

Content → Read More appears while Read More Button is on:

1. 1

   Text: The button label, “Read More” by default.

2. 2

   Link to: Where the button goes, # by default. Clear it and the button shows as a plain label.

3. 3

   Button ID: An optional HTML id for the button, typed without the #, for example to track clicks. Keep it unique on the page, using letters, numbers and underscores without spaces.

Badge

Content → Badge appears while Badge is on:

1. 1

   Badge Text: The label, “POPULAR” by default. An empty label hides the badge.

2. 2

   Position: Where it sits on the image: a corner, the middle of an edge or the center. Top Right by default.

3. 3

   Offset: Horizontal Offset and Vertical Offset nudge the badge from that position, −300 to 300px, and Rotate tilts it, −360 to 360 degrees, for example to set it at an angle across a corner. Each can differ per screen size.

Style the Interactive Card

Everything below is on the Style tab:

• Card Wrapper — the card’s background, border, radius, padding and shadow, with a Hover tab.
• Image — Normal and Hover tabs with CSS filters, shadow, border, radius and opacity, plus padding and margin, plus Image Hover Effect (on by default), the slow zoom when the pointer is over the card.
• Content — the copy area’s background (Normal and Hover) and padding.
• Title, Sub Title and Text — colors, typography and spacing.
• Read More — the button in Normal and Hover states, an Attention switch that makes it pulse to draw the eye, and one of Elementor’s Hover Animation effects.
• Badge — the badge’s colors, background, border, radius, padding and typography.