Support
Still have questions? Message us.
These editable features cannot be added using the visual theme editor and require either using the code editor, or editing your code externally to add in.
For emails, this is the (hidden) text that is shown under the subject line in most email clients.
block-preview or -block-preview: true
Example:
<div class="block-preview" style="display: none">Short line of preview text goes here</div>
Enables option to replace both a background image, and a background color used along with it.
When area is clicked on, an option for uploading an image will be shown along with an option for entering a URL, and a color palette option. Leaving the image URL field blank removes the image altogether. And leaving the color field empty removes the color.
block-bg or -block-bg: true
Example:
<div class="block-bg" background="image.jpg" bgcolor="#333333">Text copy for an area.</div>
Works for background and bgcolor attributes, and CSS background, background-image, and background-color properties. You'll need to ensure the background area is not covered by other editable areas in order for it to be clicked on in the editor.
For emails, if there is an additional background property that is outside the container that has the block-background tag, you will need to also use the data-block attribute with a variable name on both the main container and the container with the outside property. Like with Outlook code for example.
Example:
<div class="block-bg" data-block="feature-bg" style="background-image: url(image.jpg)">
<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 450pt; height: 300px; text-align: center"><v:fill type="frame" size="450pt,300pt" alignshape="true" src="image.jpg" data-block="feature-bg" color="#ffffff" /><v:textbox inset="0,0,0,0"><![endif]-->
Enables option to replace a background image only.
When area is clicked on, an option for uploading an image will be shown along with an option for entering a URL.
block-background or -block-background: true
Example:
<div class="block-background" background="image.jpg">Text copy for an area.</div>
Works for background attribute and CSS background and background-image properties. You'll need to ensure it's not covered by other editable areas in order for it to be clicked on in the editor.
For emails, if there is an additional background property that is outside the container that has the block-background tag, you will need to also use the data-block attribute with a variable name on both the main container and the container with the outside property. Like with Outlook code for example.
Example:
<div class="block-background" data-block="feature-bg" style="background-image: url(image.jpg)">
<!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 450pt; height: 300px; text-align: center"><v:fill type="frame" size="450pt,300pt" alignshape="true" src="image.jpg" data-block="feature-bg" color="#ffffff" /><v:textbox inset="0,0,0,0"><![endif]-->
Enables option to replace a background color only.
When area is clicked on, a color palette option is shown. Clicking on it shows a field for entering the hex value for a color. If there is already a defined value, it will show that current value.
block-bgcolor or -block-bgcolor: true
Example:
<div class="block-bgcolor" bgcolor="#333333">Text copy for an area.</div>
Works for bgcolor attribute and CSS background and background-color properties. You'll need to ensure the background area is not covered by other editable areas in order for it to be clicked on in the editor.
To make an anchor point editable, just use editable tag on the element with the id you want to allow modifying. In the editor, clicking on the element will bring up a # option to change the id value.
block-anchor or -block-anchor: true
Example:
<h1 id="title" class="block-anchor">Title example</h1>
Still have questions? Message us.