Your site's look —template, layout, colours, fonts, animation and the widget style— is changed in My page › Style tab, on any page. What you change here applies to your whole site and is saved straight away, without pressing Update. The layout shows with Home chosen in “Page”. The hero background and each page's background aren't here any more: they're in the settings of their part, in the preview (see The hero background).
You can also ask wi, in the WI tab: “switch the site to shades of green”, “a more elegant font”, “make it like Linktree”. Then you fine-tune it here.
The template#
At the very top, two blocks side by side choose the template, which decides how the hero and the widgets are laid out:
- Hero — a single screen: the photo (or your colour) edge to edge, the glass widgets on top, and the footer revealed underneath. It has an extra slot at the top right for a widget.
- Grid — a grid: the photo and the widgets wherever you want, at their size, and the footer in blocks as you scroll. On mobile it has its own order.
Both carry the same content: only the layout changes. Switching from one to the other doesn't delete anything: Hero's layout and Grid's grid —where each widget goes and at what size— stay saved, and when you come back everything is as you left it. What they share —your widgets, the photo, the texts, the footer— is one and the same: a widget you remove in one won't show in the other either.
The layout#
Under the template, the “Layout” drop-down: how your hero page is put together. Each option has its own sketch.
On Hero there are seven. Changing the layout doesn't touch your widgets: only how they're placed.
| Layout | How it looks |
|---|---|
| Default | The title floats halfway up and the widgets sit at the bottom |
| Title at the bottom | The widgets at the top and the title pinned to the bottom of the hero |
| Centred | Title centred and the widgets in a centred row below it |
| Links | Like Linktree: the title in the centre and the widgets one below the other |
| Column | The title at the bottom left and the widgets stacked down the right |
| Mosaic | The widgets wrap onto new lines instead of scrolling sideways: all in view |
| Listing | Like your Google or Booksy listing: your photo on top, your name below and the widgets in full, one after another |
With Links and Column you also choose “Columns”: “One” or “Two”. On a phone, always one. If the widgets don't fit on the screen, on desktop the list scrolls over the still photo; on a phone, the page gets longer.
On Grid, each layout (Classic, Mirror, Showcase, Banner, Magazine, Corner, Mosaic, Poster, Columns or Card) is shown already filled with your widgets, and the one at the top is the “Best fit” for what you have. After that, each piece is moved and resized on the site itself.
The hero background#
It isn't in Style any more: the background goes in the settings of its part, in the My page preview.
- The cover's, with Home selected: move your mouse over the cover and press “Edit the cover” (on the Grid template, the photo's pencil). In the window, the “Cover background” block. It's the one the cover uses and, unless you give them another, the cards of your other pages.
- A page's (Services, Contact…): move over the left-hand card and press “Edit the page”. At the bottom, “Card background”.
The cover's drop-down has:
- “Photo” — your hero photo: upload it, search the image library or paste its link.
- “Video” — a video of yours, looping and silent. It's on Grow; while it loads, and for anyone who prefers less motion, the photo shows instead.
- “Colour”, “Linear gradient”, “Radial gradient”, “Conic gradient” or “Colour mesh” — the same control as the widget background: its colours next to the drop-down (one to four) and, for linear and conic, the “Angle”.
Only what goes with your choice shows underneath. With a photo or a video, “Blur” softens the image, from 0 to 40 px. With a colour, “Opacity”, from 0 to 100 %: below 100 the page behind shows through —its background, its animation—. The title always stays readable: on a light colour we darken it just enough.
Switching between them doesn't delete anything: your photo, your video and your colours stay for when you come back. On Grid, “Gradient over the photo” also turns on or off the veil that helps the headline read. On Hero, “Hero tone”: “Dark” (the usual), “Light” —a veil in your background colour and dark text— or “Automatic”, which follows the colour (with a photo, dark). And at the end, “Animated background: code”: code characters drifting slowly behind the whole page that now and then light up blue; still for anyone who asks for less motion.
Each page, its own background. “Card background” starts at “Same as the hero” (the usual). It can have its own “Photo” —without one, it uses the hero photo— with its blur, or a colour or gradient with its opacity. Only that page's card changes.
All of this is saved straight away, like Style.
Colours: themes#
“Colours” is a folded drawer, like the font ones: closed, it says which theme you have and its colours —with an amber dot if some contrast falls short—; press it and it opens in place. At the top, the drop-down of ready-made themes, each with its colours and its font pair:
Essential, Modern, Zen, Lime, Forest, Sunset, Amber, Indigo, Ocean, Stone and Candy.
If you've adjusted a look you like, “Save” keeps it as a theme of yours, with the name you give it, so you can go back to it. Up to twelve of your own themes fit.
Your own colours#
Under the themes you change each colour by hand, by pressing its square —pick it in the picker or type its code—:
- Main and Accent — your brand's.
- Text.
- Open and Closed — the ones in the opening hours widget.
- Footer background and Footer text.
“Reset” goes back to the theme's colours. If some text won't read well on its background, we warn you about the low contrast before you publish it.
Fonts#
One folded drawer, “Fonts”, because you choose them once and hardly touch them again. Closed, it shows your two fonts; press it and it opens in place, and it closes when you click anywhere else. Inside, from top to bottom:
- “Title font” — headline fonts chosen because each has a match. Pick one and the text font switches to its match by itself. With it, the “Title size” (XS, S, Normal, L or XL) and the “Heading weight” (Regular, Medium or Bold: 400, 500 and 600).
- “Text font” — the one that matches your title is tagged “Recommended”. You can pick another: it's your site.
- One from Google Fonts, by pasting its link: “For the title” or “For the text”.
The fonts in the list are served by us, from your own domain: they always show and need nobody's permission. A font pasted from Google Fonts loads from Google, so it only appears once the visitor accepts cookies; until then, your site shows a similar font.
Corners and animation#
- Corners: a slider, from square to very round, in “Widget style”. It affects buttons, widgets and photos.
- Animation: the last block. “On” or “Off”; Gentle, Slide or Scale; and its “Speed”: Slow, Normal or Fast.
Widget style#
The “Widget style” block, just before the animation, changes how they all look at once: their background (glass, colour or gradient), liquid glass, shadow, border, “Labels as pills” (with their own colour, if you like), the “Thick stroke”, the hero “Stickers” (on Hero), opacity, blur and corners. Below the corners, “Space between widgets”: from 0 to 16 px between the widgets and the cards on the page; you see it as you move it and it's saved when you let go. See The glass. If you want one without that colour —the map, the FAQ—, turn off “Use the widget style” in its pencil: it keeps the glass from Colours.
Making it show on your site#
Even though it's saved straight away, the new look is in your draft. Press “Publish changes” for your customers to see it. If you change your mind, History keeps how it was.