Every page in Droip is backed by built-in version control, so you can confidently iterate, update, and restore without ever losing your work.

Whether you’re experimenting with a new layout, adjusting content, or collaborating in a team, Droip keeps a record of every published state of your page — giving you complete control over your version history.

Where to Find Version History

To access your page’s version history:

1. Open any page in the Droip Editor.
   
2. Click the Publish button (top-right corner).
   
3. Select Last Published.

The Publish History panel will appear, showing:

• Date and time of each publish
  
• Author name
  
• Options to Rename, Restore, or Delete any version

How Versioning Works

As you design, Droip autosaves your work in the current working version. 

When you’re ready to push your updates live, just hit Update, and that version becomes your published one.

Any changes you make after clicking Update (i.e, publishing the page) are automatically tracked in a brand-new version. So, each time you make edits post-update:

• A new version is created and saved
  
• The previous version remains safely stored

This means you can freely make edits, preview changes, and go back in time if needed,  without putting your live page at risk.

Restore a Previous Version

To revert a page to an earlier version:

1. Open the Publish History panel.
   
2. Hover over the version you want to restore.
   
3. Click the More (...) icon.
   
4. Select Restore.
   
5. The editor will restore the page as it was at that point in time in a new version.
   

Delete Old Versions 

To clean up outdated versions:

1. Open Publish History
   
2. Hover over the version you want to remove
   
3. Click the More (...) icon
   
4. Select Delete

💡 Note: You cannot delete the current working version or the one that’s currently published.

Things to Keep in Mind

Only Published Changes Create Versions: A new version is created only when you click Update. Autosaves help preserve your progress, but they don’t appear in version history.

You Can Preview Old Versions Without Restoring: Use the Play button next to any version in the Publish History panel to view how the page looked at that time.

Restoring Doesn’t Overwrite Your Current Work: When you restore an older version, Droip creates a new working copy. Your previously published and working versions remain intact.

Full Page Restores Only: Versions represent the full state of a page at publish. You can’t restore just a section or specific element from a version.

Keep Your History Tidy: While there’s no hard limit on stored versions, regularly deleting outdated ones helps maintain clarity, especially on heavily edited pages.

Droip lets you leave comments directly on the canvas, enabling real-time feedback and smoother collaboration between designers, developers, clients, and teams, all without ever leaving the editor.

Whether you’re reviewing a page, requesting changes, or explaining a design choice, Droip’s comment system keeps conversations contextual and actionable.

Overview

The Comment feature allows users to:

• Leave comments anywhere on your layout on the canvas.
• Tag collaborators with @mentions
• Keep track of open, unread, and resolved comments
• Centralize all feedback into a single, organized panel

Think of it as collaborative feedback built right into your design workflow.

Permissions

Users with Content-Only access can leave comments directly on the canvas, but won’t see the full Comments panel.

Users with Full Access can view, reply to, and manage all comments.

Learn more about access levels. 

Where to Find Comments

To open the Comment Panel, click the Comment icon (💬) on the top toolbar. This will enable the comment mode and open a side panel where you can:

• See all comments
  
• Search through feedback
  
• Filter by: All, Unread, or Resolved

💡 Note: Comments are tied to individual pages, so feedback stays focused and organized.

How to Add a Comment

1. Enable comment mode using the comment icon.
2. Click anywhere on the page (not directly on the element, but on the layout).
3. A floating comment box will appear where you clicked.
4. Type your feedback.
5. Optionally @mention a teammate (if multi-user access is enabled)
6. Click the Upward Arrow icon to submit the comment

💡 Note: Comment markers are shown as floating pins on the canvas so collaborators know where the comment is anchored.

Collaborate With Your Team

You can @mention collaborators inside a comment to direct feedback to them. All users with appropriate permissions can view, reply to, and resolve comments.

Managing Comments

• Reply: Start a thread beneath any existing comment
  
• Resolve: Mark comments as completed or addressed
  
• Mark as Unread/Delete: Click on a comment on the canvas and click the More (…) menu
  

Best Practices

• Use clear and actionable language when leaving feedback
  e.g., “Let’s increase the padding on this section by 20px for better spacing”
  
• Group comments by section or component to keep discussions organized
  
• Resolve comments once completed to maintain a clean workspace
  
• Use @mentions for accountability and faster collaboration
  
