Back to contents

JetElements Dropbar widget. How to add a compact Dropbar widget to your website

Reading this tutorial will help you to add a dropbar with any content you need to the page of your website with Elementor using JetElements plugin.

With the Dropbar widget of JetElements, you can add a compact dropbar which is very useful when you want to hide content and save some space on your website’s page.

You can add a dropbar wherever you want on your site and customize it according to your vision just in a few clicks.

From this tutorial, you will learn how to add a Dropbar to your website easily. So, let’s have a closer look at this process.

Creating a Dropbar

Step 1 — First of all, open a page to which you want to add a dropbar and drag-n-drop the Dropbar widget to the needed section.

Dropbar widget

Step 2 — After that navigate to the dropbar Content settings block. Here you can change the Text of the dropbar, choose an Icon and Alignment.

Dropbar content settings

The great thing here is that you can choose whether you want to fill your dropbar with the Simple Text or select an already created Template.

Template selection

Step 3 — Also, you can choose one of a different Positions for the content of the dropbar, such as Top Left, Bottom Left, Right Center, etc.

Positions for the content of the dropbar

Moreover, there’s an option to select an Effect for the dropbar and decide how it can be opened, on click or on hower.

Effect for the dropbar

By the way, you can make the dropbar button stay fixed using the extensive position options.


Step 4 — The Dropbar widget has a lot of different Style settings, so you can change its appearance to make your website’s look really amazing.

Style settings

Step 5 —Don’t forget to click on the Publish button after you’re done with the customization and enjoy the results.

Dropbar widget

As you can see, the Dropbar widget from JetElements is a great tool for any type of website, and now you know how to use it. Great job!