Content¶

Information about building blocks that can be used to create content compatible with the editor in Lime Marketing.

Block Area¶

An area in the HTML code where you can insert content blocks.

Content Block¶

Content that can be inserted in the email or on the web page and edited by the end user. A content block can be located freely in the HTML code or in a block area. If it is in the block area, it can be moved within the block area and removed. If it is free, it cannot be removed or moved.

Content Block Editor¶

The content blocks contain editors that allow the user to edit different parts of the inserted content block. An editor must always be in a content block, it cannot be loose in the HTML code.

Usage¶

To build a template or content block that can be edited in BizWizard, these editorial components need to be defined in the HTML code. This is done by attributes on HTML tags. See Editor Components and Content block editor types.

Block area must be free in the HTML code and not be nested in a content block
Content blocks cannot be nested but must be free in the HTML code or in a block area
Content block editor must be in a content block.
A content block can have unlimited content block editors
A block area can have an unlimited number of content blocks

Editor components¶

Name	Attribute	Comment
Block Area	data-editor-blockarea	Marks the HTML tag as a block
	data-editor-blockarea-name	Name of what to call the block in the Newsletter
	data-editor-blockarea-name-languagekey	Language key for the name, uses data-editor-blockarea-name as fallback
	data-editor-blockarea-empty-height-X	Used to create padding in empty block areas. There exists separate steps of 10 from 20 to 100 and steps of 50 from 100 to 1000
Content block	data-editor-contentblock	Marks the HTML tag as a content
	data-editor-contentblock-deletable	Setting for whether the content block can be deleted in the editor. Values true / false or 1/0. If nothing is specified, you can delete the content block.
	data-editor-contentblock-hiding-editor	Put on one or more elements you want to be able to be hidden by an editor. The value must match the value of the data-editor-contentblock-editor-name of an editor in the content block.
	data-editor-contentblock-hidden-element	Attached to an element that should not be visible in the editor and removed when sent. The value of this attribute must match the id or the name of a data-editor-content-block-editor or data-editor-contentblock-editor-name. It is recommended that you use ID that is not affected by language strings
Content block editor	data-editor-contentblock-editor	Marks the HTML tag as a content block editor
	data-editor-contentblock-editor-name	Ev. names to be printed in the BizWizard editor
	data-editor-contentblock-editor-name-languagekey	Language key for the name, uses data-editor-contentblock-editor-name as fallback
	data-editor-contentblock-editor-type	See table of the different editors
	data-editor-contentblock-editor-order	Sort order for the editors In a content block. Numbers where the lowest number comes at the top of the editor
Form fields	data-form-field	Indicates that an element is a form field
	data-form-fieldtype	Indicates the type of field, see separate table.
	data-form-guid	A GUID that should also be the ID of the element.
	data-form-isrequired	1 or 0 depending on whether it is a required field.
	data-form-field-validation	A div that contains error messages in case of validation errors.
	data-form-validation-error-isrequired	Error message on mandatory field.
	data-form-validation-error-invalid-email	Error message in case of incorrect e-mail address.
	data-form-validation-error-invalid-number	Error message in case of incorrect number.
	data-form-validation-error-invalid-mobile-number	Error message in case of incorrect mobile phone number.
	data-form-validation-error-invalid-recipient-property-type	Error message if there is an error on the recipient property type.
	data-form-validation-error-unique-response-exists	Error message if you have entered a value, or combination of values, that has already been registered.

Content block editor types¶

