How To Use The Featured Box Widget By Atomic Addons

The Featured Box widget by Atomic Addons places a white content card over a large image: a title, a short text and a Read More button, with an optional sub title above the title and a badge on the image. You choose which corner or side of the image the card sits on. This guide covers adding the widget, filling in the card and setting up the button and badge.

Enable the Featured Box Widget

Featured Box 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 Featured Box. You can also open the Content category.

4. 4

   Turn the Featured Box widget on.

5. 5

   Click Save Settings.

Add the Featured Box Widget

Featured Box works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Featured Box. 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).

Layout

Open the widget and go to Content → Layout:

1. 1

   Image: The picture behind the card. Until you choose one, the widget shows an empty placeholder frame. The title is used as the image's alt text.

2. 2

   Image Resolution: Which image size WordPress serves. Full by default.

3. 3

   Title: The card's heading, “Featured Box Title” to start with.

4. 4

   Title Link: Turn it on to make the title a link, then enter the address in Title Link URL. Off by default.

5. 5

   Show Sub Title: Adds a small uppercase line above the title. Type it in Sub Title (“This is a Label” to start with). Off by default.

6. 6

   Text: The paragraph under the title. Leave it empty to show no text.

7. 7

   Read More Button: Shows a button under the text. On by default; its settings are in the Read More section.

8. 8

   Badge: Adds a small label on the image. Off by default; its settings are in the Badge section.

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 text in the card, per screen size.

11. 11

    Position: Where the card sits over the image: Top Left, Top Center, Top Right, Center Left (the default), Center Right, Bottom Left, Bottom Center or Bottom Right.

Title, Title Link URL, Sub Title and Text accept Dynamic Tags.

The image has space around it (60px on tablets, 100px on desktops) so the card can overlap it. On phones the card drops below the image, spans its width and overlaps its bottom edge a little, whatever Position you chose. Change the space around the image with Style → Image → Spacing.

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. Use the gear icon for Open in new window, Add nofollow and custom attributes.

3. 3

   Icon: An optional icon on the button.

4. 4

   Icon Position: With an icon chosen: Right of the text (the default) or Left.

5. 5

   Icon Spacing: With an icon and text: the space between them, 8px by default.

6. 6

   Button ID: An optional HTML ID for the button, for anchors or tracking. Use letters, numbers and underscores, without the # sign, and keep it unique on the page.

Badge

Content → Badge appears while Badge is on:

1. 1

   Badge Text: The label, “POPULAR” by default. The badge is hidden when the text is empty.

2. 2

   Position: The corner or edge of the image the badge sits on: Top Left, Top Center, Top Right (the default), Center, Center Left, Center Right, Bottom Left, Bottom Center or Bottom Right.

3. 3

   Offset: Switch it to Custom to fine-tune the badge: Horizontal Offset and Vertical Offset move it up to 300px either way, and Rotate turns it by up to 360°. All three can be set per screen size.

Style the Featured Box

Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.

• Image — Spacing around the image, and the image's CSS filters, shadow, border, radius, opacity and transition duration, with a Hover state.
• Title, Sub Title and Text — spacing, colors and typography, with hover colors that apply while the visitor points at the box. Title also has text stroke and text shadow.
• Read More — Attention, a gentle repeating pulse that draws the eye to the button; the space above the button; and its colors, background, border, radius, shadow, padding and typography in Normal and Hover states, plus a Hover Animation.
• Badge — text color, background, border, radius, shadow, padding, margin and typography.
• Additional — the card itself: Max Width, padding, background, border, radius and shadow, with a Hover state. Glassmorphism blurs whatever is behind the card; set its strength with Blur Level (5 by default) and give the card a see-through background to see it.