Modifier une page
La structure générale d’une page
Une page est divisée en section (encadré bleu), elle-même divisée en colonne (encadré vert).
Dans chaque colonne, on peut ajouter un ou plusieurs modules (encadré noir) : texte, image, bouton, formulaire….
Pour modifier une section
Cliquez sur la section que vous souhaitez modifier puis sur la molette (2ème icône en partant de la gauche) :
Une fenêtre avec 3 onglets s’ouvre.
Cliquez sur “Fond” dans l’onglet “Contenu” pour modifier la couleur de la section en entier, ajouter un dégradé de couleur ou une image de fond :
Si vous avez bien renseigné les couleurs de votre identité visuelle dans le menu Divi > Options du thème, elles s’afficheront automatiquement.
Pour créer une couleur plus transparente, cliquez sur le rectangle de couleur choisie et utiliser la barre à droite pour ajouter de la transparence.
Cliquez sur le bouton vert pour valider les modifications.
Modifier les colonnes
Si vous souhaitez ajouter ou supprimer une colonne, cliquez sur l’icône “Changer la structure de la colonne” (4ème icône en partant de la gauche) et choisissez le nombre de colonnes souhaité :
Si vous souhaitez modifier la couleur de fond d’une colonne, cliquez sur la molette de la colonne que vous voulez modifier.
Dans l’exemple, il y a 2 colonnes : une colonne de texte et une colonne avec une image.
Pour modifier la colonne de gauche, il faudra cliquer sur la molette de la 1ère colonne.
Vous pourrez modifier le fond de cette colonne, les marges…
Validez sur le bouton vert pour enregistrer vos modifications.
Pour faire des modifications sur l’ensemble des colonnes, faites les modifications sur le fenêtre principale :
Modifier les éléments (modules) dans les colonnes
Module Texte
Cliquez sur la molette des paramètres du module :
Modifiez le texte dans l’onglet “Contenu” et l’encart “Corps”
Vous pouvez également ajouter ou modifier la couleur du fond du module dans la partie “Fond”.
Si le module texte fait partie d’un ensemble de plusieurs colonnes (exemple : 2 colonnes, une avec du texte et un bouton et l’autre avec une image), préférez mettre un fond dans la colonne (donc le contenant du module texte).
Ça vous évitera de devoir ajouter des marges.
Dans l’onglet “Style”, vous pouvez modifier la couleur, l’alignement, les marges.
Si vous avez renseigné la couleur des titres et du texte dans « Apparences > Personnaliser« , cela reprendra les informations renseignées par défaut. Vous n’aurez pas à modifier cette partie sauf si vous souhaitez ajouter d’autres couleurs et/ou effets.
Attention pour modifier un titre, il faut choisir le type concerné.
Par exemple, si vous avez utilisé un titre “Heading 2” dans le contenu, il faudra cliquer sur l’onglet “H2” pour modifier l’apparence de ce titre.
Si vous avez ajouté un “Heading 3”, il faudra cliquer sur l’onglet “H3”…
Je vous rappelle également qu’il ne doit y avoir qu’un seul Heading 1 (H1) par page.
Les titres suivent une hiérarchie qui permet autant au lecteur qu’aux moteurs de recherche de comprendre la structure de la page.
C’est très important pour le référencement.
Vous pouvez ajouter des marges dans “Espacement” :
Les Marges autour du module, les marges internes à l’intérieur du module.
Exemple : le module est délimité par le cadre noir épais, la zone orange est une marge, la zone bleue est une marge interne.
Pour modifier l’apparence d’un lien, allez dans l’onglet Style, paramètre Texte puis cliquez sur l’onglet « lien«
Modifier une image
Cliquez sur l’icône de réglages :
Cliquez dans l’encadré Image pour choisir ou modifier l’image :
Dans la fenêtre qui s’affiche, faites un glisser-déposer pour ajouter des images à la bibliothèque d’images ou choisissez une image.
Pensez à remplir le texte alternatif avec le mot clé principal pour le référencement.
Ce texte s’affiche lorsque l’image ne peut pas se charger correctement, pour les personnes mal-voyantes qui utilisent un lecteur spécial, et pour votre SEO.
Cliquez “Charger une image” pour valider.
Le paramètre “Lien” sert à rendre l’image cliquable.
Vous pouvez ajouter un lien vers une autre page par exemple.
Attention que le visiteur comprenne bien que cela soit cliquable, pour l’expérience utilisateur, il faudra bien faire attention à différencier les élements cliquables des éléments non cliquables.
Pour modifier le style de l’image
“Alignement” sert à placer l’image à gauche, au milieu ou à droite dans la colonne.
“Dimensionnement” permet de changer la taille de l’image.
Attention de bien vérifier le côté responsive si vous changez ce paramètre.
Par défaut, si vous changez la dimension, cela se répercute en cascade sur l’apparence “Tablette” et “Mobile”.
Pour modifier un seul type d’écran, cliquez sur le petit mobile :
Choisissez le type d’écran à modifier (pc, tablette ou mobile).
Vous allez voir l’apparence changer à l’écran et se mettre au dimensions correspondantes.
Faites les modifications désirées.
“Espacement” sert à rajouter des marges.
« Bordure » permet d’ajouter une bordure colorée.
“Boîte d’ombre” permet d’ajouter une ombre autour de l’image pour faire un effet de profondeur.
C’est très utile pour faire comprendre qu’une image ou un bouton est cliquable.
Modifier un bouton
Cliquez sur l’icône de réglage :
Dans l’onglet “Contenu”, changez le texte du bouton :
Modifiez le lien soit avec une adresse précise :
Soit en cliquant sur l’icône de contenu dynamique à droite et choisir le type de lien.
Les liens dynamiques les plus utiles sont Lien de la page d’accueil, Lien Article et Lien Page.
Pour Lien Page, choisissez la page dans le menu déroulant, puis validez.
Dans l’onglet “Style”, vous trouverez les mêmes réglages que pour l’image.
Le paramètre “Bouton” permet de créer un bouton différent de celui personnalisé dans “Apparence > Personnaliser”.
Cochez “Utiliser des styles personnalisés pour Bouton” pour créer un bouton personnalisé différent.
Paramétrer un formulaire
Cliquez sur l’icône de paramétrage du formulaire.
La fenêtre qui s’ouvre permet de paramétrer chaque champ (en cliquant sur l’icône de réglages à gauche du champ) et le formulaire dans son ensemble.
On va commencer par paramétrer le formulaire pour qu’il envoie les données renseignées vers une adresse mail spécifique.
Dans l’onglet “Contenu”, après les différents champs, paramétrer les réglages “Texte” avec le titre du formulaire, un message lorsque le formulaire a bien été envoyé, le texte du bouton d’envoi :
Dans le paramètre “E-mail”, renseigner l’e-mail qui va recevoir les données du formulaire.
Ce paramètre est très important, si l’e-mail n’est pas renseignée, les messages du formulaire ne pourront pas être récupérés.
Cochez le paramètre la case “Rediriger” si vous préférez que le formulaire redirige vers une page spéciale (page de remerciement, page d’accueil…) après l’envoi du formulaire.
Renseigner l’url de la page.
Cochez la case de protection contre les spams désirée.
Si vous souhaitez utiliser la protection par défaut, cochez “Utiliser le captcha de base”.
Si vous préférez utiliser le captcha de Google, cochez la première case et suivez les instructions.
Pour modifier un champ, cliquez sur les réglages du champ correspondant :
Modifier l’ID (paramètre qui permet de récupérer la donnée et l’envoyer dans un message), le titre (c’est le label qui s’affiche dans le champ).
Vous pouvez modifier le type de champ. Renseigner le type permet d’ajouter une protection des données qui seront envoyées.
Dans l’onglet “Style”,
Vous pourrez modifier le “Modèle” si vous souhaitez que le champ s’affiche sur toute la largeur.
Dans le réglage “Champs”, vous pourrez modifier les couleurs comme dans les autres modules.
Validez vos modifications du champ ou fermez en cliquant sur le bouton rouge avec la croix.
Si vous souhaitez que tous les champs aient le même réglage de style, revenez dans les réglages du formulaire général.
Vous pourrez modifier la couleur du bouton dans le réglage “Bouton” du formulaire général.
Vérifiez bien que la présence d’une case à cocher pour récupérer le consentement des personnes concernant leurs données personnelles (le règlement de la protection des données est assez stricte, n’utilisez pas les données reçues pour autre chose que ce qui est mentionné.
Exemple: utiliser les données du formulaire pour envoyer un mail promotionnel si la personne n’y a pas consenti).
Ajouter un champ pour le RGPD
Ajoutez un nouveau champ si la case n’est pas présente.
Ajouter un ID
Choisissez le type du champ « Case » et ajouter le texte.
Modifier le module Résumé (icône/image et texte)
Dans l’onglet “Contenu”, modifiez le titre et le texte :
Modifiez l’icône.
Si vous préférez mettre une image, décochez la case et cliquez pour ajouter une image.
Dans l’onglet “Style”, modifiez la couleur de l’icône et son placement (à gauche ou au dessus du texte) :
Modifier un accordéon
C’est le même système que les modules précédents, mais dans l’onglet “Style” il faudra modifier :
La couleur du titre lorsque l’accordéon est ouvert ou fermé
La couleur du fond lorsque l’accordéon est ouvert ou fermé
La couleur de l’icône lorsque l’accordéon est fermé
Ou lorsque l’accordéon est ouvert
Ajouter des éléments sur une page
Ajouter un section
Pour ajouter une section (bande de la largeur de l’écran).
Cliquez sur la section précédente (avec le cadre bleu) puis cliquez sur le “plus”
Ajouter des colonnes
Cliquez sur la colonne précédente (avec le cadre vert) puis cliquez sur le “plus”
Ajouter un module(texte, image, formulaire…)
Cliquez sur le module précédent (avec le cadre noir) puis cliquez sur le “plus”
Ajoutez le module souhaité :
Ajouter une vidéo
Supprimer un module existant avec l’icône « poubelle » ou ajouter un module en cliquant sur le « plus » +
Recherchez le module « Vidéo »
Supprimer la vidéo de présentation et ajouter une vidéo soit dans vos médias soit par une url.
Attention, la vidéo doit vous appartenir (vous ne pouvez pas utiliser une vidéo dont vous ne détenez pas les droits) et elle doit faire 300Mo maximum.
Prenez également en compte qu’une vidéo ralentie énormément le temps de chargement de la page. Une personne qui accède à votre page (surtout sur mobile) risque de partir si le chargement est trop long.
Dans le menu à gauche, séléctionnez « Insérer à partir d’une URL » si votre vidéo est stockée sur YouTube ou Viméo par exemple.
Vous pouvez changer l’aperçu de la vidéo en ajoutant une image superposée à la vidéo.
Dans le menu « Superposition », ajouter l’image ou générer une image automatiquement en cliquant sur le bouton correspondant.
Ajouter un lien (interne ou externe)
Cliquez sur les paramètres de la zone de texte qui va comporter un lien.
Puis surligner le ou les mots concernés.
Cliquez sur « Insert Link« , puis renseignez l’adresse du lien.
Si le lien pointe vers une page de votre site, vous pouvez omettre la partie https://www.monsite.fr/.
Par exemple, vous souhaitez faire un lien vers la page prestation (qui est une page enfant de la page prestations), il faudra mettre /prestations/prestation dans la partie url.
Autre exemple, si vous souhaitez faire un lien vers la page A propos, qui n’a pas de page parente, il faudra mettre /a-propos dans la partie url.
Si vous avez un doute sur le slug (partie de l’url qui correspond à votre page) ou si la page a une page parent, vous pouvez retrouver cette information dans le menu « Pages », puis « Modification rapide » de la page concernée.
Ajouter un lien dans une même page (ancre de lien)
Ajoutez un ID au module ou à la section qui correspondra à l’ancre.
Cliquez sur les paramètres du module ou de la section, allez dans l’onglet « Avancé »
Attention l’ID doit être un mot unique sur tout le site. Vous ne pourrez pas ajouter 2x le même ID au risque de créer des problèmes sur le site.
Lorsque l’ID est renseigné et validé, allez dans les paramètres du module de texte où sera le lien.
Surlignez le texte et cliquez sur « Insert Link ».
Dans la partie url, renseignez l’ID de l’ancre avec un dièse (hashtag) devant.
Cliquez sur « Underline » pour qu’on puisse bien voir que le lien est cliquable (bonne pratique web).
Modifier la Page 404
Dans le menu Divi > Thème Builder
Vous arrivez dans le paramètrages des pages générales des pages.
Pour modifier la page 404, cliquez sur le crayon à côté du rectangle noir “Corps personnalisé”
Vous pouvez maintenant modifier la page comme une page classique
Sauvegardez lorsque les modifications sont terminées puis cliquez sur la croix, en haut à droite, pour sortir de la page.
Validez vos modifications en cliquant sur le bouton vert “Toutes les modifications enregistrées”
Modifier les Pages légales
Les différentes pages légales sont obligatoires sur un site web (mentions légales, politique de confidentialité, CGV).
Elles sont fournies avec un modèle gratuit généré avec l’intelligence artificielle.
Il faut absolument les modifier.
Si vous ne savez pas comment faire, un juriste ou un avocat pourra vous aider.
Retirer le mode maintenance et décocher la case pour l’indexation du site
Dès que votre site est modifié, il faudra retirer le mode maintenance.
Dans le menu WP maintenance puis Général : décochez la case « Oui, activer le mode maintenance ».
Puis dans le menu Réglages et Lecture, décochez la case pour les robots « Demander aux moteurs de recherche de ne pas indexer ce site ».
Pour indexer votre site
Rank Math
Téléchargez le plugin Rank Math.
Activez le plugin Rank Math, suivez les instructions d’inscription pour une license gratuite.
Dans le menu Rank Math puis Réglages du plan du site, récuper l’adresse du sitemap. Cette adresse se termine par sitemap_index.xml. Elle servira à indexer le site sur la Google Search Console.
Cette étape est importante, si votre site n’est pas indéxer, il ne sera pas visible rapidement voire pas du tout.
Site Kit by Google
Téléchargez et Activez le plugin Site Kit par Google.
Suivez les instructions pour connecter votre compte Google aux outils d’analyses et surtout à la Google Search Console.
Connectez-vous à votre Google Search Console.
Allez dans le menu Sitemap et ajoutez le sitemap de votre site.
Si cette étape vous semble trop compliquée, n’hésitez pas à me contacter par mail.