Smart Content - Éditeur graphique d'e-mails

Le Smart Content E-mail propose un Éditeur graphique d'e-mails permettant de créer du Smart Content de manière visuelle.

L'Éditeur graphique d'e-mails se compose de 4 sections principales :

  • À gauche, des boutons permettent d'ajouter des objets sur le canevas et de définir leurs paramètres.

  • Au milieu, le canevas permet de réaliser votre conception.

  • À droite, un aperçu permet de valider le résultat effectif de votre conception.

  • En haut, des boutons d'action s'affichent pour le canevas de conception et pour l'aperçu.

Vous pouvez ajouter des objets au canevas, tels que des formes carrées, circulaires et triangulaires, des images de catalogue et locales, ainsi que des textes statiques et de catalogue.

Vous pouvez définir les paramètres suivants :
- Paramètres du canevas
- Paramètres du texte
- Paramètres de mise en page
- Paramètres d'image

En outre, les règles du Créateur de contraintes peuvent être définies de sorte à afficher/masquer les objets.

Les boutons d'action visibles en haut sont expliqués dans la section inférieure de cette page.

Remarque :
vous pouvez cliquer avec le bouton droit de la souris sur le canevas pour afficher un menu contextuel, grâce auquel vous pouvez accéder rapidement aux actions ci-après.
- Activer les lignes de grille
- Activer la fixation d’objets
- Placer un objet à l’avant/arrière
- Annuler les modifications
- Cloner/Supprimer un objet sélectionné
- Ajouter un nouvel objet au canevas

 

Ajouter des objets au canevas


Vous pouvez ajouter des objets au canevas de différentes façons.

  • Cliquez sur le bouton d’objet
  • Cliquez et déplacez le bouton d’objet sur le canevas
  • Cliquez avec le bouton droit de la souris et sélectionnez l’objet dans le menu contextuel.

