Comment créer vos propres gabarits optimisés

Introduction

Le créateur de campagne courriel permet aux utilisateurs de créer facilement des campagnes courriel à partir d'une bibliothèque de gabarits.

Le créateur de campagne vous laisse créer votre campagne de différentes façons:

  • Choisissez un des gabarits utilisant le concept content zones.
  • Commencez avec un gabarit de base (sans modèle).
  • Laissez les développeurs coller leur code dans la section de texte.
  • Téléversez un fichier ZIP contenant le contenu HTML et celui de la campagne (images ou autres fichiers essentiels).
  • Ce document explique comment créer des gabarits qui utilisent des zones de contenu.

Ce document explique comment créer des gabarits qui utilisent des content zones.

Considérations générales

Suivez les instructions ci-dessous quand vous créez un gabarit:

  • Les gabarits devraient avoir une largeur de 600 pixels.
  • Les gabarits doivent contenir l'adresse du client qui envoie la campagne pour respecter les règles antipourriels.
  • Les gabarits doivent contenir un lien de désabonnement.

Structure d'un gabarit

Zones de contenu

Nous avons créé un système qui permet d'ajouter du contenu grâce à une interface pointer-cliquer simple. Pour ajouter du contenu à une campagne, les utilisateurs n'ont qu'à cliquer sur le bouton "Ajouter du contenu".

Les zones de contenu peuvent être visualisées sous forme de pile. En ajoutant un nouvelle content zone, vous ajoutez un nouvel élément à la pile.

Content zones

Les zones de contenu actuellement offertes sont:

  • Texte
  • Image
  • Image + texte
  • Texte + image
  • Texte sur 2 colonnes
  • Google Maps
  • Code QR
  • Ligne / séparateur
  • Gadgets logiciels vers médias sociaux

Plus de content zones seront ajoutées ultérieurement.

Chaque content zone peut être éditée et supprimée. De plus, vous pouvez spécifier qu'une content zone peut être déplacée, ce qui permet aux utilisateurs de changer l'ordre des zones de contenu.

Encapsuler le contenu

Les Content zones doivent être encapsulées dans un contenant. Si une content zone est à l'extérieur de ce contenant, elle sera traitée comme un code régulier - et ne sera pas modifiable, supprimable ou déplaçable.

Les Content zones devraient être insérées dans l'Objet portant la classe movableContentContainer. Nous vous suggérons fortement d'ajouter cette classe à un élément td.

<body> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <!-- HEADER --> <tr> <td> <table width="600" cellspacing="0" cellpadding="0" align="center" border="0"> <tr> <td class="movableContentContainer"> <!-- CONTENT ZONES --> </td> </tr> </table> </td> </tr> <!-- FOOTER --> </table> </body>

Structure d'une zone de contenu

Chaque content zone doit être encapsulée comme suit:

<div class="CONTENTTYPE contentEditableContainer"> <div class="contentEditable"> <!-- Your content --> </div> </div>

Puis, remplacez la balise CONTENTTYPE avec le type de content zone (énuméré ci-dessous). Le contenu peut lui-même être un <p>, un <table>, ou toute autre balise HTML.

À la fin du présent guide, vous trouverez un exemple de campagne créée pour ce nouveal éditeur.

Zones de contenu disponibles

Texte

<div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Your content here --> </div> </div>

Image

<div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <!-- Your content here --> </div> </div>

Dans une balise contentImageEditable, une image peut comprendre les instructions suivantes:

data-max-width et data-max-height représentent la largeur et la hauteur maximale de l'image. Ces dimensions seront utilisées dans le panneau de redimensionnement pour afficher les dimensions maximales permissibles pour l'image. Si vous précisez une largeur plus grande que celle utilisée pour le contenant principal, le modèle va se rompre. Par défaut, si vous ne spécifiez pas les dimensions, l'image aura une largeur maximale de 600 pixels et une hauteur maximale de 300 pixels.

data-default="placeholder" est utilisé pour indiquer qu'une image dans le gabarit est un paramètre fictif seulement, et que si l'utilisateur le modifie, on lui demandera d'ajouter une image pour remplacer celle qui existe déjà.

