# Styling elements

> The style panel — typography, colors, layout, spacing, borders, shadows — and how responsive (per-viewport) editing works.

Source: https://knowledge.estage.com/visual-editor/styling/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

---
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.

:::note[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.