Vous aimeriez créer une page pleine largeur dans WordPress, afin de pouvoir étirer votre contenu sur l'écran ? La plupart des thèmes WordPress sont 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.
Sommaire
Dans cet article, on vous explique 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.
Pratiquement tous les meilleurs thèmes WordPress gratuits sont accompagnés d'un modèle pleine largeur, il y a donc de fortes chances que vous en ayez déjà un. Pour vérifier cela, 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».
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». Les options que vous voyez ici varieront 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.
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 plugin Fullwidth Templates.
Le plugin Fullwidth Templates ajoutera trois nouvelles options à vos modèles de page:
Ces options sont:
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.
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. Une fois que vous l'avez activée, 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. Utilisez ensuite l'interface glisser-déposer de Beaver Builder pour créer votre page. 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.
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.
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.
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.
Une fois les modifications terminées, cliquez sur «Terminé» en haut de la page. Vous pouvez ensuite enregistrer votre brouillon ou le publier. Vous pouvez maintenant visiter votre page pour voir votre page pleine largeur terminée.
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 SeedProd.
C'est le meilleur plugin de page de destination pour WordPress, et il est livré avec une interface de création 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, 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.
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, consultez 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:
<?php /* * 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.
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 en utilisant un client FTP (ou 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:
<?php get_sidebar(); ?>
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 comporte plusieurs barres latérales (les zones de widget 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.
Voici à quoi ressemble l'ensemble de notre code full-width.php après avoir effectué les modifications. Votre code peut être légèrement différent selon 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 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" à 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" 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 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.
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;
}
Si vous souhaitez utiliser la méthode manuelle et que vous souhaitez effectuer une personnalisation plus poussée, 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.
Créer une page WordPress en pleine largeur est faisable, à condition d'y passer quelques minutes. Une fois le résultat souhaité obtenu, votre site prendra une toute nouvelle tournure. Vous souhaitez en découvrir un peu plus sur le CMS ? On évoque le sujet dans de multiples articles, notamment liés aux plugins LMS ! De quoi optimiser votre site, en fonction de votre marché.