Image + texte

Il s'agit d'un tableau qui comprend une colonne texte et une colonne image. Voici comment on règle habituellement cette combinaison dans le gabarit:

<table cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <!-- Image content --> </div> </div> </td> <td> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Text content --> </div> </div> </td> </tr> </table>

Texte + image

Cette combinaison suit exactement le même principe que la précédente.

Texte sur deux colonnes

Ici, la seule variante est l'ajout de deux colonnes de texte.

<table cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top"> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Text content --> </div> </div> </td> <td> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Text content --> </div> </div> </td> </tr> </table>

Code QR

Pour cette option, il faut utiliser la balise contentQrcodeEditable de l'image sur laquelle vous voulez copier/coller le code QR.

<table cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top"> <div class="contentQrcodeEditable contentTextEditable"> <div class="contentEditable"> <img data-default="placeholder" src="qr_code.png" width="75" height="75"> </div> </div> </td> <td> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Text content --> </div> </div> </td> </tr> </table>

Google Map

<table cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top"> <div class="contentGmapEditable contentTextEditable"> <div class="contentEditable"> <img data-default="placeholder" src="gmap_example.png" width="175"> </div> </div> </td> <td> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Text content --> </div> </div> </td> </tr> </table>

Ligne / séparateur

Nous avons ajouté une ligne qui sert de séparation entre les content zones. Chaque ligne peut être déplacée comme toutes les autres zones de contenu.

<div class="movableContent" style="margin-top:10px;margin-bottom:10px;"> <img src="line.png"> </div>

Dans les gabarits que nous fournissons, nous utilisons une ligne comme séparateur entre les sections de contenu et comme séparateur visuel entre elles.

Gadgets logiciels vers médias sociaux

Nous utilisons trois types de gadgets logiciels vers les médias sociaux:

  • Facebook et Twitter côte à côte
  • Facebook seulement
  • Twitter seulement

<table cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" width="280"> <div class="contentEditableContainer contentFacebookEditable"> <div class="contentEditable"> <img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true"> </div> </div> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Your Facebook teasing here --> </div> </div> </td> <td valign="top" style="padding-left:40px;"> <div class="contentEditableContainer contentTwitterEditable"> <div class="contentEditable"> <img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true"> </div> </div> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <!-- Your Twitter teasing here --> </div> </div> </td> </tr> </table>

Pour les gadgets logiciels vers les médias sociaux, nous avons créé deux nouvelles balises.

data-customIcon="true" est utilisée pour indiquer que le gabarit possède une icône Facebook/Twitter et que vous voulez forcer l'utilisateur à s'en servir. De cette manière, l'icône ne sera pas remplaçable. Toutefois, cliquer sur l'icône dans le gabarit ouvrira une fenêtre contextuelle qui permettra à l'utilisateur d'indiquer son nom d'utilisateur Twitter ou son lien vers sa page Facebook.

data-noText="true" indique que cliquer sur l'icône n'ouvrira pas de fenêtre contextuelle.

Thèmes / Combinaisons de couleurs

Le nouvel éditeur prend en charge des combinaisons de nuances de couleurs. Chaque gabarit devrait comporter au moins une combinaison de couleurs offerte par défaut. Si vous ne fournissez pas votre propre thème, le thème par défaut sera chargé (détails ci-dessous). De plus, les utilisateurs peuvent modifier la combinaison des nuances en manipulant chacune d'elle à l'aide d'un pointeur de couleurs.

Dans le créateur de campagne, il y a cinq couleurs différentes qui peuvent être utilisées en combinant les unes avec les autres (pour le moment):

  • La couleur d'arrière-plan
  • La couleur du texte (corps)
  • La couleur des liens
  • La couleur de l'arrière-plan du texte
  • La couleur de la balise

Pour ajouter une combinaison de couleurs, vous devez ajouter ce qui suit dans la <head> de votre gabarit:

<head> <!-- ...Other <head> information... --> <script type="colorScheme" class="swatch active"> { "name":"Default", "bgBody":"ff508b", "link":"ff0056", "color":"555555", "bgItem":"ffffff", "title":"000000" } </script> <script type="colorScheme" class="swatch"> { "name":"Default", "bgBody":"ffccee", "link":"999999", "color":"444444", "bgItem":"ffffff", "title":"f2f2f2" } </script> </head>

