Comment travailler avec les pages dans WordPress et Divi : un guide complet étape par étape

WordPress alimente plus de 43% de tous les sites web sur Internet — et pour une bonne raison. Son interface intuitive, son vaste écosystème de plugins et ses capacités flexibles de gestion de contenu en font le CMS incontournable pour tous, des blogueurs indépendants aux entreprises de niveau entreprise. Lorsque vous associez WordPress au thème Divi d’Elegant Themes, vous déverrouillez un constructeur visuel glisser-déposer qui vous permet de concevoir des pages magnifiques et professionnelles sans écrire une seule ligne de code.

Dans ce guide complet, vous apprendrez exactement comment créer, personnaliser, organiser et publier des pages dans WordPress en utilisant le Divi Builder. Que vous construisiez votre premier site web ou que vous affiniez un site existant, ce tutoriel couvre tout ce que vous devez savoir.

Qu’est-ce que les pages dans WordPress ? (Et comment elles diffèrent des articles)

Avant de plonger dans les étapes techniques, il est important de comprendre ce qu’une page WordPress est réellement — et comment elle diffère d’un article de blog.

Les pages sont l’épine dorsale structurelle de votre site web. Elles contiennent du contenu qui ne change pas fréquemment et n’a pas besoin d’être catégorisé ou étiqueté. Pensez à votre À propos de nous, Contact, Services, ou Page d’accueil — ce sont tous des exemples classiques de pages WordPress.

Comprendre cette distinction vous aide à prendre des décisions plus intelligentes sur la façon d’organiser et de présenter votre contenu.

Prérequis : Ce dont vous avez besoin avant de commencer

Pour suivre ce guide, assurez-vous d’avoir les éléments suivants en place :

• Une installation WordPress en direct dans un environnement d’hébergement fiable
• Le thème Divi installé et activé (disponible auprès d’Elegant Themes)
• Un accès administrateur à votre tableau de bord WordPress
• Une compréhension de base de la structure et des objectifs de votre site web

Si vous configurez toujours votre environnement d’hébergement, envisagez l’hébergement VPS d’AlexHost — une solution haute performance et évolutive qui vous donne un accès root complet, des ressources dédiées et la flexibilité pour exécuter WordPress à une vitesse optimale. Pour les projets plus petits ou les sites personnels, l’hébergement web partagé est une alternative abordable et conviviale pour les débutants qui est entièrement compatible avec WordPress.

Étape 1 : Connectez-vous à votre tableau de bord WordPress

Commencez par ouvrir votre navigateur Web préféré et accédez à votre panneau d’administration WordPress. L’URL par défaut est :

http://yourdomain.com/wp-admin

Entrez votre nom d’utilisateur et votre mot de passe, puis cliquez sur Se connecter. Vous arriverez au tableau de bord WordPress — le panneau de contrôle central de l’ensemble de votre site Web.

> Conseil professionnel : Si vous gérez plusieurs sites WordPress ou avez besoin d’une expérience d’administration plus rationalisée, envisagez d’utiliser un VPS avec cPanel pour la gestion centralisée du serveur et du site à partir d’une interface unique et intuitive.

Étape 2 : Créer une nouvelle page WordPress

Une fois dans le tableau de bord, suivez ces étapes pour créer une nouvelle page :

1. Dans le menu de navigation de gauche, localisez et cliquez sur Pages
2. Cliquez sur Ajouter une nouvelle en haut de la liste des pages (ou utilisez le raccourci + Nouveau > Page dans la barre d’administration supérieure)
3. Vous serez redirigé vers l’éditeur de blocs WordPress (Gutenberg)

Ajouter un titre et un contenu de base

• Cliquez sur le champ « Ajouter un titre » en haut et tapez le nom de votre page (par exemple, *À propos de nous*, *Contact*, *Services*)
• Dans la zone de contenu ci-dessous, vous pouvez ajouter des blocs de texte, des images, des titres, des boutons et d’autres éléments à l’aide de l’éditeur de blocs Gutenberg
• Utilisez le raccourci « / » dans l’éditeur pour rechercher rapidement et insérer n’importe quel type de bloc

