Une page pleine largeur dans WordPress étend votre contenu sur toute la fenêtre du navigateur, sans barre latérale ni encadré limitant la mise en page. C'est l'un des changements de conception les plus courants que les utilisateurs souhaitent apporter, et sa mise en place est généralement plus rapide que vous ne le pensez.
J'ai vu de nombreux débutants se heurter à ce problème, 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 enfermée dans un cadre, même lorsque vous ne voulez pas du tout de barre latérale.
La bonne nouvelle, c'est qu'il existe plusieurs façons de résoudre ce problème. Dans ce guide, je vais vous présenter cinq méthodes pour créer une page en pleine largeur dans WordPress, de la plus simple (sans plugin ni code) à la plus avancée. Je vous expliquerai également quoi faire lorsque votre mise en page en pleine largeur ne fonctionne pas comme prévu.
- Utilisez le modèle pleine largeur intégré à votre thème
- Rendre les blocs individuels pleine largeur dans l'éditeur de blocs
- Ajoutez un modèle pleine largeur avec un plugin gratuit
- Créer une page personnalisée pleine largeur 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)
- La page pleine largeur ne fonctionne pas ? Voici comment y remédier.
- FAQ sur la création d'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 passer 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 mettre en pleine largeur dans l'éditeur WordPress.
Étape 2 : Dans la barre latérale droite, recherchez la section Modèle. Selon votre thème, celle-ci peut apparaître sous Attributs de page ou sous forme de menu déroulant Modèle indépendant.
Étape 3 : Cliquez sur le menu déroulant et recherchez une option pleine largeur. Le nom varie selon le thème. Vous pouvez voir « Pleine largeur », « Sans 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 vérifier que la barre latérale a disparu et que le contenu s'étend sur toute la page.
C'est tout. Si votre thème dispose d'un modèle pleine largeur, c'est le moyen le plus rapide de l'utiliser.
Si vous ne voyez pas d'option pleine largeur dans le menu déroulant, il se peut que votre thème n'en inclue pas. Passez à la méthode suivante.
Rendre les blocs individuels pleine largeur dans l'éditeur de blocs
L'éditeur de blocs WordPress vous permet de définir l'alignement en pleine largeur de blocs individuels, en les étirant sur tout l'écran sans modifier votre modèle de page. Cette fonctionnalité est intégrée à WordPress, vous n'avez donc pas besoin d'un 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 mettre en pleine largeur.
Étape 2 : Dans la barre d'outils située en haut du bloc, cliquez sur le bouton Modifier l'alignement (il ressemble à un ensemble de lignes horizontales).
Étape 3 : Sélectionnez « Pleine largeur » 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 coulisses pour que cela se réalise.
Conseil : si vous souhaitez qu'une section entière de votre page occupe toute la largeur, ajoutez d'abord un bloc Groupe. Définissez l'alignement du bloc Groupe sur Pleine largeur, puis ajoutez vos blocs de contenu à l'intérieur. Le bloc Groupe agit comme un conteneur pleine largeur pour tout ce qui y est imbriqué.
Si l'option d'alignement sur toute la largeur n'apparaît pas dans la barre d'outils, il est possible que votre thème ne la prenne pas en charge. Je vous explique comment résoudre ce problème dans la section Dépannage ci-dessous.
Mises en page pleine largeur dans les thèmes en blocs (édition complète du site)
Si vous utilisez un thème de blocs 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 la largeur des mises en page.
Pour ajuster la largeur de page dans un thème bloc, rendez-vous dans Apparence → Éditeur dans votre tableau de bord WordPress. À partir 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 pour les blocs alignés en largeur). Le réglage de ces valeurs modifie la largeur de votre contenu sur l'ensemble du site.
Il s'agit de l'approche la plus flexible si vous utilisez un thème moderne, car vous pouvez contrôler la largeur de la mise en page de manière globale plutôt que page par page.
Ajoutez un modèle pleine largeur avec un plugin gratuit
Si votre thème ne comprend pas de modèle pleine largeur, le plugin gratuit Fullwidth Templates en ajoute un à n'importe quel thème WordPress. Aucun code n'est nécessaire.
Étape 1 : Dans votre tableau de bord WordPress, allez dans Plugins → Ajouter nouveau et recherchez « Fullwidth Templates ». Si vous avez besoin d'aide pour cette étape, voici un guide sur la façon d'installer un plugin WordPress.
Étape 2 : Installez et activez le plugin.
É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 élimine |
|---|---|
| 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 d'accueil, « FW Fullwidth » est le choix idéal. Pour une toile complètement vierge, utilisez « FW Fullwidth No Header Footer ».
Étape 5 : Cliquez sur Mettre à jour ou Publier et prévisualisez votre page.
Le plugin fonctionne avec n'importe quel thème, c'est donc une option fiable lorsque votre thème ne vous offre pas de modèle pleine largeur.
Créer une page personnalisée pleine largeur avec SeedProd
Lorsque vous avez besoin d'un contrôle total sur la conception d'une page d'accueil, d'une page « bientôt disponible », d'une page de vente ou de 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 régulièrement SeedProd pour cela. Il fonctionne avec votre thème existant, vous n'avez donc pas besoin de modifier votre configuration actuelle. Chaque page que vous créez dans SeedProd est par défaut en pleine largeur.
Voici comment créer une page pleine largeur avec cet outil.
Étape 1 : Installez et activez SeedProd, puis rendez-vous dans SeedProd → Landing Pages 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 comprend des modèles pour les pages d'accueil, les pages d'inscription aux webinaires, les pages de vente, etc. 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 occupe toute la largeur par défaut.
Si vous devez ajuster la largeur d'une section, cliquez sur la section et modifiez la 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 chaque ligne pleine largeur en cliquant sur une ligne et en ajustant sa 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 idéal lorsque vous avez besoin d'une page qui se distingue du reste de votre site, comme une page d'accueil 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ù votre modèle de thème habituel fonctionne bien, les méthodes précédentes décrites dans 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 maîtrisez 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. Effectuez également 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 à l'aide d'un client FTP ou votre hébergeur web gestionnaire de fichiers. Accédez à /wp-content/themes/your-theme-folder/.
Étape 2 : Créez un nouveau fichier appelé full-width.php. En haut du fichier, ajoutez cet en-tête de modèle afin que WordPress le reconnaisse :
<?php
/*
* Template Name: Full Width
*/
get_header();
?>
Étape 3 : Ouvrez le fichier de votre thème page.php fichier et copiez son contenu dans votre nouveau full-width.php fichier, sous le code d'en-tête. Recherchez ensuite et supprimez la ligne qui appelle la barre latérale :
<?php get_sidebar(); ?>
Supprimez cette ligne. Cela supprime la barre latérale de votre modèle.
Étape 4 : Enregistrez le fichier et téléchargez-le dans votre dossier de thèmes.
Étape 5 : Retournez à votre tableau de bord WordPress. Modifiez n'importe quelle page, ouvrez le menu déroulant « Modèle » et vous verrez apparaître votre nouvelle option « Pleine largeur ».
Étape 6 : Sélectionnez le modèle, puis ajoutez un CSS personnalisé pour étirer la zone de contenu sur toute la largeur. Allez dans Apparence → Personnaliser → CSS supplémentaire 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 Inspecter de votre navigateur pour trouver la classe de conteneur correcte si .site-content ne fonctionne pas.
Étape 7 : Actualisez la page et prévisualisez-la.
Cette approche vous donne un contrôle total, mais elle nécessite de maintenir le fichier modèle dans un thème enfant. Si vous n'êtes pas à l'aise avec l'édition 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 les cas où elles fonctionnent bien et ceux où il vaut mieux opter pour une mise en page plus sobre.
| La largeur maximale convient le mieux pour | La mise en page contenue fonctionne mieux pour |
|---|---|
| Pages d'atterrissage | Articles de blog |
| Pages d'accueil | Documentation |
| Pages du portfolio | Articles longs |
| Vitrines de produits | Pages contenant beaucoup de texte |
| Pages à venir | 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 limitées par des marges plus étroites. Pour les contenus principalement textuels, une mise en page encadrée permet de conserver une longueur de ligne confortable.
Vous pouvez mélanger les deux sur le même site. J'utilise des mises en page pleine largeur pour les pages clés telles que 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 y remédier.
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, cela signifie que votre thème ne la prend pas en charge.
Le thème nécessite une seule ligne de code dans son functions.php fichier :
add_theme_support( 'align-wide' );
Vérifiez d'abord la documentation de votre thème pour voir s'il existe un paramètre pour cela. Si ce n'est pas le cas et que vous êtes à l'aise avec la modification de code, ajoutez cette ligne à votre thème enfant functions.php fichier. 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 constaté ce phénomène sur de nombreux sites, et il n'est pas toujours facile de déterminer quel plugin en 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 perturber les visiteurs pendant les tests, installez le plugin Health Check & Troubleshooting. Son mode « Troubleshooting » vous permet de désactiver les plugins pour vous-même tout en conservant le fonctionnement normal du site pour les autres utilisateurs.
Les plugins de barre latérale et les plugins de widget sont les coupables les plus courants.
Les paramètres de largeur du contenu limitent votre mise en page
WordPress et certains thèmes définissent une largeur maximale pour le contenu, ce 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 en forme d'engrenage) en haut à droite, puis recherchez la section Mise en page. Si une valeur de largeur de contenu est définie, cela peut restreindre vos blocs.
Dans les thèmes de blocs, cela est contrôlé par le contentSize et wideSize valeurs dans le fichier theme.json. En augmentant ces valeurs ou en les supprimant, les blocs pleine largeur s'étendent jusqu'au bord du navigateur.
Le CSS limite votre zone de contenu
La feuille de style de votre thème peut définir un 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, cliquez avec le bouton droit sur le contenu de votre page et sélectionnez Inspecter (ou appuyez sur F12). Regardez l'élément conteneur de contenu, qui est souvent un div avec une classe comme .site-content, .entry-contentou .content-area.
Si vous voyez un max-width ou width propriété limitant le conteneur, vous pouvez la remplacer par un CSS personnalisé dans Apparence → Personnaliser → CSS supplémentaire:
.your-content-class {
width: 100%;
max-width: none;
}
Remplacer .your-content-class avec le nom réel de la classe de votre thème.
FAQ sur la création d'une page pleine largeur dans WordPress
Pourquoi je ne trouve pas de modèle pleine largeur dans mon thème WordPress ?
Tous les thèmes ne comprennent pas un modèle pleine largeur. Si ce n'est pas le cas du vôtre, deux options s'offrent à vous. 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 tel que 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 s'étend au-delà de la zone de contenu normale, mais reste dans les marges de la page. La largeur totale étend le bloc jusqu'aux bords de la fenêtre du navigateur, en ignorant complètement les marges. Ces deux options nécessitent que votre thème prenne en charge l'alignement large. La plupart des thèmes modernes le font.
La création d'une page pleine largeur affecte-t-elle la vitesse de la page ?
La mise en page en elle-même ne ralentit pas votre page. Cependant, les images volumineuses étirées sur toute la largeur peuvent augmenter le temps de chargement si elles ne sont pas optimisées. Compressez et redimensionnez les images avant de les utiliser dans des sections pleine largeur afin de garantir la rapidité de votre page.
Puis-je rendre une section d'une page pleine largeur sans modifier l'ensemble de la page ?
Oui. Dans l'éditeur de blocs, ajoutez un bloc Groupe ou Couverture et définissez-le sur un alignement Pleine largeur. Les blocs qu'il contient s'étireront jusqu'au bord du navigateur, tandis que le reste de votre page conservera sa largeur normale. SeedProd vous permet également de contrôler la largeur section par section.
Ma page pleine largeur s'affichera-t-elle correctement sur mobile ?
Oui, à condition que votre thème soit responsive. Les mises en page pleine largeur s'adaptent automatiquement aux écrans plus petits. Prévisualisez votre page sur mobile avant de la publier afin de vous assurer que tout s'affiche correctement. L'éditeur de blocs WordPress et SeedProd proposent tous deux des options de prévisualisation mobile. Voici plus d'informations sur la manière de rendre un site web uniquement accessible sur ordinateur compatible avec les appareils mobiles.
Commencez à créer des pages pleine largeur
Créer une page pleine largeur dans WordPress prend moins d'une minute une fois que vous savez où chercher. Commencez par le modèle intégré à votre thème. Si vous avez besoin d'un contrôle accru sur certaines sections, l'alignement pleine largeur de l'éditeur de blocs vous permet d'y parvenir sans aucun plugin.
Si vous avez besoin d'un contrôle total sur la conception d'une page d'accueil ou d'une mise en page personnalisée, SeedProd vous permet de créer facilement des pages pleine largeur sans code.
Vous pouvez également consulter ces guides connexes :
- Comment changer les polices de caractères 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 sur WordPress (4 façons simples)
- Comment éditer votre page d'accueil WordPress (méthode simple)
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
