Table des matières :
On passe enfin au design et à la personnalisation de ton site!
Avant de commencer la personnalisation, il est important de comprendre le fonctionnement de Divi et des pages.
Woocommerce est déjà installé avec ton template. En allant sur l’onglet dédié, tu verras quelles sont les étapes à suivre.
1. Le fonctionnement du Divi Builder
Pour t’aider à comprendre le fonctionnement, imagine-toi qu’on parle de boîtes qui sont imbriquées les unes dans les autres.
Voilà à quoi ressemble le Divi Builder sur une page vierge.
Pour t’aider à comprendre le fonctionnement, imagine-toi qu’on parle de boîtes qui sont imbriquées les unes dans les autres.
La plus grande “boîte” est en bleu et on l’appelle Section.
Dans les Sections, on a des “boîtes” vertes qu’on appelle Lignes ou Rangées.
Dans les Lignes, on a des “boîtes” grises qui sont les Modules.
Les Sections (en bleu) sont la base de la page, la fondation. La boîte la plus grande qui va comprendre les éléments de notre page.
Les Lignes (en vert) nous permettent de choisir le nombre de colonnes qu’on veut sur notre page.
1.1 Les modules
Divi est composé de 46 modules. Il y a donc pas d’éléments différents qui peuvent être ajoutés sur les pages.
Il n’est pas nécessaire de savoir à quoi servent tous les modules, surtout si tu ne comptes pas modifier ton template plus que ça. Mais je te laisse une petite description de chaque module ci-dessous à titre d’information.
Et d’ailleurs, le meilleur moyen de découvrir à quoi servent chacun des modules, c’est d’expérimenter par toi-même.
- Le module Texte : pour ajouter du texte
- Le module Image : pour ajouter des images
- Le module Blog : pour afficher tes derniers articles de blog
- Le module Boutique : pour afficher tes derniers produits
- Le module Bouton : pour ajouter des boutons où tu le souhaites
- Les modules Accordéon ou Bascules : par exemple pour créer des FAQs
- Le module Résumé : pour créer des espaces avec une icône/une image + un texte
- Le module Diapo : pour réer un carrousel d’image
Au final, le meilleur moyen de découvrir à quoi servent chacun des modules, c’est d’expérimenter par toi-même 🙂
1.1.1. Les paramètres des modules
Chaque Module a des paramètres qui fonctionnent de la même manière.
Pour accéder aux paramètres, il suffit de passer ta souris sur le module et cliquer sur la petite roue dentée.
Tu verras ensuite qu’il y a trois onglets :
- Onglet Contenu : pour ajouter le contenu comme le textes, les images, etc.
Le contenu changera selon la nature du module, mais tu trouveras la plus souvent les éléments suivants :
- L’espace pour ajouter ton texte (dans le cas où il y a une partie texte)
- Là où il y a écrit Paragraph, tu peux choisir le style du texte
- Tes titres devraient être en H1, H2, H3, etc.
- Le texte standard devrait être en Paragraph
- Dans l’onglet Texte, tu peux voir le code créé quand tu modifies le style du texte (juste pour info)
- Dans Lien, tu peux ajouter un lien à l’intégralité du module (cela signifierait que n’importe où où ton visiteur cliquera sur le module, il sera redirigé ailleurs)
- L’Etiquette Admin est simplement là pour informer du nom du module
- Onglet Style : pour modifier les couleurs, la taille, les marges, etc.
- Texte : pour modifier le visuel du texte “paragraphe”
- Texte sous-titre : pour modifier le visuel des Titres
- Dimensionnement : pour modifier la taille du module*
- Espacement : pour modifier les marges*
- Bordure : pour ajouter et changer les bordures
- Boîte ombre : pour ajouter des ombres au module
- Filtre : pour ajouter un filtre au module
- Transformer : pour modifier l’emplacement du module sr la page
- Animation : pour ajouter une animation au module
*Attention au moment de modifier les tailles du module et des marges en particulier – pense à cliquer sur le mobile pour switcher entre les vues Bureau, Tablette et Mobile.
Si tu ne le fais pas et que modifies directement les chiffres, les modifications s’appliqueront sur toutes les vues et ça n’apparaitra pas super sur tablette et mobile.
- Avancé : pour ajouter des codes CSS, modifier la visibilité, les scrolls, etc.
Cet onglet est celui que tu utiliseras le moins souvent, à moins que tu aides des connaissances avancées en CSS. L’élément le plus intéressant est sous l’onglet Visibilité : il permet de cacher le module selon si tes visiteurs visitent ton site sur leur ordinateur, leur tablette ou leur mobile.
Comme tu peux le voir il y a beaucoup de possibilités de personnalisation. Le mieux reste de simplement expérimenter avec chacun de ces éléments et de voir comment les éléments changent en live. C’est aussi la meilleure façon de se familiariser avec toutes les fonctionnalités 🙂
Pense aussi à régulièrement Sauvegarder tes changements – on sait jamais!
1.2. Les différentes vues
En bas à gauche de chaque page, tu retrouveras différentes vues.
L’affichage filaire te permet de voir toutes les “boîtes” qui se trouvent sur ta page. Cette vue est particulièrement pratique quand plusieurs éléments se chevauchent et que c’est difficile à les atteindre.
À côté, tu as les vues Bureau, Tablette et Mobile pour voir comment le site apparait sur les différents supports. Garde en tête qu’il existe énormément de tailles d’ordinateur, de tablette et de mobile. L’affichage peut donc différer de ce que tu vois sous ces vues.
Tu ne devrais pas avoir de soucis de ce côté-là parce que les templates sont adaptés à tous les supports. Mais tu sais où te rendre si tu fais des modifications ou ajoute de nouveaux éléments.
2. Theme Builder : Les modèles
L’onglet Theme Builder regroupe les templates de chaque page de ton site (sauf pour le template des produits, comme indiqué dans la leçon 2 du module 7).
Pour assurer que tes modifications se passent comme il faut, pense à :
- Faire toutes tes modifications en navigation privée
- Sauvegarder régulièrement tes modifications
- Vider régulièrement le cache (sur la barre du haut ou sur l’onglet Pages)
- Assure-toi toujours que les modifications des modèles soient toujours sauvegardées. Le bouton vert devrait indiquer “Toutes les modifications enregistrées”. Sinon, il suffit de cliquer dessus pour sauvegarder les modifications (se fait souvent automatiquement)
2.1. En-tête et pied de page
Modifier l’en-tête global et le pied de page est la première étape. Ces éléments seront présent et identiques pratiquement à travers tout ton site – comme tu peux le voir, tous les modèles ont le carré de l’en-tête et du pied de page global, en vert.
C’est un peu différent pour le template Menorca, on y vient tout de suite!
2.1.1. L’en-tête
L’en-tête contient le logo et le menu.
Pour modifier ton logo, il suffit de passer sur ta souris dessus et cliquer sur la roue dentée.
Une fois dans les paramètres, supprime le logo existant en cliquant sur la poubelle et clique sur l’espace pour y ajouter le tien.
Pour avoir le meilleur résultat :
- Assure-toi que ton logo soit de bonne qualité
- Assure-toi que ton logo ait un fond transparent
- Ajoute une version de ton logo qui soit plus grand horizontalement que verticalement (puisque le menu est long et pas très haut)
En cliquant sur le téléphone, tu peux décider de mettre un logo différent sur tablette et mobile que sur bureau. Tu peux aussi décider de ne pas mettre de logo du tout sur tablette ou téléphone, c’est toi qui décides!
Remarque 1 template Menorca : le logo et le menu sont en blanc sur blanc, ce qui est normal puisqu’il y aura une image en arrière plan sur pratiquement toutes les pages. Je te conseille donc de mettre une version blanche (ou claire) de ton logo si tu penses mettre des images foncées en arrière plan. Si tu préfères mettre des images claires en arrière-plan, met alors une version foncée de ton logo et modifie aussi la couleur du menu pour qu’il ressorte bien.
Pour modifier la taille du logo : Style > Dimensionnement > Largeur de logo
Pour modifier le texte du menu : Style > Texte du menu
Une fois que tes modifications sont faites, Sauvegarde et c’est prêt!
2.1.2. Le pied de page
Le pied de page contient les liens de tes réseaux sociaux, ton feed instagram, et des informations obligatoires pour chaque site : le nom de ton entreprise, le lien vers la page “crédits” et la page “mentions légales”
- La page “Credits site” permet de voir qui a créé ton site web ou quel template tu y as utilisé. Cette page doit être mentionnée selon les Conditions générales de ventes. Dans la dernière leçon du module 5, je te montrerai comment cette page peut te rapporter de l’argent!
- La page “Legal” est obligatoire selon la loi
Les éléments à modifier sur le pied de page sont :
- Modifier ton nom instagram
- Ajouter un slogan ou une petite phrase pour décrire ce que tu fais
- Modifier les liens de tes réseaux sociaux
- Ajouter l’année actuelle et le nom de ton entreprise
Pour faire apparaitre ton feed instagram dans la partie droite à la place du message d’erreur, sauvegarde tes modifications et quitte la page.
- Rends-toi sur l’onglet Flux Instagram
- Clique sur Add New
3. Clique sur Next
4. Clique sur Add Source
5. Décoche la case “Receive our Get started e-mails” si tu ne veux pas recevoir d’e-mails de l’extensions
6. Clique sur Log in with Instagram
7. Connecte-toi à ton compte Instagram
8. Tu recevras ensuite une alerte de sécurité à laquelle tu peux cliquer Yes, it’s my domain
9. Clique sur ton compte Instagram puis sur Next
Tu arriveras ensuite sur la page où tu pourras modifier le visuel de ton feed :
- Feed Layout : pour modifier le nombre de posts que tu veux montrer et l’espace entre chacun d’entre eux
- Color Scheme : pour ajouter un fond
- En-tête : pour modifier/supprimer l’en-tête
- Posts : inutile avec la version gratuite
- Load More Button : pour modifier le bouton Load More en bas du feed
- Follow Button : pour modifier le bouton Follow en bas du feed
- Lightbox : inutile avec la version gratuite
Une fois que ta personnalisation est faite :
8. Clique sur Save
9. Clique sur Embed
10. Clique sur Copy pour copier le code
Retourne ensuite sur Divi > Theme Builder > Pied de page global. Rends-toi sur les paramètres du module qui affiche le message d’erreur (ou le code) et remplace le code existant avec le code que tu viens de copier.
Sauvegarde et c’est prêt!
2.1.3. Créer des en-têtes et pieds de page personnalisés
Comme mentionné, on vient de modifier l’en-tête et le pied de page global. Global signifie qu’ils apparaitront sur toutes les pages de ton site.
Tu remarqueras cependant que certaines page n’ont pas d’en-tête ou de pied de page – c’est normal. Certaines pages comme la page Panier ou Paiement ne devraient jamais avoir d’en-tête ni de pied de page pour éviter que les visiteurs soient distraits.
Comme il est possible de supprimer l’en-tête et le pied de page global, il est aussi possible de créer des en-têtes et pied de page personnalisés pour une ou plusieurs pages.
C’est le cas avec le template Menorca où les en-têtes des pages Produit, Mentions légales, Remboursements et retours, Politique de confidentialité et Conditions générales sont différentes (elles sont en gris et ce sont toutes les mêmes entre elles).
Cet en-tête a un fond blanc et t’évite de devoir mettre une image d’arrière plan comme sur le reste des pages qui ont l’en-tête global.
Remarque template Menorca : Pense donc à également modifier cet en-tête. Tu peux le faire une fois et le copier-coller partout où l’en-tête est gris (Produit, Mentions légales, Remboursements et retours, Politique de confidentialité et Conditions générales). Si tu le souhaites, tu peux bien évidemment mettre l’en-tête global également sur ces pages ou modifier tes en-têtes comme tu le souhaites.
- Modifie l’en-tête en cliquant sur le crayon (et en répétant les étapes du point 2.1.)
- Une fois terminé et sauvegardé, clique sur les trois petits points
- Clique sur Copier
- Rends-toi sur le modèle où tu aimerais copier l’en-tête et supprime-le en cliquant sur la poubelle
- Une fois supprimé, fait un clique droit sur “Ajouter un en-tête personnalisé” et clique sur Coller
Répète le processus sur tous les modèles sur lesquels t’aimerait coller cet en-tête
2.2. Contenu des pages
Maintenant que les en-têtes et pieds de page sont prêts, tu peux passer à la personnalisation de chaque page.
Chaque page a un modèle qui lui est dédié. Pour voir à quelle page est dédié un model, il suffit de te référer au nom du domaine ou d’aller dans les paramètres du modèle (en cliquant sur la roue dentée).
Tu trouveras dans le prochain point une petite description de chacune des pages et de leur fonction. Certaines pages ne te seront pas utiles (par exemples les pages Boutique, Produit, Panier, Paiement si tu n’as pas de boutique).
Tu peux sans autre supprimer les pages que tu n’utilises pas. Sache qu’il y aura toujours un template de chaque modèle dans l’onglet Divi > Bibliothèque Divi.
Si tu n’es pas tout à fait à l’aise encore avec le Divi Builder et que tu veux un peu expérimenter, je te conseille de dupliquer les modèles pour te permettre de faire des modifications dans tous les sens et avoir un backup au cas où.
- Clique sur l’icône Dupliquer
- Clique directement sur Sauvegarder (sans choisir à quelle page le modèle sera affecté)
Ton modèle sera ajouté tout en bas de la page avec un titre rouge – ça veut simplement indiquer que le modèle n’est assigné à aucune page.
Si tu finis par être satisfait-e de tes modifications, il suffit de copier le Corps du page et de le coller sur le modèle original (comme on l’a fait pour l’en-tête et le pied de page au point 2.1.3).
2.2.1 Description de chaque modèle
Accueil
La page d’accueil est la page principale de ton site – là où tes visiteurs atterriront quand ils taperont ton site sur leur barre de recherche. Comme c’est la page principale, elle renvoit aux différentes sections de ton site.
- Tes services
- Tes produits
- Un opt-in pour récolter des e-mails*
- Une présentation de toi ou de ton équipe
- Tes articles de blog
*Pour connecter ton fournisseur de service mail, tu devras d’abord intégrer ton service mail avec WordPress. Les étapes de cette intégration dépendront de chaque fournisseur mail. Cherche sur google le nom de ton fournisseur mail + intégration WordPress ou contacte directement ton fournisseur mail.
Je te laisse quelques ressources ici des fournisseurs les plus connus :
- Mailerlite : https://www.mailerlite.com/help/how-to-use-mailerlite-with-wordpress
- Mailchimp : https://mailchimp.com/fr/integrations/wordpress/
- Sendinblue : https://help.sendinblue.com/hc/fr/articles/208849249-Plugin-WordPress-Installation-et-configuration
Une fois que l’installation est faite :
- Clique sur les paramètres du module
- Va dans l’ongle Compte de messagerie
- Clique sur Supprimer pour supprimer les paramètres actuels
- Choisis ton Fournisseur mail
- Choisis la liste concernée
Bien évidemment, selon ton activité et ta stratégie, tu n’auras pas forcément besoin de toutes ces sections. Hésite pas à supprimer celles que tu n’utilises pas et éventuellement à en ajouter d’autres.
À propos
La page À propos est là pour créer du lien avec ton visiteur, lui raconter ton histoire et pourquoi tu fais ce que tu fais.
Le modèle comprend une section pour parler de toi, une où tu peux ajouter tes valeurs, une section d’appel à l’action et une section blog. Hésite pas à ajouter d’autres textes et images si les espaces prévus pour ne suffisent pas.
Articles de blog
Ce modèle sera appliqué sur chacun de tes articles de blog. Il n’y a donc pas grand-chose à modifier à part éventuellement les couleurs et les éléments que tu souhaites afficher en-dessus de l’image (métadonnées, auteur, date, catégories, nombre de commentaires).
Pour savoir comment ajouter un article de blog, rends-toi dans le Module 2, leçon 4 : Articles de blog, Catégories, Etiquettes
Boutique
La page boutique est la page où sont affichés tous tes articles.
En haut de la page, tu trouveras des boutons avec des catégories. En cliquant sur ces boutons, les visiteurs seront automatiquement redirigés plus bas, dans la section d’articles de la catégorie.
Pour que les articles de la catégories souhaitée apparaissent dans la section dédiée, assure-toi que dans les paramètres :
- Le Type de vue du produit soit Catégorie De Produit
- La bonne catégorie de produit soit sélectionnée sous Catégories incluses
Pour modifier le nom des catégories et en ajouter des nouvelles, rends-toi sous Produits > Catégories
Les catégories et étiquettes de produits fonctionnent de la même manière que les catégories et étiquettes d’articles (comme vu dans le Module 2, Leçon 4).
Blog
Tes visiteurs tomberont sur cette page quand ils cliqueront sur la section Blog de ton site. Ce modèle est là pour montrer tous les articles de ton blog.
Si tes articles ont des catégories, pense à changer le nom des trois catégories en haut de la page. Pense aussi à modifier le lien de chacune d’entre elles.
Tu peux aller voir le lien de la catégorie dans Articles > Catégories.
En passant ta souris sur Voir, tu verras le lien qui apparait en bas de ta page. Tu peux aussi cliquer pour ouvrir la page et copier le lien.
En règle générale, le lien des catégories sera toujours lenomdetonsite.com/category/lenomdelacategorie
Services
La page Services est là pour parler de tes services. Dans le modèle, tu as la place pour 3 services, parce que c’est généralement d’un point de vue psychologie (plus ton visiteur a de choix, plus ce sera difficile de prendre une décision et moins de chance qu’il te contacte ou réserve un service.
Mais si tu souhaites ajouter davantage de services, tu peux simplement dupliquer la ligne.
💡 Tip : si tu décides d’afficher tes prix, ne met pas une couleur trop vive. Pense à garder la même couleur que la police du texte. C’est un petit truc psychologique pour ne pas “choquer” avec tes prix, surtout si ce sont des services de haut niveau.
Le modèle comprend aussi une section “Comment ça marche” pour expliquer à tes futurs clients comment les collaborations avec toi se passent. Il est bien de garder uniquement 3 étapes pour leur montrer que le processus est simple pour eux.
Il y aussi une section “Ce que tes services ont de plus” pour donner 3 raisons pour laquelle les gens devraient travailler avec toi.
La section “Avis clients” est super importante pour créer de la confiance et montrer que tes services fonctionnent.
La dernière section te permet de répondre à des questions que tes futurs clients pourraient se poser avant de réserver tes services. C’est une bonne opportunité pour parler des objections et répondre aux éventuels doutes qu’ils pourraient avoir.
Contact
La page contact contient un formulaire pour permettre à n’importe qui de te contacter. Tu peux y ajouter d’autres informations comme ton adresse e-mail, ton adresse postale ou ton numéro de téléphone.
Blog : Catégorie 1,2,3
Les modèles “Blog : Catégorie” permettent de montrer les articles d’une seule catégorie sur une page. Quand tes visiteurs cliquent sur une des catégories, ils atterriront sur l’une de ces pages.
Pense à modifier le nom des catégories et des liens comme vu dans le modèle “Blog” ci-dessus.
Dans les paramètres du module Blog (qui affichent les articles), assure-toi que la bonne catégorie soit cochée dans Catégories incluses.
Au cas où tu rajoutes plus de catégories, pense à modifier chacun de ces modèles en ajoutant au haut de la page un bouton avec la nouvelle catégorie. Pense aussi à dupliquer le modèle pour créer une page avec la nouvelle catégorie.
Panier
La page Panier est simplement la page qui permet à tes visiteurs de voir les articles qu’ils sont sur le point d’acheter.
Il n’y a pas grand-chose à modifier, si ne serait-ce personnaliser avec tes couleurs.
Paiement
La page Paiement est la page qui permettra à tes clients de te payer.
Ici encore, pas grand-chose à modifier autre que les couleurs.
Mentions légales
La page Mentions légales est obligatoire sur chaque site. Comme il s’agit d’une loi et que les lois changent selon les pays, il est important que tu t’informes sur les lois de ton pays et que tu ajoutes les informations nécessaires directement dans ce modèle.
Remboursements et retours
Cette page te permet d’expliquer à tes clients quelle politique ta boutique a en lien avec les remboursements et les retours.
Tu peux ajouter les informations directement dans ce modèle.
Politique de confidentialité
La page Politique de confidentialité a comme objectif d’expliquer la manière dont ton site collecte, utilise et gère les données de tes visiteurs et clients. C’est un texte légal qui permet de protéger la vie privée d’un visiteur ou d’un client.
Chaque site aura une politique de confidentialité différente. Il est important de t’informer pour ton propre cas et de travailler avec un professionnel compétant.
Les informations pourront directement être ajoutées à ce modèle.
Conditions générales de vente
La page Conditions générales de vente te permet de rédiger les règles et modalités des ventes de produits et services sur ton site. Avant de passer commande, ton client est sensé les lire et les accepter.
Encore une fois, les CGV dépendent complètement de ton activité. Informe-toi sur les éléments qui doivent y figurer auprès d’un professionnel compétant.
Les informations pourront directement être ajoutées à ce modèle.
Crédits site web
Cette page permet à tes visiteurs de savoir qui a créé ton site internet ou à partir de quel template. Si tu deviens affilié-e du template, il te suffira d’écrire ton propre code promo pour recevoir des commissions à chaque fois que quelqu’un utilise ton code.
Plus d’informations dans le bonus.
Lien en bio
Cette page est destinée à être utilisée sur tes réseaux sociaux, typiquement sur le lien Instagram.
Ajoute les liens des pages ou ressources les plus importantes (sans bombarder les gens avec trop d’options) et ajoute le lien à ta description Instagram, Tik Tok ou Twitter!
Pour trouver et modifier le lien :
- Rends-toi sur Pages
- Cherche la page Lien en bio
- Clique sur Modification rapide
- Tu peux directement modifier lien dans la section slug
2.3. Conseils pour la personnalisation
Chaque élément de chaque modèle est personnalisable – ce qui te laisse une opportunité infinie d’avoir un site unique et on aime ça.
Tu peux choisir de simplement modifier les couleurs et le texte, ou déplacer la taille, la forme et l’emplacement des modules – c’est toi qui choisis.
Voilà quelques petits conseils pour que ta personnalisation soit fluide et efficace :
Oublie pas de changer les liens des boutons (et de vérifier qu’ils fonctionnent)
Ça m’est arrivé trop de fois de laisser des anciens liens qui ne mène nulle part sur mes pages. Pense à contrôler et re-contrôler que tous les liens mènent au bon endroit.
Adapte à tes entreprise et tes offres
Les exemples donnés sur le template sont seulement là à titre indicatif. Par exemple, les boutons de la page Service mènent à la page accueil. Si tu as un lien Calendly pour une séance découverte, hésite pas à l’ajouter là. Si tu ne vends pas de produits, pas besoin de créer de boutique. L’objectif est que ce soit le plus simple et clair pour ton client (et ça va donc dépendre de tes processus à toi).
Vide régulièrement les caches
Les caches t’empêcheront parfois de voir les modifications que tu as faites sur ton site. Pour éviter que ça arrive, vide régulièrement les caches. La procédure se trouve dans la page Dépannage.
Vérifie tes modifications sur plusieurs dispositifs (téléphone, ordinateur, tablette)
Comme tu l’as vu, certaines modifications que t’apportes sur ton ordinateur pourraient apparaitre différemment sur ton smartphone (principalement dans le cas du changement des marges et dimensions). Garde en tête que la majorité de tes visiteurs visiteront ton site depuis leur smartphone – vérifie donc toujours que tout est aussi en ordre sur les plus petits écrans!