Shapes, effects and animations
Site width, corner rounding, text size, heading weight, icon weight and entrance animations: what each setting does, for the whole site or block by block.
Shapes
Open Theme › Shapes in the sidebar. The settings apply to the whole site, and the page updates while you change them: you see the effect straight away.
- Site width (four buttons: Narrow, Standard, Wide, Full): the maximum width of the content, header and footer on a large screen. “Standard” is the width the style intends; “Full” fills the whole window.
- Button roundness (a slider, from 0 to 32 px): at 0, buttons have square corners; the higher you go, the rounder their corners, up to a pill shape.
- Card & media roundness (a slider, from 0 to 40 px): the same for cards, images and videos.
- Text size (a slider, from 88% to 120%): enlarges or shrinks all the text on the site at once, headings included, keeping their proportions. 100% is the size the style intends.
- Heading weight (a slider, from 300 to 900): how thick the letters of your headings are, from light (300) to very heavy (900). Body text is not affected.
The Back to style defaults button puts all these settings back the way the style intends.
One passage rather than the whole site
These sliders set the whole site. For a single passage, select it on the page: the formatting bar that appears turns it into a heading (Heading 1, 2 or 3), makes it bold or aligns it. Colours follow the section’s palette: change it in the Section tab, see Sections.
Site-wide effects
In Theme › Effects:
- Icon weight: from Hairline to Bold, the stroke thickness of the icons on cards, key figures, timelines and buttons;
- Entrance animations: turn on the switch, then choose an animation (fade, slide, zoom, reveal…): blocks then appear this way as the visitor scrolls down the page. A Preview replays it before your eyes. A single animation applies to the whole site, to keep a consistent feel.
Visible on the site, not in the editor
Entrance animations play on the site, in the preview and once published, never while you are writing: the editor stays calm.
A block’s effects
Some blocks have their own effects, in the Block tab of the right-hand panel. For example:
- Title animation: Rising words, Words coming into focus or Decode, plus Rotating words to cycle through several words in a heading;
- Scroll effect: 3D straighten, Zoom, Parallax or Reveal;
- Hover effect: Spotlight following the pointer or 3D tilt.
A block’s animation setting also lets you depart from the site’s animation for that block alone.
A section’s effects
Animated ambience, heading entrances, statement text, stacked sections: these effects are set section by section, see Sections.
In moderation
One or two striking effects per page make more of an impression than an animation on every block. Keep the most spectacular ones for the home page.