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.