Editable text

To be used on individual text-based elements, making content within each editable. This is the editable option that is used the most. When you first import your theme HTML, all pieces of text are automatically enabled as editable.

Visual theme editor

To make changes to which text is editable using the visual theme editor: click the Edit button at the top to go into edit mode. Make sure you have the Content icon () selected from the left sidebar. Then click on any text with a box with a dashed line around it. You will see options on the left side panel for properties you can set for the text:

• Whether it is enabled or disabled as being editable; enabled by default
• The unique variable name for it; autogenerated initially, can be changed
• Formatting options that should show when editing; all enabled by default
• Optional character limits that you can set for text; no limits set by default
• Whether or not a link can be added to it; enabled by default
• Whether or not it can be removed; disabled by default

Editable tags code

block-edit

Use it as close to the copy as possible, outside of bold and italic formatting tags, and outside of a string of text that has a link within it.

Adding variable names to text elements saves their content. Each unique content piece requires its own variable name. Using the same variable name on multiple content pieces will update content for all pieces when one is updated.

data-block="variable-name"

Example

<div class="block-edit" data-block="example-text">Text copy.</div>

Formatting options

Bold

Part of text formatting options by default.

block-no-bold disables option for making text bold.

Italics

Part of text formatting options by default.

block-no-italic disables option for making text italic.

Superscript

Part of text formatting options by default.

block-no-superscript disables option for making text superscript.

Subscript

Part of text formatting options by default.

block-no-subscript disables option for making text subscript.

Length limits

block-maxchar-# sets a maximum character limit for text.

block-minchar-# sets a minimum character limit for text.

Example

<div class="block-edit block-maxchar-10">Text copy.</div>

Disable text

block-no-text

Disables text from being edited in an element.

For example, on a button that should only have its link updated:

<a href="#" class="block-edit block-no-text">More info</a>

Disable links

block-no-link

Disables option for adding a element around a block of text for linking.

Remove

block-remove

Allows a text area to be removed.

Email links

In emails only, for text where a link is added, the visual editor automatically uses the styling of the immediate text around the link and underlines it.

Link styles

You can enable link style options to choose from for your emails by setting a variable name for them. Each enabled link is set globally, and can be used for all of the theme's emails.

The link style is shown when a text link is edited, as styles numbers. The first option is always the set default style.

To set a link style, add the data-style attribute with a unique variable name on an example link and it will get included among the link style options.

Example:

<div class="block-edit" data-block="example-name">Text copy <a href="#" data-style="link-standard" style="color: #ff0000">with a link</a>.</div>