Une page pleine largeur dans WordPress étend votre contenu sur toute la fenêtre du navigateur, sans barre latérale ni conteneur limité pour structurer la mise en page. C'est l'un des changements de conception les plus courants que les gens souhaitent apporter, et il est généralement plus rapide à mettre en place que ce que vous pourriez penser.
J'ai vu de nombreux débutants avoir des difficultés avec cela, car la plupart des thèmes WordPress ajoutent une barre latérale et limitent la largeur du contenu par défaut. Vous vous retrouvez avec une page qui semble confinée, même lorsque vous ne voulez pas de barre latérale du tout.
La bonne nouvelle est que vous avez plusieurs façons de résoudre ce problème. Dans ce guide, je vais vous présenter cinq méthodes pour rendre une page pleine largeur dans WordPress, de la plus facile (sans plugins, sans code) à la plus avancée. Je couvrirai également quoi faire lorsque votre mise en page pleine largeur ne fonctionne pas comme elle le devrait.
- Utilisez le modèle pleine largeur intégré à votre thème
- Rendre des blocs individuels pleine largeur dans l'éditeur de blocs
- Ajouter un modèle pleine largeur avec un plugin gratuit
- Créer une page pleine largeur personnalisée avec SeedProd
- Créer manuellement un modèle de page pleine largeur
- Quand utiliser une mise en page pleine largeur (et quand ne pas le faire)
- Page pleine largeur ne fonctionne pas ? Voici comment la réparer
- FAQ sur la façon de rendre une page pleine largeur dans WordPress
Utilisez le modèle pleine largeur intégré à votre thème
La plupart des thèmes WordPress incluent déjà un modèle de page pleine largeur. Vous pouvez y basculer dans l'éditeur de page sans installer de plugin ni écrire de code.
Voici comment vérifier.
Étape 1 : Ouvrez la page que vous souhaitez rendre pleine largeur dans l'éditeur WordPress.
Étape 2 : Dans la barre latérale droite, recherchez la section Modèle. Selon votre thème, cela peut apparaître sous Attributs de la page ou comme un menu déroulant Modèle autonome.
Étape 3 : Cliquez sur le menu déroulant et recherchez une option pleine largeur. Le nom varie selon le thème. Vous pourriez voir « Pleine largeur », « Pas de barre latérale », « Vide » ou quelque chose de similaire.
Étape 4 : Sélectionnez le modèle pleine largeur, puis cliquez sur Mettre à jour ou Publier.
Étape 5 : Prévisualisez la page pour confirmer que la barre latérale a disparu et que le contenu s'étend sur toute la page.
Et voilà. Si votre thème dispose d'un modèle pleine largeur, c'est la méthode la plus rapide pour l'utiliser.
Si vous ne voyez pas d'option pleine largeur dans le menu déroulant, votre thème n'en inclut peut-être pas. Passez à la méthode suivante.
Rendre des blocs individuels pleine largeur dans l'éditeur de blocs
L'éditeur de blocs WordPress vous permet de définir des blocs individuels sur un alignement pleine largeur, les étendant sur tout l'écran sans modifier votre modèle de page. Ceci est intégré à WordPress, vous n'avez donc pas besoin de plugin.
Cela fonctionne avec les blocs Groupe, les blocs Couverture, les blocs Image et la plupart des blocs de mise en page.
Étape 1 : Ouvrez votre page dans l'éditeur WordPress et sélectionnez le bloc que vous souhaitez rendre pleine largeur.
Étape 2 : Dans la barre d’outils du bloc en haut de celui-ci, cliquez sur le bouton Changer l’alignement (il ressemble à un ensemble de lignes horizontales).
Étape 3 : Sélectionnez Largeur totale dans le menu déroulant.
Le bloc s’étendra jusqu’aux bords de la fenêtre du navigateur. WordPress ajoute une classe CSS appelée .alignfull en arrière-plan pour que cela se produise.
Astuce : Si vous souhaitez qu’une section entière de votre page soit en pleine largeur, ajoutez d’abord un bloc Groupe. Définissez le bloc Groupe sur l’alignement Pleine largeur, puis ajoutez vos blocs de contenu à l’intérieur. Le bloc Groupe agit comme un conteneur pleine largeur pour tout ce qui est imbriqué à l’intérieur.
Si l’option d’alignement Pleine largeur n’apparaît pas dans la barre d’outils, votre thème ne la prend peut-être pas en charge. Je vais expliquer comment résoudre ce problème dans la section de dépannage ci-dessous.
Mises en page pleine largeur dans les thèmes de blocs (édition complète du site)
Si vous utilisez un thème de bloc plus récent comme Twenty Twenty-Five, les mises en page pleine largeur fonctionnent différemment. Les thèmes de blocs utilisent l’éditeur de site et un fichier de configuration appelé theme.json pour contrôler les largeurs de mise en page.
Pour ajuster la largeur de la page dans un thème de bloc, accédez à Apparence → Éditeur dans votre tableau de bord WordPress. De là, vous pouvez modifier directement vos modèles de page et définir la zone de contenu en pleine largeur au niveau du modèle.
Le fichier theme.json contrôle deux valeurs clés : contentSize (la largeur par défaut de votre contenu) et wideSize (la largeur des blocs alignés en largeur). L’ajustement de ces valeurs modifie la largeur de votre contenu sur l’ensemble du site.
C’est l’approche la plus flexible si vous utilisez un thème de bloc moderne, car vous pouvez contrôler les largeurs de mise en page globalement au lieu de page par page.
Ajouter un modèle pleine largeur avec un plugin gratuit
Si votre thème n’inclut pas de modèle pleine largeur, le plugin gratuit Fullwidth Templates en ajoute un à n’importe quel thème WordPress. Aucun code requis.
Étape 1 : Dans votre tableau de bord WordPress, accédez à Extensions → Ajouter et recherchez « Fullwidth Templates ». Si vous avez besoin d’aide pour cette étape, voici un guide sur comment installer une extension WordPress.
Étape 2 : Installez et activez l’extension.
Étape 3 : Modifiez n’importe quelle page et ouvrez le menu déroulant Modèle dans la barre latérale droite.
Vous verrez trois nouvelles options de modèle :
| Modèle | Ce qu’il supprime |
|---|---|
| FW Sans barre latérale | Barre latérale uniquement |
| FW Pleine largeur | Barre latérale, titre de la page et commentaires |
| FW Pleine largeur sans en-tête ni pied de page | Barre latérale, titre, commentaires, en-tête et pied de page |
Étape 4 : Choisissez le modèle qui correspond à vos besoins. Pour la plupart des pages de destination, « FW Pleine largeur » est le bon choix. Pour une toile complètement vierge, utilisez « FW Pleine largeur sans en-tête ni pied de page ».
Étape 5 : Cliquez sur Mettre à jour ou Publier et prévisualisez votre page.
L’extension fonctionne avec n’importe quel thème, c’est donc une option fiable lorsque votre thème ne vous fournit pas de modèle pleine largeur par lui-même.
Créer une page pleine largeur personnalisée avec SeedProd
Lorsque vous avez besoin d’un contrôle de conception complet sur une page de destination, une page « à venir », une page de vente ou toute autre mise en page personnalisée, un constructeur de pages vous offre plus de flexibilité que le simple changement de modèle.
J'utilise SeedProd régulièrement pour cela. Il fonctionne en parallèle de votre thème existant, vous n'avez donc pas besoin de modifier votre configuration actuelle. Chaque page que vous créez dans SeedProd est pleine largeur par défaut.
Voici comment créer une page pleine largeur avec.
Étape 1 : Installez et activez SeedProd, puis allez dans SeedProd → Pages de destination dans votre tableau de bord. Si vous avez besoin d'aide, voici un guide sur l'installation de SeedProd.
Étape 2 : Cliquez sur Ajouter une nouvelle page de destination.
Choisissez un modèle. SeedProd inclut des modèles pour les pages de destination, les pages d'inscription aux webinaires, les pages de vente, et plus encore. Vous pouvez également commencer avec une page vierge.
Étape 3 : Entrez le nom et l'URL de votre page, puis cliquez sur Enregistrer et commencer à modifier la page.
Étape 4 : L'éditeur glisser-déposer s'ouvre avec la mise en page de votre page. Chaque section s'étend sur toute la largeur par défaut.
Si vous avez besoin d'ajuster la largeur d'une section, cliquez sur la section et changez Largeur de la section en « Plein écran » dans le panneau des paramètres.
Voici à quoi ressemble une page pleine largeur après avoir effectué cette modification :
Vous pouvez également rendre des lignes individuelles pleine largeur en cliquant sur une ligne et en ajustant son réglage de largeur de la même manière.
Étape 5 : Ajoutez votre contenu en faisant glisser des blocs : titres, images, formulaires, boutons, tableaux de prix, ou tout autre élément dont vous avez besoin.
Étape 6 : Lorsque vous êtes satisfait de la mise en page, cliquez sur Enregistrer, puis sur Publier.
SeedProd est un bon choix lorsque vous avez besoin d'une page qui se démarque du reste de votre site, comme une page de destination ciblée ou une page bientôt disponible. Vous pouvez également l'utiliser pour créer un thème WordPress entièrement personnalisé avec des mises en page pleine largeur intégrées. Pour les pages où le modèle de votre thème habituel convient, les méthodes précédentes de ce guide sont plus rapides.
Si vous souhaitez créer des pages pleine largeur sans écrire de code, commencez dès aujourd'hui avec SeedProd.
Créer manuellement un modèle de page pleine largeur
Si vous êtes à l'aise avec PHP et CSS, vous pouvez créer un modèle de page pleine largeur personnalisé en modifiant directement les fichiers de votre thème. Cette méthode ne nécessite aucun plugin.
Important : Sauvegardez votre site avant de modifier les fichiers du thème. De plus, effectuez ces modifications dans un thème enfant afin qu'une mise à jour du thème n'écrase pas votre travail.
Étape 1 : Connectez-vous à votre site en utilisant un client FTP ou le gestionnaire de fichiers de votre hébergeur web. Naviguez jusqu'à /wp-content/themes/votre-dossier-theme/.
Étape 2 : Créez un nouveau fichier nommé full-width.php. En haut du fichier, ajoutez cet en-tête de modèle pour que WordPress le reconnaisse :
<?php
/*
* Template Name: Full Width
*/
get_header();
?>
Étape 3 : Ouvrez le fichier page.php de votre thème et copiez son contenu dans votre nouveau fichier full-width.php, sous le code d'en-tête. Trouvez ensuite et supprimez la ligne qui appelle la barre latérale :
<?php get_sidebar(); ?>
Supprimez cette ligne. Cela retire la barre latérale de votre modèle.
Étape 4 : Enregistrez le fichier et téléchargez-le dans votre dossier de thème.
Étape 5 : Retournez à votre tableau de bord WordPress. Modifiez n’importe quelle page, ouvrez le menu déroulant Template, et vous verrez votre nouvelle option « Pleine largeur ».
Étape 6 : Sélectionnez le modèle, puis ajoutez du CSS personnalisé pour étirer la zone de contenu en pleine largeur. Allez dans Apparence → Personnaliser → CSS additionnel et ajoutez :
.page-template-full-width .site-content {
width: 100%;
max-width: none;
}
Les noms exacts des classes CSS dépendent de votre thème. Utilisez l’outil d’inspection de votre navigateur pour trouver la classe de conteneur correcte si .site-content ne fonctionne pas.
Étape 7 : Mettez à jour la page et prévisualisez-la.
Cette approche vous donne un contrôle total, mais elle nécessite de maintenir le fichier de modèle dans un thème enfant. Si vous n’êtes pas à l’aise avec la modification de code, l’une des méthodes précédentes est un choix plus sûr.
Quand utiliser une mise en page pleine largeur (et quand ne pas le faire)
Les mises en page pleine largeur ne conviennent pas à toutes les pages. Voici quand elles fonctionnent bien et quand une mise en page contenue est préférable.
| La pleine largeur convient mieux pour | La mise en page contenue convient mieux pour |
|---|---|
| Pages de destination | Articles de blog |
| Pages d’accueil | Documentation |
| Pages de portfolio | Articles longs |
| Présentations de produits | Pages riches en texte |
| Pages "Coming soon" | Bases de connaissances |
La raison est la lisibilité. Les longues lignes de texte qui s’étendent sur un écran large sont plus difficiles à lire que les lignes contraintes par des marges plus étroites. Pour le contenu principalement textuel, une mise en page encadrée maintient des longueurs de ligne confortables.
Vous pouvez mélanger les deux sur le même site. J’utilise des mises en page pleine largeur pour les pages clés comme la page d’accueil et les pages de destination, et un modèle standard avec une barre latérale pour les articles de blog.
La page pleine largeur ne fonctionne pas ? Voici comment la réparer
Si vous définissez une page en pleine largeur mais qu’elle apparaît toujours encadrée ou affiche une barre latérale, voici les causes les plus courantes et comment les résoudre.
Votre thème ne prend pas en charge l’alignement pleine largeur
Si l’option d’alignement « Pleine largeur » n’apparaît pas dans la barre d’outils de l’éditeur de blocs, votre thème n’a pas déclaré sa prise en charge.
Le thème a besoin d’une seule ligne de code dans son fichier functions.php :
add_theme_support( 'align-wide' );
Consultez d’abord la documentation de votre thème pour voir s’il existe un paramètre pour cela. Sinon, et si vous êtes à l’aise avec la modification de code, ajoutez cette ligne au fichier functions.php de votre thème enfant. Cela active les options d’alignement Large et Pleine largeur dans l’éditeur de blocs.
Un plugin remplace votre mise en page
Certains plugins injectent des barres latérales, des widgets ou des restrictions de mise en page qui remplacent votre modèle pleine largeur. J’ai vu cela se produire sur de nombreux sites, et il n’est pas toujours évident de savoir quel plugin est la cause.
Pour trouver le conflit, désactivez vos plugins un par un et vérifiez votre page après chacun d’eux. Lorsque la mise en page pleine largeur réapparaît, vous avez trouvé le coupable.
Si vous ne souhaitez pas affecter les visiteurs en direct pendant les tests, installez le plugin Health Check & Troubleshooting. Son mode de dépannage vous permet de désactiver les plugins pour vous-même tout en maintenant le site normal pour les autres.
Les plugins de barre latérale et les plugins de widgets sont les coupables les plus courants.
Les paramètres de largeur de contenu restreignent votre mise en page
WordPress et certains thèmes définissent une largeur de contenu maximale qui empêche les blocs de s'étendre sur toute la largeur, même lorsque vous sélectionnez l'alignement Pleine largeur.
Dans l'éditeur de blocs, cliquez sur l'icône Paramètres (icône d'engrenage) en haut à droite, puis recherchez une section Mise en page. Si une valeur de largeur de contenu est définie, elle peut restreindre vos blocs.
Dans les thèmes de blocs, cela est contrôlé par les valeurs contentSize et wideSize dans le fichier theme.json. Augmenter ces valeurs, ou les supprimer, permet aux blocs pleine largeur de s'étendre jusqu'au bord du navigateur.
Le CSS contraint votre zone de contenu
La feuille de style de votre thème peut définir une max-width sur le conteneur de contenu qui l'empêche de s'étirer, même avec un modèle pleine largeur appliqué.
Pour vérifier, faites un clic droit sur le contenu de votre page et sélectionnez Inspecter (ou appuyez sur F12). Regardez l'élément enveloppant le contenu, qui est souvent une div avec une classe comme .site-content, .entry-content, ou .content-area.
Si vous voyez une propriété max-width ou width limitant le conteneur, vous pouvez la remplacer par du CSS personnalisé dans Apparence → Personnaliser → CSS additionnel :
.your-content-class {
width: 100%;
max-width: none;
}
Remplacez .your-content-class par le nom de classe réel de votre thème.
FAQ sur la façon de rendre une page pleine largeur dans WordPress
Pourquoi ne puis-je pas trouver de modèle pleine largeur dans mon thème WordPress ?
Tous les thèmes n'incluent pas de modèle pleine largeur. Si le vôtre n'en a pas, vous avez deux options. Installez le plugin gratuit Fullwidth Templates pour ajouter des options de modèle pleine largeur à n'importe quel thème. Ou utilisez un constructeur de pages comme SeedProd pour créer des pages pleine largeur personnalisées avec un contrôle total de la mise en page.
Quelle est la différence entre « largeur étendue » et « pleine largeur » dans l'éditeur de blocs ?
La largeur étendue étend un bloc au-delà de la zone de contenu normale mais reste dans les marges de la page. La pleine largeur étend le bloc jusqu'aux bords de la fenêtre du navigateur, ignorant complètement les marges. Les deux options nécessitent que votre thème prenne en charge l'alignement large. La plupart des thèmes modernes le font.
Est-ce que rendre une page pleine largeur affecte la vitesse de la page ?
La mise en page elle-même ne ralentit pas votre page. Cependant, les grandes images étirées sur toute la largeur peuvent augmenter les temps de chargement si elles ne sont pas optimisées. Compressez et redimensionnez les images avant de les utiliser dans des sections pleine largeur pour que votre page reste rapide.
Puis-je rendre une section d'une page pleine largeur sans changer toute la page ?
Oui. Dans l'éditeur de blocs, ajoutez un bloc Groupe ou un bloc Couverture et réglez-le sur l'alignement Pleine largeur. Les blocs à l'intérieur s'étendront jusqu'au bord du navigateur, tandis que le reste de votre page restera à la largeur normale. SeedProd vous permet également de contrôler la largeur par section.
Ma page pleine largeur sera-t-elle belle sur mobile ?
Oui, tant que votre thème est responsive. Les mises en page pleine largeur s'adaptent automatiquement aux écrans plus petits. Prévisualisez votre page sur mobile avant de publier pour vous assurer que tout est correct. L'éditeur de blocs WordPress et SeedProd incluent des options de prévisualisation mobile. En savoir plus sur comment rendre un site Web uniquement pour ordinateur conviviale pour mobile.
Commencez à créer des pages pleine largeur
Rendre une page pleine largeur dans WordPress prend moins d'une minute une fois que vous savez où chercher. Commencez avec le modèle intégré de votre thème. Si vous avez besoin de plus de contrôle sur des sections individuelles, l'alignement Pleine largeur de l'éditeur de blocs s'en charge sans aucun plugin.
Si vous avez besoin d'un contrôle de conception complet sur une page de destination ou une mise en page personnalisée, SeedProd facilite la création de pages pleine largeur sans code.
Vous voudrez peut-être également consulter ces guides connexes :
- Comment changer les polices dans les thèmes WordPress (5 solutions)
- Comment ajouter facilement Font Awesome à votre thème WordPress
- Comment changer de thème WordPress sans perdre de contenu
- Comment personnaliser les en-têtes dans WordPress (4 manières simples)
- Comment modifier votre page d'accueil WordPress (méthode facile)
Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
