Style Your Page
Start from a template's look, set your page's brand color, background, font pairing, style preset, block style, buttons and motion, then override colors and motion on any individual block.
Part of: Getting started
Prefer to read? The full guide is below. Every video in the series is on the video tutorials page.
Your page has one theme, and it applies everywhere by default. Open Page style in the editor to set it: every change applies immediately, and the live preview updates as you go.
Choose a template
Choose a template, at the top of Page style, opens the same template library new pages start from. Picking one here applies its look only: brand and text color, font pairing, background, block style, buttons and motion. Your blocks and everything written in them stay as they are.
It’s one change, so a single Undo brings your previous look back. The preview in the library shows your own blocks under each template’s look before you apply it. Templates marked Pro use a Pro feature, such as a photo background or a custom font.
Brand color
Brand color sets the primary color used for buttons and accents across your page. Pick one of the sixteen named swatches, type your own hex value, or leave it on Auto and Keepp derives a sensible default. Once a color is set, Clear puts it back to auto.
Background
Choose one of four background types:
- None: no background, the plain default.
- Color: a single flat color.
- Gradient: two color stops (From and To) blended at an angle you set. The angle defaults to 180, which runs the blend from top to bottom.
- Image: upload a photo, or click Pick from gallery to choose one of Keepp’s backgrounds. Gallery backgrounds are all tall and made for a phone screen, and you can filter them by mood, color, light or dark, and style. If you upload your own, use a tall, mobile-friendly (portrait) image. It stays fixed in place while the page scrolls. Background images are a Pro feature.
Image veil and focal position
A photo background brings two more controls with it:
- Image veil: None, Light, or Strong. The veil sits between your photo and your text. Leave it on None and the editor warns you that page text may be hard to read over the image; Light or Strong tint the photo so your words stay legible.
- Focal position: a three-by-three grid choosing which part of the photo stays in view, from left top through center center (the default) to right bottom. Reach for it when the subject of your photo sits off to one side and the default crop cuts it off.
Text color
A single Text color applies across the page, with the same auto option as brand color. Leave it unset and Keepp picks a readable default against your background.
Font pairing
Below text color is the font pairing control. That’s covered in full in choose a font pairing: in short, it’s a page-level choice between Default (your page’s current look, exactly as it renders today) and one of seven curated pairings.
Style preset
A preset is a quick starting point for how your blocks and buttons look. Each one has a short description in the list, such as Soft, Crisp, Glass or Brutalist. Picking one sets every control in Block style and Buttons below. You can then change any of them, and the preset reads Custom once you do.
Block style
These settings change every card and link on the page at once.
- Corners: a slider from square to very rounded. Smaller parts inside a card, like link icons and input fields, follow in proportion.
- Shadow: Soft (a diffuse shadow) or Hard (a solid offset in your text color). Depth sets how strong it is, and 0 means no shadow.
- Border: an outline around each card and link. At 0 there’s none. Set a width and you can choose its color: Subtle, Brand or Text.
- Fill: Solid, Translucent (your background shows through) or Glass (translucent and blurred, which looks best over a photo background). Fill opacity sets how much shows through.
- Spacing: the gap between blocks.
Buttons
- Style: Filled with your brand color, Outline, Soft (a light tint of your brand color) or Hard (filled, with a solid offset shadow).
- Button corners: Square, Match (the same curve as your cards) or Pill (fully rounded ends).
Motion
The Motion section, below Buttons, sets how your page moves. Motion effects are a Pro feature: you can pick and preview them on any plan, and publishing them needs Pro.
- Entrance: None, Fade, Slide up or Zoom. Blocks animate in as visitors scroll down to them, and blocks that arrive together ripple in one after another.
- Hover: None, Lift, Grow or Glow, for everything a visitor can click: links, cards, buttons, menus, forms and social icons. Hover only applies on devices with a pointer, like a laptop.
Picking an entrance plays it once across the editor canvas so you can see it. Hover shows in Preview draft and on your live page.
Every clickable thing on your page also gives a small squash when it’s tapped or clicked. That isn’t a setting; it’s always on. Visitors whose device is set to reduce motion see no entrance, hover or attention movement at all, and a tap gives a brief dim instead of the squash.
Per-block overrides: colors and motion
Individual blocks (cards, links, headers, text, and more) carry their own background and text color fields in that block’s own settings. This is the one place styling isn’t page-wide: a block with its own colors keeps them even after you change the page theme.
A block’s Style tab also has its own Motion section (every block except Nav tabs and Spacer):
- Entrance: Same as page (the default), None to keep this block still, or its own Fade, Slide up or Zoom.
- Attention: None, Pulse, Shine or Wiggle, to draw the eye to this block. Repeat plays it Once, when the block first comes into view, or on a Loop with a long pause between plays. Use it on one or two blocks, like a booking card or a sign-up form, so they stand out from the rest.
Picking an entrance or attention plays it once on that block in the editor.
Font is deliberately left out of this. A block can have its own colors, but not its own typeface: font pairing stays a whole-page decision, so your page never ends up with three different faces fighting each other.
If you’ve set colors on several blocks and want to start over, Page style shows how many blocks currently have overrides and gives you a Reset all to theme button to clear them all at once.
What’s not there
There’s no custom CSS, no per-block corner or shadow setting, and no per-block font. The complete set of page-wide style controls is brand color; background: a flat color, a gradient’s two stops and angle, or an image with its veil and focal position; text color; font pairing; block style (corners, shadow, border, fill and spacing); buttons; and motion (entrance and hover). Add per-block background and text color, entrance and attention to that, and you have all of it.