Toutes les couleurs devraient être transcodées en valeurs hexadécimales, sans #. De plus, vous devriez utiliser les six chiffres pour ces valeurs (ceci signifie que la valeur fff ne fonctionnera pas; elle doit être ffffff).

La vignette active indique que cette combinaison de couleurs sera chargée lorsque l'éditeur se chargera.

Zones personnalisées

Une dernière option peut être ajoutée à votre gabarit. Puisque nous autorisons les utilisateurs à ajouter de nouvelles zones de contenu dynamique à leur campagne, nous devons faire en sorte que chaque nouvelle zone ajoutée a la même disposition, même combinaison de couleurs, même typographie et le même alignement que les zones de contenu par défaut.

C'est la raison pour laquelle nous avons créé des custom zones. En les ajoutant à la fin de votre gabarit, le nouvel éditeur peut saisir le code de chaque nouvelle zone de contenu ajoutée, et écraser le style avec celui que vous avez fourni pour ce gabarit.

Pour ajouter des custom zones à votre gabarit, placez-les juste devant la balise </body>.

``` <!--Default Zone

<div class="customZone" data-type="image">
    CONTENT HERE
</div>

<div class="customZone" data-type="text">
    CONTENT HERE
</div>

<div class="customZone" data-type="imageText">
    CONTENT HERE
</div>

<div class="customZone" data-type="Textimage">
    CONTENT HERE
</div>

<div class="customZone" data-type="textText">
    CONTENT HERE
</div>

<div class="customZone" data-type="qrcode">
    CONTENT HERE
</div>

<div class="customZone" data-type="social">
   CONTENT HERE
</div>

<div class="customZone" data-type="twitter">
    CONTENT HERE
</div>

<div class="customZone" data-type="facebook">
    CONTENT HERE
</div>

<div class="customZone" data-type="gmap">
    CONTENT HERE
</div>

<div class="customZone" data-type="line">
    CONTENT HERE
</div>
``` ## Comment ne pas éditer un gabarit Vous pouvez choisir de désactiver le mode d'édition avancée (HTML ou WYSIWYG) d'un gabarit en insérant les balises suivantes dans la balise header: ``` ``` Cette balise cachera les boutons HTML et WYSIWIG qui permettent aux utilisateurs de sélectionner le mode d'édition avancée pour le gabarit. ## Exemple complet Voici un exemple de gabarit complet: ``` Template 15

