Prendre en main WordPress & DIVI Builder de A à Z : Le Guide Pratique Ultime

Pour accéder aux coulisses de votre site web, ouvrez votre navigateur internet et rendez-vous sur l'adresse suivante :

Saisissez votre Identifiant et votre Mot de passe (transmis dans votre fiche récapitulative lors de la livraison du site).

1. Depuis votre site, naviguez directement sur la page que vous souhaitez mettre à jour (ex: Accueil, Services, Réalisations ou Contact).
2. Dans la barre supérieure noire tout en haut, repérez le bouton violet nommé « Activer le Visual Builder » et cliquez dessus.
3. Patientez 2 à 3 secondes pendant le chargement : l'interface se transforme en mode édition interactive.

Désormais, dès que vous passez votre souris sur un élément, des cadres de couleur et des icônes d'action apparaissent.

Divi fonctionne selon le principe des poupées russes. Chaque page est construite en imbriquant 3 niveaux visuels :

Règle d'or : 95 % de vos retouches quotidiennes concernent uniquement la boîte GRISE (le Module). C'est elle qui contient vos phrases, vos photos et vos boutons.

Vous disposez de deux méthodes très simples :

Méthode A : La modification directe à l'écran (Inline)

Cliquez simplement au milieu de la phrase que vous souhaitez modifier. Le curseur texte clignote : effacez, tapez vos mots, mettez en gras avec Ctrl + B ou en italique avec Ctrl + I.

Méthode B : Par la boîte de réglages (Recommandée pour les titres H2/H3)

1. Survolez le texte : le menu flottant gris apparaît.
2. Cliquez sur la roue crantée grise (⚙️ Paramètres du module).
3. Une fenêtre de dialogue s'ouvre : vous retrouvez l'éditeur de texte complet.
4. Pour modifier la hiérarchie du titre, sélectionnez le texte et choisissez « Titre 2 (H2) » ou « Titre 3 (H3) » dans le menu déroulant des formats.
5. Indispensable : Cliquez sur la coche verte (✓) en bas à droite de la fenêtre pour enregistrer votre modification.

1. Survolez l'image existante et cliquez sur la roue crantée grise (⚙️).
2. Dans l'onglet Contenu > Image, cliquez directement sur la vignette miniature de la photo.
3. La bibliothèque de médias de WordPress s'ouvre :
   • Soit vous choisissez une image déjà présente sur le site.
   • Soit vous cliquez sur l'onglet « Téléverser des fichiers » pour glisser une nouvelle photo depuis votre ordinateur.
4. Cliquez sur le bouton bleu « Téléverser une image » en bas à droite, puis validez avec la coche verte (✓).

1. Insérer un lien web sur du texte ou un bouton

Surlignez les mots concernés et cliquez sur l'icône de chaîne (🔗) dans la barre d'outils. Collez l'URL de destination. Si le lien pointe vers un autre site web, cochez impérativement « Ouvrir dans un nouvel onglet » pour éviter que le visiteur quitte votre site.

2. Permettre le téléchargement d'un fichier PDF (Plaquette, Menu, Arrêté municipal)

1. Rendez-vous dans votre tableau de bord WordPress (dans le menu de gauche : Médias > Ajouter un fichier média).
2. Glissez votre fichier PDF. Une fois téléversé, cliquez dessus : une fenêtre affiche ses informations.
3. Repérez le champ « Copier le lien dans le presse-papier » et cliquez dessus pour récupérer l'adresse directe du fichier.
4. Revenez dans Divi sur votre bouton ou votre texte : ouvrez la roue crantée (⚙️) et collez cette adresse dans le champ Lien > URL du lien.
5. Sélectionnez « Ouvrir dans un nouvel onglet ». Vos visiteurs pourront ainsi télécharger ou consulter votre PDF en un clic !

Un bloc jumeau s'insère instantanément juste en dessous avec la typographie, les espacements et les couleurs déjà parfaitement réglés. Vous n'avez plus qu'à remplacer le texte et la photo !

