Comment créer une page pleine largeur dans WordPress

Voulez-vous créer une page pleine largeur dans WordPress, afin de pouvoir étirer votre contenu sur l’écran?
La plupart des thèmes WordPress sont déjà livrés avec un modèle de page pleine largeur intégré que vous pouvez utiliser. Cependant, si votre thème n’en a pas, il est facile de l’ajouter.

Dans cet article, nous allons vous montrer comment créer facilement une page pleine largeur dans WordPress et même créer des mises en page entièrement personnalisées sans aucun code.

Méthode 1. Utilisez le modèle pleine largeur de votre thème
Si votre thème est déjà fourni avec un modèle de page pleine largeur, il est préférable de l’utiliser simplement. Presque tous les bons thèmes WordPress le font.

Même les meilleurs thèmes WordPress gratuits sont souvent accompagnés d’un modèle pleine largeur, il y a donc de fortes chances que vous en ayez déjà un.

Tout d’abord, vous devez modifier une page ou en créer une nouvelle en accédant à Pages »Ajouter nouveau dans votre tableau de bord WordPress.

Dans le volet «Document» de droite de l’éditeur de contenu, vous devez développer la section «Attributs de page» en cliquant sur la flèche vers le bas à côté. Vous devriez alors voir une liste déroulante «Modèle».

Affichage de la section 'Attributs de page' dans le volet 'Document' de WordPress

Si vous avez un modèle pleine largeur pour votre thème, il sera répertorié ici. Il devrait être appelé quelque chose comme “ Modèle pleine largeur ”:

Sélectionnez le modèle pleine largeur dans la liste déroulante

Les options que vous voyez ici varient en fonction de votre thème. Ne vous inquiétez pas si votre thème n’a pas de modèle de page pleine largeur.

Vous pouvez facilement en ajouter un en utilisant les méthodes ci-dessous.

Méthode 2. Créer un modèle de page pleine largeur à l’aide d’un plug-in
Cette méthode est la plus simple et fonctionne avec tous les thèmes WordPress et les plugins de création de page.

Tout d’abord, vous devez installer et activer le Modèles pleine largeur brancher. Si vous ne savez pas comment faire cela, consultez notre guide du débutant pour installer un plugin WordPress.

Le plugin Fullwidth Templates ajoutera trois nouvelles options à vos modèles de page:

Les différentes options disponibles pour votre modèle de page en utilisant le plugin Full Width

Ces options sont:

FW No Sidebar: supprime la barre latérale de votre page, mais laisse tout le reste intact
FW Fullwidth: supprime la barre latérale, le titre et les commentaires, et étend la mise en page sur toute la largeur
FW Fullwidth No Header Footer: supprime tout ce que fait FW Fullwidth, plus l’en-tête et le pied de page
Si vous allez simplement utiliser l’éditeur WordPress intégré, “FW No Sidebar” sera probablement le meilleur choix.

Bien que ce plugin vous permette de créer un modèle de page pleine largeur, vos options de personnalisation sont limitées.

Si vous souhaitez personnaliser votre modèle pleine largeur sans code, vous devez utiliser un générateur de page.

Méthode 3: Concevoir une page pleine largeur dans WordPress à l’aide d’un plug-in Page Builder
Si votre thème n’a pas de modèle pleine largeur, c’est le moyen le plus simple de créer et de personnaliser un modèle pleine largeur.

Il vous permet de modifier facilement votre page pleine largeur et de créer différentes mises en page pour votre site Web avec une interface glisser-déposer.

Pour cette méthode, vous aurez besoin d’un plugin de création de page WordPress. Dans ce didacticiel, nous utiliserons Beaver Builder. C’est l’un des meilleurs plugins de création de pages par glisser-déposer, et il vous permet de créer facilement des mises en page sans écrire de code.

Tout d’abord, installez et activez le plugin Beaver Builder. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Une fois que vous l’avez activé, modifiez une page existante ou créez-en une nouvelle.

Dans le volet “Document” sur le côté droit de votre écran, accédez à “Attributs de page” et sélectionnez un modèle pleine largeur dans la liste déroulante.

