Symbols

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

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:

  1. 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.
  2. 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.
In this lesson
  1. Create a symbol
  2. Define override fields (optional)
  3. Use a symbol
  4. Edit a symbol
  5. Unlink a symbol

Create a symbol

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:

  1. Select the element you want to turn into a symbol
  2. Right-click and select Create Symbol
  3. 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).

Important

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.

Important

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

Important

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)
  • Image elements
  • Video elements
  • 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.

Important

You can  add symbols to the canvas using Quick find Command + E (on Mac) or Control  + E (on Windows). Learn how to use quick find.

Apply content overrides to symbol instances

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.

Learn how to enable content overrides.

Edit a symbol

Editing the master symbol

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. 

Important

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.

Important

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.


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form