Newsletter Editor : Introduction à la création de modèles HTML

Temps de lecture : 6 min

Chez CleverReach, nous vous proposons un grand nombre de modèles que vous pouvez facilement utiliser et personnaliser. Si vous souhaitez néanmoins créer votre propre modèle, vous pouvez suivre ces instructions :

Exemple

Commençons par cet exemple simple. Imaginons qu'il s'agisse de notre modèle et que nous souhaitions le rendre aussi facile que possible à modifier pour l'utilisateur :

<html>
<body bgcolor="#ffffff">
    <h1>Daily Newsletter</h1>
    <p>Votre mise à jour quotidienne pour tout ce qui se passe avec XXXXX</p>
    <table >
        <tr><td>
            <div>
                <h3>est-ce que cela vient d'arriver ?</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Vous n'allez pas croire ce qui vient de se passer. Si vous voulez en savoir plus, cliquez sur le lien ci-dessous !</p>
                <a href="http://www.example.com">En savoir plus</a>
            </div>
            <div>
                <h3>Attendez, c'est arrivé aussi ??</h3>
                <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" />
                <p>Peut-être pas aussi génial que les nouvelles précédentes, mais quand même très très intéressant.</p>
                <a href="http://www.example.com">Lire la suite</a>
            </div>
        </td></tr>
    </table>
</body>
</html>

Dans ce code, seuls les textes, les images et les liens peuvent être modifiés.

En règle générale, nous traitons le texte et les liens comme du simple HTML, de sorte que nous ne pouvons insérer que ces deux types principaux : HTML et IMAGE

Pour rendre le texte modifiable, nous l'entourons de 
Pour rendre les images modifiables, nous les entourons de

Dans notre exemple, cela donnerait ceci :

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Daily Newsletter<!--#/html#--></h1>
    <p><!--#html#-->Votre mise à jour quotidienne de tout ce qui se passe chez ACME<!--#/html#--></p>
    <table >
        <tr><td>
            <div>
                <h3><!--#html#-->est-ce que cela vient d'arriver ?<!--#/html#--></h3>
                <!--#image#-->
                    <img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Vous n'allez pas croire ce qui vient de se passer. Si vous voulez en savoir plus, cliquez sur le lien ci-dessous !<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">En savoir plus</a><!--#/html#-->
            </div>
            <div>
                <h3><!--#html#--><!--#/html#-->Attendez, c'est arrivé aussi ??</h3>
                <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                <p><!--#html#-->Peut-être pas aussi génial que la nouvelle précédente, mais quand même très très intéressant.<!--#/html#--></p>
                <!--#html#--><a href="http://www.example.com">Lire la suite</a><!--#/html#-->
            </div>
        </td></tr>
    </table>
</body>
</html>

Vous pouvez maintenant charger ce modèle dans l'éditeur et cliquer sur les zones de texte ou d'image pour les modifier.

Remarque : vous pouvez utiliser l'éditeur de code source pendant le processus de création et passer facilement d'un éditeur à l'autre (en haut à droite) pour vérifier vos résultats.

Blocs de contenu HTML

La méthode précédente fonctionne bien si vous ne voulez pas que l'utilisateur ait trop d'influence, mais il est généralement plus courant d'avoir des zones spécifiques où l'utilisateur peut simplement déposer des éléments HTML préconstruits qui contiennent diverses formes de mises en page.

Nous appelons ces zones des boucles. Chaque bloc de contenu est entouré de  pour séparer ces éléments.

Dans l'exemple ci-dessus, vous pouvez voir qu'il y a 2 DIVs, chacun représentant un bloc de contenu. Ajoutons notre balise loop et laissons de côté l'un des blocs de contenu, car ils sont de toute façon assez similaires :

<html>
<body bgcolor="#ffffff">
    <h1><!--#html#-->Daily Newsletter<!--#/html#--></h1>
    <p><!--#html#-->Votre mise à jour quotidienne de tout ce qui se passe chez ACME<!--#/html#--></p>
    <table >
        <tr><td>
        <!--#loop#-->
            <!--#loopitem#-->
                <div>
                    <h3><!--#html#-->est-ce que cela vient d'arriver ?<!--#/html#--></h3>
                    <!--#image#--><img src="https://cloud-files.crsend.com/img/16_9_600.png" width="320" height="190" /><!--#/image#-->
                    <p><!--#html#-->Vous ne croiriez pas ce qui vient de se passer. Si vous voulez en savoir plus, cliquez sur le lien ci-dessous !<!--#/html#--></p>
                    <!--#html#--><a href="http://www.example.com">En savoir plus</a><!--#/html#-->
                </div>
            <!--#/loopitem#-->
        <!--#/loop#-->
        </td></tr>
    </table>
