Modèle template Newsletter Joomla

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

A noter : le template de base en provenance d'Acymailing est fourni par Nosyweb à ses clients.

B- Import du template

import template acymailing

 

C- Duplication du template

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

 

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 :

modification css feuille de style template newsletter joomla

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".

Principe de classe css : on associe un certain nombre d'attributs css à une classe dont le code commence toujours par un "." dans la feuille de style. C'est ce code de la classe qui est appelé dans le HTML. Ce principe permet d'alléger le HTML et surtout de paramétrer une seule fois des styles qui se répètent X fois sur la page. 

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).

Important : un template de newsletter responsive est couramment construit avec des tables HTML. Nous allons développer plus loin cette notion.

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"

template newsletter Joomla styles css

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 sauvegarde et test template acymailing Joomla
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.

Attention: on ne peut plus faire marche arrière dès qu'un template est enregistré, si vous n'êtes pas sûr de vous, pensez à dupliquer le template avant d'effectuer vos modifications.

 

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:

Ce qui affiche :

Titre 1

Titre 2

Titre3

paragraphe 1.1

paragraphe 1.2

paragraphe 2.1

paragraphe 2.2

paragraphe 3.1

paragraphe 3.2

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:

ce qui va afficher

Titre 1

Titre 2

Titre3

paragraphe 1.1

paragraphe 1.2

paragraphe 2.1

paragraphe 2.2

paragraphe 3.1

paragraphe 3.2

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"

ce qui donne ceci :

Titre 1

Titre 2

Titre3

paragraphe 1.1

paragraphe 1.2

paragraphe 2.1

paragraphe 2.2

paragraphe 3.1

paragraphe 3.2

 

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 bouton balise acymailing
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.

balise tag acymailing utilisateur

<> 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".

balise CTA newsletter

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

Plusieurs sélections sont à effectuer :

balise tag articles newsletters joomla 

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 séparateur cellule template 

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

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
Maglott
Nom : 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.

Commentaires (1)

This comment was minimized by the moderator on the site

Bonjour à tous,

Merci à Xavier pour son article très détaillé, je vais essayer de faire ma propre newsletter avec ses explications.
Le fait d'avoir un template dédié pour chaque type de communication est tout simplement génial: On gagne du...

Bonjour à tous,

Merci à Xavier pour son article très détaillé, je vais essayer de faire ma propre newsletter avec ses explications.
Le fait d'avoir un template dédié pour chaque type de communication est tout simplement génial: On gagne du temps, le template est déjà prêt et on a plus qu'à changé la photo et le texte.
On le bidouille au début et après on y touche plus;)

Bonne journée,

Lire la suite
Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Les sollicitations par message, ou l’entretien fondamental du contact avec le clientLes sollicitations par message, ou l’entretien fondamental du contact avec le client
Garder le lien avec ses (futurs) clients Les nouvelles technologies permettent de garder un lien constant et personnalisé avec nos clients. Une partie de ce lien peut s’automatiser, enrichissant...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok