Comment créer une page pleine largeur dans WordPress (Guide pour débutants)

Voulez-vous créer une page pleine largeur dans WordPress, afin d'étirer votre contenu sur tout 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 d'en ajouter un.

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.

Voici un aperçu rapide des méthodes présentées dans ce guide :

• Méthode 1. Utilisez le modèle pleine largeur de votre thème
• Méthode 2. Créer un modèle de page pleine largeur à l'aide d'un plugin
• Méthode 3 : Concevoir une page pleine largeur dans WordPress à l'aide d'un plugin de constructeur de pages
• Méthode 4. Créer des pages pleine largeur entièrement personnalisées avec SeedProd
• Méthode 5 : Créer manuellement un modèle de page pleine largeur WordPress

Méthode 1. Utiliser le modèle pleine largeur de votre thème

Si votre thème est déjà livré 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 livrés avec 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 allant dans Pages » Ajouter 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 un menu déroulant ‘Modèle’.

Si votre thème dispose d'un modèle pleine largeur, il sera répertorié ici. Il devrait s'appeler quelque chose comme ‘Modèle pleine largeur’ :

Les options que vous voyez ici différeront 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 plugin

Cette méthode est la plus simple et fonctionne avec tous les thèmes WordPress et plugins de constructeur de pages.

Tout d'abord, vous devez installer et activer le plugin Fullwidth Templates. Si vous n'êtes pas sûr de la procédure, consultez notre guide pour débutants sur l'installation d'un plugin WordPress.

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

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 en pleine 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 comptez 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 aucun code, vous devez utiliser un constructeur de pages.

Méthode 3 : Concevoir une page pleine largeur dans WordPress à l'aide d'un plugin de constructeur de pages

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 constructeur de pages WordPress. Dans ce tutoriel, nous utiliserons Thrive Architect.

C'est l'un des meilleurs plugins de constructeur de pages 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 Thrive Architect. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois le plugin activé, modifiez une page existante ou créez-en une nouvelle dans WordPress.

Ensuite, cliquez sur le bouton « Lancer Thrive Architect » en haut de votre écran.

Ensuite, vous serez invité à choisir le type de page que vous souhaitez créer. Vous pouvez choisir de créer une page normale ou une page de destination pré-conçue.

Sélectionnez l'option « Page de destination pré-conçue » en cliquant dessus.

Cela vous mènera à la bibliothèque de pages de destination de Thrive Architect. À partir de là, vous pouvez sélectionner l'un des modèles pré-faits pour l'utiliser comme base de votre page pleine largeur.

Cliquez simplement sur un modèle que vous aimez pour le sélectionner.

Si vous avez choisi un modèle dans la section « Ensembles de pages de destination intelligentes », vous pouvez maintenant choisir parmi un certain nombre de pages pré-conçues dans ce style.

Pour ce tutoriel, nous choisirons le modèle « Page de vente » en cliquant dessus. Ensuite, appuyez sur le bouton « Appliquer le modèle » et le constructeur de pages le chargera.

Une fois dans l'éditeur Thrive Architect, vous pouvez modifier tous les éléments, tels que les images, l'arrière-plan, le texte, etc., que vous souhaitez changer.

Pour modifier un élément sur la page, il vous suffit de cliquer dessus. Dans ce cas, nous avons cliqué sur l'arrière-plan de ce bloc de page. Cela fait apparaître toutes les options de personnalisation dans le menu de gauche :

Ici, vous pouvez activer le commutateur pour vous assurer que votre contenu couvre toute la largeur de l'écran.

Depuis le menu de gauche, vous pouvez également personnaliser la typographie, la taille de la police, la mise en page, le style de l'arrière-plan, les bordures, les ombres, et bien plus encore.

Vous pouvez également ajouter de nouveaux éléments à tout moment à votre mise en page. Thrive Architect est livré avec de nombreux blocs de base et avancés que vous pouvez glisser-déposer sur votre page.

Une fois que vous avez terminé la modification, cliquez sur la flèche (^) à côté du bouton « Enregistrer le travail » en bas de l'écran. Ensuite, cliquez sur l'option « Enregistrer et retourner à l'éditeur d'articles ».

Vous pouvez ensuite enregistrer votre brouillon ou le publier.

Une fois publié, vous pouvez visiter votre blog WordPress pour voir votre page pleine largeur terminée.

Méthode 4. Créer des pages pleine largeur entièrement personnalisées avec SeedProd

Bien que Thrive Architect soit une solution intéressante, vous recherchez peut-être un plugin qui vous offre des options de personnalisation encore plus puissantes pour les pages de votre site Web.

