Support
Still have questions? Message us.
These editable features cannot be added using the visual template editor and require either using the code editor, or editing your code externally to add in.
Enables option to replace a background image.
When area is clicked on, an option for uploading an image will be shown along with an option for entering a URL. Works for background attribute and CSS background/background-image property.
block-background or -block-background: true
Example:
<div class="block-background" background="image.jpg">Text copy for an area.</div>
The option shows as either standalone, with the block-bgcolor option, or with region options. You'll need to ensure it's not covered by other editable areas in order for it to be clicked on in the editor.
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 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.
When area is clicked on, a color palette option is shown. Clicking on it shows a field for entering a color value. If there is already a defined value, it will show that current value. 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.
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/background-color property.
The option shows as either standalone, with the block-background option, or with region options.
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 your template, like email provider code 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.
<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 in your template may cause your editable area to break. Actual code, including HTML code, should only be used when building or editing an email within the editor.
If you want to hide certain areas from being seen in Blocks Edit when working with an email, wrap your code with the block-hide option.
<!-- block-hide -->
<p>Content</p>
<!-- end-block-hide -->
You can import just a portion of an email for editing. This may be helpful if you have a current email provider that uses a master template and locks in the header and footer for example, and you just want to work with a particular module. Or, if you want to provide your team with templated email signatures to use.
If you set up your template to enable dark mode properties, the editor will enable an option to preview in both light and dark settings, following your media queries.
Still have questions? Message us.