</body>
</html>

Note : Les boucles ne peuvent pas être placées entre des structures similaires.

Étiquettes du modèle

Il s'agit d'une liste de toutes les balises de modèles disponibles que nous utilisons pour rendre les modèles modifiables. Nous les avons répartis en 3 catégories :

En rapport avec le contenu (traitement de fond)
Hilfebezogen (Schaltflächen, Abstandshalter etc.)
Designbezogen (Aide à la conception de votre projet)

Contenu de l'information

Ces balises vous offrent des options d'édition de base: :

HTML

La balise HTML peut gérer un grand nombre de choses liées au langage HTML. Qu'il s'agisse d'un texte simple ou d'un contenu complexe, il offre plusieurs options permettant de contrôler chaque balise HTML individuellement.

<!--#html mode="default" inline="true "#--><!--#/html#-->

mode définit diverses options pour le contrôle du contenu

par défaut: formatage de base du texte, liens et espaces réservés
complet: comme par défaut, mais avec des images
textonly: n'affiche que les espaces réservés dans la barre d'outils
link: n'affiche que les paramètres du lien et les espaces réservés
safelink: Pas de barre d'outils, pas de suppression de liens, mais une barre latérale à la place

inline="true" fait de l'élément un élément inline et non un bloc (uniquement dans l'éditeur). Cette opération ne corrige que les erreurs visuelles dans l'éditeur et n'affecte pas la sortie réelle.

replace="true" marque le texte entier lorsqu'il est sélectionné pour la première fois afin qu'il puisse être remplacé plus facilement.

IMAGES

Elle est utilisée pour rendre les images modifiables, mais aussi pour les rendre "sûres pour le navigateur". Le positionnement des images dans les courriels n'est pas aussi simple qu'on pourrait le croire. Par conséquent, l'éditeur tente d'intégrer l'image dans un tableau afin de l'aligner correctement. Si votre image est déjà intégrée dans un tableau, placez la balise image à l'extérieur du tableau et non autour de l'image. Si vous ne souhaitez pas que votre image s'enroule, vous pouvez utiliser l'option "nowrap".

<!--#image align="center" #--><!--#/image#-->

align="center|left|right" Définit l'orientation standard de l'image. Si aucun n'est défini, une tentative est faite pour le trouver.

margin="10px 20px" définit le bord extérieur de l'image (valeur par défaut "0px")

nowrap="true" L'image n'est pas incluse dans le tableau, de sorte qu'aucun alignement n'est possible.

noresize="true|fasle" Supprime la possibilité de redimensionner

forcepx="true" Les images en pourcentage sont converties en px. Cela fonctionne généralement mieux avec tous les clients de messagerie

replace="true" Ouvre le navigateur de fichiers dès que l'on clique sur l'image. Utilisé une seule fois et pour remplacer des images de remplacement.

inline="true" Fait de l'image (dans l'éditeur) une image en ligne et non un bloc. Cela ne corrige que les erreurs visuelles dans l'éditeur et n'a aucun effet sur la sortie réelle.

BOUCLE

Les schleifen constituent un domaine particulier, dans lequel le lecteur peut insérer de nouveaux éléments de la liste des sélections. Les schleifen ne peuvent pas être placés entre des éléments de tableau comme <table><tr> or <ol><li>

<!--##loop#-->
    <!--##loopitem#-->...<!--#/loopitem#-->
<!--#/loop#-->

élément de boucle nom: s'il est défini, fait de cet élément un élément détachable dans la barre latérale

loopitem sidebaronly: n'est inclus que dans la barre latérale, mais pas dans le contenu proprement dit (default:false)

loopitem collapsible: rend les boutons pliables (par défaut : false)

PILE / ENTRÉE DE PILE

Les piles fonctionnent comme des boucles, mais leur utilisation est très limitée. L'idée est de donner à l'utilisateur un endroit où il peut arranger seulement des éléments simples (HTML, IMAGE, BUTTON, BUTTON, SPACER et DIVIDER). Cette fonction peut être utilisée pour rendre les colonnes modifiables sans briser les colonnes elles-mêmes.

<table>
    <tr>
        <td>
            <!--#stacks#-->
                <!--#stack-entry#--><p>A</p><!--#/stack-entry#-->
                <!--#stack-entry#--><p>B</p><!--#/stack-entry#-->
            <!--#/stacks#-->
        </td>
        <td>
            <!--#stacks#--><!--#/stacks#-->
        </td>
    </tr>
