Designs and synced designs
Understand how designs control the visual appearance of blocks, and when to reuse them across your site. A block defines the type of content you are adding to a page. A design defines how that block looks and behaves on the website. For example, two Content image blocks use the same content structure, such as a title, text, images, and link, but display it with completely different layouts. One design may show the image on the left and the text on the right, while another may use a largeFew readersModify the design of a block
Change how a block looks by applying another design, editing it manually, or using AI. A block defines the type of content you are editing. The design defines how that content is displayed on the website. Modifying the design lets you keep the block content while changing its layout, style, or visual structure. Open the block design options Open the block panel either by clicking the block in the site preview or from the Page Blocks panel. Once the block panel is open, you can useFew readersAdvanced design editing with HTML, CSS, JavaScript, and Mustache
The frontend editor gives technical users direct control over how a block design is built. Use it when the visual editor or AI editor is not enough, or when you need precise control over layout, responsive behavior, or frontend interactions. Open the frontend editor Open the block panel and go to Edit design. From there, go to Edit HTML, CSS & JS to open the frontendSome readers