This article is also available in:

Adding outline to elements

In the settings of certain elements, you can enable outline along the contour and customize the style, color and width of the line that will be used to outline the element.

Note: Outline can now be added to the following elements: shape (square and circle), image, collection items, and columns.

Content:

Adding outline to elements
Adding outline to collection items and columns
Customization of the outline

Adding outline to elements

In order to apply an outline to a shape or image, you should:

Open element settings:

Go to the Style tab, scroll down the menu and activate the Outline switch:

After this, a standard outline will appear in the selected element:

Adding outline to collection items and columns

Outline for collection items

To enable outline function in collection items, you need to open the collection item settings, select the Style tab and activate the Outline switch:

Important: Adding outline to collection items is only possible if they have background set or presets activated. If the “Multicolor” preset was selected (separate background for each element of the collection), then the outline will be applied only to those elements that have a background set.Note: If you created a site using a template that already had outline in the collection elements, the outline applied in this instruction will take precedence (display instead of the old one).Tip: Once the Outline switch is activated, it will automatically be added to all items in the collection.

Outline for columns

The outline function is activated in the column settings in the same way as in the collection items. But at the same time, the outline is applied separately for each column.

Customization of the outline

The line around the element can be customized to your preferences:

Selecting width of the outline:

Tip: Default width is 2 pixels, maximum width is 30 pixels.

Choosing outline style:

There are three styles to choose from: solid, dashed, and dotted.

Note: In dashed and dotted styles, the space between dashes/dots is transparent. That is, the background behind the element will be visible between each line or stroke point, not the element itself.Tip: After adding outline, the visible part of the element will become smaller, because the outline does not increase the pixel size of the element. If you are adding extensive outline, you can add more if necessary so that, for example, the same part of the image is visible that was visible before you applied the outline.

Selecting outline color:

You can choose one of the standard site palette colors or any other color at your discretion.

After setting all the parameters, the outline may take, for example, the following form:

Don't forget to publish the site to apply the recently made changes.

For advanced users: Technically, the outline is a border that is added to the inside of an element without increasing its size. That is, the element to which the outline is added has a CSS property box-sizing with a value of border-box.

Updated on: 03/25/2024

Was this article helpful?

Thank you!