How To Use The Call Out Widget By Atomic Addons

The Call Out widget by Atomic Addons draws attention to an announcement, an offer or a next step: a headline and a line of text, with one button beside them or centered below them. The button can carry an icon and a soft pulsing ring that catches the eye. This guide covers adding the widget, writing the text and setting up the button.

Enable the Call Out Widget

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

4. 4

   Turn the Call Out widget on.

5. 5

   Click Save Settings.

Add the Call Out Widget

Call Out works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Call Out. 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

   Title: The headline, “This is your call to action title” by default. Leave it empty to show the text alone.

2. 2

   Text: The line under the headline. It is plain text: HTML tags are removed. Leave it empty to show the title alone.

3. 3

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

Button

Content → Button sets the call to action:

1. 1

   Text: The button's label, “Click Here” by default.

2. 2

   Link: Where the button leads, “#” by default. Click the cog to open it in a new tab or add nofollow.

3. 3

   Alignment: Right, the default, puts the button to the right of the text; Left puts it before the text; Center centers everything and puts the button under the text.

4. 4

   Icon: An optional icon on the button, from the icon library. None by default.

5. 5

   Icon Position: Once you pick an icon: Right of the label (the default) or Left. On the right, the icon nudges forward when the button is hovered.

6. 6

   Icon Spacing: The space between the icon and the label, 8px by default.

7. 7

   Button ID: An optional HTML ID for the button, without the #, for example to track clicks in analytics. Keep it unique on the page.

With Left or Right, the button moves under the text on screens narrower than 960px. If you clear the button's Text and set no icon, the widget shows no button; an icon-only button uses the Title as its name for screen readers.

Style the Call Out

Everything below is on the Style tab. A section is hidden while its part of the widget is empty.

• Title — color, typography, text shadow and text stroke.
• Text — color, typography and Spacing above the text.
• Button — Attention adds a ring that pulses out from the button. Normal and Hover tabs hold the color, background, border, radius, padding, margin, shadow and typography; the Hover tab also has an Elementor hover Animation.
• Icon — shown once you pick an icon: color, background, border, radius, padding and Icon Size, with a Hover tab for the color and background.