Créer et maintenir un template de Newsletter Joomla Acymailing

La construction d'une newsletter repose sur un template. Celui-ci apporte 2 bénéfices principaux :

• rigueur et efficacité : sur le principe d'un modèle, le template est une référence pour des Newsletters qui ont la même structure
• application de styles css : le template comporte des styles css pré-établis qui seront appliqués à la newsletter lors de son chargement

A- Principe de chargement du template

1- importer un template responsive construit par Acymailing
2- dupliquer ce template et l'adapter
3- créer une newsletter et charger le template (et ses styles css)
4- effectuer d'éventuels ajustements sur la newsletter elle-même
4bis- si ces modifications de la newsletter sont récurrentes, il faut modifier le template puis le charger à nouveau dans la newsletter

B- Import du template

C- Duplication du template

1- sélection du template
2- clic sur le bouton "Copier" en haut à droite  

D- Modification des styles du template

1- Onglet "Feuille de style"

Ces styles css constituent une base de départ pré-paramétrée pour l'affichage de la newsletter par mail mais aussi pour son affichage dans un navigateur. Par exemple :

Nous recommandons de ne placer ici que des styles très couramment utilisés et qui ne vont pas changer (a priori). Egalement cette feuille de style va comporter les styles qui ne peuvent pas être paramétrés dans les styles individuels (voir plus loin).

Idéalement on stocke ici des classes largement utilisées et leurs attributs css, comme dans l'exemple la classe "pink".

Par exemple : <p class="pink">Mon texte</p>

Les styles "@media etc..." (cf exemple ci-dessus), sur lesquels s'appuient le comportement responsive de la newsletter, ne doivent pas être modifiés.
On retrouvera dans le code HTML du template les classes ".w600", ".w550" etc... selon les nécessités de gestion de la largeur des cellules (voir plus loin la notion de cellule).

Ressources sur le css : nombreux sites d'explications sur Google avec l'expression "bases du css" - la codification du css se démode peu dans ses grands principes, un site ancien et très pédagogique peut parfaitement convenir pour l'apprendre.

2- L'onglet "Styles individuels"

Cette onglet présente les styles les plus couramment utilisés pour :

• le fond
• les titres (h1, h2 etc...)
• les liens normaux
• les liens "Lire la suite" etc...

La partie droite permet de renseigner tous les attributs css, la partie gauche affiche le résultat de ces propriétés css (paramétrables sans limites).
Une particularité : si un titre est paramétré en couleur de police blanc ("color:#fff"), le titre ne se voit pas (en blanc sur fond blanc) mais il existe bien. Il a été surligné dans l'exemple ci-dessus.

3- Comment tester des modifications de css

Nous recommandons aux débutants de commencer par modifier les propriétés existantes et de tester les modifications.

1- sauvegarder le template par le bouton Sauver / Appliquer
2- vérifier dans l'éditeur que les modifications sont bien affichées, ceci pour des modifications simples (couleur par exemple)
3- pour des modifications moins visibles, nous recommandons de charger le template nouvellement enregistré dans la newsletter et d'envoyer celle-ci en test. Ceci afin de contrôler l'effet des modifications dans une boite mail et non pas seulement dans l'interface Joomla.

4- Les tables HTML - principe général

Une table HTML commence par "<table>" et se termine par "</table>".
Une table repose sur des lignes composées de 1 ou plusieurs cellules qui déterminent les colonnes.
Les lignes commencent par "<tr>" et se terminent par "</tr>" ("r" pour row).
Les cellules commencent par "<td>" et se terminent par "</td>".
Ce sont les cellules qui stockent le contenu (texte, images, listes, liens etc...).

Exemple:

<table> <tbody> <tr> <td> <h2>Titre 1</h2> </td> <td> <h2>Titre 2</h2> </td> <td> <h2>Titre3</h2> </td> </tr> <tr> <td> <p>paragraphe 1.1</p> <p>paragraphe 1.2</p> </td> <td> <p>paragraphe 2.1</p> <p>paragraphe 2.2</p> </td> <td> <p>paragraphe 3.1</p> <p>paragraphe 3.2</p> </td> </tr> </tbody> </table>

Ce qui affiche :

on remarque que les 3 colonnes ont la même taille et qu'aucun style esthétique (centrage, couleur, etc...) ne figure pour le moment dans ce tableau.

5- Les tables HTML - intégration du css

Intégration des classes:

Nous souhaitons un tableau avec la première colonne 30% de la largeur, la 2ème avec 40% et le 3ème avec 30%. On peut aussi vouloir 3 colonnes à 30%, ou exprimer ces largeurs en pixels.

Dans la zone "Feuille de style", on peut paramétrer les classes suivantes :
.w30{width:30%}
.w40{width:40%}
Il suffit de paramétrer ces classes dans les cellules de la première ligne:

<table> <tr> <td class="w30"> <h2>Titre 1</h2> </td> <td class="w40"> <h2>Titre 2</h2> </td> <td class="w30"> <h2>Titre3</h2> </td> </tr> <tr> <td> <p>paragraphe 1.1</p> <p>paragraphe 1.2</p> </td> <td> <p>paragraphe 2.1</p> <p>paragraphe 2.2</p> </td> <td> <p>paragraphe 3.1</p> <p>paragraphe 3.2</p> </td> </tr> </table>

ce qui va afficher

