Skip to main content

Using Custom CSS in the Builder

Where your CSS applies

  • Add CSS in the Website Custom CSS box at the bottom of the Theme tab in the website builder.

  • The Website and Form builders each have their own Custom CSS box at the bottom of the Theme tab (Website Custom CSS and Form Custom CSS). If Sync website, form, and email theme is turned on, your theme styles stay matched across your website, form and emails.

Targeting with Autocomplete (how it works)

  1. Click into the CSS editor.

  2. Type [ and begin typing data….

  3. Use the dropdown to select a target:

    • Block IDs — e.g., [data-block-id="0196a250-9d65-714b-b7a7-52f57501c430"]

    • Block types — e.g., Hero, Image (applies to all blocks of that type)

    • Data fields — e.g., title, description (targets content areas inside blocks)

Best Practices

  • Prefer specific targets. Use Block ID when you only mean to affect a single spot.

  • Avoid overly broad selectors. Targeting a whole block type (e.g., every Hero) can have wide-ranging effects.

  • Mobile & accessibility. Large font/spacing changes, low color contrast, or hiding elements can impact readability and responsiveness—validate on multiple screen sizes.

Did this answer your question?