Name	Comment
BizWizard.CMS.Editors.Text	Attached inside a TD element to make that cell a text editor.
BizWizard.CMS.Editors.PlainText	Attached inside a TD element to make that cell a Plain text input field.
BizWizard.CMS.Editors.Image	Attached to the IMG tag and edited with the image selector. The IMG tag src / width / height is retained. You can also link the image via the editor and then a parent A-tag is created or an existing one is used
BizWizard.CMS.Editors.Divider	Put on a td. In the td, a table is then created with the appearance of the divider.
BizWizard.CMS.Editors.Button	Puts on a table that must then contain a td and an a-tag. The table gets colors, borders and border radius. The TD gets the padding and the a-tag link and text.
BizWizard.CMS.Editors.Jetshop	Special editor for customers with a Jetshop connection. Attached to an element that then contains other elements with other tags that are replaced when searchin
BizWizard.CMS.Editors.Form.Text	Form field with a text box. Attached to the element (suggested a div) that contains the input element. Works only on web pages.
BizWizard.CMS.Editors.Form.Textarea	Form field with a text area (text box with several lines). Attached to the element (suggested a div) that contains the input element. Works only on web pages.
BizWizard.CMS.Editors.Form.CheckboxGroup	Form fields with a group of checkboxes. Puts on a parent element (preferably a div) that wraps the content. Works only on web pages.
BizWizard.CMS.Editors.Form.RadiobuttonGroup	Form field with a group of radio buttons. Puts on a parent element (preferably a div) that wraps the content. Works only on web pages.
BizWizard.CMS.Editors.Form.Dropdown	Form field with a dropdown. Attached to a parent element (preferably a div) that wraps the select element. Works only on web pages.
BizWizard.CMS.Editors.Web.GoogleMaps	Puts on a div, in combination with other attributes to set settings for Google Maps. Works only on web pages.
BizWizard.CMS.Editors.Web.YoutubeUrl	Puts on a div containing an iframe where src, width and height can be controlled

Email Examples¶

Block Area¶

<table width="640" class="bw-table_content" style="width: 640px;" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td data-editor-blockarea="" data-editor-blockarea-empty-height-500="" data-editor-blockarea-name="Content">
      </td>
    </tr>
  </tbody>
</table>

Content Block¶

<table data-editor-contentblock>
    <tr>
        <td data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Text">
            <h3>Denna text kommer laddas in i editorn och kommer kunna redigeras när editor är av typen Text. PlainText editorn däremot hade tagit bort denna nästlade h3-tag</h3>
        </td>
    </tr>
<table>

Webpage Examples¶

Block Area¶

On web pages, there is support for editors for putting background color / background images on the block areas, these are activated by creating two div's in the block area with the correct attributes. One div will get the background color / background image and the other will get the content. It is not possible to only add one or the other, either you add both or none at all.

<div class="bw-blockarea" data-editor-blockarea="" data-editor-blockarea-name="Content"
    data-editor-blockarea-empty-height-200="">
    <div class="bw-blockarea-background-div" data-editor-blockarea-background-div></div>
    <div class="bw-blockarea-content-div" data-editor-blockarea-content-div></div>
</div>

Content block¶

<div data-editor-contentblock="">
    <div data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Web.GoogleMaps"
        data-editor-contentblock-editor-name="Google Maps" data-editor-contentblock-editor=""
        data-googlemaps-usecustomstyle="true" data-googlemaps-watercolor="#e9967a" data-googlemaps-huecolor="#e9967a"
        data-googlemaps-gamma="0.5" data-googlemaps-weight="0.5" data-googlemaps-zoom="14"
        data-googlemaps-lat="57,7038184" data-googlemaps-lng="11,963633100000038"
        data-googlemaps-placeid="ChIJV2tlA2bzT0YRdp6_0rfLfYg">
        <div data-google-maps-map
            style='background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=V%C3%A4stra%20Hamngatan%2013A%2C%20411%2017%20G%C3%B6teborg%2C%20Sverige&size=982x500&scale=2&zoom=14&style=hue:0xe9967a|visibility:simplified|gamma:0.5|weight:0.5&style=element:labels|visibility:off&style=feature:water|color:0xe9967a"); background-repeat: no-repeat; background-size: cover; width: 100%; height: 500px;'>
        </div>
    </div>
</div>

Content width (Email, Desktop and Mobile)¶

An email template should consist of several tables. Partly to visualize for the user where different parts should be placed and partly because Outlook has problems with table contents that exceed 1700 pixels in height.

These tables have a standard width of 640 pixels via their CSS class. You can specify your own width in the style attribute, which then has a higher priority. The recommendation is to always make templates 640px wide because many content blocks are customized accordingly. If you want to deviate from this, always specify width, both in the width attribute and the style attribute because for example Gmail ignores CSS classes.

If you do not enter the correct CSS class, the tool for changing the widths and background color of the tables is hidden.

Size limitations on pictures¶

There is also support for limiting the size of images. This is done by putting one of the following attributes on the TD that surrounds an img tag:

data-editor-img-width
data-editor-img-min-width
data-editor-img-max-width
data-editor-img-height
data-editor-img-min-height
data-editor-img-max-height