Les différents objets disponibles sont :

  • Carré — Ajoute un carré sur le canevas de conception.

  • Cercle — Ajoute un cercle sur le canevas de conception.

  • Triangle — Ajoute un triangle sur le canevas de conception.
  • Image — Ajoute une image de catalogue ou locale sur le canevas de conception.

    Après avoir sélectionné l'objet Image, choisissez « Catalogue » ou « Image locale » comme type d'image.
    Selon votre sélection, les paramètres ci-dessous s'affichent.
    • Image de catalogue — Espace réservé définissant l'emplacement et la taille de l'image de catalogue qui sera générée par le Smart Content.L'URL de l'image doit être sélectionnée dans les paramètres d'image.
      L'image réelle est rendue par l'algorithme choisi dans la configuration du Smart Content.
      Sur le canevas, l'objet Image de catalogue ressemble à ceci :
    • Image locale — Vous pouvez télécharger une nouvelle image en cliquant sur le bouton 'Télécharger une image' et en sélectionnant un fichier local.
      Cliquez sur le bouton '+ Ajouter au canevas' pour ajouter l'image sur le canevas.

      Remarque 1 : La taille maximale du fichier image est de 200 kb.
      Remarque 2 : La quantité maximale d'images locales pouvant être rendues sur le canevas est fixée à 5. Vous recevez un message d'erreur lorsque la limite est dépassée.



  • Texte — Ajoute du texte statique ou de catalogue (ou une combinaison des deux) sur le canevas de conception.


    • Texte statique — Après avoir sélectionné l'objet Texte, les paramètres de saisie de texte s'affichent. Ce texte peut être ajouté dans l’éditeur de texte enrichi(1) et des styles peuvent lui être appliqués.


      Les styles de texte disponibles sont : barré, souligné, couleur de police, famille de police et taille de police.
      L’icône à droite permet de supprimer le style appliqué au texte (marquez le texte avant de cliquer sur l’icône).

      Le style peut être appliqué de deux manières :
      1. Définissez les valeurs de style avant de saisir votre texte (le style sera appliqué à l’ensemble du texte).
      2. Marquez le texte auquel vous souhaitez appliquer le style (permet d’appliquer différents styles à différentes parties du texte).

    • Texte du catalogue — Sélectionnez un paramètre de catalogue dans la liste déroulante.


      Un paramètre de catalogue peut être ajouté au texte en cliquant sur le signe +.


      • Dans l'éditeur de texte enrichi, les styles s’appliquent de la même manière que pour le texte statique (voir ci-dessus). (1)

      Remarque : Lorsque vous souhaitez appliquer un style de texte à une valeur de paramètre de catalogue, veillez à marquer la valeur entière, y compris les accolades.

      (1) Remarque : La version initiale de l’Éditeur graphique d'e-mails possédait un éditeur de texte simple. Étant donné que ce dernier a été remplacé par un éditeur de texte enrichi, vous recevrez une notification pour les espaces réservés précédemment créés vous invitant à les recréer de manière à les rendre utilisables dans la version mise à jour de l’éditeur de texte.

      Les « anciens » objets texte (sans texte enrichi) restent visibles dans le Smart Content E-mail que vous avez précédemment créé.
      Toutefois, l’ensemble des propriétés de style et de texte sera désactivé.

      Dans les canevas de conception, vous pouvez identifier les « anciens » et « nouveaux » objets Texte en les sélectionnant, et en cherchant le nom d’objet correspondant dans le menu déroulant en dessous du canevas de conception.
      - « text_id » signifie « ancien » (pas de texte enrichi)
      - « richtext_id » signifie « nouveau »


      Exemple d'une valeur de texte avec un texte statique combiné "SALE -" et un paramètre de catalogue "{{ availability }}" :


      Certaines fonctions vous aideront à réaliser la mise en forme.
      Sélectionnez-les dans la deuxième liste déroulante.
      Les fonctions disponibles dépendent du type de champ de catalogue sélectionné.

      Fonctions des champs textuels :
      - uppercase (mots en lettres majuscules)
      - lowercase (mots en lettres minuscules)
      - capitalize (majuscule à la première lettre de chaque mot)


      Fonctions des champs numériques :
      - decimal comma separator (séparateur décimal « virgule ») — Ajoute un séparateur virgule à une valeur numérique.
      - decimal point separator (séparateur décimal « point ») — Ajoute un séparateur point à une valeur numérique.
      - decimal places (emplacement décimal) — par exemple {{decPlaces volume 2}} : Ajoute un séparateur virgule à une valeur numérique, avec un nombre de chiffres (dans cet exemple, 2) après la virgule.

      Remarque : Lorsque le champ de catalogue 'prix' est sélectionné, la valeur affiche également le symbole monétaire devant le nombre.

      Si vous souhaitez utiliser le champ 'prix', mais ne souhaitez pas que le symbole monétaire soit affichée, cela peut être réalisé en ajoutant manuellement un trait de soulignement devant le prix : {{_price}}



    Toutes les valeurs, qu'il s'agisse de texte du catalogue, ou encore de fonctions ou de textes personnalisés, peuvent également être ajoutées/modifiées manuellement dans l'éditeur de texte.

    Remarque : Pour un bon usage, les fonctions doivent être ajoutées avant la valeur du catalogue.
    Exemples :
    {{uppercase title}}
    {{decSepComma price}}


    Vous pouvez également définir un caractère de débordement, qui s'affiche si le texte est trop long.


    Sur le canevas, l'objet Texte ressemble à ceci :

    Remarque : La quantité maximale d'objets Texte pouvant être rendue sur le canevas est fixée à 20. Vous recevez un message d'erreur lorsque la limite est dépassée.

Actions possibles pour les objets du canevas

