Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Dropbar widget in Elementor

How to Use Dropbar Widget in Elementor

Dropbar works amazingly to show content in a word. In the doc below, you’re going to see how to use the Dropbar widget in Elementor by Element Pack easily and effectively. So, let’s get started.

To Insert Widget

Inserting Dropbar widget in Elementor

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

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 in designing the Dropbar widget in Elementor.

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

Dropbar Content

dropbarContent - BdThemes

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 for the sidebars but you should follow the following steps.

dropbarContent ElementorTemplate - BdThemes

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

dropbarContent ElementorTemplate 1 - BdThemes

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.

dropbarContent ElementorTemplate 2 - BdThemes

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

dropbarContent ElementorTemplate 3 - BdThemes

If you ensure the steps mentioned up, you’ll be 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 like Elementor Template.


dropbarContent 2 - BdThemes

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

Dropbar Options

dropbarContent 3 - BdThemes

From this section, you might manage the Dropbar button layout by Element Pack. 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 the Dropbar widget in Elementor by Element Pack. 

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.


dropbarContent 4 - BdThemes


dropbarContent 5 - BdThemes

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

Dropbar Content

dropbarContent 6 - BdThemes

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 in Elementor is, developed by Bdthemes, 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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.