Global components

Global components are groups of elements that can be saved and reused across your entire site. If you make an update to a global component, every instance of that component on your site will be updated as well.

Creating a global component

Let’s start by dropping in a navbar instant layout from the toolbar. Feel free to edit the styles of the navbar box, as well as any links or styles in the navigation component. Select the navbar box and click on the cube icon found at the top of the element sidebar.

Name your global component and click “Yes, continue” to convert the navbar into an instance of your new global component.

Navigate to a different page in the same site. In the toolbar to the left of the builder, you’ll find another cube icon. Hovering over the icon will display all the global components available in your site. Like any other type of component, click and drag your new global component and place it on the page.

Editing a global component

To edit a global component, select any instance in your site and click “Edit component” in the sidebar.

While editing a global component, you have full control over the content and styles for all elements found in the component. You can add or remove elements, and even place other global components inside.

When you are done with edits, click the “Save” button at the top right of the global component overlay. Global component updates will be applied globally to your site, including live pages. Other changes on your pages will not be published.

Managing global components

You can manage your global components from within the global element tray accessed in the toolbar. You can rename or delete any global component. If a global component is deleted, all instances of that component in your site will be replaced with an error message and will need to be manually removed.

You can also detach any instance from it’s global component, allowing you to make overrides.