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.
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.
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.
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).
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).
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.
- 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).
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.
Éléments
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é.
-
"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).
-
"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.
-
"Diviseur"
Configurez à la fois la couleur et la position de la ligne verticale pour séparer visuellement les contenus.
-
"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.
-
"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.
-
"HTML"
Insérez un code HTML personnalisé et ajustez sa mise en page.
-
"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.
-
"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.
-
"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.
É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.
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.
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.
Dans la fenêtre contextuelle, attribuez un nom et des étiquettes au composant personnalisé, puis cliquez sur Enregistrer.
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.
4. Vérifier les variables
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 .
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.
Une fois que le résultat du design est satisfaisant, cliquez sur Enregistrer pour sauvegarder les modifications du contenu web.
Continuez à apprendre !
Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de continuer avec les articles suivants :
-
Créer un bloc de produits personnalisés dans un contenu web, pour afficher à vos clients des produits correspondant à leurs intérêts.
- Afficher des produits personnalisés dans un contenu, pour montrer des produits personnalisés à chaque contact grâce à un contenu dynamique et un workflow.
- Afficher le pourcentage de réduction uniquement lorsqu'il y a une remise dans un contenu web, pour mettre en avant les prix réduits et leur pourcentage de réduction dans un contenu.
-
Recommandation sur la page d'accueil, pour afficher sur la page d'accueil les produits récemment visités par vos contacts.