You are receiving this email because you signed up for our mailing list.
If you have trouble viewing this email, open it in a browser

    <table width="600" cellspadding="0" cellspacing="0" border="0" align="center" class="bgItem">

        <tr>
            <td style="font-size:16px; line-height:24px; padding-top:15px;" class="movableContentContainer">

                <!-- Text -->
                <div class="movableContent">
                    <div class="contentEditableContainer contentTextEditable">
                        <div class="contentEditable">
                            <h2 style="text-align:left;">This is a subtitle</h2>
                            <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                            <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                            <p style="text-align:right;"><a href="">Read more</a></p>
                        </div>
                    </div>
                </div>
                <!-- .Text -->

                <!-- Line -->
                <div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
                    <img data-default="placeholder" src="line_black.png">
                </div>
                <!-- .Line -->

                <!-- Image + Text -->
                <div class="movableContent">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td valign="top">
                                <div class="contentEditableContainer contentImageEditable">
                                    <div class="contentEditable">
                                        <img data-default="placeholder" src="temp_img_1.png" data-max-width="400">
                                    </div>
                                </div>
                            </td>
                            <td valign="top" style="padding-left:20px;">
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2 style="text-align:left;">This is a subtitle</h2>
                                        <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                        <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                        <p style="text-align:right;"><a href="">Read more</a></p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- .Image + Text -->

                <!-- Line -->
                <div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
                    <img data-default="placeholder" src="line_black.png">
                </div>
                <!-- .Line -->

                <!-- Text + Text -->
                <div class="movableContent">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td valign="top" width="280">
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2 style="text-align:left;">This is a subtitle</h2>
                                        <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                        <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                        <p style="text-align:right;"><a href="">Read more</a></p>
                                    </div>
                                </div>
                            </td>
                            <td valign="top" style="padding-left:40px;">
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2 style="text-align:left;">This is a subtitle</h2>
                                        <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                        <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                        <p style="text-align:right;"><a href="">Read more</a></p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- .Text + Text -->

                <!-- Line -->
                <div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
                    <img data-default="placeholder" src="line_black.png">
                </div>
                <!-- .Line -->

                <!-- Qr Code -->
                <div class="movableContent">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td valign="top" width="75">
                                <div class="contentQrcodeEditable contentEditableContainer">
                                    <div class="contentEditable">
                                        <img data-default="placeholder" src="qr_code.png" width="75" height="75">
                                    </div>
                                </div>
                            </td>
                            <td valign="top" style="padding-left:20px;">
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2 style="text-align:left;">This is a subtitle</h2>
                                        <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                        <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                        <p style="text-align:right;"><a href="">Read more</a></p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- .Qr Code -->

                <!-- Line -->
                <div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
                    <img data-default="placeholder" src="line_black.png">
                </div>
                <!-- .Line -->

                <!-- Gmap -->
                <div class="movableContent">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td valign="top" width="75">
                                <div class="contentGmapEditable contentEditableContainer">
                                    <div class="contentEditable">
                                        <img data-default="placeholder" src="gmap_example.png" width="175">
                                    </div>
                                </div>
                            </td>
                            <td valign="top" style="padding-left:20px;">
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2 style="text-align:left;">This is a subtitle</h2>
                                        <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                        <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                        <p style="text-align:right;"><a href="">Read more</a></p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- .Gmap -->

                <!-- Line -->
                <div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
                    <img data-default="placeholder" src="line_black.png">
                </div>
                <!-- .Line -->

                <!-- Social -->
                <div class="movableContent">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td valign="top" width="280">
                                <div class="contentEditableContainer contentFacebookEditable">
                                    <div class="contentEditable">
                                        <img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
                                    </div>
                                </div>
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2>Facebook</h2>
                                        <p>Follow us on Facebook to have all the latest news an update and to get in touch with people from us.</p>
                                    </div>
                                </div>
                            </td>
                            <td valign="top" style="padding-left:40px;">
                                <div class="contentEditableContainer contentTwitterEditable">
                                    <div class="contentEditable">
                                        <img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
                                    </div>
                                </div>
                                <div class="contentEditableContainer contentTextEditable">
                                    <div class="contentEditable">
                                        <h2>Twitter</h2>
                                        <p>Follow us on Twitter to have all the latest news an update and to get in touch with people from us.</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- .Social -->

            </td>
        </tr>
    </table>

    <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000">
        <tr>
            <td>
                <!--content starting-->
                <table width="600" cellspadding="0" cellspacing="0" border="0" align="center">
                    <tr>
                        <td style="line-height:0; font-size:0; padding-top:10px;">
                            <img data-default="placeholder" src="line_white.png">
                        </td>
                    </tr>
                    <tr>
                        <td align="right" style="padding-top:10px; font-size:12px; color:#FFF; padding-bottom:20px;">
                            <p>[COMPANY.ADDRESS]</p>
                            <p>If you no longer want to receive emails from us, <a href="[UNSUBSCRIBE]">unsubscribe</a>.</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table><!--table 100%-->

    <!--Default Zone

    <div class="customZone" data-type="image">
        <div class="contentEditableContainer contentImageEditable">
            <div class="contentEditable">
                <img data-default="placeholder" src="header.png" data-max-width="600">
            </div>
        </div>
    </div>

    <div class="customZone" data-type="text">
        <div class="movableContent">
            <div class="contentEditableContainer contentTextEditable">
                <div class="contentEditable">
                    <h2 style="text-align:left;">This is a subtitle</h2>
                    <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                    <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                    <p style="text-align:right;"><a href="">Read more</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="customZone" data-type="imageText">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top">
                        <div class="contentEditableContainer contentImageEditable">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="temp_img_1.png" data-max-width="400">
                            </div>
                        </div>
                    </td>
                    <td valign="top" style="padding-left:20px;">
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2 style="text-align:left;">This is a subtitle</h2>
                                <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                <p style="text-align:right;"><a href="">Read more</a></p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="Textimage">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top" style="padding-left:20px;">
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2 style="text-align:left;">This is a subtitle</h2>
                                <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                <p style="text-align:right;"><a href="">Read more</a></p>
                            </div>
                        </div>
                    </td>
                    <td valign="top">
                        <div class="contentEditableContainer contentImageEditable">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="temp_img_1.png" data-max-width="400">
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="textText">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top" width="280">
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2 style="text-align:left;">This is a subtitle</h2>
                                <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                <p style="text-align:right;"><a href="">Read more</a></p>
                            </div>
                        </div>
                    </td>
                    <td valign="top" style="padding-left:40px;">
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2 style="text-align:left;">This is a subtitle</h2>
                                <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                <p style="text-align:right;"><a href="">Read more</a></p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="qrcode">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top" width="75">
                        <div class="contentQrcodeEditable contentEditableContainer">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="qr_code.png" width="75" height="75">
                            </div>
                        </div>
                    </td>
                    <td valign="top" style="padding-left:20px;">
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2 style="text-align:left;">This is a subtitle</h2>
                                <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                <p style="text-align:right;"><a href="">Read more</a></p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="social">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top" width="280">
                        <div class="contentEditableContainer contentFacebookEditable">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
                            </div>
                        </div>
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2>Facebook</h2>
                                <p>Follow us on Facebook to have all the latest news an update and to get in touch with people from us.</p>
                            </div>
                        </div>
                    </td>
                    <td valign="top" style="padding-left:40px;">
                        <div class="contentEditableContainer contentTwitterEditable">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
                            </div>
                        </div>
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2>Twitter</h2>
                                <p>Follow us on Twitter to have all the latest news an update and to get in touch with people from us.</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="twitter">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top" style="padding-left:40px;">
                        <div class="contentEditableContainer contentTwitterEditable">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="icon_twitter.png" data-customIcon="true" data-noText="true">
                            </div>
                        </div>
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2>Twitter</h2>
                                <p>Follow us on Twitter to have all the latest news an update and to get in touch with people from us.</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
   </div>

    <div class="customZone" data-type="facebook">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top">
                        <div class="contentEditableContainer contentFacebookEditable">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="icon_facebook.png" data-customIcon="true" data-noText="true">
                            </div>
                        </div>
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2>Facebook</h2>
                                <p>Follow us on Facebook to have all the latest news an update and to get in touch with people from us.</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="gmap">
        <div class="movableContent">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top" width="75">
                        <div class="contentGmapEditable contentEditableContainer">
                            <div class="contentEditable">
                                <img data-default="placeholder" src="gmap_example.png" width="175">
                            </div>
                        </div>
                    </td>
                    <td valign="top" style="padding-left:20px;">
                        <div class="contentEditableContainer contentTextEditable">
                            <div class="contentEditable">
                                <h2 style="text-align:left;">This is a subtitle</h2>
                                <p style="text-align:left;">Etiam bibendum nunc in lacus bibendum porta. Vestibulum nec nulla et eros ornare condimentum. Proin facilisis, dui in mollis blandit. Sed non dui magna, quis tincidunt enim. Morbi vehicula pharetra lacinia. Cras tincidunt, justo at fermentum feugiat, eros orci accumsan dolor, eu ultricies eros dolor quis sapien. Curabitur in turpis sem, a sodales purus. Pellentesque et risus at mauris aliquet gravida.</p>
                                <p style="text-align:left;">Integer in elit in tortor posuere molestie non a velit. Pellentesque consectetur, nisi a euismod scelerisque.</p>
                                <p style="text-align:right;"><a href="">Read more</a></p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="customZone" data-type="line">
        <div class="movableContent" style="margin-top:10px;margin-bottom:10px;">
            <img data-default="placeholder" src="line_black.png">
        </div>
    </div>

<!--Default Zone End-->

</body>

</html>

```