How To Use The Dropbar Widget By Atomic Addons

The Dropbar widget by Atomic Addons adds a button that opens a floating panel next to it. The panel can hold text or a whole Elementor template, such as a contact form, a short menu or a promotion. You choose where the panel opens, whether hover or click opens it, and how it animates. This guide covers adding the widget, filling the panel and setting up the button.

Enable the Dropbar Widget

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

4. 4

   Turn the Dropbar widget on.

5. 5

   Click Save Settings.

Add the Dropbar Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

Dropbar Content

Open the widget and go to Content → Dropbar Content to choose what the panel shows:

1. 1

   Select Source: Custom Content (the default) for text you write here, Elementor Template for a template from Templates → Saved Templates, or AE Template for a template made with the AnyWhere Elementor plugin (that plugin must be installed).

2. 2

   Content: With Custom Content: the panel’s text, written in the text editor. It accepts Dynamic Tags.

3. 3

   Select Template: With either template source: type the template’s name and pick it.

Button

Content → Button sets up the button that opens the panel:

1. 1

   Text: The button label, “Open Dropbar” by default.

2. 2

   Alignment: Left, center, right or justified (full width). Hidden while the button has a Fixed Position.

3. 3

   Size: Extra Small, Small (the default), Medium, Large or Extra Large.

4. 4

   Icon: An optional icon in the button.

5. 5

   Icon Position: Shows once you pick an icon: Before or After the text. After by default.

6. 6

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

7. 7

   Fixed Position: Default keeps the button where you placed it. The other options — Top Left, Top Center, Top Right, Center, Center Left, Center Right, Bottom Left, Bottom Center and Bottom Right — pin it to that spot of the browser window, where it stays while visitors scroll.

8. 8

   Horizontal Offset / Vertical Offset: Show with a fixed position: move the pinned button by −300 to 300px from its spot.

9. 9

   Rotate: Shows with a fixed position: turns the button, for example −90° for a vertical tab on the side of the screen.

Dropbar Options

Content → Dropbar Options controls how the panel opens:

1. 1

   Position: Where the panel opens relative to the button: below, above, left or right of it, aligned to either end or the center. Bottom Left by default. The Justify options make the panel as wide as the button.

2. 2

   Mode: Hover (the default) opens the panel when the pointer is on the button; Click opens it on a click.

3. 3

   Width: The panel width, 100 to 1000px. Use the device icon to set it per screen size.

4. 4

   Stretch: None by default. Full stretches the panel to fill the space both ways; X - Horizontal or Y - Vertical stretch it one way only.

5. 5

   Flip Dropbar: Lets the panel open on the other side of the button when there is not enough room on the chosen side.

6. 6

   Dropbar Offset: The gap between button and panel, 10px by default.

7. 7

   Target: Optional. The class name, without the dot, of a parent element to line the panel up with instead of the button — for example a header row, so the panel opens below the whole header.

8. 8

   Boundary: Optional. The class name, without the dot, of a parent element the panel must stay inside.

9. 9

   Animation: How the panel appears: None, Fade (the default), Slide Top, Slide Bottom, Slide Left, Slide Right, Reveal Top, Reveal Bottom, Reveal Left or Reveal Right.

10. 10

    Animate Out: Plays the animation when the panel closes too.

11. 11

    Animation Duration: How long the animation takes, 200ms by default. Hidden when Animation is None.

12. 12

    Show Delay: How long to wait before opening, 0ms by default.

13. 13

    Hide Delay: How long the panel stays open after the pointer leaves, 800ms by default. This gives visitors time to move from the button into the panel.

Style the Dropbar

Everything below is on the Style tab.

• Button — the button in Normal and Hover states: color, background color, border, border radius, padding, typography and icon color, plus a Hover Animation.
• Dropbar Content — the panel: alignment, text color, background, border, padding, border radius and shadow. With Custom Content it also has typography.