Help

Advanced features

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.

Email preview text

For emails, this is the (hidden) text that is shown under the subject line in most email clients.

Editable tag

block-preview or -block-preview: true

Example:

<div class="block-preview" style="display: none">Short line of preview text goes here</div>

Code snippets

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.

Hiding code

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.

Background images and colors

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.

Editable tag

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.

Email background image instance

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]-->

Background image only

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.

Editable tag

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.

Email background image instance

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]-->

Background color only

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.

Editable tag

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.

Editable tag

block-anchor or -block-anchor: true

Example:

<h1 id="title" class="block-anchor">Title example</h1>

Support

Still have questions? Message us.