Ensuite, cliquez sur le bouton «Lancer Beaver Builder» au centre de votre écran.

Utilisation du plugin Beaver Builder pour créer votre page pleine largeur

Maintenant, utilisez l’interface glisser-déposer de Beaver Builder pour créer votre page.

L'interface glisser-déposer de Beaver Builder

Une bonne façon de commencer est de cliquer sur l’onglet Modèles en haut. Sélectionnez l’un des modèles prédéfinis à utiliser comme base pour votre page pleine largeur.

Sélectionnez l'un des modèles Beaver Builder

Cliquez sur un modèle pour le sélectionner et le constructeur de page le chargera. Vous pouvez ensuite modifier tous les éléments, tels que les images, que vous souhaitez modifier.

Les mises en page Beaver Builder sont construites avec des lignes et des modules. Chaque ligne peut avoir plusieurs colonnes et à l’intérieur de chaque ligne, vous pouvez ajouter des modules de contenu et des widgets.

Pour éditer une ligne ou un module dans la mise en page, il vous suffit de cliquer dessus. Dans ce cas, nous éditons le module En-tête:

Modifier un titre à l'aide de Beaver Builder

Beaver Builder ouvrira les détails de l’élément dans une fenêtre contextuelle où vous pourrez modifier ses paramètres. Vous pouvez modifier le texte, modifier les polices et les couleurs, ajouter ou modifier des images d’arrière-plan, etc.

Modifier les détails d'un élément dans Beaver Builder

Vous pouvez à tout moment ajouter des modules et des widgets à votre mise en page. Beaver Builder est livré avec de nombreux modules de contenu de base et avancés que vous pouvez simplement faire glisser et déposer dans votre page.

Ajouter un module dans Beaver Builder

Une fois les modifications terminées, cliquez sur «Terminé» en haut de la page. Vous pouvez ensuite enregistrer votre brouillon ou le publier.

Enregistrer ou publier votre page pleine largeur dans Beaver Builder

Vous pouvez maintenant visiter votre page pour voir votre page pleine largeur terminée.

Méthode 4. Créez des pages de destination pleine largeur entièrement personnalisées avec SeedProd
Bien que Beaver Builder soit une solution intéressante, il a le potentiel de ralentir votre site Web.

Si vous souhaitez créer une page de destination entièrement personnalisée dans laquelle vous souhaitez personnaliser l’en-tête, le pied de page et toutes les zones de la page, nous vous recommandons d’utiliser GraineProd.

C’est le meilleur plugin de page de destination pour WordPress, et il est livré avec une interface de création de page glisser-déposer très facile à utiliser.

Générateur de pages SeedProd

Tout d’abord, vous devez installer et activer le GraineProd brancher.

Après l’activation, accédez simplement à SeedProd »Pages pour ajouter une nouvelle page de destination. Vous pouvez simplement choisir parmi l’un de leurs nombreux modèles prédéfinis ou créer une page de destination personnalisée à partir de zéro.

La meilleure partie de SeedProd est qu’il est extrêmement rapide et qu’il est livré avec des fonctionnalités de conversion intégrées pour la gestion des abonnés, l’intégration du service de marketing par e-mail, etc.

Méthode 5: créer manuellement un modèle de page WordPress pleine largeur
Cette méthode est un dernier recours si aucune des méthodes ci-dessus ne fonctionne pour vous. Cela vous oblige à modifier vos fichiers de thème WordPress. Vous aurez besoin d’une compréhension de base de PHP, CSS et HTML.

Si vous ne l’avez pas fait auparavant, jetez un œil à notre guide sur la façon de copier / coller du code dans WordPress.

Avant d’aller plus loin, nous vous recommandons de créer une sauvegarde WordPress ou au moins une sauvegarde de votre thème actuel. Cela vous aidera à restaurer facilement votre site en cas de problème.

Ensuite, ouvrez un éditeur de texte brut comme le Bloc-notes et collez le code suivant dans un fichier vide:

/*

Template Name: Full-Width
*/
get_header(); ?>