À ce stade, vous travaillez avec l’éditeur WordPress standard. Cependant, si vous souhaitez une personnalisation visuelle avancée — et que vous utilisez Divi — vous voudrez activer le Divi Builder à l’étape suivante.

Étape 3 : Activer et utiliser le Divi Builder

Le Divi Builder transforme l’éditeur WordPress standard en un environnement de conception visuelle puissant avec glisser-déposer. Voici comment l’activer et l’utiliser :

Activation du Divi Builder

Après avoir ouvert votre page dans l’éditeur, vous verrez un bouton bien visible près du haut de la zone de contenu :

« Enable Divi Builder » — cliquez dessus.

WordPress vous proposera trois options de démarrage :

Sélectionnez l’option qui convient le mieux à votre projet et cliquez sur Start Building.

Comprendre la structure du Divi Builder

Avant d’ajouter du contenu, il est utile de comprendre comment Divi organise sa hiérarchie de mise en page :

Section
  └── Row
        └── Column
              └── Module

• Sections — ce sont les plus grands conteneurs, ils s’étendent sur toute la largeur de la page
• Rows — se trouvent à l’intérieur des sections et définissent la structure des colonnes (1, 2, 3 colonnes, etc.)
• Columns — ce sont les divisions verticales individuelles dans une ligne
• Modules — ce sont les éléments de contenu réels (texte, images, boutons, formulaires, etc.)

Étape 3a : Ajouter des sections et des lignes

1. Cliquez sur l’icône bleu « + » en bas du canevas pour ajouter une nouvelle Section
2. Choisissez un type de section : Regular, Fullwidth ou Specialty
3. À l’intérieur de la section, cliquez sur l’icône « + » pour ajouter une Row
4. Sélectionnez votre disposition de colonnes préférée (par exemple, 1/2 + 1/2 pour une conception à deux colonnes)

Étape 3b : Ajouter des modules

Les modules sont les blocs de construction de contenu de chaque page Divi. Pour en ajouter un :

1. Cliquez sur l’icône gris « + » à l’intérieur d’une colonne
2. Une bibliothèque de modules apparaîtra — parcourez-la ou recherchez le module dont vous avez besoin
3. Cliquez sur le module pour l’insérer dans votre mise en page

Les modules Divi couramment utilisés incluent :

• Text Module — pour les paragraphes, les titres et le texte formaté
• Image Module — pour les photos, les graphiques et les illustrations
• Button Module — pour les CTA et les liens de navigation
• Slider Module — pour les carrousels d’images héros
• Contact Form Module — pour la capture de prospects et les demandes
• Blurb Module — pour les boîtes de fonctionnalités icône + texte
• Video Module — pour le contenu vidéo intégré
• Testimonial Module — pour la preuve sociale et les avis
• Code Module — pour les extraits HTML, CSS ou JavaScript personnalisés

Étape 3c : Personnaliser les modules

Cliquez sur l’icône crayon (édition) sur n’importe quel module pour ouvrir son panneau de paramètres. Les paramètres sont organisés en trois onglets :

1. Onglet Content

Configurez le contenu réel du module — texte, images, liens, libellés de boutons, champs de formulaire, etc.

2. Onglet Design

Contrôlez l’apparence visuelle du module :

• Typography — famille de polices, taille, poids, hauteur de ligne, espacement des lettres
• Colors — couleurs d’arrière-plan, de texte, de bordure et d’icône
• Spacing — contrôles de remplissage et de marge (avec points d’arrêt réactifs)
• Borders & Shadows — coins arrondis, ombres de boîte, styles de bordure
• Sizing — largeur, hauteur, contraintes de largeur maximale

3. Onglet Advanced