Si vous cherchez à créer une page de destination entièrement personnalisée où vous souhaitez personnaliser l'en-tête, le pied de page et toutes les zones de la page, nous vous recommandons d'utiliser SeedProd.

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

Tout d'abord, vous devez installer et activer le plugin SeedProd. Après l'activation, allez simplement dans SeedProd » Pages pour ajouter une nouvelle page de destination.

Vous pouvez choisir parmi plus de 300 de leurs modèles pré-conçus, qui incluent de nombreuses options pleine largeur. Ou, vous pouvez créer une page de destination personnalisée pleine largeur à partir de zéro.

Le meilleur atout de SeedProd est qu'il est extrêmement rapide, et il est livré avec des fonctionnalités de conversion intégrées pour la gestion des abonnés, l'intégration de services de marketing par e-mail, des blocs WooCommerce avancés, et plus encore.

Pour des instructions détaillées, consultez notre guide sur la création d'une page de destination dans WordPress.

Outre le constructeur de pages de destination, SeedProd propose également un constructeur de thèmes complet par glisser-déposer. Cela signifie que vous pouvez facilement créer un thème WordPress personnalisé pleine largeur sans modifier aucun code.

Allez simplement dans SeedProd » Constructeur de thèmes pour créer un nouveau thème WordPress. Encore une fois, vous pouvez choisir parmi des modèles de thèmes personnalisables ou concevoir chaque partie de votre thème à partir de zéro.

En pointant et en cliquant, vous pouvez modifier chaque partie de votre thème. Par exemple, vous pouvez ajouter une nouvelle image d'arrière-plan et définir la position et la largeur de la section sur plein écran.

Avec le constructeur de thèmes SeedProd, vous pouvez personnaliser chaque partie de votre site Web WordPress, y compris les pages, les articles, les archives, l'en-tête, le pied de page, les barres latérales, les pages WooCommerce, et plus encore.

Pour des instructions étape par étape, vous pouvez suivre notre tutoriel sur la création facile d'un thème WordPress personnalisé.

Méthode 5 : Créer manuellement un modèle de page pleine largeur WordPress

Cette méthode est un dernier recours si aucune des méthodes ci-dessus ne fonctionne pour vous. Elle nécessite de modifier les fichiers de votre thème WordPress. Vous aurez besoin de connaissances de base en PHP, CSS et HTML.

Si vous n’avez jamais fait cela auparavant, consultez notre guide sur comment 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 si quelque chose se passe mal.

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

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

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

Ce code définit simplement le nom d'un fichier 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 du gestionnaire de fichiers de votre hébergement WordPress dans cPanel) puis allez dans /wp-content/themes/votre-dossier-de-thème/.

Maintenant, vous devez localiser le fichier page.php. C'est le fichier modèle de page par défaut de votre thème.

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

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

<?php get_sidebar(); ?>

Cette ligne récupère la barre latérale et l'affiche dans votre thème. La 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 du 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 quelles barres latérales vous souhaitez conserver.

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

Voici à quoi ressemble l'intégralité de notre code full-width.php après avoir effectué les modifications. Votre code peut sembler légèrement différent en fonction de votre thème.

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

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

Ensuite, téléchargez le fichier full-width.php 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 personnalisé pleine largeur dans votre thème. La prochaine étape consiste à utiliser ce modèle pour créer une page pleine largeur.

Accédez à votre zone d'administration WordPress et modifiez ou créez une nouvelle page dans l'éditeur de blocs WordPress.

Dans le panneau « Document » à droite, recherchez « Attributs de la page » et cliquez sur la flèche vers le bas pour développer cette section si nécessaire. Vous devriez voir un menu déroulant « Modèle » où vous pouvez sélectionner votre nouveau modèle « Pleine largeur » :

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 en une seule colonne. Elle n'est peut-être pas encore en pleine largeur, mais vous êtes maintenant prêt à la styliser différemment.

Vous devrez utiliser l'outil Inspecter pour trouver 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 % à l'aide de CSS. Vous pouvez ajouter du code CSS en allant dans Apparence » Personnaliser et en cliquant sur « CSS additionnel » en bas de l'écran.

Nous avons utilisé le code CSS suivant sur 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 utilisant le thème Twenty Sixteen.

Si vous souhaitez utiliser la méthode manuelle et apporter des personnalisations supplémentaires, vous pouvez également utiliser le plugin CSS Hero qui vous permet de modifier les styles CSS avec un éditeur en pointant et cliquant.

Pour la plupart des utilisateurs, cependant, nous 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 comment créer facilement une page pleine largeur dans WordPress. Vous voudrez peut-être aussi 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.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.