Enregistrez ce fichier sous full-width.php sur ton ordinateur. Vous devrez peut-être changer le type «Enregistrer sous» en «Tous les fichiers» pour éviter de l’enregistrer en tant que fichier .txt:

Enregistrez le modèle pleine largeur en tant que fichier .php

Ce code définit simplement le nom d’un fichier de modèle et demande à WordPress de récupérer le modèle d’en-tête.

Ensuite, vous aurez besoin de la partie contenu du code. Connectez-vous à votre site Web à l’aide d’un client FTP (ou de votre gestionnaire de fichiers d’hébergement WordPress dans cPanel), puis accédez à / wp-content / themes / your-theme-folder /.

Vous devez maintenant localiser le fichier page.php. Il s’agit du fichier de modèle de page par défaut de votre thème.

Ouvrez ce fichier et copiez tout après le get_header() et collez-le dans le fichier full-width.php sur votre ordinateur.

Dans le full-width.php fichier, recherchez et supprimez cette ligne de code:

Cette ligne récupère la barre latérale et l’affiche dans votre thème. Le supprimer empêchera votre thème d’afficher la barre latérale lors de l’utilisation du modèle pleine largeur.

Vous pouvez voir cette ligne plus d’une fois dans votre thème. Si votre thème a plusieurs barres latérales (les zones de widgets de pied de page sont également appelées barres latérales), vous verrez chaque barre latérale référencée une fois dans le code. Décidez des barres latérales que vous souhaitez conserver.

Si votre thème n’affiche pas les barres latérales sur les pages, vous ne trouverez peut-être pas ce code dans votre fichier.

Ensuite, téléchargez le full-width.php fichier dans votre dossier de thème à l’aide de votre client FTP.

Vous avez maintenant créé et téléchargé avec succès un modèle de page pleine largeur personnalisé sur votre thème. L’étape suivante consiste à utiliser ce modèle pour créer une page pleine largeur.

Rendez-vous dans votre zone d’administration WordPress et modifiez ou créez une nouvelle page dans l’éditeur de blocs WordPress.

Dans le volet “Document” sur la droite, recherchez “Attributs de page” et cliquez sur la flèche vers le bas pour développer cette section si nécessaire. Vous devriez voir une liste déroulante «Modèle» dans laquelle vous pouvez sélectionner votre nouveau modèle «Pleine largeur»:

Sélectionnez le modèle pleine largeur que vous avez créé dans la liste déroulante Modèle

Après avoir sélectionné ce modèle, publiez ou mettez à jour la page.

Lorsque vous affichez la page, vous verrez que les barres latérales ont disparu et que votre page apparaît comme une seule colonne. Il n’est peut-être pas encore pleine largeur, mais vous êtes maintenant prêt à le styliser différemment.

Vous devrez utiliser l’outil Inspecter pour découvrir les classes CSS utilisées par votre thème pour définir la zone de contenu.

Après cela, vous pouvez ajuster sa largeur à 100% en utilisant CSS. Vous pouvez ajouter du code CSS en accédant à Apparence »Personnaliser et en cliquant sur «CSS supplémentaire» en bas de l’écran.

Ajout de CSS dans le personnalisateur de thème

Nous avons utilisé le code CSS suivant dans notre site de test:

.page-template-full-width .content-area {
width: 100%;
margin: 0px;
border: 0px;
padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}
Voici à quoi cela ressemblait sur notre site de démonstration en utilisant le thème Twenty Sixteen.

Aperçu de la page pleine largeur

Si vous souhaitez utiliser la méthode manuelle et que vous souhaitez effectuer une personnalisation supplémentaire, vous pouvez également utiliser le plugin CSS Hero qui vous permet de modifier les styles CSS avec un éditeur pointer-cliquer.

Pour la plupart des utilisateurs, cependant, nous vous recommandons d’utiliser le modèle pleine largeur de votre propre thème ou d’utiliser un plugin pour en créer un.

Nous espérons que cet article vous a aidé à apprendre à créer facilement une page pleine largeur dans WordPress. Vous pouvez également consulter notre guide sur les meilleurs plugins WordPress pour développer votre site Web, et notre comparaison des meilleurs plugins WordPress LMS pour créer et vendre des cours.