Accédez aux paramètres au niveau du développeur :

• CSS Classes and IDs — pour les crochets de style personnalisés
• Custom CSS — écrivez CSS spécifique au module directement
• Visibility — afficher/masquer le module sur les vues bureau, tablette ou mobile
• Animations — effets d’animation d’entrée et minutage

> Conseil de conception : Les contrôles réactifs de Divi vous permettent de définir différentes valeurs pour les vues bureau, tablette et mobile. Prévisualisez toujours votre page sur les trois points d’arrêt avant de publier.

Étape 4 : Organisez vos pages avec des hiérarchies

À mesure que votre site web se développe, garder les pages organisées devient essentiel pour l’expérience utilisateur et le SEO. WordPress prend en charge les hiérarchies de pages parent-enfant, qui vous permettent d’imbriquer les pages connexes sous un parent commun.

Créer une relation de page parent-enfant

1. Lors de la modification d’une page, regardez la barre latérale droite dans l’éditeur de blocs
2. Cliquez sur Page pour développer le panneau des paramètres de page
3. Trouvez la section Attributs de page
4. Sous Page parent, cliquez sur le menu déroulant et sélectionnez la page que vous souhaitez assigner comme parent

Exemple de hiérarchie :

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Cette structure crée des URL plus propres (par exemple, yoursite.com/services/web-design/) et aide les moteurs de recherche à mieux comprendre l’architecture du contenu de votre site.

Étape 5 : Ajouter des pages à votre menu de navigation

Créer une page n’ajoute pas automatiquement celle-ci au menu de navigation de votre site web. Vous devez l’ajouter manuellement à un menu.

1. Dans le tableau de bord WordPress, allez à Apparence > Menus
2. Sélectionnez un menu existant ou cliquez sur Créer un nouveau menu
3. Dans le panneau Pages sur la gauche, cochez la case à côté des pages que vous souhaitez ajouter
4. Cliquez sur Ajouter au menu
5. Glissez-déposez les éléments du menu pour les réorganiser ou créer des sous-menus déroulants
6. Cliquez sur Enregistrer le menu une fois terminé

> Bonne pratique : Gardez votre menu de navigation principal axé sur vos pages les plus importantes. Visez un maximum de 5 à 7 éléments de niveau supérieur pour éviter de surcharger les visiteurs.

Étape 6 : Configurer les paramètres de page pour le SEO et les performances

Avant de publier, prenez un moment pour configurer les paramètres clés de la page qui affectent à la fois la visibilité des moteurs de recherche et l’expérience utilisateur.

Permalien (URL Slug)

• Dans la barre latérale de l’éditeur de blocs, trouvez la section Permalien
• Modifiez le slug d’URL pour qu’il soit court, descriptif et riche en mots-clés
• Évitez les slugs générés automatiquement avec des chiffres (par exemple, /?p=123)
• Bon exemple : yoursite.com/about-us/
• Mauvais exemple : yoursite.com/?page_id=47

Image à la une

• Attribuez une image à la une pertinente pour améliorer l’apparence du partage social et la cohérence visuelle

Modèle de page

• Certains thèmes (y compris Divi) offrent plusieurs modèles de page (par exemple, pleine largeur, sans barre latérale)
• Sélectionnez le modèle approprié sous Attributs de page > Modèle

Métadonnées SEO

• Si vous utilisez un plugin SEO comme Yoast SEO ou Rank Math, remplissez :
• Titre méta — incluez votre mot-clé principal
• Méta description — rédigez un résumé attrayant de 150–160 caractères
• Mot-clé principal — définissez votre terme de recherche cible

Étape 7 : Enregistrer, prévisualiser et publier votre page

Une fois que vous êtes satisfait de la conception et des paramètres de votre page, il est temps de la mettre en ligne.

Options d’enregistrement dans Divi Builder

En haut à droite de l’interface Divi Builder, vous trouverez :

