Add Inputs to your Symbols when you need to customize specific elements—like text or images—while keeping the overall design centralized.
- Add Inputs to your Symbols through the Data tab.
- Bind data to inputs to create pockets of variable data within your Symbols.
To add an Input to a Symbol:
- Go to the Data tab within your Symbol's content entry.
- Open the Content Inputs panel.
- Click + New Field.
- Create a new field related to what content you wish to change. You can name the field, determine whether or not it is required, set default values, and more.
In the video below, a new input with a name of recommendationText is added to the Symbol. It has a default value of "Most Popular".
Next, connect the value of your Input to a block within your content entry. For example, if you created a new Input with a Type of Text, you could bind that input's value to a Text block.
For more details on how to bind data, visit Bind data.
Once your Input's data is bound to a specific block, you can test changing the Input's values within the Content State panel within the Data tab.
In the video below, the value of recommendationText is bound to text within the Symbol. When that text is changed within the Content State panel, the text is updated to the new value.
When your Symbol performs as you expect, click the Publish Update button. You now have access to this Input on all pages that contain your Symbol.
Note: If you add an Input to an existing Symbol, you may end up with missing data within the content entries that use that Symbol. Consider creating a duplicate Symbol in this situation, replacing the old Symbol with the new Symbol that contains inputs in this case.
To use your Symbol's new Input:
- Within the Insert tab, go to the My Symbols panel and find your Symbol. Add it to your content entry.
- Select your Symbol and then go to the Options tab.
- Within the Options tab is your Input field. Update it as needed.
To remove a content Input from your Symbol:
- Within your Symbol's content entry, go to the Content Input panel within the Data tab.
- Open up your Input, and then click the Delete Field button.
- Go to the block(s) that were bound to the Input's value.
- Open the Element data bindings panel within the Data tab and click the X button next to the bound data to remove the binding.
You may realize at some point that you want to make more changes to a Symbol's contents for a content entry. If you ever need to decouple a Symbol's contents on a content entry, you can:
- Click on a Symbol within your content entry.
- Go to the Options tab.
- Click the Detach Symbol button.
Your Symbol's contents remain on the page, but are now be editable as if they were any other block. Keep in mind that if you update the original Symbol, the detached content doesn't change.
For more information on using Symbols, visit Dynamic symbols and Symbols with children. You also may want to review Introduction to Symbols and How to make a Symbol.