The skin library allows you to quickly apply a ready-made layout appearance to a compatible row, position, or module, and then fine-tune it for a specific placement.
What you will learn
- Open the library for a selected element.
- Search and filter for a suitable skin.
- Apply a skin and inspect the result.
- Revert an unwanted change using history.
The library adapts to your selection
First, select an element on the canvas. The editor determines its type to present skins that make sense for that element. Because of this, the library is not a single cluttered list of every possible item.
Inside, you will find system skins provided by the application and a My skins section containing your own custom entries. The list can be searched and filtered by type or category. When dealing with larger quantities, skins load progressively in batches, so a brief delay while loading additional cards is normal.
Step-by-step workflow
- Click on the row or position whose appearance you want to change.
- In the right panel, click Select skin. If you do not see this option, the selected element does not support this library.
- Browse system items or switch to your custom skins in the library. Use search and category filters to narrow down options.
- Select a suitable design and confirm its application to the active element.
- Check desktop, tablet, and mobile previews. If needed, adjust one or two properties in the inspector for that specific location.
- Wait for the automatic save to complete. If the outcome is not ideal, use the Undo step or choose a different skin.
What happens after applying a skin
The skin populates the visual styling settings of the selected element. It does not alter its text, module parameters, or content. You can further adjust the applied result in the inspector, allowing you to tailor a variant for that specific section without modifying the original item in the library.
Start with a similar skin
You do not need to find a perfect ready-made match. Choose the closest baseline and adjust color, spacing, or shadow. It is much faster than configuring every detail from scratch.
Post-application inspection
The same skin can look different depending on its surroundings. A white card stands out clearly on a dark background row, but on a white row without a border, it can blend in completely. Similarly, generous inner padding creates a spacious look on desktop, but on a small mobile device, it can leave very little room for text.
Therefore, do not check only the selected element after applying a skin. Inspect neighboring modules, the total height of the row, and link or button contrast. Then toggle to the clean Preview, which hides editing frames. Only this view reveals whether the card fits naturally into the page. If it does not, adjust the specific instance in the inspector; this will not alter the library original.
After making major adjustments, wait briefly for the auto-save to finish. Switching view modes primarily serves to evaluate the visual result. Only set independent responsive values where the inspector explicitly provides controls for them.