• Commenting on staging versions during page revisions
  

Droip offers quite a selection of Keyboard Shortcuts for various actions to make your website-building experience even smoother. Below is a list of all of the shortcuts that are available.

Copy/Paste

• Cut: Cmd + X – Remove the selected content and place it in the clipboard.
• Copy: Cmd + C – Copy the selected content to the clipboard.
• Copy Element Style: Opt + Cmd + C – Copy the style properties of the selected element to the clipboard.
• Paste Inside: Cmd + V – Paste the content from the clipboard at the bottom of the currently selected section.
• Paste Inside First: Shift + Cmd + V – Paste the content from the clipboard inside the currently selected section as the first element.
• Paste Element Style: Opt + Cmd + V – Apply the style properties from the clipboard to the selected element.
• Duplicate: Cmd + D – Create a duplicate of the selected element.
• Delete: Delete – Remove the selected element from the canvas.

View

• Show Ruler: Shift + R – Display a ruler to align your elements more accurately on the canvas.
• Show Empty Elements: Shift + Cmd + M – Show hidden empty elements on the canvas.
• View Guides: Ctrl + G – Enable canvas View Guides.
• Preview Mode: Cmd + Shift + P – Switch to preview mode to see how the website will look to visitors.
• Guide Overlay: Cmd + Shift + G – Display guides on top of the website content to aid in alignment.

General

• Add Class: Cmd + Return – Add a new class to the selected element.
• Rename Class: Shift + Cmd + Return – Rename the class of the selected element.
• Add Link: Cmd + Opt + L – Create a hyperlink for the selected element.

Undo/Redo

• Undo: Cmd + Z – Reverse the last action.
• Redo: Cmd + Shift + Z – Redo the last undone action.

Rotate & Flip

• Rotate Left: Shift + Cmd + R – Rotate the selected element counterclockwise.
• Rotate Right: Cmd + R – Rotate the selected element clockwise.
• Flip Vertically: Shift + V – Flip the selected element vertically.
• Flip Horizontally: Shift + H – Flip the selected element horizontally.

Scale/Zoom

• Scale Larger: Cmd + Plus (+) – Increase the size of the selected element.
• Scale Smaller: Cmd + Minus (-) – Decrease the size of the selected element.
• Scale to Default: Cmd + 0 – Reset the size of the selected element to its default.

Global Search

• Quick Find: Cmd + / – Search for elements, pages, posts, etc.

Arrangement

