The Variables feature in Droip allows users to define brand and global styles in one central location, simplifying the process of maintaining consistency across designs.
You can define variables for colors, font families, and sizes. These variables can then be applied seamlessly throughout the editor, ensuring effortless styling across different projects or sections of a website. When you update a variable value, that change is updated everywhere it’s used on your site.
There are several types of variables in Droip:
You can set color variables for:
You can set size variables for:
Any custom fonts (including Google fonts) uploaded to your site or Workspace are available when choosing a font family variable.
To open the Variables panel, click the Variables icon on the left sidebar.
If you want to group multiple properties (e.g., color, size, and font) together:
Droip's Variables feature allows mode-based customization, where you can define specific values for different modes (e.g., light mode, dark mode, theme variants, etc.). Modes are fully customizable and adapt to your needs.
You can create multiple modes depending on your design requirements and seamlessly toggle between them in the editor.
Once variables are created, you can apply them to elements in your design:
The element will automatically inherit the properties defined in the variable, ensuring consistent styling.
There are many contexts in which variable modes can be used like creating accessible color themes, like high contrast mode or different themes for color blindness, using color variables.
Once modes are configured, you can apply them in your design workflow:
Select the section/div/container in the editor. In the inline editor, locate the Variable icon to open the Modes dropdown. Choose the mode you want (e.g., Light Mode or Dark Mode). The entire section or container will inherit the properties of the selected mode.
To apply a mode to the entire page, click the Page option in the editor and select the mode from the dropdown menu.
Note: For page-wide applications, if a variable mode has already been set for a section, you must change it to inherit for the page-wide variable mode to take effect.
Whenever a variable is applied to a style, you'll see an unlink icon next to it. Follow these steps to unlink a variable:
Click on the element that has a variable assigned (e.g., text, button, background).
In the right sidebar, navigate to the style section where the variable is applied (e.g., Typography, Color, Background). Look for the unlink icon next to the variable.
Click the unlink icon to remove the variable binding. The property will now be independent, allowing manual adjustments.
Was this page 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.
Experience Droip in Action – Explore a live-built page and see the power of our builder in action.
Explore Live