Symbol — Build once, use everywhere

There are a few shared components on every website. Meaning you'll see those same components in most pates. For example the main navigation, footer links, and info.

That means when building a website, we need to copy the same component into each page. This also means when we make an update within this component, we need to make the update into other pages too.

Today, we've added Symbol, which allows you to create a shared component. This component can be inserted anywhere on any page. Once you make an update, the changes will also apply to that component anywhere else. Technically, it's one component, being used multiple times.

I'll show you how to create a symbol from a normal component. Then insert and make changes to a symbol.

Please note every action performed below is stored temporarily. You will need to save (by click on the save icon) apply changes

Create a symbol

A symbol isn't much different from a normal component. Except when selected, the symbol container has a green color rather than blue.

To create a symbol, form the Editor:

1. Select the component you want to make a symbol
2. Click on the More button (three horizontal dots), then choose Create Symbol
3. Enter the symbol name. It can be anything you want, but ideally, a name that related to component (i.e Main Navigation, Footer (info))

Now, a new symbol is created. The selected component will also be replaced with that symbol.

Insert a symbol to your page

Once a symbol is created, you can view it from the Symbol View. Which locates at Add Components -> Symbol View (next to the Picture View).

To insert a symbol:

1. Navigate to Symbol View
2. Choose a symbol, then drag and place it on your page.

Now, you've inserted the symbol.

Update a symbol

You can update a symbol similar to updating a normal component, from anywhere. For example, to change a link text:

1. Click on the link component (within the symbol)
2. Update Text content in the right panel

Now, the content will be updated.

Site notes

A few things that you might wonder:

1. Once you delete a symbol (from the Symbol View), the symbol component on your page will disappear.
2. In case you accidentally delete the symbol, try to undo it (by click on the undo icon from the top bar).
3. When you delete the component symbol (from Editor Toolbar more (three dots) -> Remove), it will only remove that component without affecting other symbols. It's important to make sure you selected the symbol container (which show the Symbol text, with green background)

It's a long-overdue feature, but we've finally added it. In short, a symbol allows you to use the same component everywhere. Also, it will save your time when updating.

You can create a symbol by select more (three dots) -> Create Symbol on Editor Toolbar. Then insert and manage symbols from Symbol View.

Now you've master symbols. Feel free to leave your feedback, and thanks for your support.