Les sliders

L'Email Builder vous offre la possibilité d'intégrer à vos emails un slider (ou carrousel) pour les rendre interactives : Les destinataires de l'email pourront ainsi faire défiler du contenu (images, textes, boutons) afin d'en dévoiler davantage sans rallonger l'email.

Comme à son habitude, vous êtes invité aussi à configurer les contenus de remplacement (fallback) à afficher dans les environnements qui ne supportent pas encore ce format.

Dans le volet de conception, cliquez sur l'onglet « Éléments », puis glissez-déposez l'élément slider dans la section souhaitée (ou le groupe souhaité).

Définissez une largeur et une hauteur (en pixels). Ces valeurs s'appliquent à l'ensemble du slider et aux slides qu'il contient. Elles sont personnalisables pour chaque vue, bureau, tablette et mobile.

Il faut être particulièrement attentif à cette hauteur et tester l'affichage du slider pour que son contenu ne soit pas coupé en version mobile. Pour cela, nous vous conseillons fortement d'utiliser le lien miroir de l'Email Builder et de vérifier l'affichage sur plusieurs simulations d'écrans (en particulier petit et grand écran mobile).

Vous pouvez aussi masquer le slider sur tablette et/ou sur mobile.

Si vous le désirez, vous pouvez renseigner une couleur de fond ou ajouter une image de fond au slider. Cela sera visible sur l'ensemble du slider : autrement dit, sur l'ensemble des slides.

Par défaut, un slider comporte 1 seule slide. Et vous pouvez avoir au maximum 8 slides. Pour ajouter une slide, cliquez sur le bouton "Ajouter une slide" ou bien sur le picto "Dupliquer".

Pour simplifier le fonctionnement, sachez qu'une slide fonctionne comme un élément groupe.

Attention, chaque slide supplémentaire ajoute du poids au code. Soyez donc attentif à cet indicateur au niveau du contrôle qualité.

Après avoir sélectionné le slider, vous pouvez afficher le contenu des slides :

• soit en utilisant les repères "1", "2", etc. visibles directement au niveau de l’email,
• soit en cliquant sur le nom des slides visibles dans le volet gauche d'édition. 

La conception d'une slide est très proche de celle d'un groupe : en effet, vous êtes libre de créer des structures et des contenus différents entre les slides.

Concrètement, vous pouvez intégrer à vos slides :

• Des groupes,
• Des groupes avec des colonnes,
• Des séparateurs,
• Des images,
• Des textes,
• Des boutons,
• Des arrière-plans,
• Du code,
• Et même des vidéos.

Au niveau des transitions (ou passages) entre les slides, deux choix s'offrent à vous :

• Transition au clic : vous laissez le contrôle à la personne qui consulte l'email. Pour passer d'une slide à une autre, celle-ci doit cliquer sur les flèches ou bien sur les repères de progression.
• Transition automatique : le passage d'une slide à l'autre se fait sans action de l'utilisateur. Vous devez simplement définir le temps d'affichage pour chaque slide.

Pour faire défiler les slides, des flèches (ou chevrons) sont visibles. Il y a deux options :

• Des flèches prédéfinies : Vous devez sélectionner un aspect graphique parmi 3 styles de flèches et 3 couleurs
• Des flèches personnalisées : Vous pouvez importer vos propres images pour l'image de gauche et celle de droite en suivant les règles suivantes : une image de 50x50 pixels maximum, au format JPEG ou PNG.

Vous pouvez choisir le positionnement de vos flèches :

• Des flèches visibles à gauche et à droite des slides
• Des flèches visibles en dessous des slides

Les repères de progression correspondent aux éléments graphiques sous le slider, qui indiquent à l'utilisateur sur quelle slide il se trouve ainsi que le nombre total de slides. Les repères de progression peuvent être masqués sur desktop, tablette et mobile.

Il y a deux options :

• Des repères prédéfinis : Vous devez sélectionner un aspect graphique parmi 2 styles de repères prédéfinis et 3 couleurs
• Des repères personnalisés : Vous pouvez importer vos propres images pour le repère actif et le repère inactif en suivant les règles suivantes : une image de 20x20 pixels maximum, au format JPEG ou PNG

Lorsque l'environnement de lecture de l'email ne permet pas d'afficher un contenu interactif, il est primordial de définir un contenu de remplacement (fallback) qui s'affiche. L’Email Builder assure ainsi l'affichage d'un contenu dans chaque situation.

Il y a deux options :

Voici les environnements de compatibilité du slider de l’Email Builder :

Lorsque cela est adapté au contenu à diffuser au sein d'un slider, nous vous invitons à anticiper le contenu de remplacement. Comment ? En ajoutant une slide d'introduction au début ou une slide de conclusion à la fin qui reprend les contenus que l'on souhaite afficher lorsque le slider interactif n'est pas visible. Ainsi vous n'avez qu'à sélectionner cette slide supplémentaire en tant que fallback (cf Étape "Configurez le contenu de remplacement").

Renseignez une hauteur de slider légèrement plus importante que la hauteur nécessaire pour afficher son contenu : pensez à prendre de la marge pour anticiper l'affichage sur différents écrans (cf Étape "Configurez les paramètres principaux").

Sur environnement mobile, veillez à limiter la quantité de contenu pour ne pas avoir un slider qui occupe trop de hauteur : cela peut impacter la facilité à naviguer entre les slides.

Même si la créativité n'a comme limite que votre imagination, voici plusieurs cas d'usage que l'on observe chez les utilisateurs de l’Email Builder :

• Présenter un produit et dévoiler du contenu additionnel dans des slides,
• Présenter un hôtel et dévoiler les photos des chambres,
• Présenter un look (des hauts, des bas et des chaussures) à l'aide de plusieurs sliders superposés : concept de "cadavre exquis".

Découvrez comment intégrer un slider à vos emails avec le témoignage de Lacoste.