Topbar Overview

The Droip Topbar provides a range of powerful tools and features to streamline your website-building process. Let’s explore each element of the Topbar:

Topbar overview

Topbar Menu

Starting from the left side of the Topbar, you will find the Topbar Menu. Click on the three-dot icon (≡) to access the following options:

Topbar menu

Canvas View Options

Canvas view options

Hover over Canvas View Options to access the Menu options. From here you can choose which Menus to keep visible on the Topbar while you work on your website.

Turn On Dev Modes

Turn On Dev Modes

Click on </> Turn on Dev Mode to open the Developer Mode window. You can manually add custom code from this window to the page you’re working on.

Upload Custom Fonts

Upload Custom Fonts

Clicking on Upload Custom Fonts will open a new window with the following three tabs:

  1. Google Fonts: From this tab, you can browse and select from a collection of free web fonts provided by Google.
  2. Installed Fonts: This tab will list the fonts that are already installed on your Droip project.
  3. Upload Custom Fonts: Lastly, this tab is where you’ll be able to upload and use your own custom fonts on your website. Learn how to upload custom fonts

Show Onboarding

Click on Show Onboarding to go through the Onboarding Procedure which will take you through a detailed tour of the entire website builder, giving you an idea of all the features available and where you can find them. 

Help & Support

Click on Help & Support if you are facing any issues with the Droip builder. This will take you to the Droip documentation.

Page Settings

From the Page Settings panel, you can define your basic page details as well as set up SEO, OpenGraph, and more. Read detailed documentation on Page Settings.

Shortcut List

Access a plethora of nifty keyboard shortcuts that can help you speed up your design process from the Shortcut List panel. Read detailed documentation on Keyboard Shortcuts.


Click on WordPress to access the WordPress Admin Dashboard.


On the left side of the Topbar, you will find the Following Menus:

  • Pages
  • Layers
  • Templates
  • Elements
  • Media

 You’ll get an in-depth idea about each of these menus if you visit our documentation



At the center of the Topbar, you will find four different device icons. These are known as the breakpoints and they’ll allow you to control the webpage responsiveness for all screens. By default, you’ll see four different breakpoint options on the Topbar. 

  • Desktop
  • Tablet
  • Mobile Landscape
  • Mobile

Besides these, you can also set Custom Breakpoints if needed or choose one of the predefined breakpoints available for various devices from the dropdown list. Check out the Breakpoints documentation to learn more. 

Global Search

Global search of Droip

Click on the Magnifying Glass icon to access the Global Search Bar or press CMD + “?. From here, you will be able to search Elements, Pages, and even On-page Elements.

Canvas Control

Canvas control

Using Canvas Control, you can customize the display and behavior of the canvas while you are working on your website. On the Topbar, it’s represented by the Scale Percentage which is actually a dropdown.

You can change the scale of the canvas, show or hide rulers to help you align elements precisely, display or hide guides to help you create a consistent layout, and more. 

Learn more about Canvas Control.


Page audit

The Audit feature is represented by the Triangle Exclamation icon. This feature is in charge of doing automatic accessibility checks on the following 3 aspects:

  • Alt Text Missing
  • Link Missing
  • Class Name Missing

Learn more about Page Audit



Following the Audit feature, next on the Topbar is Accessibility. Using this, you can customize the user interface to better suit your needs in case of any disabilities. 

Learn more about the Accessibility feature of Droip.


Click on the play icon to see a full Preview of your designed webpage to get an idea of what it will look like to the users. 

Auto Save

With Droip’s seamless autosave mechanism, you can rest assured that your work is continuously saved, ensuring that no progress is lost, even if you forget to manually save your changes.

The Status label at the top-right corner displays the status of your page. After making any changes, the label will display ‘Saving’, and once done it will display ‘Auto Saved’. 

You can of course disable the Autosave option by clicking on the dropdown arrow and unticking the Enable Autosave option.

📝 Note: Droip automatically saves your page content within 3 seconds of user inactivity.

Was this article helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.