Example of empty email template with width support¶

<div style="width: 100%;" align="center">
    <table width="640" cellspacing="0" cellpadding="0" class="bw-table_content" style="width: 640px;">
        <tbody>
            <tr>
                <td data-editor-blockarea data-editor-blockarea-empty-height-20 data-editor-blockarea-name="Preheader">
                </td>
            </tr>
        </tbody>
    </table>
    <table width="640" cellspacing="0" cellpadding="0" class="bw-table_content" style="width: 640px;">
        <tbody>
            <tr>
                <td data-editor-blockarea data-editor-blockarea-empty-height-100 data-editor-blockarea-name="Sidhuvud">
                </td>
            </tr>
        </tbody>
    </table>
    <table width="640" cellspacing="0" cellpadding="0" class="bw-table_content" style="width: 640px;">
        <tbody>
            <tr>
                <td data-editor-blockarea data-editor-blockarea-empty-height-500 data-editor-blockarea-name="Innehåll">
                </td>
            </tr>
        </tbody>
    </table>
    <table width="640" cellspacing="0" cellpadding="0" class="bw-table_content" style="width: 640px;">
        <tbody>
            <tr>
                <td data-editor-blockarea data-editor-blockarea-empty-height-150 data-editor-blockarea-name="Sidfot">
                </td>
            </tr>
        </tbody>
    </table>
    <table width="640" cellspacing="0" cellpadding="0" class="bw-table_content" style="width: 640px;">
        <tbody>
            <tr>
                <td data-editor-blockarea data-editor-blockarea-empty-height-20
                    data-editor-blockarea-name="Post sidfot"></td>
            </tr>
        </tbody>
    </table>
</div>

Example of empty block area for webpage with support for changing background¶

<div class="bw-blockarea" data-editor-blockarea="" data-editor-blockarea-name="Intro"
    data-editor-blockarea-empty-height-200="">
    <div class="bw-blockarea-background-div" data-editor-blockarea-background-div
        style='background: url("http://www.deepcreekvacations.com/blog/wp-content/uploads/2016/01/Winter-Sunset-2.jpg") center / cover; opacity: 0.6;'
        draggable="false" data-editor-contentblock-editor="" data-editor-contentblock-editor-name="Background image"
        data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Web.BackgroundImage"></div>
    <div class="bw-blockarea-content-div" data-editor-blockarea-content-div
        style="padding-top: 300px; padding-bottom: 300px;" draggable="false">
        HERE IS THE CONTENT
    </div>
</div>

Example of different form fields¶

Text field¶

<div data-editor-contentblock>
    <div class="bw-form-field">
        <label for="a09a32f9-c3d1-4227-9799-bdcc8d13e7a7" class="bw-form-field-label" data-editor-contentblock-editor
            data-editor-contentblock-editor-type="BizWizard.CMS.Editors.PlainText"
            data-editor-contentblock-editor-name="Section">Section text field
        </label>
        <div data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Form.Text"
            data-editor-contentblock-editor-name="Field settings">
            <input type="text" id="a09a32f9-c3d1-4227-9799-bdcc8d13e7a7" name="" class="bw-form-text-input"
                data-form-field data-form-guid="a09a32f9-c3d1-4227-9799-bdcc8d13e7a7" data-form-fieldtype="TEXT"
                data-form-datatype="1" data-form-isrequired="1"
                data-form-validation-error-isrequired="The field is mandatory"
                data-form-validation-error-invalid-email="Email address not valid"
                data-form-validation-error-invalid-number="Number not valid"
                data-form-validation-error-invalid-mobile-number="Number not valid" />
            <div data-form-field-validation>
                <span class="bw-form-validation-error"></span>
            </div>
        </div>
    </div>
</div>

Checkbox¶

