Components and layouts

Build something once and use it on many pages. A layout is the frame around your pages. A component is a reusable block you place inside pages.

Use a layout

A layout holds your navigation and footer, with a Page Content block where each page's content goes.

1. Open the site's workspace and go to Components.

2. Under Layouts, click New layout and give it a name.

3. Click Edit to design the layout, then Publish it.

4. Under Default layout per locale, set the default layout for each language.

Pages set to Inherit use the site default for their language.

Warning: Publishing a layout changes every page that uses it. If you delete a layout, the pages using it fall back to no layout.

Create a global component

You can create a component from the workspace or from a block you already built.

• From the workspace: go to Components, click New component, enter a name and choose a type (Content, Footer, Cart Drawer or Consent Banner).

• From a block: right-click the block on the canvas and choose Make global component.

Add a component to a page

1. In the editor, open Components in the left rail.

2. Drag the component onto the page.

Changes you make to the component and publish appear on every page that uses it. To change one placement on its own, select it and choose Detach to edit locally. It then becomes a normal block and no longer follows the component.

Add variants

Variants are named style versions of a component, such as a light and a dark card.

1. Open the component in the editor.

2. Use Add variant and name it. It appears as a frame under the default canvas.

3. Select the variant and change its styles.

Add properties

Properties let you change content per placement, such as the title of a card, without detaching it.

1. Open the component and select a block inside it.

2. Next to a field in the inspector, click + to expose it and give it a name.

3. Review your properties in Properties in the left rail.

On a page, select the placed component to fill in its properties.

Descriptions

Global components, layouts and their properties can carry a description of up to 500 characters. Add one when you create the item. People and AI assistants both read it, so say what the item is for.

Related

• How the Site Builder is organized

• Classes, variables and schemes

• Publish, versions and redirects