How to Use Dropbar Widget

How to Use Dropbar Widget

Dropbar works amazingly to show content in a word. That is enough for describing the view of thoughts. In the doc below, you’re going to see how to use the Dropbar widget.

To Insert Widget

Inserting a widget, it is just a matter of dragging and dropping. As you see in the screenshot above.

Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the tab and how they work behind the widget.

Dropbar Content

In this section, you can select the content source. From where you will be able to show your content by the Dropbar.

If you want to select another source (Elementor Template/ AE Template) instead of Custom Content, you have to go to the Content tab > Dropbar Content > Select Source.

Elementor Template:

You can select Elementor Template but you should follow the following steps.

Step-1: At first, make a template and to do that, go to WordPress Dashboard > Templates > click on the Add New.

Step-2: NEW TEMPLATE pop-up will arrive. Then, select Section (from the drop-down) > and give a template name (such as Nested Tab in Tabs) > hit the CREATE TEMPLATE button.

Step-3: Next, edit the template in Elementor editor.

If you ensure the steps mentioned up, you’ll able to show a template by the Dropbar. As you can see the photo above.

N.B: Along with the Elementor Template, at first you have to make sure, you have installed AE Plugin and all the processes are as like Elementor Template.


This section will let style the Drop-bar Button. Simply, go to the Content tab > Button. Look at the image example above.

Dropbar Options

From this section, you might manage the Dropbar button. Mostly, you can select Position and Mode (Hove and Click) of the dropbar. Just, take a look.

Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design.

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.


In this section, you might generally set Border, Border Radius, and Padding. You can also set shadow with the button using the Box-Shadow. Take a look at the photos.



The important thing is Background color and Icon Color that you can set in both Normal and Hover mode.

Dropbar Content

Simply, go to the Style tab > Dropbar Content and all the controls.

Video Assist

At the end of this documentation, I hope you’ve noticed what is Dropbar widget and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.