Content
Pieces of text, images, and links
Text editing
block-edit
or -block-edit: true
To be used on individual HTML elements, making content within each editable. This is the one you'll be using the most.
- Use it as close to the copy as possible, outside of bold and italic formatting tags, and outside of a string of text that has a link within it
- Use on 'img' elements to allow for uploading a new image
- Editable elements cannot have nested elements that are also editable
- For areas with multiple paragraphs, make the container editable instead of the individual paragraphs
Example
<div class="block-edit">Text copy for an area.</div>
Maximum characters
block-maxchar-#
or -block-maxchar: #
Sets a character limit for content in an element. Default: unlimited.
Example
<div class="block-edit block-maxchar-10">Text copy</div>
Disable text
block-no-text
or -block-text: false
Disables text from being edited in an element. For example, a button that should only have its link updated.
<a class="block-edit block-no-text">More info</a>
Bold
block-no-bold
or -block-bold: false
Disables option for adding 'strong' element around content. Default: bold allowed.
Example
<div class="block-edit block-no-bold">Text copy for an area.</div>
Italics
block-no-italic
or -block-italic: false
Disables option for adding 'em' element around content. Default: italics allowed.
Example
<div class="block-edit block-no-italic">Text copy for an area.</div>
Links
block-no-link
or -block-link: false
Disables option for adding 'a' element around content for linking. Default: linking allowed.
Example
<div class="block-edit block-no-link">Text copy for an area.</div>
Link styles
For text where a link is added, Blocks Edit automatically uses the styling of the text and underlines it. You can specify link style options to choose from by adding the 'data-style' attribute with a unique variable name on example links to include the style from.
- Each tagged link will be shown as a style option when a link is edited, as Styles numbers, along with the default style as the first one
Example
<div class="block-edit">Text copy <a href="#" data-style="link-standard" style="color: #ff0000">with a link</a>.</div>
Images
block-edit
or -block-edit: true
Enables option to replace an image. Default: replacing image not allowed.
- When an image in a template is uploaded in place of a current one, an option to crop the image is given with the same proportions as the original source image
- If there is a 'height: auto' CSS style for the image, there is no cropping option; the image is scaled to the width of the source image with a proportional height of the new image
- The source of each individual image can by overriden with the image's URL option
- Includes option for alt text
Example
<img class="block-edit" src="image.jpg" width="400" height="200" />
Background images
block-background
or -block-background: true
Enables option to replace a background image. Default: replacing background image not allowed.
- When area is clicked on, an option for uploading an image will be shown along with an option for entering a URL. If there is already a background image, the field will show the current value.
- Works for background attribute and CSS background/background-image property
- 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. This includes any additional Outlook code.
- 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.
Example
<div class="block-background" background="image.jpg">Text copy for an area.</div>
Background colors
block-bgcolor
or -block-bgcolor: true
Enables option to replace a background color. Default: replacing background color not allowed.
- 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.
- 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. You'll need to ensure it's not covered by other editable areas in order for it to be clicked on in the editor.
Example
<div class="block-bgcolor" bgcolor="#333333">Text copy for an area.</div>
Tokens
You can use email service provider tokens/tags/variables throughout your template as you normally would and they will be read by your ESP when importing the final template into it to send out. This includes when editing content in emails in Blocks Edit.
Example
<div class="block-edit">Hello *|FNAME|*,</div>
Preview text
The (hidden) text that is shown under the subject line in most email clients.
Example
<div class="block-preview" style="display: none; max-height: 0; overflow: hidden;">Short line of preview text goes here</div>
Repeat
block-repeat
or -block-repeat: true
Allows duplicating a text area, making it part of a listing where each copy can be reordered or removed.
Example
<ul>
<li class="block-edit block-repeat">An item</li>
</ul>
Remove
block-remove
or -block-remove: true
Allows a text area or image to be removed.
Example
<h1 class="block-edit block-remove">Title</h1>