Styling elements
The style panel — typography, colors, layout, spacing, borders, shadows — and how responsive (per-viewport) editing works.
Select an element in the preview and the style panel opens on the right. Which controls you see depends on what you selected — text gets typography, images get image controls, containers get layout.
What you can change
| Section | Controls | Shown for |
|---|---|---|
| Typography | Font size (XS–9XL presets or custom), weight (Thin–Black), line height, letter spacing, alignment, decoration, transform | Text, buttons, links, forms |
| Colors | Text color, background color (color pickers) | Most elements |
| Layout | Display (block/flex/grid), direction, justify, align, wrap, overflow | Containers |
| Size | Width, height, min/max | Most elements |
| Spacing | Padding, margin, gap — per side | Most elements |
| Border | Width, color, radius, style | Most elements |
| Shadow | Presets from none to 2XL | Containers, images, buttons |
| Image | Source, object fit, opacity | Images |
| Link | URL (href), open in new tab | Links & buttons |
| On click | What clicking does — navigate to a page, scroll to a section | Interactive elements |
| Filters | Blur, brightness, contrast, grayscale, saturate, sepia | Images and more |
| Effects / Transition | Opacity, transition duration & easing, cursor | Most elements |
| Visibility | Hide on desktop / tablet / mobile (checkboxes) | All elements |
| Props | A component's own options as labeled fields | Components |
Changes apply to the preview instantly and are saved automatically — no Save button. Each section has a Reset that removes your edits for that group of properties.
Tip
Selected several elements of the same type (Shift+click)? Every style change applies to all of them at once.
Responsive editing — viewports
The toolbar above the preview has a viewport switcher: Desktop, Tablet, and Mobile. It resizes the preview and controls which screens your style edits target.
Genesis is desktop-first:
- Edits made in Desktop view are the base — they apply to all screen sizes.
- Edits made in Tablet view override the base on tablet and smaller.
- Edits made in Mobile view override everything on mobile only.
So the workflow is: style your page in Desktop view first, then switch to Tablet and Mobile and fix only what needs to differ — a smaller font here, tighter padding there.
Example
Set a heading to 60px in Desktop view → it's 60px everywhere. Switch to Mobile and set it to 36px → mobile shows 36px, tablet and desktop keep 60px.
The style panel always shows the values for the viewport you're currently on, and a Reset in a given viewport clears just that viewport's overrides.
Hiding elements per viewport
Hide an element on specific screens — say, a heavy banner on mobile — with the Visibility checkboxes at the bottom of the style panel: Hide on desktop, Hide on tablet, Hide on mobile. (Asking the AI — "hide this on mobile" — works too.)
- In the builder preview, a hidden element stays visible but dimmed with a red dashed outline, so you can still find it, select it, and untick the box to bring it back.
- On the published site, it's completely invisible.
When a style edit can't be done instantly
Occasionally a tweak is too structural for the instant path (the element's code is shaped unusually). Genesis then hands your change to the AI automatically — you'll see it processed as a quick chat action instead. Nothing for you to do differently.