• Move Forward: Cmd + Right Bracket (]) – Move the selected element one step forward in the layering order.
• Bring to Front: Cmd + Opt + Right Brace (}) – Bring the selected element to the topmost layer.
• Move Backward: Cmd + Up Arrow + Left Bracket ([) – Move the selected element one step backward in the layering order.
• Send Backward: Cmd + Opt + Left Bracket ([) – Send the selected element to the bottommost layer.
• Left Align: Opt + A – Align the selected element to the left.
• Horizontal Center Align: Opt + H – Center the selected element horizontally.
• Right Align: Opt + D – Align the selected element to the right.
• Top Align: Opt + W – Align the selected element to the top.
• Vertical Center Align: Opt + V – Center the selected element vertically.
• Bottom Align: Opt + S – Align the selected element to the bottom.

Padding/Margin

• To change 2 directions at once: Hold Opt – Adjust padding or margin on two sides simultaneously.
• To change 4 directions at once: Hold Shift – Adjust padding or margin on all four sides simultaneously.

Toolbar

• Accessibility: A – Access the accessibility features.
• Make Selected Element a Symbol: Cmd + Shift + A – Convert the selected element into a reusable symbol.
• Show/Hide Left (Active) Panels: Z – Toggle the display of left panels that are currently active.
• Show Audit Panel: U – Display the audit panel for website analysis.
• Show Pages Panel: P – Show the pages panel for managing website pages.
• Show Elements Panel: E – Show the elements panel.
• Show Media Manager: M – Access the media manager for managing website assets.
• Show Component: D – Display the components panel.
• Show Layers: L – Show the layers panel for managing website layers.
• Show Symbols Panel: B – Display the symbols panel for managing website symbols.
• Create Component Modal: Opt + Cmd + K – Open the component creation modal window.

Breakpoints in Droip give you complete control over your website’s design and layout across different screen sizes. With breakpoints, you can customize content, test responsiveness, and create custom breakpoints to ensure your site looks and functions flawlessly on any device.

Canvas Breakpoints

Located in the center of the Topbar, the breakpoint icons allow you to seamlessly switch between different device views. Droip provides four default breakpoints:

• Desktop (Default value 1400px):
  Design for larger screens such as desktops and laptops. This is the default breakpoint, and any styles applied here will cascade down to all smaller breakpoints unless overridden.
• Tablet (Default value 991px):
  Optimize your design for tablet-sized screens, such as iPads. Styles applied at this breakpoint will apply to screens 991px wide and below.
• Mobile Landscape (Default value 767px):
  Tailor your website for phones held in landscape mode. Any changes made here will apply to screens 767px wide and smaller.
• Mobile (Default 575px):
  Ensure an optimal viewing experience on smaller smartphone screens. Styles applied at this breakpoint will only affect devices 575px wide and below.

Custom Breakpoints

Need more flexibility? Droip lets you add as many custom breakpoints as needed. Simply click the ellipsis icon beside the default breakpoints and set your own custom width to fine-tune your design for specific screen sizes.

How Breakpoints Work in Droip

• The Desktop breakpoint acts as the global viewport, meaning all styles applied here will cascade down to smaller breakpoints.
• Any changes made in Tablet view will apply to tablet screens and smaller breakpoints unless overridden.
• The same applies to Mobile Landscape and Mobile views, with styles cascading downward unless explicitly changed.
• This hierarchical approach streamlines your design workflow, ensuring consistency across all devices.

Hiding Elements for Specific Breakpoints

Droip allows you to control the visibility of elements across different screen sizes, ensuring a responsive and optimized layout for every device.

With Droip, you can selectively hide or show elements based on the active breakpoint.

How to Hide Elements for Specific Breakpoints

1. Select the Element: Click on the element you want to hide from the canvas.
   
2. Switch to Your Desired Breakpoint: Use the top-center device switcher to choose the screen size (e.g., desktop, tablet, mobile).
   
3. Go to the Effects Panel: On the right-hand sidebar, scroll down to the Effects section.
   
4. Set Visibility: Under the Visibility settings:
   
   • Click on the “Hidden” button to hide the element for the currently selected breakpoint.
     
   • The element will be visually dimmed in the canvas to indicate it’s hidden.
     
5. Repeat for Other Breakpoints (if needed): Switch between other breakpoints and adjust visibility as needed.

Testing Responsiveness & Fluidity

Use the Preview button to test your design’s responsiveness across different screen sizes. This helps ensure that your layout, typography, images, and other elements adjust smoothly across devices.

Accessibility ensures that websites and software tools are usable by a broader range of users, including those with disabilities. Droip’s Accessibility settings help improve the UI experience to ensure that the pages you design are flawless and user-friendly.

Accessibility Settings

The Accessibility settings are found on the right side of the Topbar, represented by the Accessibility icon. Clicking on it reveals the following options:

• Large Text: Increases text size for better readability, especially for users with visual impairments.
• Disable Motion: Turns off motion effects that might cause accessibility issues.
• Big Black Cursor: Replaces the default cursor with a larger, high-contrast black cursor.
• Big White Cursor: Replaces the default cursor with a larger, high-contrast white cursor.
• Magnifier: Adds a magnifying effect to the cursor, assisting users with low vision.
• Increase Contrast: Enhances overall color contrast to improve visibility.
• Mouse Pointer Highlighter: Highlights the mouse pointer, making it easier to locate on the screen.

Color Blindness Support

The Color Blindness tool allows users to adjust the display based on their specific color vision deficiency. Clicking on the dropdown provides the following options:

Red-Green Color Deficiencies:

• Protanopia: Red-blindness (absence of red cones).
• Protanomaly: Red-weakness (some shades of red are visible).
• Deuteranopia: Green-blindness (absence of green cones).
• Deuteranomaly: Green-weakness (some shades of green are visible).

Blue-Yellow Color Deficiencies:

• Tritanopia: Blue-blindness (absence of blue cones).
• Tritanomaly: Blue-weakness (some shades of blue are visible).

Full-Color Deficiencies:

• Achromatomaly: Partial color blindness (cones function poorly, vision relies on rods that do not process color well).
• Achromatopsia: Total color blindness (only shades of gray are visible).

Other Visual Impairments:

• Cataracts: Simulates blurred vision caused by clouding of the eye’s lens.

By prioritizing accessibility, Droip ensures an inclusive and user-friendly environment, allowing all users to interact with the platform seamlessly, regardless of their visual abilities.

The Audit feature in Droip, represented by a triangle exclamation icon, is a powerful tool designed to automatically assess your website’s accessibility. It helps ensure your site adheres to key accessibility standards, improving usability and SEO.

Audit Checks

The Audit feature evaluates the following aspects:

1. Alt Text Missing

This check identifies media elements (images, videos, etc.) that lack alternative text (alt text). When you hover over this feature, it highlights the affected media elements.

Why it matters:

• Alt text is crucial for visually impaired users, allowing screen readers to describe image content.
• It ensures accessibility compliance.
• Helps improve SEO by providing search engines with relevant content descriptions.

2. Link Missing

This check detects link blocks that do not have valid URLs assigned. Hovering over this feature will highlight the affected links.

Why it matters:

• Ensures smooth navigation for users.
• Prevents broken or incomplete links that could disrupt user experience.

3. Class Name Missing

This check counts how many elements are missing class names. Hovering over this feature will show the elements without class names.

Why it matters:

• Organizes your website elements efficiently.
• Simplifies styling and customization.
• Enhances maintainability and consistency across your project.

By using the Audit feature in Droip, you can proactively improve your website’s accessibility, usability, and SEO, making it more user-friendly for all visitors.

Using a variety of fonts is essential for web design, and the ability to upload custom fonts adds even more flexibility. 

To access the Font Library, click on the dropdown icon next to Droip’s logo in the Topbar.

Font Library Tabs

The Font Library consists of three main tabs:

1. Google Fonts

This tab provides access to a wide range of open-source fonts from Google Fonts. You can select and incorporate these fonts into your project for use in website text, branding elements (including logos), and more.

2. Installed Fonts

The Installed Fonts tab displays a list of all fonts that are already installed in your project. If you need to remove any fonts, simply click the Remove button located at the bottom-right corner.

3. Custom Fonts

This tab allows you to upload and use your own custom fonts in your Droip projects, giving you full creative control over typography.

📝 Note: You can also access the Font Library from the Typography panel under the Font dropdown.

How to Upload Custom Fonts

Follow the steps below to upload and integrate custom fonts into your webpage.

1. From the Font Library and select Custom Fonts.
2. On the right-hand side, you’ll find a link to the Font Squirrel Webfont Generator. Click on it.
3. Upload your .OTF or .TTF file to the Font Squirrel Webfont Generator.
4. Choose between Basic or Optimal settings. Advanced users can explore Expert settings.
5. Confirm your legal rights to use the font for web embedding by checking the eligibility box.
6. Download the Webfont Kit zip file.
7. Return to Droip and click Upload From Computer to upload the Webfont Kit.

Using Your Custom Fonts

To apply your uploaded custom fonts in your project:

1. Select the text element where you want to use the custom font.
2. Go to Style Panel > Typography.
3. Under the Font dropdown, your custom fonts will appear alongside the available fonts.

With the Font Library, you can easily enhance your design with a wide selection of fonts or upload your own for a truly unique look.

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

Adjust Canvas Size While Editing

You can easily modify the canvas size using the Scale Percentage dropdown. Available options include:

• Scale to Default: Resets the canvas to its default size.
• Scale Larger: Enlarges the canvas size.
• Scale Smaller: Reduces the canvas size.

Ruler and Element Visualization

Enhance element alignment and visibility with these options:

• Show Ruler: Enable or disable rulers for accurate alignment.
• Show Empty Elements: Highlight empty elements on the canvas.
• Show Element Edge: Toggle visibility of element edges for better structure visualization.

View Guides

Canvas Control allows you to enable Canvas View Guides, which are vertical bars spanning from top to bottom for precise alignment. Customize them with:

• Count: Set the number of vertical bars.
• Color: Choose the color of the guides.
• Gutter: Adjust spacing between the guides.
• Width: Set the width of each guide.

View Guides are particularly useful for ensuring a structured and well-aligned layout.

With Canvas Control, you can tailor your workspace for a seamless and efficient website development experience.

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.