Oops! Something went wrong while submitting the form
Use symbols to manage recurring layouts and content more efficiently across your site.
The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Symbols allow you to turn elements and their child elements into a reusable layout — update and edit symbols in a single place to avoid revising each recurring layout one by one.
Symbols can be used in two main ways:
Identical content per instance. Create identical copies of recurring layouts that have the exact same content, like nav bars, footers, and sign-up forms. Edit them in one place and see those changes impact every instance of that symbol.
Unique content per instance. Create content overrides fields for text, images, or videos in a symbol to reuse symbol layouts while giving each symbol instance unique content.
Right-click to create a symbol from a selected element or group of elements.
You can create a symbol from any element or group of elements in your project, except for the body element. To create a symbol:
Select the element you want to turn into a symbol
Right-click and select Create Symbol
Give the symbol a name and press Create Symbol
Once you've created a symbol, you will be placed in the master mode of the symbol. All changes in the master mode will propagate across all instances of that symbol. You can enter master mode on any instance by double clicking (see Editing the master symbol).
You can also create a new symbol by pressing the shortcut keys on your keyboard: Command + Shift + A (on Mac) or Control + Shift + A (on Windows). This will create a symbol from whatever element you have selected.
If an element is nested inside of a symbol, you won't be able to save that element as a symbol as well. Nested symbols will be coming in the future.
Define override fields
If you’re creating a symbol with the exact same content in each instance (like nav bars, footers, and some forms) you don’t need to create override fields for that symbol.
Override fields let you define specific elements within a symbol that can be overridden with unique content on a symbol instance. This is great for recurring layout patterns whose structure should be uniform, but that have unique content in each instance. (Read more about symbol overrides in our announcement blog post.)
Select the element you want to make overridable, then create an override field in the element’s settings.
To create an override field, double-click to enter master edit mode for the symbol, then select the element you want to create an override field for. In the settings panel, click the purple dot icon to create a field for this element, then give it a name based on the function in the design.
Alternate approach: create a field first then connect it to an element in the symbol.
As an alternative approach, while editing the master symbol, you can also create fields directly from the settings panel then connect those fields to elements within a symbol.
Eligible element types for override fields
At present, you can create overrides for the following types of elements:
Text fields (e.g. paragraphs, headers)
Links (buttons, link blocks)
Rich text elements
Future support for style overrides is under development.
Use a symbol
Access symbols from the add panel. (Shortcut: Hit Shift + A to open directly to your symbols.)
Once you’ve created a symbol, you can reuse it anywhere in your project. First, open the symbol panel, then click and drag the desired symbol to any page in your project. Just like any element, you can drop the symbol instance directly on the canvas or in the Navigator for more precision.
When you select an instance of a symbol, you will see it is highlighted and outlined in green. Click the Style panel to see how many instances of that symbol there are in your project.
Apply content overrides to individual symbol instances in the settings panel.
To apply content overrides for elements in a given symbol instance, click on that instance, and then edit the content for each override field from the symbol’s settings panel. You can also pop open the settings modal for that symbol by clicking the gear icon on that symbol instance. To revert an override to the default content of that symbol, click the label to reset all your overrides at once.
To edit a symbol, double-click on an instance or select it and press enter. Once you enter edit mode, you are making changes to the master symbol.
Double-click to edit the master symbol. In the master symbol view, you’ll see the default values for your override fields.
Edits to the master symbol will affect every symbol instance (unless that symbol instance has a content override applied to a specific element). You can change the structure and element order of all symbol instances at once from the master symbol.
Edits to the master symbol affect each instance, unless specifically overridden in a symbol instance.
Delete and reconnect elements to override fields
Connect elements to existing overridden fields and each instance will remember and apply previously set overrides.
If you delete an element from the master symbol, each corresponding element in other instances will also be deleted (even if they’ve been overridden with unique content). That said, you can add new elements to the master symbol and reconnect them to existing override fields, and each instance will remember and apply the overrides previously set.
Exit out of the master symbol
Once you’re done editing a symbol, you can click done in the editing menu at the bottom of the Designer — or simply click outside the symbol on the canvas. Once you're out of the master symbol, you’ll be editing that specific symbol instance.
Editing symbols in the Editor
If you’ve invited Collaborators to update your site’s content in the Editor, any changes they make to symbol elements that are consistent across all instances will apply to all other instances. At the same time, if they edit an element within a symbol that is tied to an override field, edits to that symbol instance’s element will only apply to that symbol instance.
Rename a symbol
You can also rename the symbol by opening the Symbol panel and clicking the pencil icon next to the symbol.
You can also rename a symbol using quick find. Just hover over a symbol instance in the search result and click the edit icon.
Delete a symbol
To delete a symbol completely, all instances of the symbol must first be removed from the project. Then go to the Symbols panel, click the pencil icon, and Delete.
Unlink a symbol
To unlink a symbol and make changes to it independently, right-click on the symbol’s label and choose unlink from symbol. If the element is difficult to select you can right-click on the element in the Navigator.
Once unlinked, editing a linked instance of that symbol will not change the unlinked instance.
If the Editing Symbol Master overlaps the content you're trying to edit, double-clicking the bar will move it to the top of the Designer.
Can I Use ?
Data on support for the feature across the major browsers from caniuse.com.