<div data-editor-contentblock>
    <div class="bw-form-field">
        <label class="bw-form-field-label" data-editor-contentblock-editor
            data-editor-contentblock-editor-type="BizWizard.CMS.Editors.PlainText"
            data-editor-contentblock-editor-name="Section">Section for checkbox
        </label>
        <div id="7d5c76f6-3c2b-46ec-b840-8c35897233fe" name="" data-form-field data-form-fieldtype="CHECKBOX"
            data-form-guid="7d5c76f6-3c2b-46ec-b840-8c35897233fe" data-form-isrequired="1"
            data-form-validation-error-isrequired="The field is mandatory" data-editor-contentblock-editor
            data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Form.CheckboxGroup"
            data-editor-contentblock-editor-name="Field settings">
            <div data-editor-options>
                <div class="bw-form-field-checkbox">
                    <input type="checkbox" id="alt1" value="Alternativ" />
                    <label for=" alt1"></label>
                    <label for=" alt1">Alternativ</label>
                </div>
            </div>
            <div data-form-field-validation>
                <span class="bw-form-validation-error"></span>
            </div>
        </div>
    </div>
</div>

<div data-editor-contentblock>
    <div class="bw-form-field">
        <label for="b9711d48-d5d2-42e1-adb2-a0a4b9cd157c" class="bw-form-field-label" data-editor-contentblock-editor
            data-editor-contentblock-editor-type="BizWizard.CMS.Editors.PlainText"
            data-editor-contentblock-editor-name="Section">Section för rullgardinsmeny
        </label>
        <div data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Form.Dropdown"
            data-editor-contentblock-editor-name="Field settings">
            <select id="b9711d48-d5d2-42e1-adb2-a0a4b9cd157c" class="bw-form-text-input" name="" data-form-field
                data-form-fieldtype="DROPDOWN" data-form-guid="b9711d48-d5d2-42e1-adb2-a0a4b9cd157c"
                data-form-isrequired="1" data-form-validation-error-isrequired="The field is mandatory">
                <option value="Val 1">Val 1</option>
            </select>
            <div data-form-field-validation>
                <span class="bw-form-validation-error"></span>
            </div>
        </div>
    </div>
</div>

Radio buttons¶

<div data-editor-contentblock>
    <div class="bw-form-field">
        <label class="bw-form-field-label"
               data-editor-contentblock-editor
               data-editor-contentblock-editor-type="BizWizard.CMS.Editors.PlainText"
               data-editor-contentblock-editor-name="Category">Category for radio buttons        </label>
        <div id="31dca958-fdcf-4651-acaa-5cba63b75b4b"
             name=""
             data-form-field
             data-form-fieldtype="RADIO"
             data-form-guid="31dca958-fdcf-4651-acaa-5cba63b75b4b"
             data-form-isrequired="1"
             data-form-validation-error-isrequired="The field is mandatory"
             data-editor-contentblock-editor
             data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Form.RadiobuttonGroup"
             data-editor-contentblock-editor-name="Field settings">
            <div data-editor-options>
                <div class="bw-form-field-radiobutton">
                    <input type="radio"
                           id="alt1"
                           value="Alternativ" />
                    <label for="alt1"></label>
                    <label for="alt1">Alternativ</label>
                </div>
            </div>
            <div data-form-field-validation>
                <span class="bw-form-validation-error"></span>
            </div>
        </div>
    </div>
</div>

Text area¶

<div data-editor-contentblock>
    <div class="bw-form-field">
        <label for="1edee856-f712-4f02-938b-b7bcc7cb1991" class="bw-form-field-label" data-editor-contentblock-editor
            data-editor-contentblock-editor-type="BizWizard.CMS.Editors.PlainText"
            data-editor-contentblock-editor-name="Section">Section text field
        </label>
        <div data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.Form.Textarea"
            data-editor-contentblock-editor-name="Field settings">
            <textarea rows="5" id="1edee856-f712-4f02-938b-b7bcc7cb1991" class="bw-form-text-input" name=""
                data-form-field data-form-guid="1edee856-f712-4f02-938b-b7bcc7cb1991" data-form-fieldtype="TEXTAREA"
                data-form-datatype="1" data-form-isrequired="1"
                data-form-validation-error-isrequired="The field is mandatory"></textarea>
            <div data-form-field-validation>
                <span class="bw-form-validation-error"></span>
            </div>
        </div>
    </div>
</div>

Submit button¶

<div data-editor-contentblock>
    <div class="bw-form-field">
        <div class="bw-form-submit-button-parent">
            <button id="083cc823-7b90-4eb3-b002-ba73b88842bc" class="bw-form-submit-button" name="" value="Sign me up!"
                data-form-field data-form-guid="083cc823-7b90-4eb3-b002-ba73b88842bc" data-form-fieldtype="SUBMIT"
                data-editor-contentblock-editor data-editor-contentblock-editor-type="BizWizard.CMS.Editors.PlainText"
                data-editor-contentblock-editor-name="Button Settings">Sign me up!
            </button>
        </div>
    </div>