Aujourd'hui, plus de 70 % de vos visiteurs consultent votre site sur téléphone portable :

1. Tout en bas au centre de votre écran, cliquez sur le grand cercle violet avec les trois points (...). La barre d'outils Divi se déplie.
2. À gauche de cette barre, cliquez sur l'icône Smartphone 📲. Divi bascule immédiatement l'aperçu au format mobile.
3. Faites défiler la page pour vérifier que vos nouveaux textes ne se chevauchent pas et que vos photos sont bien cadrées.
4. Recliquez sur l'icône Ordinateur 🖥️ pour revenir en plein écran.

Tant que vous n'avez pas enregistré, vos modifications restent invisibles pour vos visiteurs :

1. Dans la barre violette dépliée en bas de l'écran, cliquez sur le bouton vert « Sauvegarder » tout à droite (ou utilisez le raccourci Ctrl + S sur Windows / Cmd + S sur Mac).
2. Une petite roue tourne pendant 1 seconde, puis une coche de confirmation apparaît.
3. Tout en haut dans la barre noire, cliquez sur « Quitter le Visual Builder ».

✓ Vos modifications sont immédiatement en ligne et visibles de tous !

Pas de panique ! Vous avez plusieurs parachutes de sécurité intégrés :

• Annuler l'action : Le raccourci universel Ctrl + Z fonctionne en direct dans Divi pour annuler la dernière bêtise.
• L'Historique des modifications : Dans la barre violette en bas, cliquez sur l'icône de l'Horloge ⏱️. Vous pouvez remonter dans le temps jusqu'à 30 actions en arrière !
• La sortie d'urgence sans sauvegarder : Si vous avez tout déréglé et que vous vous sentez perdu, fermez simplement l'onglet de votre navigateur SANS cliquer sur Sauvegarder. Votre site en ligne restera rigoureusement identique à ce qu'il était avant votre ouverture !
• La sauvegarde serveur Sitoptim : Avec votre forfait Sérénité, une sauvegarde intégrale quotidienne est stockée sur les serveurs o2switch. Nous pouvons restaurer votre site à l'identique en cas de pépin majeur.

Si vous changez d'adresse email professionnelle ou souhaitez qu'un collaborateur reçoive également les demandes de devis :

1. Activez le Visual Builder sur votre page Contact.
2. Survolez le formulaire et cliquez sur la roue crantée grise (⚙️) du module Formulaire.
3. Dans l'onglet Contenu, déroulez la section E-mail.
4. Saisissez votre nouvelle adresse dans le champ Adresse e-mail (vous pouvez séparer plusieurs adresses par des virgules).
5. Cliquez sur la coche verte (✓) puis sauvegardez la page (Ctrl + S). Faites systématiquement un test d'envoi en direct !

Le bandeau de pied de page est synchronisé sur l'intégralité de vos pages grâce au Divi Theme Builder :

1. Dans votre tableau de bord WordPress (menu noir de gauche), rendez-vous dans Divi > Gestionnaire de thème (Theme Builder).
2. Repérez le cadre vert intitulé « Pied de page global » (Global Footer) et cliquez sur l'icône de crayon (✏️).
3. L'éditeur Divi s'ouvre : modifiez votre numéro de téléphone, votre adresse ou vos horaires comme n'importe quel texte.
4. Sauvegardez avec la coche verte et le bouton vert en bas, puis cliquez sur Enregistrer les modifications en haut à gauche du Theme Builder. Vos coordonnées sont instantanément actualisées sur 100 % du site !

Pour ajouter une nouvelle page dans le menu principal de votre site :

1. Allez dans Apparence > Menus dans l'administration WordPress.
2. Dans la colonne de gauche « Pages », cochez la nouvelle page que vous venez de créer et cliquez sur « Ajouter au menu ».
3. La page apparaît au bas de la liste de droite : glissez-déposez la boîte vers le haut ou vers le bas pour choisir son ordre. Décalée d'un cran vers la droite, elle devient un sous-menu déroulant !
4. Cliquez sur le bouton bleu « Enregistrer le menu ».