• 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 readers

• Modify 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 readers

• Create custom block designs

  Create custom block designs with HTML, CSS, JavaScript, and Mustache. Custom block designs let you adapt how a block looks and behaves while keeping its content editable from the CMS. This article explains how to create or adapt a custom block design manually with HTML, CSS, JavaScript, and Mustache. You can also create or modify block designs with AI from a prompt or visual reference. Use the manual workflow when you need more control over the structure, fields, responsive behavior, orFew readers

• Advanced 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 frontend editorFew readers

• Global data and Block data

  Understand the difference between site-level data and block-specific data when editing designs. When editing a design, the frontend editor gives you access to two different data contexts: Global data and Block data. Both can be used in the HTML of a design, but they serve different purposes. Global data belongs to the site. Block data belongs to the specific block being edited. Global data Global data contains site-level variables that are available from any block design. ItFew readers