</table>

Tags de l'assistant

Ces étiquettes sont principalement des éléments préfabriqués, allant de simples entretoises à des éléments complexes.

BOUTON

Cela crée un bouton HTML sûr pour le client. Aucune de ces valeurs n'est réellement requise.

<!--#button bgcolor="#e9703e" color="#000000" align="center" text="En savoir plus" #--><!--#/button#-->

text="Cliquez ici !" Texte d'affichage standard

href="http://example.url"

bgcolor="#e9703e" Définit la couleur d'arrière-plan

color="#ffffff" Définit la couleur de la police

align="center|left|right|block" modifie l'alignement. Le bloc correspond à la largeur totale

margin="10px 10xp 20px 20px" marge extérieure

SPACER

Crée un espacement modifiable.

<!--#spacer size="50px "#--><!--#/spacer#-->

size="20px" fixe la hauteur par défaut à 20px

DIVIDER

Crée un séparateur de ligne (comme <hr>)

<!--#divider padding="40px" width="85%" align="center" height="2px" color="#888888" bgcolor="transparent "#--><!--#/divider#-->

padding = "20px" définit la hauteur par défaut de cet élément (pas la ligne elle-même)
width = "20px" la largeur de la ligne actuelle
height = "20px" la hauteur de la ligne actuelle
bgcolor = "#ffffff"
couleur = "#ffffff"
align = "left|center|right|block"

DÉSABONNER

Permet à l'utilisateur de choisir parmi des messages de déconnexion prédéfinis.
Note: Doit être pré-rempli avec du texte.

<!--##unsubscribe#-->Veuillez <a href="{UNSUBSCRIBE}">me désinscrire</a> !<!--#/unsubscribe#-->

À PROPOS DE NOUS

Cela ajoute une zone dans laquelle l'utilisateur peut choisir parmi des empreintes prédéfinies.

Remarque: ce contenu sera écrasé dès que vous chargerez le modèle dans l'éditeur. Si vous ne le souhaitez pas, utilisez plutôt le langage HTML.

<!--#aboutus#--><!--#/aboutus#-->

ONLINEVERSION

Une autre section pour afficher un texte et un lien vers la version en ligne (navigateur).
Note: Doit être pré-rempli avec du texte.

<!--##onlineversion#-->Si ce message ne s'affiche pas correctement, <a href="{ONLINE_VERSION}">click here</a> please.<!--#/onlineversion#-->

CSS et design

Ces paramètres se concentrent sur la conception et le CSS afin de fournir à l'utilisateur des options de style plus nombreuses et entièrement personnalisées.

THÈMES

Il recherche <style data="cr/theme"></style> et propose ensuite un onglet "Theming" sous l'onglet "Design" sur le côté. Toutes les classes définies ici sont également ajoutées en ligne pour garantir une compatibilité maximale.

Il fonctionne essentiellement comme SASS, mais ne remplace que les variables.

Remarque : tout ce qui se trouve en dessous de "*/" sera remplacé car il s'agit de la sortie CSS rendue.

<style data="cr/theme">
/*
    $my_var: 15px ;
    $slider-Max_width : 600px ;
    $quad-Text_to_display : 12px 12px 24px 24px ;
    $color-use_me : #ffffff ;
    $image-Background_image : https://example.com/batman.png ;


    .mytest { 
        width : $my_var; 
        margin : $quad-Text_to_display ; 
        background-color : $color-use_me
    }
    .background {url($image-Background_image);}
*/
...
</style>

Nous proposons une série de préréglages et de préfixes que vous pouvez utiliser pour contrôler le type de champ de saisie.

$slider- utilise un curseur au lieu d'une entrée

$quad- affiche un champ de saisie quadruple (p.ex. pour les marges et les encadrements)

$color- permet d'obtenir un sélecteur de couleurs

$image- renvoie un sélecteur d'images

$my_var Il en résulte un champ de saisie intitulé My var. Le "_" est généralement remplacé par " " (espace).

Paramètres de l'éditeur définis par l'utilisateur

Ceci contrôle l'éditeur lui-même et vous donne la possibilité d'afficher et de cacher certains paramètres.
Note : Ceci devrait idéalement être dans la première ligne, mais fonctionne également partout ailleurs.

<!--#template css="false" settings="false" #-->

