Skins
The five looks every visual widget ships with, how a skin themes a whole page consistently, and why your Style tab controls always beat the skin.
Every widget in the addon that draws something visual ships with five skins. Choosing one is usually the single highest-leverage decision you make: it themes cards, filters, sliders, chips, the stepper and the summary at once, so the page reads as one design instead of a pile of widgets.
The five
| Skin | Character |
|---|---|
| Default | Neutral and quiet. Inherits as much as it can from your theme's typography. The safe choice when your theme already has a strong identity. |
| Sofia | Editorial and light. Hairline dividers, generous letter-spacing, a stretched call to action on each card. |
| Dayana | Warm off-white. Softer contrast, rounded plaques, a warm wash behind the content. |
| Maya | Rose-tinted. The gentlest of the five; muted browns on a warm white. |
| Alexandra | Dark and gold. A genuinely dark design — near-black canvas, pale gold accents, glowing borders. |
Skins paint their own canvas
This matters more than it sounds. A skin is not only chip and card colours; it also carries the background the design was drawn on.
Alexandra is the clearest case: it is a dark page design, not a dark widget on a light page. Its section titles are pale gold, which is legible on near-black and unreadable on white. So the widgets that carry a skin paint that surface themselves — pick Alexandra and the composer, the filters block and the Ring Builder draw their own dark canvas with the right padding and radius.
The light skins do the same with their own, subtler washes. Default and Sofia stay transparent so they sit on whatever your theme provides.
Your controls always win
The skin sets defaults. Elementor's Style tab overrides them, every time, on every skin. That is a deliberate rule, not an accident of specificity — the addon's CSS is written so a control you set is more specific than any skin rule it competes with.
Practically: pick the skin closest to your brand, then change the handful of things you disagree with. You are not choosing between "use a skin" and "style it yourself".
Where the skin selector lives
Most widgets have it as Skin at the top of the Content tab. Two places are worth knowing:
- Diamond Loop and Setting Loop call it Card skin, and it only applies when the card source is "Pre-designed cards" — a loop rendering the core theme's card or your own Elementor template gets its look from there instead.
- The Ring Builder composer has one Skin control that themes every part it renders: stepper, filters, cards, settings step and summary. That single control is why the composer produces a coherent page rather than five widgets that happen to be adjacent.
Mixing skins
You can. Nothing stops you putting Sofia cards under Alexandra filters, and the addon will render exactly that.
It rarely looks intentional, though. The skins were drawn as complete designs, so their type scales, spacings and accent colours are internally consistent and not designed to be interchanged piecemeal. If you want one part to differ, changing it through the Style tab usually reads better than borrowing another skin's look.
Accessibility note
All five skins are checked for text contrast against their own canvas at the sizes they ship with, and each passes the WCAG AA threshold for normal text. The tightest is Maya, whose muted brown on warm white sits comfortably above the minimum.
If you override colours in the Style tab, that guarantee becomes yours: a pale accent on a pale background will fail regardless of which skin it started from.