Theme editor

From your Blocks Edit dashboard, click New Theme at the top to upload your HTML and get started. You will be taken to the theme editor where you can preview your theme's editable options and make further changes to it.

Visual theme editor

The visual theme editor allows adding editable options using an interface, by selecting areas of your design and enabling editable properties that get added as tags within your code.

When you first import your HTML, if you don't have any editable tags in your code, the visual editor will automatically add tags to text and images. You can change (or disable) them as needed.

You can access the theme editor from your dashboard by clicking on the edit icon () next to the theme title.

Once in the theme editor, click the Edit button at the top to go into edit mode. You can start selecting text areas that you want to make editable within your theme. Editable options will appear in the sidebar on the left. Click Update to enable the options. And Save to go back into the theme preview mode to see the results.

On the left sidebar, you can select the type of editable options you want to enable by clicking on their icons.

Content

Content icon () for text and images.

Click on any text or image 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/image:

• 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
• Whether an image should resize when it's replaced or crop and scale to the placeholder size; not resizable by default
• Whether the image height should automatically adjust when the image is replaced; disabled by default

Sections and components

Sections icon () for stackable layout containers. And components icon () for stand-alone pieces that can be added throughout.

Use the blue bar of HTML elements at the bottom of the editor to help determine which HTML element would work best for each section/component. Mousing over each HTML element will show a solid outline of its container.

Once selected, use the panel on the left to enable and give it a unique variable name along with a title that users will see for it in the sidebar.

Regions

Regions icon () for customizable areas of elements.

You can select regions the same way as sections and components, but enabling them does not add them to the left sidebar. You can also set whether you want the region can be duplicated, along with a set limit, or removed.

Code editor

The theme editor also has a code editor built-in for making tweaks via the code icon () in the left sidebar. You may see additional attributes you don't recognize while using it. Do not remove them when making changes in the code editor. These only appear while editing and do not get saved with your theme code.

Exporting

You can always export your theme code after adding template tags via the visual editor. And vice versa, you can import your theme with tags and edit in the visual editor. The same tags that you use in your code are added by the visual editor.