A noter : en raison d'un espace occupé par les bordures de la table et des cellules (1 ou 2 pixels), la somme des % de largeur doit parfois être inférieure à 100%.

Intégration de styles css de mise en forme:

Comme vu précédemment, on peut faire appel à une classe ou insérer des styles spécifiques.

Exemple d'une classe pour les titres (voir dans la fenêtre de code ci-dessous) :
.titres{font-weight:bold; text-align:center;color:blue}
Cette classe "titres" peut être insérée dans l'élément HTML <tr> puisque ses propriétés s'appliquent à tous les titres.

Exemple d'un style css inséré indépendamment d'une classe 
Dans la fenêtre de code ci-dessous on a inséré dans un élément HTML <td> un style spécifique : style="font-size:25px"

<table> <tr class="titres"> <td class="w30"> <h2>Titre 1</h2> </td> <td class="w40"> <h2>Titre 2</h2> </td> <td class="w30"> <h2>Titre3</h2> </td> </tr> <tr> <td> <p>paragraphe 1.1</p> <p>paragraphe 1.2</p> </td> <td class="font-size:25px"> <p>paragraphe 2.1</p> <p>paragraphe 2.2</p> </td> <td> <p>paragraphe 3.1</p> <p>paragraphe 3.2</p> </td> </tr> </table>

ce qui donne ceci :

E- La structure du template

Les principes énoncés ci-dessous sont également valables pour les Newsletters.

1- Informations obligatoires

Les zones à ne pas supprimer sont :

"Visualiser sur un navigateur" (laisser en haut) / tag {readonline}

"Se désinscrire" (obligation légale - laisser en bas) / tag {unsubscribe}

2- Les balises Acymailing

La possibilité est offerte ici d'insérer dans le contenu des mot-clés préétablis par l'éditeur Acymailing. Chaque mot-clé est associé à une information stockée dans la base de donnée : par exemple le nom ou la date d'anniversaire du destinataire. Cette fonctionnalité permet de personnaliser l'envoi de la newsletter.

Pour insérer une balise il faut se placer à l'endroit où la balise doit se situer dans le contenu et cliquer sur le bouton 
Cette fonction permet d'insérer plusieurs types d'informations.

<> une information concernant les abonnés, par exemple son nom, son prénom, son identifiant...

Il suffit de cliquer sur l'information (le tag) et celle-ci s'insère dans le template.

<> des outils graphiques de type CTA (Call To Action)

Effectuer la sélection souhaitée, le design du bouton s'affiche en-dessous.
Puis cliquer sur le bouton "Insérer la balise".

<> tout ou partie d'un article publié sur le site, et également un module

Plusieurs sélections sont à effectuer :

1= Cliquer sur l'onglet "Articles Joomla"
2= Paramétrer les informations de l'article à afficher
3= sélectionner l'article concerné
4= cliquer sur "Insérer le balise"
ce qui insère la balise {joomlacontent:223| type:intro| link| pict:resized| maxwidth:150| maxheight:150| format:TOP_LEFT}

3- Visualiser la structure du template avec l'éditeur JCE

Nous l'avons évoqué un template responsive repose souvent sur une table HTML.

La séparation entre les lignes (tr) et les cellules (td) est matérialisée par des doubles traits pointillés  

Dans l'exemple ci-dessous, on distingue des lignes tr avec 3 cellules et des lignes tr avec 1 seule cellule.
L'attribut de cellule colspan="x" permet de fusionner x cellules, dans l'exemple ci-dessous colspan="3".

Voici le code correspondant à 1 ligne tr-3 td puis 1 ligne tr-1td

<tr class="acyeditor_delete" title="Deletable"> <td class="w25" style="background-color: #000; width: 25px;"> </td> <td class="acyeditor_text w550" style="background-color: #000; width: 575px;" align="justify"><img src="http://eva-extensions.com/images/newsletters/templates/logo-eva-extensions.jpg" alt="eva extensions" width="391" height="140" style="border: none; display: block; margin-left: auto; margin-right: auto;" /></td> <td class="w25" style="background-color: #000; width: 25px;"> </td> </tr> <tr class="acyeditor_delete" title="Deletable"> <td colspan="3" class="acyeditor_picture w600" style="line-height: 0px; width: 600px; height: 23px;" valign="top"><img src="http://eva-extensions.com/images/newsletters/templates/header_arrow_black.jpg" alt="header arrow black" height="23" /></td> </tr>

On peut remarquer que la largeur des cellules est gérée par les classes "w25" (25 px de large) et "w550" (550 px de large).

Certains styles css complètent les attributs des classes (Exemple : style="background-color:#000") et peuvent être enrichis/modifiés.

4- L'éditeur d'Acymailing

L'utilisation de l'éditeur d'Acymailing est facultative. Il peut être activé en Acymailing / Configuration / Interfaces / Editeur.

La documentation d'Acymailing sur son éditeur est très complète. 

Elle permet notamment de comprendre l'utilité des classes implémentées par l'éditeur "acyeditor_delete", "acyeditor_text" etc...

L'auteur : un expert à votre service

Nom : Xavier Maglott

Quel meilleur outil que Joomla pour mettre en oeuvre ce qui m'intéresse vraiment : comprendre les besoins de nos clients, apporter des solutions mais surtout des idées concrètes pour faire progresser leur site et leurs connaissances de l'univers Joomla.