Éditeur de contenu web

L'éditeur de contenu web vous permet de concevoir, de manière responsive et très visuelle, les contenus personnalisés qui seront affichés à vos contacts depuis votre compte, via des workflows créés à cet effet, sans nécessiter de programmation supplémentaire sur votre site. 

  

Connectif propose 5 types de contenus web : popupfull screenslide infloating bar et inline. Pour en savoir plus sur les particularités de chacun, cliquez sur leurs noms pour visiter les articles détaillés.

 

Comment accéder ?

Vous pouvez accéder à l'éditeur de contenu web via deux méthodes :

1. Depuis “Contenu > Contenu Web”. Cliquez sur  Créer un nouveau contenu web pour générer un nouveau contenu, ou sur Plus   puis sélectionnez Modifier pour éditer un contenu web existant.

  

Lors de la création d'un nouveau contenu web, sélectionnez le type et attribuez-lui un nom pour l'identifier facilement.

Editeur_de_contenu_web_-_1.png

2. Depuis le nœud "Envoyer contenu web" dans un workflow, en cliquant sur  (Modifier la configuration du nœud). Cliquez sur  Créer un nouveau contenu ou sur   Modifier pour éditer un contenu web existant.

Editeur_de_contenu_web_-_2.png

 

Interface

L'éditeur de contenu web est composé de trois blocs :

1. Aperçu et enregistrement : pour enregistrer ou annuler les modifications apportées. Vous pouvez également prévisualiser le résultat final du contenu qui sera intégré dans votre eCommerce ou consulter sa version HTML.

2. Panneau de conception : pour construire visuellement le contenu web en utilisant les structures et composants du panneau 3 (outils).

3. Outils : pour configurer toutes les propriétés du contenu et utiliser les composants de mise en page. Ce panneau peut être réduit ou développé en cliquant sur  (Ouvrir les outils) ou  (Fermer les outils).

Editeur_de_contenu_web_-_3.png

 

Fonctionnement

L'éditeur de contenu web utilise la méthode de conception 'drag and drop' (glisser-déposer), ce qui permet de concevoir les contenus de manière rapide, simple et très visuelle.

 

1. Modifier le style général

Dans le panneau Outils (3), cliquez sur l'onglet Général pour modifier les paramètres d'apparence générale du contenu. Vous pouvez également y accéder en cliquant sur   Propriétés générales du panneau de conception (2).

  

Bien qu'il existe des paramètres communs, la configuration des propriétés générales peut varier selon le type de contenu web que vous créez.
N'oubliez pas que vous disposez ci-dessus des liens vers la documentation de chacun d'entre eux.

Les paramètres communs à définir sont :

  • Nom : nom que vous souhaitez donner au contenu pour l'identifier dans votre compte Connectif.

  • Étiquettes : catégorisez votre contenu web et retrouvez-le rapidement en cliquant sur   Ajouter des étiquettes et en ajoutant des mots-clés qui vous aideront à l'identifier.
 

Les étiquettes sont très utiles pour retrouver rapidement vos workflows ou pour les regrouper en fonction de leurs caractéristiques et de leur objectif. Nous vous recommandons d'ajouter des étiquettes avec :
— Nom de la campagne.
— Date de lancement.
— Public cible.
— Objectif de la campagne (vente, fidélisation, acquisition…).

Par exemple, en utilisant les étiquettes "Soldes de Printemps", "Clients ayant acheté" et "Acquisition".

  • Bordures : couleur, épaisseur et style de la bordure de votre contenu.
  • Fond du contenu : couleur et effets d'image pour la couche de fond de votre contenu.
  • Ombre : couleur et effets d'ombre de la structure qui affichera votre contenu.
  • Z Index : valeur numérique indiquant l'ordre de superposition des couches.
  • Responsive : seuil de conception responsive (jusqu'à quelle largeur d'écran il sera considéré comme un appareil mobile).

Editeur_de_contenu_web_-_4.png

 

2. Construire un contenu web par blocs

Dans le panneau Outils (3), cliquez sur l'onglet Composants pour élaborer votre composition en faisant glisser et déposer des structures ou des éléments dans le panneau de conception (2).

 

Structure

Répartition que prendra un bloc d'éléments au sein de la mise en page du contenu web. Elle peut se présenter en une ou plusieurs colonnes, avec des proportions identiques ou différentes.

La structure doit être définie en premier lieu. Si elle n'est pas incluse, par défaut une structure à une colonne sera utilisée.

Une fois le bloc d'éléments créé, placez la souris dessus et cliquez sur  (Modifier le bloc) pour le modifier,  (Dupliquer le bloc) pour créer un duplicata ou  (Supprimer le bloc) pour l'effacer.

Editeur_de_contenu_web_-_5.png

 

Éléments

  

Contrairement aux propriétés générales, les éléments sont communs et peuvent être utilisés pour concevoir tous les types de contenu web.

