Layers Panel

Symbols in Droip let you turn any element, along with its child elements, into a reusable component.

Perfect for repeating sections like headers, footers, or CTAs, Symbols help maintain consistency across your site while simplifying updates. Edit once, and the changes reflect everywhere.

Creating a Symbol

There are a few easy ways to create a Symbol in Droip:

Right-click on any section or component and select Create Symbol.

Or, Select the component, then click the horizontal three-dot menu (⋯) at the top of the right panel, and choose Create Symbol.

Or, From the Layers panel, right-click the section or component and select Create Symbol.

Then:

Name your Symbol.
Choose a folder to organize it within the Symbols panel.

Your new Symbol will now appear in the Symbols panel, ready for reuse.

Managing Symbols

In the Symbols panel, each Symbol includes a horizontal three-dot menu beside its name. Click it to:

Edit the Symbol
Rename it
Delete it
Set it as a global header or footer

Editing a Symbol

To make changes to the core version of a Symbol:

Click Edit from the Symbol menu.
You’ll enter main mode, where edits apply globally.
All instances of the Symbol across your site will instantly update.

Reusing a Symbol

To reuse a Symbol, simply drag it from the Symbols panel into any section of your page.

That’s it—it stays synced with the original.

Customizing a Symbol Instance

Need a unique version of a Symbol on a page? You have two options:

1. Detach from Symbol

Right-click the Symbol on your page.
Select Detach from Symbol.

The instance becomes a standalone element, fully editable.

💡 Note: It will no longer be linked to the main Symbol or other instances.

2. Update content without affecting the parent symbol

Double click on the symbol and customize the content of the symbol instances like text, color, and font as needed without affecting the parent symbol.

Final Thoughts

You can use Symbols in two powerful ways:

Identical Content

Edit the main Symbol and automatically update every instance.

Unique Content

Detach a Symbol to customize it individually including style and content but it will no longer be linked to the main Symbol or other instances.
Double click on the symbol and customize only the content of the instances like text, color, and font as needed without affecting the parent symbol.

Layers represent the individual elements that make up a web page, stacked on top of one another. This allows you to easily access and manage all the elements used to create the page.

By utilizing layers, you can customize every aspect of your page at any time, providing a streamlined and efficient way to work within the editor.

How to Use Layers

To access the Layers in Droip:

Locate the Layers icon on the left sidebar.
Open the Layers tab to view the organization of sections and their corresponding elements on the current page.
In the Layers Panel, you can manage all the elements present on your canvas.

Each element in the Layers Panel can be interacted with for more control over your page’s design:

Three-Dots Menu: Click beside each element to expand or collapse sections, rename elements, or delete them.
Visibility Toggle: An eye icon is displayed next to each element. Click on it to hide or display the element on the page.

Layers Panel Features

Visibility Toggle: Control the visibility of elements by enabling or disabling them with a simple click.
Reordering Layers: Drag and drop elements to change their order in the stacking sequence.
Rename: Click the three-dot menu and select the Rename option to modify an element’s name.
Delete: To remove an element, click the three-dot menu and choose Delete.

This layered structure makes it easy to manage, customize, and organize the elements of your page efficiently within the editor.