Ce guide est la référence complète pour l'éditeur de Newsletter Studio. Alors que le guide "Créer votre première newsletter" couvre les bases, ce document explore chaque composant et paramètre disponible pour vous aider à créer des newsletters riches, professionnelles et fidèles à votre image de marque.

1. Structurer votre newsletter

Le fondement de tout bon design est sa structure. Newsletter Studio fournit des éléments puissants et flexibles pour construire votre mise en page, qui peuvent même être imbriqués les uns dans les autres pour des designs avancés.

La Page

C'est le conteneur de plus haut niveau pour l'ensemble de votre newsletter. En cliquant sur l'arrière-plan de la zone de travail, vous pouvez accéder aux paramètres globaux de la Page dans le panneau de droite.

• Objet de l'email : Le titre de votre newsletter tel qu'il apparaîtra dans la boîte de réception d'un destinataire.

• Couleur du thème : Un choix de couleur global qui sera appliqué par défaut à des éléments comme les boutons et les liens, assurant une apparence cohérente.

• Police globale (Nouvelle fonctionnalité) : Pour garantir la cohérence de votre marque, vous pouvez définir une police globale pour votre newsletter. Cette police sera appliquée par défaut à tous les composants de texte. Vous pouvez choisir parmi les 9 polices "email-safe" (sûres pour l'email) suivantes :

  • Arial

  • Helvetica

  • Times New Roman

  • Georgia

  • Tahoma

  • Verdana

  • Courier New

  • Trebuchet MS

  • Segoe UI (par défaut)

Sections

Les Sections sont les principaux conteneurs horizontaux qui divisent votre newsletter en parties logiques. Considérez-les comme des blocs de construction qui contiennent tout votre contenu. Chaque Section a ses propres paramètres, vous permettant de contrôler sa couleur de fond et ses marges intérieures (padding), ce qui aide à créer une séparation visuelle.

Voici un exemple d'une section avec une couleur de fond rouge

Colonnes

Les Colonnes se trouvent à l'intérieur d'une Section et vous permettent de la diviser verticalement. Cela vous permet de placer des composants côte à côte. Le composant Colonnes possède deux paramètres clés :

• Taille : Contrôle le nombre de colonnes, de une à quatre.

• Empiler les colonnes sur mobile : Ce paramètre "responsive" essentiel contrôle le comportement de vos colonnes sur les appareils mobiles. Lorsqu'il est activé (par défaut), les colonnes s'empileront verticalement sur mobile, assurant que le contenu est lisible l'un après l'autre. Si vous le désactivez, les colonnes essaieront de rester côte à côte, ce qui peut rendre le contenu très petit sur les écrans étroits.

Exemple du composant Colonnes

2. Composants de contenu

Ce sont les éléments que vous ferez glisser du panneau de gauche vers votre zone de travail pour construire votre newsletter.

Texte et Titre

• Description : Les composants principaux pour ajouter tout contenu écrit.

• Paramètres : Vous pouvez personnaliser la famille de police, la taille, le style, la couleur, l'alignement et l'espacement pour n'importe quel morceau de texte.

Bouton

• Description : Crée un bouton cliquable pour diriger les lecteurs vers une page web spécifique.

• Paramètres : Personnalisez le texte du bouton, l'URL de destination, les couleurs (fond et texte) et l'alignement.

Image

• Description : Ajoute un attrait visuel à votre newsletter.

• Paramètres : Vous pouvez télécharger une image depuis votre ordinateur ou en insérer une à l'aide d'une URL. Vous pouvez également ajuster l'espacement autour de l'image.

Profil

• Description : Intègre la carte de profil d'un utilisateur directement depuis l'annuaire Entra ID de votre organisation. Parfait pour les signatures d'auteur ou pour mettre en avant un employé.

• Paramètres : Personnalisez l'alignement et la mise en page (par ex., informations en dessous ou à côté de la photo).

3. Focus sur le composant Actualités

Le composant Actualités est l'une des fonctionnalités les plus puissantes, vous permettant de récupérer de manière transparente du contenu de vos sites SharePoint.

Ajouter et gérer les actualités

Lorsque vous faites glisser le composant Actualités sur votre zone de travail, un sélecteur apparaît, vous permettant de parcourir et de sélectionner des articles de tout votre environnement SharePoint. Vous pouvez ajouter et supprimer les actualités directement dans le sélecteur.

Options de mise en page

Le composant offre désormais deux mises en page distinctes pour une plus grande flexibilité de conception :

• Verticale : La mise en page classique, idéale pour empiler les articles en liste.

• Grille : Une nouvelle mise en page qui affiche les actualités côte à côte. Elle est particulièrement efficace lorsque le composant est placé dans une section en pleine largeur. Remarque : Le composant d'actualités ne peut pas être utilisé dans des mises en page en grille à trois ou quatre colonnes.

Mise en page verticale des actualités

Mise en page en grille des actualités

Adaptabilité mobile

Le composant Actualités est entièrement "responsive". Pour garantir la meilleure expérience de lecture, il s'affichera toujours en mise en page verticale sur les appareils mobiles, quel que soit le paramètre choisi pour l'ordinateur. Vous pouvez prévisualiser cela en utilisant le sélecteur de vue mobile dans l'éditeur.

4. Bonnes pratiques de l'éditeur

• Glisser-déposer : Le mécanisme de base est simple : faites glisser n'importe quel composant du panneau de gauche et déposez-le sur la zone de travail.

• Utiliser l'Outline : Pour les newsletters complexes avec de nombreuses sections et colonnes, le panneau Outline (en bas à gauche) fournit une vue arborescente de votre structure, facilitant la sélection et la réorganisation des éléments.

• Prévisualiser souvent : Utilisez les icônes ordinateur et mobile en haut de la zone de travail pour vérifier fréquemment votre design sur différentes tailles d'écran.

• Sauvegarde automatique : Toutes vos modifications sont sauvegardées automatiquement en temps réel, vous pouvez donc travailler en toute confiance.

5. Travailler avec les images : Spécifications et bonnes pratiques

Pour garantir que vos newsletters aient un aspect professionnel et se chargent rapidement pour tous les destinataires, veuillez suivre ces directives lors de l'utilisation des images.

Mise en page et Dimensions

La largeur maximale du corps de la newsletter est de 600 pixels. Toute image placée dans une section à une seule colonne devrait idéalement être préparée en tenant compte de cette largeur.

Formats de fichiers supportés

• Pour les clients de messagerie modernes : JPEG, PNG, GIF, SVG, AVIF, WebP

• Pour les clients Outlook classiques : JPEG, PNG, GIF

• Pour garantir la compatibilité pour tous les utilisateurs, s'en tenir à JPEG, PNG ou GIF est l'option la plus sûre.

Taille des fichiers image

• Limite maximale : Vous pouvez téléverser une image jusqu'à 25 Mo.

• Recommandation : Pour une meilleure expérience utilisateur et pour garantir des temps de chargement rapides, nous recommandons fortement d'optimiser vos images. Idéalement, les images individuelles ne devraient pas dépasser 2 Mo.

Résolution pour une haute qualité

💡 Astuce pro pour des images nettes : Pour garantir que vos images soient nettes et pour éviter la pixellisation sur les écrans à haute densité, nous recommandons de téléverser des images faisant le double de la taille de leur conteneur d'affichage.

Exemple : Pour une bannière pleine largeur qui sera affichée dans une zone de 600 pixels de large, une image de 1200 pixels de large est recommandée pour une qualité optimale. Le navigateur la redimensionnera parfaitement, ce qui donnera une image très nette.

Prochaines étapes

Maintenant que vous maîtrisez les outils de conception, la prochaine étape consiste à faire parvenir votre newsletter à votre public.

• Publier et gérer une newsletter