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.
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
<h1 id="title" class="block-anchor">Title example</h1>
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
<div class="block-bg" background="image.jpg" bgcolor="#333333">Text copy.</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.
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
<div class="block-background" background="image.jpg">Text copy.</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.
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
<div class="block-bgcolor" bgcolor="#333333">Text copy.</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.
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.
<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]-->
For emails, this is the (hidden) text that is shown under the subject line in most email clients.
block-preview
<div class="block-preview" style="display: none">Short line of preview text goes here</div>
Still have questions? Message us.