• Save Draft — enregistre votre travail sans le rendre publiquement visible
• Preview — ouvre un aperçu en direct de votre page dans un nouvel onglet
• Publish/Update — met la page en ligne sur votre site web

Publication à partir de l’éditeur de blocs

Si vous quittez Divi Builder et revenez à l’éditeur de blocs standard :

1. Cliquez sur Save Draft pour enregistrer sans publier
2. Cliquez sur Preview pour vérifier l’apparence de la page en front-end
3. Cliquez sur Publish quand vous êtes prêt à la mettre en ligne
4. Confirmez en cliquant à nouveau sur Publish dans le panneau de confirmation

> Important : Prévisualisez toujours votre page sur ordinateur et mobile avant de la publier. Les outils de conception réactive de Divi sont puissants, mais un examen manuel détecte les problèmes que les outils automatisés manquent.

Conseils avancés : Tirer le meilleur parti de WordPress et Divi

Utilisez le Divi Theme Builder pour les modèles globaux

Le Divi Theme Builder (disponible dans Divi 4.0+) vous permet de créer des modèles globaux pour les en-têtes, pieds de page et types de publications/pages spécifiques. Cela garantit la cohérence de la conception sur l’ensemble de votre site sans modifier manuellement chaque page.

Enregistrez les mises en page dans la bibliothèque Divi

Si vous avez conçu une section ou une mise en page que vous aimez, enregistrez-la dans la bibliothèque Divi pour la réutiliser sur d’autres pages. Cela accélère considérablement votre flux de travail.

Activez les tests A/B de Divi (Split Testing)

Divi inclut un outil de test divisé intégré qui vous permet de tester différentes versions d’un module, d’une section ou d’une page les unes contre les autres pour voir laquelle fonctionne mieux — inestimable pour l’optimisation du taux de conversion.

Sécurisez votre site avec SSL

Si vous ne l’avez pas déjà fait, assurez-vous que votre site WordPress s’exécute sur HTTPS. Un certificat SSL est essentiel pour la confiance des utilisateurs, la sécurité des données et le classement Google. AlexHost propose des certificats SSL faciles à installer et compatibles avec tous les environnements d’hébergement WordPress.

Utilisez un domaine personnalisé

Un nom de domaine professionnel renforce votre marque et améliore les taux de clics dans les résultats de recherche. Vous pouvez enregistrer et gérer votre domaine directement via le service d’enregistrement de domaine d’AlexHost, avec support pour des centaines d’extensions TLD.

Dépannage des problèmes courants

Conclusion

Travailler avec des pages dans WordPress en utilisant le thème Divi vous donne une boîte à outils exceptionnellement puissante et flexible pour construire des sites web professionnels — sans codage requis. En suivant les étapes de ce guide, vous pouvez :

• Créer des pages WordPress bien structurées avec des titres et du contenu clairs
• Concevoir des mises en page visuellement attrayantes en utilisant le générateur glisser-déposer de Divi
• Organiser vos pages en hiérarchies logiques pour une meilleure UX et SEO
• Configurer les paramètres clés comme les permaliens, les métadonnées et les modèles
• Publier en toute confiance après un aperçu sur tous les types d’appareils

La combinaison de la puissance de gestion de contenu de WordPress et des capacités de conception visuelle de Divi est difficile à battre. Et avec la bonne infrastructure d’hébergement en dessous, votre site sera rapide, sécurisé et prêt à évoluer.

Pour les projets WordPress gourmands en ressources, les sites à fort trafic ou les applications qui ont besoin d’une puissance informatique dédiée, explorez les serveurs dédiés d’AlexHost — offrant du matériel de qualité entreprise, une personnalisation complète du serveur et des performances maximales pour les charges de travail exigeantes.

*Prêt à construire votre prochain projet WordPress ? Commencez par une base solide — choisissez le bon hébergement, installez Divi et suivez ce guide pour créer des pages qui ont l’air magnifiques et se classent encore mieux.*