Les éléments sont les unités minimales de contenu fonctionnel qui permettent de construire la mise en page de votre contenu web, en les faisant glisser dans les blocs créés dans le panneau de conception (2). Comme pour la structure, vous pouvez les éditer en plaçant la souris sur un élément et en cliquant sur le bouton  (Modifier l'élément) ou directement sur le contenu lui-même. Vous pouvez également les dupliquer en cliquant sur  (Dupliquer l'élément), ou les supprimer en cliquant sur  (Supprimer l'élément).

 

Les éléments disponibles sont :

  • "Texte"
    Rédigez votre contenu en appliquant un format enrichi (gras, italique, liens…), en insérant des variables dynamiques ou en modifiant la disposition dans le bloc inséré.

Editeur_de_contenu_web_-_6.png

 

Les variables dynamiques permettent de personnaliser le texte en fonction des données collectées dans le profil de chaque contact. Pour en savoir plus sur les variables et améliorer les performances de votre contenu web, nous vous recommandons de consulter l'article Que sont les variables et comment les utiliser.

  

Le bouton     (Convertir en HTML) de cet élément et des suivants convertit l'élément texte en format HTML de manière irréversible. Pour utiliser cette fonction, vous aurez besoin de connaissances de base en HTML & CSS. Si vous n'avez pas d'expertise dans ce domaine, nous vous recommandons de ne pas procéder à la conversion.

  • "Image"
    Si votre image est déjà publiée sur Internet, collez l' URL de l'image pour l'inclure dans le contenu web. Pour la télécharger depuis votre appareil, cliquez sur   Télécharger l'image ou sur   ), puis sélectionnez le fichier dans la fenêtre contextuelle. Une fois chargée, l'URL de l'image sera automatiquement renseignée.

    Vous pouvez également ajouter un lien à l'image, ajuster sa position par rapport au bloc qui la contient ou changer la couleur d'arrière-plan. En option, vous pouvez définir le Texte alternatif (qui s'affiche si l'image ne charge pas) et l'Attribut ‘title’ de l'image (le texte affiché lors du survol de l'image).

Editeur_de_contenu_web_-_7.png

  • "Bouton lien"
    Définissez le texte qui apparaîtra sur votre bouton, l'attribut ‘title’ et le lien (qui peut être spécifique ou prédéfini pour exécuter une action donnée). Pour configurer son apparence visuelle, sélectionnez les couleurs de texte et d'arrière-plan, personnalisez les bordures et les coins, et ajustez sa position dans le bloc.

Editeur_de_contenu_web_-_8.png

  • "Diviseur"
    Configurez à la fois la couleur et la position de la ligne verticale pour séparer visuellement les contenus.

Editeur_de_contenu_web_-_9.png

  • "Espace"
    Définissez la distance à insérer entre deux blocs. Par défaut, ce bloc est transparent, mais vous pouvez définir une couleur si nécessaire pour votre mise en page.

Editeur_de_contenu_web_-_10.png

  • "Produits"
    Insérez un carrousel de produits qui sera complété avec les articles d'intérêt pour le contact. Vous pouvez choisir parmi trois modèles par défaut (Produit de base, Produit avec marque ou Produit avec prix) ou personnaliser leur apparence finale dans l'éditeur de texte. Vous pouvez également définir la structure des lignes et des colonnes en fonction de l'appareil.

 

Pour que le carrousel de produits affiche les articles pertinents pour le contact, il est indispensable d'utiliser un nœud “Obtenir des produits” avant le nœud “Envoyer du contenu web”. Vous pouvez en apprendre plus dans les articles Afficher des produits personnalisés dans un contenu et Nœud “Obtenir des produits”.

Editeur_de_contenu_web_-_11.png

  • "HTML"
    Insérez un code HTML personnalisé et ajustez sa mise en page.

  

Pour insérer cet élément, il est recommandé de faire appel à un expert en mise en page et design CSS et HTML afin de garantir la bonne visualisation du contenu.

Editeur_de_contenu_web_-_12.png

  • "WhatsApp"
    Ajoutez un bouton permettant aux utilisateurs de vous contacter ou de partager la page qu'ils visitent via WhatsApp. Définissez le texte qui apparaîtra sur votre bouton, l'attribut ‘title’, le type d'action et le message par défaut qui sera envoyé. Pour configurer son apparence visuelle, sélectionnez les couleurs du texte et de l'arrière-plan, personnalisez les bordures et les coins, et ajustez sa position dans le bloc.

Editeur_de_contenu_web_-_13.png

  • "Vidéo"
    Collez l'URL de la vidéo YouTube ou Vimeo que vous souhaitez afficher dans votre contenu et définissez ses options de lecture. Si elle est valide, la vignette de la vidéo apparaîtra dans le panneau de conception (2).
    Pour les réglages visuels, vous pouvez ajuster la disposition de la vidéo ou changer la couleur de fond.

Editeur_de_contenu_web_-_14.png

  • "Compte à rebours"
    Configurez le compteur en définissant une date de fin et son format. Personnalisez la police, la taille et la couleur des chiffres et des étiquettes, dont vous pouvez également modifier le texte. Choisissez une couleur d'arrière-plan et ajustez la disposition du compteur.

Editeur_de_contenu_web_-_15.png

 

Éléments de formulaire

Les éléments de formulaire permettent de collecter des informations sur le contact via votre contenu web, ce qui permet de capturer des leads, de réaliser des sondages, des enquêtes, etc.

  

Si vous envisagez de créer un formulaire dans votre contenu web, nous vous recommandons de lire l'article Formulaires dans les contenus web.

Les éléments de formulaire disponibles selon le type de données collectées sont :

  • "Texte" : pour un ou plusieurs mots, tous les caractères sont acceptés.
  • "Nombre" : pour toute valeur numérique avec ou sans décimales.
  • "Date" : pour une date au format jour, mois et année, compatible en interne avec ISO 8601.
  • "Email" : pour une adresse e-mail valide.
  • "Multiligne" : pour plusieurs lignes de texte.
  • "Radio" : pour afficher une liste d'options dont une seule peut être sélectionnée.
  • "Sélection" : pour afficher un menu déroulant avec plusieurs options dont une seule peut être sélectionnée.
  • "Case à cocher" : pour afficher une liste d'options dont une ou plusieurs peuvent être sélectionnées.
  • "Bouton Envoyer" : Permet au contact d'envoyer le formulaire et de recueillir dans Connectif les données saisies.
  

Lorsque le contact clique sur ce bouton, un événement "Formulaire envoyé" est généré, auquel il est possible de réagir dans un workflow via le nœud "À l'envoi du formulaire".

Editeur_de_contenu_web_-_16.png

 

Pour en savoir plus sur les types de données que vous pouvez recueillir auprès des contacts, cliquez ici.

 

3. Créer et utiliser des composants personnalisés existants

Dans la section Composants personnalisés du bloc d'outils (3), cliquez sur   Créer nouveau pour enregistrer la conception que vous avez réalisée comme modèle. Sélectionnez le bloc ou les blocs qui feront partie du modèle et, dans la barre d'aperçu et d'enregistrement (1), cliquez sur  Créer nouveau.

Editeur_de_contenu_web_-_17.png

Dans la fenêtre contextuelle, attribuez un nom et des étiquettes au composant personnalisé, puis cliquez sur   Enregistrer.

Editeur_de_contenu_web_-_18.png

  

Les composants personnalisés peuvent être utilisés dans tout type de contenu web comme modèle, indépendamment du contenu d'origine à partir duquel ils ont été créés.

Vous pouvez également concevoir rapidement vos contenus web depuis le panneau Outils (3), en faisant glisser dans la zone de conception (2) les composants personnalisés que vous avez créés, disponibles dans la section Composants personnalisés de l'onglet Composants.

Editeur_de_contenu_web_-_19.png

 

4. Vérifier les variables

  

Si vous n'avez pas utilisé de variables dans votre contenu web, vous pouvez ignorer cette section.

Les variables sont un élément qui permet de personnaliser vos contenus. Examinez les variables créées et le nombre de fois qu'elles apparaissent dans les éléments de texte depuis le panneau Outils (3), dans l'onglet Variables. Pour modifier leur format, cliquez sur  .

Editeur_de_contenu_web_-_20.png

 

Pour en savoir plus sur le format des variables, cliquez ici.

 

5. Aperçu du résultat final et enregistrement

Dans le panneau d'aperçu et d'enregistrement (1), vous pouvez voir le résultat final de votre contenu web.

Tous les contenus créés sont responsives. Vous pouvez cliquer sur  Aperçu pour vérifier le rendu final. Cliquez sur  (Vue sur ordinateur) pour voir le rendu sur desktop, ou cliquez sur  (Vue sur mobile) pour voir le rendu sur les appareils mobiles.

Editeur_de_contenu_web_-_21.png

Une fois que le résultat du design est satisfaisant, cliquez sur   Enregistrer pour sauvegarder les modifications du contenu web.

 

Gardez à l'esprit que les styles appliqués dans votre e-commerce peuvent affecter l'apparence du contenu web. Vérifiez la configuration héritée des règles CSS globales si l'apparence des éléments de Connectif sur votre site diffère de celle obtenue dans l'éditeur de contenu.

 

 

 

 Félicitations !
Vous êtes arrivé à la fin de la leçon.

  

Vous avez encore des questions non résolues ?
Rappelez-vous que vous avez à votre disposition nos spécialistes chez Connectif. Pour les contacter, il vous suffit d'ouvrir un ticket de support en cliquant sur le bouton bleu “Aide” de votre tableau de bord.

 


Continuez à apprendre !

Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de continuer avec les articles suivants :