How To Use The Marker Widget By Atomic Addons

The Marker widget by Atomic Addons places markers on top of an image: icons, short text, small images or invisible hot spots. Each marker can show a tooltip, open a link or open a larger image in a lightbox. Use it to label the parts of a product, the rooms of a floor plan or the places on a map. This guide covers adding the widget, placing the markers and setting up their tooltips.

Enable the Marker Widget

Marker is a Free widget and works with the free Atomic Addons plugin. Several of its settings, including the marker positions, carry a Pro badge and need Atomic Addons Pro; they are marked below. Switch the widget on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Marker. You can also open the Creative category.

4. 4

   Turn the Marker widget on.

5. 5

   Click Save Settings.

Add the Marker Widget

Marker works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

Image

Open the widget and go to Content → Image:

1. 1

   Choose Image: The image the markers sit on. Elementor's placeholder image by default.

2. 2

   Image Size: Which image size WordPress serves, Large by default, or Custom for your own width and height.

3. 3

   Alignment: Left, center (the default) or right, per screen size.

4. 4

   Caption: A caption under the image. Pro badge.

Markers

Content → Markers holds the Marker Items list, three by default. Click a marker to open it. Its Marker tab holds:

1. 1

   Select Type: What the marker shows: None for an invisible hot spot, Text, Icon (the default) or Image. Pro badge: the free plugin uses Icon.

2. 2

   Text: Text only: the marker's text, Marker by default.

3. 3

   Icon: Icon only: the marker's icon. Leave it empty for the default plus sign.

4. 4

   Image: Image only: a small image to use as the marker.

5. 5

   Height and Width: None only: the size of the invisible hot spot, 20 by 20px by default. In the editor it shows as a dashed outline so you can place it; on the page it is invisible but still shows its tooltip.

6. 6

   X Position: How far from the left edge of the image the marker sits, in percent, per screen size. Pro badge.

7. 7

   Y Position: How far from the top edge, in percent, per screen size. Pro badge. The three sample markers sit at 50% / 50%, 30% / 30% and 80% / 20%.

8. 8

   Link to: None, the default, Custom URL, which adds a Link field, or Lightbox, which adds a Choose Image field for the image that opens in a lightbox. Pro badge.

9. 9

   Advanced Settings: A popover with a CSS ID and CSS Classes for the marker, and a Color and background for this marker only. Pro badge.

The Tooltip tab holds:

1. 1

   Tooltip: Shows a tooltip for this marker. On by default.

2. 2

   Tooltip Text: The tooltip's content, in a rich text editor. It also names the marker for screen readers and is the caption of a lightbox image.

3. 3

   Placement: Where the tooltip opens: Top (the default), Top Left, Top Right, Bottom, Bottom Left, Bottom Right, Left or Right. It moves to the other side if there isn't room.

Under the list, Pulse Animation adds rings that pulse around every marker, and makes the markers scale in when the image scrolls into view. Pro badge.

Tooltip Settings

Content → Tooltip Settings applies to every tooltip in the widget:

1. 1

   Animation: How tooltips appear: Shift-Toward (the default), Shift-Away, Fade, Scale or Perspective. Pro badge.

2. 2

   Offset: Moves the tooltip sideways along the marker, in pixels.

3. 3

   Distance: Moves the tooltip further from the marker, in pixels.

4. 4

   Arrow: Adds a small arrow that points from the tooltip to the marker. Off by default.

5. 5

   Trigger on Click: Opens tooltips only when the visitor clicks a marker, instead of when they point at it or tab to it. As the panel's hint says, leave it off for markers that open a lightbox. Pro badge.

6. 6

   Always Visible Tooltip: Shows every tooltip without any interaction, while the marker is on screen. Pro badge.

Style the Marker

Everything below is on the Style tab:

• Image: the image's size in percent, opacity, border, radius and box shadow.
• Caption: alignment, text color and typography.
• Marker: color, background, border, border radius, padding, size, opacity and box shadow, the color of the pulse rings, and hover color, background and border color.
• Tooltip: width, typography, text color, text alignment, background, arrow color, padding, border, border radius and box shadow.