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 à tous les blocs pertinents de votre message in-app depuis l’onglet Message Styles. Par exemple, vous pouvez personnaliser la police de tout le texte ou la couleur de tous les liens de 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 des blocs.

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

• Cliquez sur le bouton de fermeture X dans les propriétés de chaque bloc
• 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.

Composants du message

L’éditeur par glisser-déposer utilise deux composants clés pour composer les 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 dans le coin supérieur droit 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.

Style span

L’ajout d’un style span au texte dans les messages in-app permet une personnalisation avancée de l’apparence du message, en permettant l’utilisation de différentes couleurs de texte, polices et tailles. Le style 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 Column customization pour placer différents éléments de contenu côte à côte.

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

En tant que bonne pratique, formatez les propriétés de vos lignes et colonnes avant de formater 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 Row properties. Activez Background image, 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 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.

Chaque bloc possède ses propres paramètres, comme un contrôle granulaire 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 de bureau 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 responsive, 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 s’affichera 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 tablette et ordinateur de bureau.

Ajout d’une image d’arrière-plan

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

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

Ajout de Liquid

Pour ajouter du Liquid dans votre message in-app, sélectionnez Add Personalization depuis la barre d’outils de l’éditeur. Ici, vous pouvez ajouter différents types de personnalisation tels que les attributs par défaut, les attributs d’appareil, les attributs personnalisés, et plus encore.

Ensuite, prenez votre 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 à Preview & Test pour prévisualiser votre message.

Utilisation du rédacteur IA

Lorsqu’un bloc de texte est sélectionné dans votre message in-app, cliquez sur dans la barre d’outils du bloc pour lancer l’assistant de rédaction alimenté par l’IA. L’assistant de rédaction IA transmet un bref nom ou une description de produit à l’outil de génération de texte GPT3 d’OpenAI pour générer un texte marketing semblable à celui d’un humain pour vos messages.

Réinitialisation des styles par défaut

Les propriétés que vous avez modifiées par rapport à leur 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 Reset to default.

Vous pouvez également réinitialiser tous les styles d’un élément sélectionné en cliquant sur à côté du nom du panneau de propriétés et en sélectionnant Reset to default styles.

Copier et coller des 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é, cliquez sur à côté du nom du panneau de propriétés (par exemple, si vous avez un bouton sélectionné, à côté de « Button properties »).
2. Cliquez sur Copy styles et sélectionnez l’élément sur lequel vous souhaitez appliquer le style copié.
3. Cliquez à nouveau sur et choisissez Paste styles.

Raccourcis clavier

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

Action	Mac	Windows
Copier les styles	⌘ + Shift + c	Ctrl + Shift + c
Coller les styles	⌘ + Shift + v	Ctrl + Shift + v