Custom Properties

Custom Properties are styles you can add to items/elements in addition to the standard ones available in the Design panel. They allow you to control the appearance of items/elements almost without limitation.

How to Add a Custom Property

To add a custom property to an item/element:

1. Select the item/element, then scroll down Design panel to find the Custom Properties section

2. Click on the “+” — a new line for the property will be added

3. Select the desired CSS property from the list or enter it manually. You can start typing the name to quickly search and then choose the property from the list.

You can only use properties from the predefined list.

4. Enter the desired property value along with the appropriate units of measurement (if required for that property). For example: 10px.

If you haven’t entered a property value or entered an invalid one, a warning icon will appear.

If the value is entered correctly and there are no warning signs (icons), it will be applied to the item/element.

Features of Custom Properties

1. If a property is defined in Custom Properties, it becomes uneditable in the Styles panel and is overlaid with a gray bar containing a tooltip.

2. The value set in Custom Properties overrides the one set in the Styles panel.

For example, if you first set the block’s width to 500px in the Styles panel, and then add a custom property width: 700 px, the blpck’s width will be 700px.

3. You can add multiple custom properties to a single item/element.

4. Customs from Custom Properties can be added both to local styles and to a user/custom class.

5. Removing a property works the same way as with other styles in the right-hand panel. You can either click the "–" icon or hold down the Shift key, hover over the property, and click Reset.

How to Use Custom Properties in Practice

With the help of Custom Properties, you can implement many design features that aren’t possible using the standard style panel alone.

Examples:

• aspect-ratio — sets the aspect ratio of an item/element and allows the browser to calculate the missing side based on the size of the known one.
• clip-path — allows to define custom shapes for clipping an item/element.
• float — used for positioning an item/element and allows text to flow around images and blocks.
• units of measurement like dvh, lvh, svh и др. — are very useful for responsive design.

As a result, if you need to apply missing styles to an item/element, there's no need to use Embed widget or custom page code — you can simply add the necessary properties in Custom Properties section. This makes layout editing and style adjustments much easier — no need to dig through the general code, just open the element’s settings.

Let’s take a look at how to use Custom Properties with a practical example.

How to Make Text Wrap Around an Image

Let’s take a closer look at the following case: we have an image and a block of text, and we want the text to be evenly positioned to the right and beneath the image.

This can be done by creating two separate text blocks — one placed to the right of the image, and another below it. However, the text won’t flow as a single, continuous block, which can lead to complications during responsive design or when editing content — you’ll have to split the text into two parts every time.

The same effect can be achieved much more easily and conveniently using the float property:

1. Select the image and the float property with the value left.

This means that the image will be aligned to the left, and the text will flow around it on the right.

2. Select the text and set its display to block.