Style your pages
You style every element from its own settings: colours, backgrounds, motion and widths, without writing CSS. The pages in this section each cover one design goal. Find yours in the table, then follow that page.
| I want to ... | Use | Needs |
|---|---|---|
| use my brand colours for text, borders and backgrounds | Colour and branding | The Style panel |
| make the main call to action stand out | Button styles | A Button element |
| group content in boxed cards | Card styles | A Card element |
| fill a section with a photo, a gradient or a video | Backgrounds | A section; a photo in the media library |
| fade or slide content in as visitors scroll | Animation tab | The Animation panel; Preview to check |
| change an element while the pointer rests on it | Hover effects | The Hover style panel |
| plan column widths that add up | Bootstrap grid | A row |
| let a section run from edge to edge | Full-width layouts | A section |
| show or hide content on phones, tablets or desktops | Responsive design | The HTML classes field |
Which should I use
Style or Background effects: any element can get a colour or a photo in its Style panel. Gradients, parallax and video need a section. Only sections have the Background effects panel.
Hover style or Animation: a hover style changes a colour or a shadow while the pointer rests on an element. It changes back when the pointer leaves. An animation plays a motion, such as a fade or a slide. It starts when the element comes into view or is clicked.
Bootstrap grid or Full-width layouts: the grid decides how wide the columns in a row are. Full width decides whether the whole section's content stays in a centred box or spans the window.
Where the design settings live
Hover an element and open More > Settings. Its settings sit in panels:
- General: the element's own options, plus HTML ID and HTML classes.
- Style: spacing, colours, background image, borders, font size, opacity and drop shadow.
- Hover style: most of the same visual settings, applied while the pointer rests on the element.
- Animation: entrance and exit effects. Columns do not have this panel.
- Background effects: gradients, fixed and parallax photos and YouTube video. Sections only.
What's next?
- Backgrounds: start with the biggest visual change, a section background.
- Element settings: every panel and field in the settings, one page each.
In this section
- Colour and branding: Apply your brand colours to sections, text and buttons with theme swatches and colour classes
- Button styles: Pick button types, outlines, sizes and widths so your main call to action stands out
- Card styles: Give cards a colour scheme, rounded corners, shadows and borders that match your brand
- Backgrounds: Fill a section with a colour, a photo, a gradient, a parallax image or a YouTube video
- Animation tab: Fade, slide or zoom elements in as visitors scroll, hover or click, with the Animation panel
- Bootstrap grid: How column fractions map to the 12-column grid, and how to give a row another layout on tablets or phones
- Full-width layouts: Let a section's content run edge to edge, or keep it boxed while the background fills the window
- Responsive design: Choose column layouts per screen size, mirror rows and hide elements on phones or desktops
- Hover effects: Make an element change when the visitor points at it with the Hover style panel