css = "false" Masque l'onglet Design dans la barre latérale principale
settings = "false" Masque l'onglet Paramètres dans la barre latérale
default-elements = "false" Cache tous les éléments dans la barre latérale
user-elements = "false" Cache tous les éléments utilisateur dans la barre latérale
agency-elements = "false" Cache tous les éléments agence dans la zone de page
custom-elements = "false" Cache tous les éléments sauf le modèle dans la barre latérale
css-to-inline= "true|false" Force les CSS/styles en mode inline
version = "2.0" Désactivation des anciennes fonctions de repli pour les modèles (par exemple, édition automatique des classes "body", ".a", ".text")
hideplugins = "edithtml,conditional" Demande de masquer certains plugins. Ceci n'est pas supporté par tous les plugins
fix-top = "true" Ajoute de l'espace supplémentaire en haut (uniquement dans l'éditeur) pour corriger la barre d'outils HTML manquante
image-nowrap = "true" Désactive l'habillage des images dans les tableaux
image-nohref = "true" Désactive les paramètres de lien pour toutes les images
loops-collapsible = "true" Rend tous les boutons dans les éléments de la boucle collapables

Editierbares CSS / Style

Cela vous permet d'avoir des blocs CSS modifiables dans l'onglet "design" afin que les utilisateurs puissent modifier leur modèle à leur guise.

Placez /* @title Display Name */ au-dessus d'une classe CSS pour qu'elle (et toutes ses valeurs) soit disponible sous l'onglet Design.

<style>
    /* @title Display Name */
    .exampleclass {
    background-color : #080708 !important ;
    color : #ffeeff ;
    padding : 5px ;
    margin : 10px 5px ;
}
</style>

Vous pouvez également combiner plusieurs définitions CSS en un groupe en ajoutant @group mygroupname au commentaire .

<style>
    /* @title margins and paddings
        @group My custom group 
    */
    .exampleclass1 {
    padding : 5px ;
    margin : 10px 5px ;
    }

    /* @title mostly colors
        @group My custom group 
    */
    .exampleclass2 {
    background-color : #080708 !important ;
    color : #ffeeff ;
}

</style>

.modifiable

Si vous ajoutez un de vos éléments HTML à l'intérieur d'une , tous les styles sont libérés pour l'édition.

Par défaut, ils sont nommés "Élément #", où # est un nombre qui dépend du nombre d'éléments modifiables dont vous disposez. Vous pouvez modifier ce nom en ajoutant data-name.

Optionnel: Vous pouvez utiliserdata-limit-to pour ne rendre modifiables que les styles CSS listés (séparés par des virgules) et laisser les autres intacts.

Facultatif: vous pouvez utiliser data-style pour fournir à l'utilisateur des styles supplémentaires sans écrire ces valeurs dans le style, tant qu'elles ne diffèrent pas de la valeur originale. Ici, il ne serait écrit que si la couleur de fond était autre chose que inherit.

<td style="padding : 10px 20px;text-direction:ltr ;" data-style="background-color:inherit ;" data-limit-to="padding,background-color" class="editable" data-name="Container">

Diminution des étiquettes

Les balises suivantes sont obsolètes et sont automatiquement converties en leurs équivalents plus récents.

 wird 
 wird 
 wird 
 wird 
 wird

Aide & Support

Si vous avez des questions ou si vous avez besoin d'aide, veuillez contacter notre équipe de service. Ils seront là pour vous.

Newsletter Editor : Introduction à la création de modèles HTML

Exemple

Blocs de contenu HTML

Étiquettes du modèle

Contenu de l'information

HTML

IMAGES

BOUCLE

PILE / ENTRÉE DE PILE

Tags de l'assistant

BOUTON

SPACER

DIVIDER

DÉSABONNER

À PROPOS DE NOUS

ONLINEVERSION

CSS et design

THÈMES

Paramètres de l'éditeur définis par l'utilisateur

Editierbares CSS / Style

.modifiable

Diminution des étiquettes

Aide & Support

<%= previousTitle %>

<%= nextTitle %>

Unsere Webinare und Seminare

<%= block.name %>

Themen

<%= block.name %>

Noch weitere Fragen?

Themen

Recherche

Exemple

Blocs de contenu HTML

Étiquettes du modèle

Contenu de l'information

HTML

IMAGES

BOUCLE

PILE / ENTRÉE DE PILE

Tags de l'assistant

BOUTON

SPACER

DIVIDER

DÉSABONNER

À PROPOS DE NOUS

ONLINEVERSION

CSS et design

THÈMES

Paramètres de l'éditeur définis par l'utilisateur

Editierbares CSS / Style

.modifiable

Diminution des étiquettes

Aide & Support

<%= previousTitle %>

<%= nextTitle %>

Unsere Webinare und Seminare

<%= block.name %>

Themen

<%= block.name %>

Noch weitere Fragen?

Themen

Catégories