Paramètres de style des messages in-app

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

Styles au niveau des messages

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

Les styles définis dans cette section sont utilisés partout dans votre message sauf aux endroits où 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 les pages individuelles, à l’exception du type d’affichage et de la largeur maximale.

Pour une expérience de conception plus facile, nous vous recommandons de configurer des styles au niveau des messages avant de personnaliser les styles au niveau des blocs.

Pour revenir à tout moment à l’onglet Styles de messages:

• Cliquez sur le bouton de fermeture « X » sur 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, voir 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. Nous ne prenons pas actuellement en charge l’ajout de polices par URL.

Pour ajouter une police personnalisée :

1. Accédez à la section Contenu de l’onglet Styles de message.
2. Cliquez sur Ajouter une police personnalisée.
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 éléments clés pour la composition des messages in-app : les lignes et les blocs. Tous les blocs doivent être placés dans une ligne.

Fermer le bouton x

Pour les messages in-app modaux et plein écran, vous pouvez personnaliser le bouton de fermeture affiché sous forme de dans le coin supérieur droit de votre message. Les options de personnalisation comprennent la position du bouton, sa taille, la couleur de remplissage, la couleur d’arrière-plan, le style de la bordure et le rayon de la bordure.

Style des travées

L’ajout d’un style personnalisé au texte des messages in-app permet de personnaliser davantage l’aspect des messages, en utilisant des couleurs, des polices et des tailles de texte différentes. 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 en utilisant des cellules.

Lorsqu’une ligne est sélectionnée, vous pouvez ajouter ou supprimer le nombre de colonnes dont vous avez besoin dans la section Personnalisation des colonnes 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 vos propriétés de ligne et de colonne avant de formater l’un des blocs à l’intérieur des lignes. Il existe de nombreux endroits où vous pouvez ajuster l’espacement et l’alignement. Il est plus facile de le modifier au fur et à mesure en commençant à la base.

Image d’arrière-plan

Vous pouvez ajouter une image d’arrière-plan à une ligne dans le panneau des propriétés de la ligne. Basculez sur Image d’arrière-plan, puis indiquez l’URL de l’image ou sélectionnez une image dans la bibliothèque multimédia. Enfin, configurez le texte alt, la taille, la position et la répétition éventuelle de l’image pour créer des motifs sur toute la ligne.

Blocs

Les blocs représentent divers types de contenu que vous pouvez utiliser dans votre message. Faites-en glisser un à l’intérieur d’un segment de ligne existant et il s’adaptera automatiquement à la largeur de la cellule.

Chaque bloc possède ses propres paramètres, comme un contrôle granulaire sur la marge intérieure. Le panneau latéral droit passe automatiquement à un panneau de style pour l’élément de contenu sélectionné. Pour plus d’informations, voir Propriétés du bloc éditeur.

Lorsque vous créez votre message in-app, vous pouvez sélectionner un affichage sur mobile, tablette ou ordinateur dans la barre d’outils pour prévisualiser l’affichage de votre message in-app pour vos groupes utilisateur. Cela garantira que votre contenu est réactif et que vous pouvez effectuer tous les ajustements nécessaires au fur et à mesure.

Détails créatifs

Plein écran sur les écrans plus larges

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

Ajout d’une image de fond

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

1. Dans la zone du canvas, sélectionnez le conteneur d’arrière-plan. Il s’agit de la partie de votre message que l’on peut faire défiler.
2. Dans l’onglet Styles de message, activez l’option Image d’arrière-plan.
3. Ajoutez une image à partir de votre bibliothèque multimédia ou saisissez l’URL où votre image est hébergée.

Ajout de Liquid

Pour ajouter du liquide dans votre message in-app, sélectionnez Ajouter une personnalisation dans la barre d’outils de l’éditeur. Ici, vous pouvez ajouter différents types de personnalisation tels que des attributs par défaut, des attributs d’appareil, des attributs personnalisés, etc.

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, allez sur Prévisualisation & Test pour prévisualiser votre message.

Utiliser le rédacteur basé sur l’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’intelligence artificielle. L’assistant de rédaction de l’intelligence artificielle transmet un bref nom ou une brève description de produit à l’outil de génération de communication GPT3 d’OpenAI afin de générer un texte marketing semblable à celui d’un humain pour votre envoi de messages.

Réinitialiser les 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établir le style par défaut d’une propriété spécifique, survolez le champ et sélectionnez Rétablir la valeur par défaut.

Vous pouvez également réinitialiser tous les styles d’un élément sélectionné en sélectionnant le bouton à côté du nom du panneau de propriétés et en sélectionnant Rétablir les styles par défaut.

Copier et coller des styles

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

1. L’élément étant sélectionné, sélectionnez à côté du nom du panneau de propriétés (par exemple, si vous avez sélectionné un bouton, à côté de “Propriétés du bouton”).
2. Cliquez sur Copier les styles et sélectionnez l’élément où vous souhaitez appliquer le style copié.
3. Sélectionnez de nouveau et choisissez Coller des styles.

Raccourcis clavier

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

Action	Mac	Windows
Copier des styles	⌘ + Maj + c	Ctrl + Maj + c
Coller des styles	⌘ + Maj + v	Ctrl + Maj + v