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>
If you would like to use custom code within an email or page, like for segmenting content, you can use be-code-edit to have anything within it output as raw code. It can also be enabled as a reusable section or component.
Example:
<code class="be-code-edit" >
%%[ IF @member=="True" THEN ]%%
</code>
Adding data-area="head" will place the code within the head tag on export.
Note that HTML code used within the code block may cause your editable area to break. Actual code, including HTML code, should only be used when building or editing an email or page within the editor.
If you want to prevent certain areas from being seen in Blocks Edit when working in the visual editor, wrap your code with the block-hide option to essentially comment it out in the editor.
Example:
<!-- block-hide -->
<p>Content</p>
<!-- end-block-hide -->
When the email or page is exported, the hidden code gets output without being commented out.
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.