1. Déplacé — Maintenez le bouton gauche de la souris enfoncé au centre de l'objet et glissez l'objet vers un nouvel emplacement.
2. Redimensionné — Passez la souris sur l'un des carrés d'angle/de côté jusqu'à ce qu'une icône de flèche apparaisse, puis maintenez le bouton gauche de la souris enfoncé et glissez jusqu'à ce que l’objet atteigne la taille voulue.
3. Pivoté — Passez la souris sur le carré centré en haut jusqu'à ce qu'une icône en forme de croix apparaisse, puis maintenez le bouton gauche de la souris enfoncé et glissez jusqu'à ce que l’objet atteigne l'angle de rotation voulu.


L'identifiant de la forme sélectionnée est indiqué sous le canevas de conception.
Vous pouvez également sélectionner des formes dans la liste déroulante plutôt que de les sélectionner directement sur le canevas.

Dans les paramètres de mise en page, vous pouvez définir un identifiant de forme, afin d'identifier chacune d'elles plus facilement.

 

Paramètres du canevas

Définissez la largeur et la hauteur de votre canevas (en pixels), affichez les lignes de grille (et choisissez votre taille de grille) pour aligner facilement vos objets et, éventuellement, les fixer sur la grille, puis modifiez la couleur d'arrière-plan du canevas à l'aide d'un sélecteur de couleurs visuel ou en saisissant un code de couleur RVB ou HEX.

Lorsque les lignes de grille sont activées, elles sont visibles sur le canevas :

 

Paramètres du texte

Vous pouvez ajouter des valeurs de texte statique et de catalogue avec les propriétés du texte.

Lors de l'édition d'un texte existant, vous pouvez visualiser et adapter le style du texte dans l'éditeur de texte riche, puis configurer la taille du champ, ainsi que le placement et l'identifiant de la forme.

 

Paramètres de mise en page

- Pour les formes Triangle, Carré et Cercle, ainsi que l'objet Image locale : Les propriétés peuvent être définies pour le style, le redimensionnement, le placement, les bordures et l'identifiant de la forme.
- Pour l'objet Image de catalogue : Les propriétés peuvent être définies pour le redimensionnement, le placement et l'identifiant de la forme.

Remarque : Les paramètres de mise en page ne s'appliquent pas aux textes (ils utilisent ces paramètres de texte).

- Style — Définissez la couleur de la forme à l'aide d'un sélecteur de couleurs visuel ou en saisissant un code de couleur RVB ou HEX, puis définissez le rayon d’angle de la forme et son niveau d'opacité (la couleur et le rayon d'angle ne sont disponibles que pour les formes carrées, circulaires et triangulaires, et non pour images locales).


- Redimensionnement — La largeur et la hauteur de l'objet peuvent être redimensionnées en faisant glisser les curseurs ou en saisissant les valeurs manuellement. Ces valeurs, exprimées en pixels, sont comprises entre 0 et 500.
Pour les formes carrées, circulaires et triangulaires, des valeurs de déviation peuvent être définies pour modifier l'angle de l'objet sur les axes X et Y. Ces valeurs peuvent être comprises entre 0 et 90.

- Bordure — Vous pouvez ajouter une bordure autour de l'objet, avec la couleur et la taille de votre choix.


