Paramètres de style des messages in-app

L’expérience d’édition par glisser-déposer est divisée en deux sections : Build et Preview & Test. Cet article couvre ce que vous devez savoir pour travailler dans l’onglet Build de l’éditeur et suppose que vous avez déjà créé un message in-app.

Styles au niveau du message

Vous pouvez définir certains styles à appliquer à l’ensemble des blocs pertinents de votre message in-app depuis l’onglet Message Styles. Par exemple, vous pourriez vouloir personnaliser la police de tout le texte ou la couleur de tous les liens dans votre message.

Les styles de cette section sont utilisés partout dans votre message, sauf lorsque vous les remplacez pour un bloc spécifique. Si votre message comporte plusieurs pages, vous pouvez également remplacer les styles au niveau du message pour des pages individuelles, à l’exception du type d’affichage et de la largeur maximale.

Pour une expérience de conception plus simple, nous vous recommandons de configurer les styles au niveau du message avant de personnaliser les styles au niveau du bloc.

Pour revenir à l’onglet Message Styles à tout moment :

• Cliquez sur le bouton de fermeture X dans les propriétés d’un bloc individuel
• Sélectionnez le conteneur du message, le bouton de fermeture X du message ou l’arrière-plan de l’éditeur

Polices personnalisées

Nous acceptons les types de fichiers suivants pour les polices : .ttf, .woff, .otf et .woff2. Pour plus d’informations, consultez Fichiers de ressources.

Vous pouvez ajouter plusieurs variantes d’une famille de polices, car certaines options de style peuvent ne pas être disponibles pour les polices personnalisées. Actuellement, nous ne prenons pas en charge l’ajout de polices via URL.

Pour ajouter une police personnalisée :

1. Accédez à la section Content dans l’onglet Message styles.
2. Cliquez sur Add custom font.
3. Téléchargez votre police à l’aide de la bibliothèque multimédia.

Remarque

La police au niveau du message s’appliquera uniquement au message actuel et à tous les messages dupliqués, mais pas aux futurs modèles.

Composants du message

L’éditeur par glisser-déposer utilise deux composants clés pour composer des messages in-app : les lignes et les blocs. Tous les blocs doivent être placés dans une ligne.

Bouton de fermeture x

Pour les messages in-app de type fenêtre modale et plein écran, vous pouvez personnaliser le bouton de fermeture affiché sous la forme en haut de votre message. Les options de personnalisation incluent la position du bouton, la taille, la couleur de remplissage, la couleur d’arrière-plan, le style de bordure et le rayon de bordure.

Mise en forme span

L’ajout d’une mise en forme span au texte dans les messages in-app permet une personnalisation avancée de l’apparence du message, en utilisant différentes couleurs de texte, polices et tailles. La mise en forme span offre à vos utilisateurs une expérience plus engageante et visuellement attrayante en attirant leur attention sur les informations clés et en améliorant la clarté globale du message.

Lignes

Les lignes sont des unités structurelles qui définissent la composition horizontale d’une section du message à l’aide de cellules.

Lorsqu’une ligne est sélectionnée, vous pouvez ajouter ou supprimer le nombre de colonnes dont vous avez besoin depuis la section Personnalisation des colonnes pour placer différents éléments de contenu côte à côte.

Vous pouvez également faire glisser le curseur pour ajuster la taille des colonnes existantes.

En tant que bonne pratique, mettez en forme les propriétés de vos lignes et colonnes avant de mettre en forme les blocs à l’intérieur des lignes. Il existe de nombreux endroits où vous pouvez ajuster l’espacement et l’alignement, donc commencer par les fondations facilite les modifications au fur et à mesure.

Image d’arrière-plan

Vous pouvez ajouter une image d’arrière-plan à une ligne dans le panneau Propriétés de la ligne. Activez Image d’arrière-plan, puis fournissez une URL d’image ou sélectionnez une image depuis la bibliothèque multimédia. Enfin, configurez votre texte alternatif, la taille, la position et si l’image se répète pour créer des motifs sur toute la ligne.

Blocs

Les blocs représentent les différents types de contenu que vous pouvez utiliser dans votre message. Faites-en glisser un dans un segment de ligne existant, et il s’ajustera automatiquement à la largeur de la cellule.

Conseil

Avant d’ajouter des blocs, configurez les styles au niveau du message pour le conteneur du message, la police, les couleurs et tout ce que vous souhaitez personnaliser. Vous pourrez ensuite personnaliser chaque bloc individuellement selon vos besoins. Le bouton de fermeture restera dans la section supérieure de votre message afin que les utilisateurs aient toujours la possibilité de fermer le message.

Chaque bloc dispose de ses propres paramètres, comme un contrôle précis du remplissage. Le panneau de droite bascule automatiquement vers un panneau de style pour l’élément de contenu sélectionné. Pour plus d’informations, consultez Propriétés des blocs éditeur.