</div>

Default CSS for webpages that contains a form¶

On web pages that contain a form, the following CSS is added to the header. It is added as early as possible in the head tag of the web page and can thus be overridged with other CSS in the template. In that case, make a style tag with ID bw-form-theme-override and / or bw-form-theme-modern-browsers-override depending on which classes you want to override, then these styles will be configurable in the form editors.

<style id="bw-form-theme">
    input {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .bw-form-field {
        padding: 10px 0;
    }

    .bw-form-field-label {
        display: block;
        text-align: left;
    }

    .bw-form-text-input,
    .bw-form-select-input {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 18px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #cccccc;
    }

    .bw-form-submit-button-parent {
        text-align: center;
    }

    .bw-form-submit-button {
        border-radius: 3px;
        background-color: #486e9a;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 16px;
        letter-spacing: 1px;
        border-width: 0px;
        border-style: none;
        border-color: #486e9a;
        font-family: inherit;
        color: #ffffff;
        width: 100%;
    }

    .bw-form-submit-button:hover {
        cursor: pointer;
    }

    .bw-form-validation-error {
        color: #ad3333;
        font-weight: bold;
        font-style: italic;
    }
</style>
<!--[if !IE | IE 9]-->
<style id="bw-form-theme-modern-browsers">
    .bw-form-field-checkbox,
    .bw-form-field-radiobutton {
        display: block;
        position: relative;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 20px;
    }


    .bw-form-field-checkbox label:last-of-type,
    .bw-form-field-radiobutton label:last-of-type {
        margin-left: 10px;
        display: inline-block;
        margin-top: 0px;
    }

    .bw-form-field-checkbox label:first-of-type,
    .bw-form-field-radiobutton label:first-of-type {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #f0f0f0;
        border-width: 1px;
        border-style: solid;
        border-color: #cccccc;
    }

    .bw-form-field-checkbox label:first-of-type {
        border-radius: 4px;
    }

    .bw-form-field-radiobutton label:first-of-type {
        border-radius: 50%;
    }

    .bw-form-field-checkbox label:first-of-type:after {
        content: '''';
        width: 9px;
        height: 5px;
        position: absolute;
        top: 4px;
        left: 4px;
        border-width: 3px;
        border-style: solid;
        border-color: #333333;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .bw-form-field-radiobutton label:first-of-type:after {
        content: '''';
        width: 0px;
        height: 0px;
        position: absolute;
        top: 0px;
        left: 0px;
        border-width: 10px;
        border-style: solid;
        border-color: #c7806a;
        background: transparent;
        opacity: 0;
        border-radius: 50%;
    }

    .bw-form-field-checkbox label:first-of-type:hover::after,
    .bw-form-field-radiobutton label:first-of-type:hover::after {
        opacity: 0.5;
    }

    .bw-form-field-checkbox input[type=checkbox],
    .bw-form-field-radiobutton input[type=radio] {
        visibility: hidden;
    }

    .bw-form-field-checkbox input[type=checkbox]:checked+label:first-of-type:after,
    .bw-form-field-radiobutton input[type=radio]:checked+label:first-of-type:after {
        opacity: 1;
    }
</style>
<!--[endif]-->

Default CSS for confirmation forms (webpages)¶

<style id="bw-formstyle">
    .formresponse-all td {
        padding: 3px;
    }

    .formresponse-all td:first-child {
        padding-right: 20px;
        font-weight: bold;
    }
</style>

Content¶

Block Area¶

Content Block¶

Content Block Editor¶

Usage¶

Editor components¶

Content block editor types¶

Email Examples¶

Block Area¶

Content Block¶

Webpage Examples¶

Block Area¶

Content block¶

Content width (Email, Desktop and Mobile)¶

Size limitations on pictures¶

Example of empty email template with width support¶

Example of empty block area for webpage with support for changing background¶

Example of different form fields¶

Text field¶

Checkbox¶

Dropdown¶

Radio buttons¶

Text area¶

Submit button¶

Default CSS for webpages that contains a form¶

Default CSS for confirmation forms (webpages)¶