Theme and design
Colours, brand colours, fonts (also Google Fonts and Adobe Fonts), corners, page width, spacing and seasonal effects.
Open the builder and choose Theme at the top. Changes show in the preview right away and go live when you publish.
Colours
| Setting | Used for |
|---|---|
| Background | The page behind your blocks. |
| Surface | Cards and panels. |
| Text and Muted text | Normal and quieter text. |
| Accent | Buttons, links and highlights. |
| Accent text | Text on accent-coloured buttons. Pick one that reads well on the accent. |
Brand colours
Under Brand colours you keep up to 12 colours of your brand, each with a name (for example Orange or Ocean blue). They show as small quick picks under every colour setting of your blocks, so a section, a card or a button gets exactly your colour in one tap. The Section edges use them too.
The assistant knows them as well: "make the buttons orange" uses your own Orange.
Fonts
Choose a font for the text and, if you like, a different one for headings. The built-in fonts and the web fonts are served by Fwdia itself: no requests to other companies and no cookies.
On your site you can also use a font from Adobe Fonts or Google Fonts. Visitors' browsers then load that font from Adobe or Google, which see their IP address like with any web request; no cookies are set. Mention it in your own privacy page. See the cookie policy.
- Google Fonts: pick one in the Google Fonts part of the font list (Poppins, Lato, Sen, Barlow, serifs such as Fraunces or EB Garamond, handwriting fonts and more).
- Adobe Fonts: choose From my Adobe Fonts kit, then fill in the kit ID and the font family names. In Adobe Fonts, open My Adobe Fonts > Web Projects: the kit ID is the short code in the embed code (use.typekit.net/abc1def.css), the family names are listed under "CSS" (for example proxima-nova). Add your website's address (your own domain, and fwdia.com) to the web project's domains, or Adobe won't serve the font.
These fonts load right away with the page, so your text never jumps from one font to another.
Shape and layout
- Corners: from square to very round, for buttons, cards and photos.
- Button shape: rounded like the corners, a pill (fully round ends) or square.
- Heading weight (under fonts): Automatic, Regular for display fonts that are already bold by design (or an Adobe kit with one weight, which the browser would otherwise thicken artificially), or Bold.
- Page width: Narrow (560px, phone-sized like a bio page), Medium (860px), Standard (1140px, a usual website), Wide (1320px) or Full window (the whole screen, with some room at the sides). The wider ones give your website colour bands and edge-to-edge photos (use Section for bands). Sites made before keep their width: Narrow, Medium and Standard are the old narrow, wide and full.
- Header width: the shared header (announcement bar, menu bar) can use more of the screen than the page: Same as the page, Wide (1320px) or Full window. Its bars always run from edge to edge; this sets where the logo and the links stop.
- Spacing: how much room between blocks.
Header and the first block
Full-width bars in the shared header (an announcement bar, a menu bar, an edge-to-edge band) sit right against each other. When the page starts with an edge-to-edge band or photo right under such a bar, there is no white space between the header and that band: it hangs from the header, as it hangs from the top of a page without a header. To get the same with a header that ends otherwise, switch on No gap above on the page's first Section.
Movement
Every block has its own Movement group at the bottom of its settings (closed until you open it, just above Advanced):
- Turn while scrolling: clockwise or counter-clockwise, slow, normal or fast. Made for stickers, shapes and badges (an image block turns its picture).
- Attention: a short wiggle, bounce or pulse every few seconds, for the one button you want clicked (on a Menu with "last link as a button", that button moves).
Both show in Preview and on your site, not while you edit. Visitors who prefer reduced motion see neither. Use them sparingly: one attention button per page is plenty.
The Fwdia badge
On Pro and Business, Theme > Fwdia badge hides the small "made with fwdia" badge at the bottom of every page (the same switch as in Settings > Privacy & branding). Unlike the rest of the theme, it changes your live site right away, without Publish.
An accent font for names and signatures
Under Theme > Typography > Accent font you can pick a third font, for example a handwriting font from your Adobe Fonts kit. A Heading block then uses it when you set its Font to Accent font: handy for a signature under a welcome text, or a short quote. Left on "None", such headings use the heading font.
Seasonal effects
Add a light effect such as snow, Christmas, new year, Valentine, spring, Easter, autumn, Halloween or confetti: always, or only on a schedule (for example in December). Visitors who prefer reduced motion don't see it.