Lors de la création de votre message in-app, vous pouvez sélectionner une vue mobile, tablette ou ordinateur dans la barre d’outils pour prévisualiser l’apparence de votre message in-app pour vos groupes d’utilisateurs. Cela garantit que votre contenu est réactif, et vous pouvez effectuer les ajustements nécessaires au fur et à mesure.

Détails créatifs

Plein écran sur les écrans plus grands

Sur une tablette ou un navigateur de bureau, un message in-app en plein écran se positionne au centre de l’écran de l’application. Toute modification de la largeur maximale du message en plein écran ne s’appliquera qu’aux appareils de type tablette et bureau.

Ajouter une image d’arrière-plan

Vous pouvez ajouter une image à l’arrière-plan de votre message depuis l’onglet Styles du message.

1. Dans la zone de canevas, sélectionnez le conteneur d’arrière-plan. Il s’agit de la section défilable de votre message.
2. Dans l’onglet Styles du message, activez Image d’arrière-plan.
3. Ajoutez une image depuis votre bibliothèque multimédia, ou saisissez l’URL où votre image est hébergée.

Conseil

Si vous avez du mal à sélectionner un bloc en particulier, vous pouvez utiliser la flèche vers le haut dans la barre d’outils contextuelle du bloc pour déplacer le focus vers chaque bloc parent.

Permuter les images d’arrière-plan avec Liquid

Pour permuter dynamiquement les images d’arrière-plan en fonction des données utilisateur (telles que des attributs personnalisés ou des propriétés utilisateur), utilisez des blocs Liquid {% capture %} pour assigner l’URL d’image correcte à une variable avant le chargement du HTML et du CSS.

Placez votre logique Liquid au début de votre message, puis référencez la variable capturée dans le champ d’URL de l’image d’arrière-plan. Cela sélectionne l’image correcte en fonction des données de chaque utilisateur.

Après avoir capturé l’URL de l’image, utilisez {{ image_url | strip }} pour afficher l’URL sans les espaces superflus. Vous pouvez ensuite coller ce Liquid dans le champ d’URL de l’image d’arrière-plan pour afficher dynamiquement des images différentes selon les utilisateurs.

Exemple

1
2
3
4
5
6
7
8
9
10

{% capture image_url %}
{% if {{custom_attribute.${membership_tier}}} == 'gold' %}
https://example.com/images/gold-background.png
{% elsif {{custom_attribute.${membership_tier}}} == 'silver' %}
https://example.com/images/silver-background.png
{% else %}
https://example.com/images/default-background.png
{% endif %}
{% endcapture %}
{{ image_url | strip }}

Ajouter du Liquid

Pour ajouter du Liquid à votre message in-app, sélectionnez Ajouter une personnalisation depuis la barre d’outils de l’éditeur. Vous pouvez y ajouter différents types de personnalisation tels que des attributs par défaut, des attributs d’appareil, des attributs personnalisés, et plus encore.

Ensuite, prenez l’extrait de code Liquid généré et insérez-le dans votre message. Après avoir conçu et créé votre message in-app, accédez à Prévisualiser et tester pour prévisualiser votre message.

Utiliser le rédacteur IA

Lorsqu’un bloc de texte est sélectionné dans votre message in-app, sélectionnez Rédacteur IA dans la barre d’outils du bloc pour lancer l’assistant de rédaction propulsé par l’IA. L’assistant de rédaction IA transmet un nom de produit ou une description succincte à l’outil de génération de texte GPT3 d’OpenAI pour produire un texte marketing au style naturel pour vos communications.

Conseil

Vous pouvez gagner quelques clics en surlignant le texte à l’intérieur du bloc avant de cliquer sur l’icône. Le texte surligné sera ajouté à l’outil, et le texte sera généré immédiatement.

Réinitialiser les styles par défaut

Les propriétés que vous avez modifiées par rapport au style par défaut sont marquées d’un point orange. Pour réinitialiser une propriété spécifique à son style par défaut, survolez le champ et sélectionnez Réinitialiser par défaut.

Vous pouvez également réinitialiser l’ensemble du style d’un élément sélectionné en sélectionnant l’icône à côté du nom du panneau de propriétés, puis en sélectionnant Réinitialiser les styles par défaut.

Copier et coller les styles

Après avoir modifié le style d’un élément, vous pouvez copier et coller ces styles sur un autre élément. Lors du collage des styles, seules les propriétés pertinentes pour cet élément sont appliquées.

1. Avec l’élément sélectionné, sélectionnez Copier ou coller les styles à côté du nom du panneau de propriétés (par exemple, si vous avez un bouton sélectionné, à côté de « Propriétés du bouton »).
2. Cliquez sur Copier les styles et sélectionnez l’élément sur lequel vous souhaitez appliquer le style copié.
3. Sélectionnez à nouveau Copier ou coller les styles et choisissez Coller les styles.

Raccourcis clavier

Vous pouvez également utiliser des raccourcis clavier pour copier et coller les styles :