- Placement — Les paramètres suivants peuvent être définis :
Alignement horizontal — Horizontalement, les formes et images peuvent être alignés à gauche, au centre ou à droite sur le canevas.
Alignement vertical — Verticalement, les formes et images peuvent être alignés en haut, au milieu ou en bas du canevas.
Positionnement avant/arrière — Si les objets se chevauchent, vous pouvez utiliser cette option pour placer l'objet sélectionné derrière ou devant un autre objet.
(Générez un aperçu pour voir l'effet)



Grouper/dégrouper les objets sélectionnés — Lorsque plusieurs objets sont sélectionnés, le bouton 'Grouper les objets' s'active et permet de grouper différents objets afin de les traiter comme un seul objet (par exemple pour les positionner/aligner tous en même temps).

(Pour sélectionner plusieurs objets, dessinez un rectangle autour des objets à l'aide du curseur de la souris, ou maintenez la touche Majuscule enfoncée et cliquez sur chacun des objets).

Pour dégrouper un groupe d'objets, cliquez sur le bouton 'Dégrouper les objets'. Les objets seront alors traités indépendamment.


- Identifiant de forme — Vous pouvez définir un identifiant de forme, afin d'identifier chacune d'elles plus facilement.


L'identifiant défini sera alors également visible dans la liste déroulante de la forme sélectionnée.

 

Paramètres d'image

Des paramètres d'image peuvent être définis pour les images de catalogue et les images locales.

Image de catalogue :

Sélectionnez le bouton radio du catalogue pour en afficher les paramètres.
– Tout champ du catalogue qui est défini comme une URL d'image (dans la section du catalogue Smart Content) peut être sélectionné dans la liste déroulante.

- L'opacité de l'image peut être définie.
- Vous pouvez également définir l'ajustement de l'image :
Remplir = L'image est redimensionnée de sorte à remplir la dimension donnée. Si nécessaire, l'image est étirée ou écrasée pour s'adapter.
Couvrir = L'image conserve ses proportions et remplit la dimension donnée. Si nécessaire, l'image est coupée pour s'adapter.
Contenir = L'image conserve ses proportions, mais est redimensionnée pour s'adapter à la dimension donnée.

Pour les ajustements « Couvrir » et « Contenir », il est possible de sélectionner des alignements horizontaux et verticaux.

Exemple:
Pour un objet image, l’ajustement « Contenir » est sélectionné et l’alignement horizontal de l’ajustement a été réglé sur « alignement à gauche ».

Lorsque la largeur (250px) de l’espace réservé à l’image est supérieure à sa hauteur (150px) dans le canevas de conception, une image de catalogue de la même largeur et de la même hauteur (150px) est maintenant alignée à gauche dans la zone de l’espace réservé tout en conservant son rapport hauteur/largeur.


Image locale :

Sélectionnez le bouton radio de l'image locale pour en afficher les paramètres.
Vous pouvez télécharger une image personnalisée (d'une taille maximale de 200 kb) et l'ajouter au canevas.

 

Créateur de contraintes

Définissez des règles de contraintes pour déterminer si un objet doit être affiché ou masqué.

Exemple :
Si le paramètre de catalogue 'disponibilité' n'est pas égal à la valeur 'disponible', masquez l'objet sélectionné.

Remarque : Les opérateurs disponibles (dans la deuxième liste déroulante) dépendent du paramètre de catalogue choisi (dans la première liste déroulante).

- Pour les champs textuels, les opérateurs disponibles sont : est égal à, n'est pas égal à, n'est pas nul, est nul.

- Pour les champs numériques, les opérateurs disponibles sont : est égal à (=), est supérieur ou égal à (>=), est supérieur à (>), n'est pas égal à (<>), n'est pas nul, est nul, est inférieur ou égal à (<=), est inférieur à (<).

 

Boutons d'action

En haut de l'Email Graphics Editor, les boutons suivants sont disponibles :

  •  Canevas vide — Votre conception est complètement supprimée et un canevas vierge s'affiche.

  •  Annuler les modifications du canevas — Cliquez sur la flèche pointant vers la gauche pour annuler vos dernières modifications.

  •  Rétablir les modifications du canevas — Cliquez sur la flèche pointant vers la droite pour rétablir les dernières modifications annulées.

  •  Supprimer l'objet — Sélectionnez un objet sur le canevas et cliquez sur ce bouton pour supprimer l'objet sélectionné. Les autres objets du canevas restent les mêmes. (le bouton est grisé lorsqu'aucun objet n'est sélectionné)

  •  Cloner un objet Sélectionnez un objet sur le canevas et cliquez sur ce bouton pour créer une copie exacte de l'objet sélectionné. (le bouton est grisé lorsqu'aucun objet n'est sélectionné)

    Remarque : Il n'est pas possible de cloner un objet lorsque plusieurs objets sont actuellement sélectionnés ou lorsqu'un objet 'groupe' est utilisé.

  • Sélectionner un template — Cliquez sur ce bouton pour afficher les préréglages de templates disponibles dans un pop-up permettant d'effectuer un choix :


    Vous pouvez survoler un template avec le curseur de votre souris pour afficher une infobulle avec plus d'informations sur ce template.


    Après avoir sélectionné l'un des templates, l'Éditeur graphique s'affiche avec le préréglage du template sélectionné visible sur votre canevas de conception.

    Exemple :
    Lorsque le template « Bannière » est sélectionné, les composants suivants sont ajoutés à votre conception :
    – une image du catalogue à gauche, avec l''image_url' (du catalogue de produits) sélectionnée par défaut


    – un texte du catalogue en haut à droite, avec la valeur 'titre' (du catalogue de produits) sélectionnée par défaut


    – un texte du catalogue en bas à droite, avec la valeur 'prix' (du catalogue de produits) sélectionnée par défaut


    De cette façon, il est très facile de configurer rapidement un e-mail de Smart Content avec des images et du texte.
    Il est bien sûr toujours possible d'éditer tous les composants dans l'Éditeur graphique.

    Remarque : Si vous avez cliqué sur le bouton pour afficher les templates disponibles, mais que vous ne souhaitez en sélectionner aucun, revenez en arrière en cliquant sur le bouton Annuler dans le pop-up.
    Aucun template prédéfini ne sera appliqué et vous pourrez continuer à travailler sur la conception de votre e-mail d'origine.


  • Aperçu — Cliquez sur ce bouton pour afficher un aperçu de votre conception sur la droite. Vous pouvez cliquer sur ce bouton à tout moment pour actualiser l'aperçu et valider vos modifications.

    Vous pouvez également activer l’aperçu direct. Dans ce cas, chaque modification apportée au canevas de conception se reflètera immédiatement dans l'aperçu.
    Dans ce cas, le bouton Aperçu permettant de générer un aperçu manuellement est masqué.

    Remarque : Lorsque vous ouvrez une conception Smart Content, assurez-vous que la bascule « Aperçu direct » est activée. Autrement, cliquez sur le bouton Aperçu manuel (lorsque la bascule est désactivée) pour afficher l'aperçu.

    Exemple de conception (au milieu) avec son aperçu (à droite) :

    Au lieu de l'élément de catalogue par défaut affiché dans l'aperçu (celui avec l'ID le plus bas), vous pouvez également prévisualiser des éléments de catalogue spécifiques en saisissant leur ID dans le champ sous l'aperçu.

    Remarque : Si le champ 'URL de l'image' (utilisé pour les images de catalogue) ne contient pas de valeur dans le catalogue (vide), aucune image ne s'affiche.

    Exemple d'un article de catalogue avec l'ID 1 :


    Exemple d'un article de catalogue avec l'ID 10 :

Remarque : si vous sélectionnez un objet sur le canevas, un clic à l'extérieur du canevas avec le bouton gauche de la souris supprimera cette sélection.

Vous pouvez également utiliser les raccourcis clavier suivants (si vous passez la souris sur l'un des boutons applicables, une infobulle s'affichera avec cette information) :

  • Ctrl (Windows) / Cmd (Mac) + Suppr — Supprime l'objet sélectionné.

  • Ctrl (Windows) / Cmd (Mac) + Z — Annule la dernière modification.

  • Ctrl (Windows) / Cmd (Mac) + Y — Rétablit la dernière modification.

  • Ctrl (Windows)/Cmd (Mac) + C — Pour cloner l'objet sélectionné.

  • Ctrl (Windows) / Cmd (Mac) + Maj + V — Charge l'aperçu.

Remarque : Passez le curseur de la souris sur une icône d'information pour afficher une pop-up d'informations sur cette section.

 

Icône du lien vers les rubriques connexesRubriques connexes