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

Topbar Menu

Starting from the left side of the Topbar, you will find the Topbar Menu. Click on the dropdown button beside Droip’s logo to access the following options:

View Options

Hover over View Options to access the menu settings. From here, you can choose which menus to keep visible in the editor while working on your website.

Font Library

Clicking on Font Library opens a new window with three tabs:

• Google Fonts: Browse and select from a collection of free web fonts provided by Google.
• Installed Fonts: View the fonts already installed in your Droip project.
• Custom Fonts: Upload and use your own fonts on your website. Learn how to upload custom fonts.

Show Onboarding

Click Show Onboarding to start a guided tour of the website builder. This will give you an overview of all features and where to find them.

Shortcuts

Access a comprehensive list of keyboard shortcuts to speed up your design process. Read more about Keyboard Shortcuts.

Back to Admin

Click Back to Admin to return to the WordPress Admin Dashboard.

Breakpoints

At the center of the Topbar, you’ll find four different device icons. These are known as Breakpoints, allowing you to control webpage responsiveness across different screen sizes. By default, the Topbar includes:

• Desktop
• Tablet
• Mobile Landscape
• Mobile

Additionally, you can set unlimited Custom Breakpoints according to your needs. Learn more about Breakpoints.

Global Search

Click the Magnifying Glass icon or press CMD + ? to access Global Search. From here, you can search for Elements, Pages, and On-page Elements quickly and efficiently.

Canvas Control

The Canvas Control feature allows you to customize the display and behavior of the canvas while designing. It is represented by the Scale Percentage dropdown on the Topbar.

With Canvas Control, you can:

• Adjust the scale of the canvas.
• Show or hide rulers to align elements precisely.
• Display or hide guides for a structured layout.

Learn more about Canvas Control.

Audit

The Audit feature, represented by the Triangle Exclamation icon, performs automatic accessibility checks on the following aspects:

• Alt Text Missing (for images)
• Link Missing (for necessary elements)
• Class Name Missing (for proper structuring)

Learn more about Page Audit. 

Accessibility

Following the Audit feature, the Accessibility option allows users to customize the interface to suit their needs, particularly for those with disabilities. 

Learn more about Accessibility in Droip.

Preview

Click on the Play icon to view a full preview of your designed webpage, allowing you to see how it will appear to visitors.

Auto Save

Droip features a seamless Auto Save mechanism to ensure continuous saving of your work. This prevents data loss, even if you forget to manually save.

The Status Label at the top-right corner indicates saving progress. "Saving" appears when changes are in progress. "Auto Saved" confirms the save is complete.

You can disable Autosave by clicking the dropdown arrow and unchecking Enable Autosave.

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