Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

Comment changer le côté de la barre latérale dans WordPress (4 méthodes)

Lorsque nous avons commencé à personnaliser les thèmes WordPress, déplacer la barre latérale de droite à gauche semblait être une chose simple à faire.

Pourtant, nous avons découvert que de nombreux utilisateurs ont du mal avec ce changement de mise en page de base car chaque thème le gère différemment, et certains ne rendent pas l'option évidente.

Après avoir aidé des utilisateurs via WPBeginner, nous avons appris que le positionnement de la barre latérale peut avoir un impact significatif sur la façon dont les visiteurs interagissent avec votre contenu.

Que vous suiviez les meilleures pratiques de conception ou que vous vous adaptiez aux habitudes de lecture de votre public, savoir comment changer la position de votre barre latérale est une compétence précieuse.

Dans ce guide, nous vous montrerons les moyens les plus simples de changer la position de votre barre latérale dans WordPress.

Comment changer le côté de la barre latérale dans WordPress

💡 Réponse rapide : Comment changer le côté de la barre latérale dans votre thème WordPress

Voici un aperçu rapide des méthodes que nous allons couvrir afin que vous puissiez passer à celle qui correspond à vos besoins :

  • Méthode 1 : Utiliser le personnalisateur WordPress – C'est l'option la plus simple et elle convient mieux aux utilisateurs d'un thème classique qui dispose déjà d'un réglage intégré pour changer la disposition de la barre latérale.
  • Méthode 2 : Utiliser du code CSS personnalisé – Cette méthode s'adresse aux utilisateurs d'un thème classique qui ne dispose pas d'une option de barre latérale intégrée. Elle nécessite l'ajout d'un petit extrait de code.
  • Méthode 3 : Utiliser l'éditeur complet du site (FSE) – C'est la méthode standard pour quiconque utilise un thème de blocs moderne. Vous ferez simplement glisser et déposer la barre latérale dans une nouvelle position.
  • Méthode 4 : Utiliser le Plugin CSS Hero – C'est le meilleur choix pour les débutants sur n'importe quel thème qui souhaitent une manière visuelle et sans code de changer la position de la barre latérale et d'effectuer d'autres personnalisations de conception.

Comment changer le côté de la barre latérale dans mon thème WordPress ?

Pour changer le côté de la barre latérale dans votre thème WordPress, vous devez d'abord identifier si vous utilisez un thème classique ou un thème de blocs. La méthode que vous utiliserez dépendra entièrement du type de votre thème.

Les thèmes classiques utilisent généralement le personnalisateur de thème ou du CSS personnalisé pour ce changement. Les thèmes de blocs utilisent le nouvel éditeur complet du site.

Voici comment vérifier rapidement lequel vous avez. Dans votre tableau de bord, allez dans Apparence. Si vous voyez un menu « Éditeur », vous utilisez un thème de blocs. Si vous voyez « Personnaliser » et « Widgets » à la place, vous avez un thème classique.

Identification d'un thème classique et d'un thème de blocs

Déplacer la barre latérale peut être utile pour de nombreuses raisons. Par exemple, les sites web avec des langues de droite à gauche semblent plus naturels avec la barre latérale sur le côté gauche.

Vous pourriez également vouloir améliorer l'expérience utilisateur sur votre site. Si vous remarquez que les visiteurs de votre site de commerce électronique parcourent les pages selon un schéma spécifique, ajuster la barre latérale peut rendre le shopping plus intuitif.

Avec tout cela à l'esprit, examinons comment changer le côté de la barre latérale sur votre blog ou site web WordPress.

Nous avons 4 méthodes simples, et vous pouvez utiliser les liens rapides ci-dessous pour passer à celle que vous préférez :

Méthode 1 : Comment changer le côté de la barre latérale avec le personnaliseur WordPress (Thèmes classiques)

Cette méthode s'adresse aux personnes utilisant un thème classique. Cela signifie que vous pouvez toujours utiliser le personnaliseur WordPress pour styliser le design de votre site, et que la section Widgets du menu Apparence de l'administration WordPress existe toujours.

Si le personnaliseur de thème est manquant dans votre tableau de bord WordPress, vous utilisez probablement un thème de blocs et devez passer à la troisième méthode.

Parfois, les développeurs de thèmes classiques proposent plusieurs emplacements de barre latérale parmi lesquels vous pouvez choisir. Vous pouvez confirmer si c'est le cas en utilisant le personnaliseur WordPress et en y choisissant la position de barre latérale que vous préférez.

Tout d'abord, allez dans Apparence » Personnaliser. Nous utilisons le thème Hestia comme exemple.

Cliquez sur Personnaliser pour Hestia

Ici, dirigez-vous vers la page Paramètres d'apparence » Paramètres généraux dans la colonne de gauche

Comme vous pouvez le voir, Hestia propose trois modèles de barre latérale : un sans barre latérale, un avec une barre latérale gauche et un avec une barre latérale droite. Cela nous permet de changer le côté de la barre latérale en un clic. Ici, nous avons changé le côté de la barre latérale vers la gauche.

Ce paramètre contrôle la mise en page par défaut de la barre latérale pour l'ensemble de votre site Web. Cependant, Hestia vous permet également de personnaliser la position de la barre latérale du blog séparément, de sorte qu'elle n'affecte que vos articles de blog ou la page des articles.

Changer la position de la barre latérale dans Hestia

Une fois que vous avez apporté les modifications, vous pouvez ajouter les widgets disponibles à la barre latérale comme d'habitude. Pour plus d'informations, consultez notre guide sur comment ajouter et utiliser des widgets dans WordPress.

Ensuite, cliquez simplement sur « Publier ».

Bien que ce soit une fonctionnalité pratique, tout dépend du thème. Nous vous recommandons vivement de consulter la documentation de votre thème pour voir si vous pouvez changer la barre latérale à l'aide du personnaliseur.

Sinon, passez à la méthode suivante.

Méthode 2 : Comment changer le côté de la barre latérale avec du code (Thèmes classiques)

Si votre thème classique n'offre pas plusieurs barres latérales parmi lesquelles choisir, vous pouvez changer le côté de la barre latérale manuellement à l'aide de code CSS.

La plupart des thèmes classiques utilisent une propriété CSS appelée float pour positionner la barre latérale et la zone de contenu l'une à côté de l'autre. Notre objectif est de trouver le CSS pour les deux éléments et de simplement inverser leur direction de flottement.

Nous vous recommandons d'utiliser un site de staging et/ou un thème enfant pour expérimenter cette méthode. De cette façon, si une erreur se produit, elle n'affectera pas votre thème parent et/ou votre site Web en direct.

De plus, l'utilisation d'un thème enfant peut empêcher vos modifications d'être écrasées lors d'une mise à jour du thème.

Étape 1 : Utilisez l'outil d'inspection pour localiser la classe CSS de votre barre latérale

La première chose que vous ferez est d'ouvrir votre site Web. Ensuite, survolez la zone de votre barre latérale et utilisez l'outil d'inspection de votre navigateur.

Si vous utilisez Chrome, vous pouvez simplement faire un clic droit sur la zone et sélectionner « Inspecter ».

Pour plus d'informations, vous pouvez consulter notre guide sur les bases de l'élément d'inspection.

Inspection de la zone de la barre latérale WordPress

Maintenant, ce que vous voulez faire, c'est survoler les lignes HTML et CSS en haut à droite de la page avec votre curseur.

Lorsque vous voyez que toute la zone de votre barre latérale est mise en surbrillance, cliquez sur cette ligne. Pour nous, c'était <aside id="secondary" class="sidebar widget-area">.

Localisation de la ligne qui définit la zone de la barre latérale WordPress

L'onglet « Styles » en bas de la page contient toutes les propriétés CSS relatives à la barre latérale.

Dans notre cas, nous avons vu que la classe CSS pour la zone de la barre latérale est .sidebar. Il existe également des règles qui déterminent la position de la barre latérale, qui, dans ce cas, est le côté gauche.

Important : Les noms de classe comme .sidebar et .content-area utilisés dans ce tutoriel sont spécifiques à notre thème d'exemple. Vous devez utiliser les noms de classe exacts que vous avez découverts pour votre propre thème à l'étape précédente.

Nous le savons car lorsque nous décochons la règle margin-left, la barre latérale se déplace de l'autre côté.

Trouver la classe CSS pour la zone de la barre latérale de WordPress

Voici le code de la zone de la barre latérale de notre thème :

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Vous pouvez copier et coller ce code dans un éditeur de texte car nous en aurons besoin pour une étape ultérieure. Ou, vous pouvez simplement laisser cet onglet ouvert pour plus tard.

Maintenant que nous connaissons la classe CSS de la zone de la barre latérale, nous devons également trouver la classe de la zone de contenu principale qui affiche tous vos articles ou le contenu des articles.

Ce que vous pouvez faire, c'est survoler les lignes HTML et CSS pour voir quelle ligne met en surbrillance la zone de contenu principale. Ici, nous avons découvert que c'était la ligne <div id="primary" class="content-area">.

Trouver la classe CSS pour la zone de contenu principal

Comme précédemment, vous pouvez faire défiler vers l'onglet « Styles » pour voir quelle est la classe CSS de cette zone. Dans ce cas, c'était .content-area. Voici le code correspondant :

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Encore une fois, vous pouvez copier-coller le code CSS de votre zone de contenu dans un éditeur de texte ou laisser cet onglet ouvert pour l'étape suivante.

Maintenant que nous connaissons les classes CSS de votre barre latérale et de votre zone de contenu, nous pouvons modifier votre fichier style.css de thème pour changer le côté de la barre latérale.

Étape 2 : Personnaliser le fichier style.css de votre thème

Habituellement, vous devrez modifier votre style.css directement à l'aide du gestionnaire de fichiers de votre hébergeur web ou d'un client FTP. Cependant, le fichier style.css peut être assez long, et si vous faites une erreur, cela pourrait affecter la conception de votre site web entier et ruiner votre expérience utilisateur.

C'est pourquoi nous recommandons d'utiliser WPCode. Nous avons constaté que c'est le moyen le plus sûr et le plus simple d'ajouter du CSS personnalisé sans modifier directement les fichiers de votre thème.

Si vos modifications de code entraînent des erreurs involontaires, vous pouvez les désactiver en un seul clic et votre site web reviendra à la normale.

Pour en savoir plus, consultez notre avis sur WPCode.

Remarque : Pour ce tutoriel, vous pouvez utiliser la version gratuite de WPCode, mais la mise à niveau vers un plan premium vous donnera accès à des fonctionnalités plus avancées. Pour plus d'informations, consultez notre avis complet sur WPCode.

Tout d'abord, installez WPCode sur votre WordPress. Si vous avez besoin d'instructions étape par étape, lisez notre guide sur comment installer un plugin WordPress.

Une fois terminé, allez dans Snippets de code » + Ajouter un snippet. Sélectionnez ensuite « Ajouter votre code personnalisé (Nouveau snippet) » et cliquez sur le bouton « + Ajouter un snippet personnalisé ».

Ajouter un nouveau fragment de code personnalisé dans WPCode

Maintenant, tapez un titre pour votre code personnalisé. Il peut s'agir de quelque chose comme « Modifier la position de la barre latérale ».

Ensuite, changez le type de code en « Snippet CSS ».

Changer le côté de la barre latérale dans WPCode

Une fois terminé, vous devez insérer les extraits de code CSS de votre barre latérale et de vos zones de contenu dans la boîte d'aperçu du code.

Vous pouvez les séparer par un espace vide pour qu'il soit facile de les identifier, comme ceci :

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Maintenant, personnalisons ce code CSS. Ce que vous voulez faire, c'est modifier les propriétés CSS qui définissent les emplacements de la barre latérale et du contenu principal.

Dans notre cas, ces classes CSS ont les propriétés float, margin, padding et width, mais cela peut être différent selon votre thème.

Pour notre zone de barre latérale, nous avons changé left en right dans les propriétés float et margin. Cela signifie que la zone de la barre latérale sera dans la direction opposée à son emplacement d'origine.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Une fois cette partie terminée, changeons l'emplacement de la zone de contenu. Ce qui a fonctionné pour nous, c'est que nous avons changé float: left en float: right et margin-right en margin-left. Cela indique à WordPress de déplacer la zone de contenu vers la droite.

De plus, nous avons ajouté les propriétés position: relative et right: 100%. Celles-ci garantissent que notre zone de contenu ne s'éloigne pas trop sur le côté droit.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Encore une fois, ce qui fonctionne pour notre thème peut ne pas fonctionner avec le vôtre car chaque thème a des noms différents pour ses classes CSS et utilise des propriétés différentes. Nous vous recommandons de lire cette référence CSS complète pour déterminer ce qui convient le mieux à votre thème.

De plus, n'hésitez pas à jouer avec les pourcentages de la largeur et des marges dans le code pour ajuster le placement de la barre latérale.

Une fois que vous avez modifié votre extrait de code, faites défiler vers le bas jusqu'à la section Insertion. Assurez-vous que la méthode d'insertion est 'Insertion automatique'.

Quant à l'emplacement, sélectionnez 'Pied de page de tout le site' afin que votre code puisse remplacer le code existant dans votre fichier style.css.

Maintenant, vous pouvez cliquer sur le commutateur en haut à droite pour rendre le code 'Actif' et cliquer sur 'Enregistrer l'extrait'. Ensuite, prévisualisez votre site Web pour voir les résultats.

Choisir l'emplacement du pied de page sur tout le site dans WPCode

Si vous regardez les captures d'écran ci-dessus, vous pouvez voir que la barre latérale sur notre site Web de démonstration était sur le côté droit.

Après avoir modifié le code dans style.css, le thème a maintenant une barre latérale gauche :

Changement réussi du côté de la barre latérale à l'aide de code CSS dans WordPress

Maintenant que vous avez changé le côté de la barre latérale, vous pouvez commencer à modifier ou à ajouter plus de contenu à la barre latérale. Voici quelques idées pour vous aider :

💡Astuce de pro : Certains thèmes modernes utilisent un système CSS appelé Flexbox au lieu des floats.

Si vous utilisez l'outil Inspecter et trouvez une propriété comme display: flex; dans le conteneur qui contient votre contenu et votre barre latérale, vous pourrez peut-être simplement ajouter flex-direction: row-reverse; pour inverser le côté de la barre latérale.

Méthode 3 : Comment changer le côté de la barre latérale avec FSE (Thèmes de blocs)

Si vous utilisez un thème de blocs, vous ne verrez pas de section Widgets dans votre administration WordPress. Vous vous demandez peut-être comment changer le côté de la barre latérale si ce menu n'existe pas.

Heureusement, le processus est beaucoup plus simple que celui des thèmes classiques. C'est parce que les thèmes de blocs utilisent les blocs Gutenberg, et vous pouvez simplement glisser-déposer les éléments pour changer leur position en utilisant l'éditeur complet du site (FSE).

Deuxièmement, les thèmes de blocs auront généralement un modèle qui inclut une barre latérale. Il suffit de la modifier, et toutes les pages utilisant ce modèle seront affectées. Vous pouvez consulter la documentation de votre thème pour savoir comment il s'appelle afin d'y accéder.

Pour la démonstration, nous utiliserons le thème Twenty Twenty-Four, qui possède une page avec un modèle de barre latérale.

Tout d'abord, allez dans Apparence » Éditeur dans votre tableau de bord.

Sélection de l'Éditeur de site complet depuis le panneau d'administration WordPress

Ici, vous verrez quelques menus pour personnaliser votre thème de blocs.

Sélectionnez « Modèles ».

Choisir le menu Modèles dans l'Éditeur de site (FSE)

Maintenant, trouvez le modèle avec la barre latérale que vous souhaitez modifier.

Dans Twenty Twenty-Four, il s'agit de « Page avec barre latérale » et « Article avec barre latérale ». Selon votre thème, le nom du modèle ne mentionnera peut-être pas clairement qu'il a une barre latérale, donc encore une fois, vous devriez consulter la documentation de votre thème.

Allez-y et sélectionnez ce modèle de barre latérale.

Choix du modèle de page avec barre latérale dans l'éditeur complet du site

Généralement, les thèmes de blocs incluent la barre latérale et la zone de contenu principale dans un bloc de colonnes. Cela permet de garder tout propre, organisé et bien séparé les uns des autres.

Pour changer le côté de la barre latérale, il suffit de sélectionner la colonne qui compose la barre latérale et de la déplacer.

La façon la plus simple de le faire est de cliquer sur la fonctionnalité « Vue de liste » sur le côté gauche de la page.

Ensuite, cliquez sur le bloc « Colonnes » pour le développer et survolez son contenu jusqu'à ce que vous trouviez la colonne qui contient les éléments de la barre latérale.

Dans notre cas, cela a été facilité par le fait que le thème Twenty Twenty-Four possède une partie de modèle appelée « Sidebar », il a donc été facile de l'identifier. Cela dit, certains thèmes peuvent simplement inclure un groupe de blocs ordinaire, sans nom, qui constituent la barre latérale.

Vous saurez que vous avez sélectionné la bonne colonne lorsqu'un surlignage rectangulaire et une barre d'outils apparaîtront autour de l'ensemble du groupe de blocs de la barre latérale.

Ouvrir la fonctionnalité Vue de liste dans l'Éditeur de site (FSE)

Maintenant, dans la barre d'outils de la colonne latérale, vous verrez des flèches que vous pouvez utiliser pour modifier la position de la colonne.

Cliquez dessus, et selon la conception du bloc Colonnes, vous devrez peut-être jouer avec la position jusqu'à ce que vous trouviez le bon ajustement.

Se déplacer dans la barre latérale dans l'Éditeur de site (FSE)

Le développeur du thème a peut-être ajouté des colonnes vides pour créer un espace entre la zone de contenu principale et la zone de la barre latérale.

Si vous souhaitez la supprimer, trouvez simplement la bonne colonne vide en utilisant la vue Liste comme précédemment. Ensuite, dans la barre d'outils du bloc, cliquez sur le menu à trois points et sélectionnez « Supprimer ».

Supprimer une colonne vide dans l'Éditeur de site (FSE)

Ou si vous souhaitez créer plus d'espace entre la zone de la barre latérale et la zone de contenu, vous pouvez ouvrir l'onglet des paramètres du bloc et passer à la section « Styles ».

Ensuite, dans la section « Dimensions », vous pouvez faire glisser le curseur pour le remplissage, la marge, ou l'espacement des blocs.

Ajuster l'espacement des blocs des colonnes dans l'Éditeur de site (FSE)

Une fois terminé, cliquez sur « Enregistrer ».

Ensuite, vous pouvez prévisualiser toutes les pages sur mobile et sur ordinateur qui utilisent le modèle que vous venez de modifier pour voir à quoi cela ressemble.

Changement réussi du côté de la barre latérale avec l'Éditeur de site (FSE)

Et si vous avez modifié le modèle, mais que vos pages ou articles ne l'utilisent pas ?

Tout ce que vous avez à faire est d'ouvrir la page ou l'article dans l'éditeur de blocs. Ensuite, dans le panneau des paramètres de l'article, cliquez sur le lien dans le champ « Modèle » et sélectionnez « Échanger le modèle ».

Échanger un modèle de page dans l'éditeur de blocs

Maintenant, choisissez simplement le modèle qui utilise la barre latérale.

Après cela, vous pouvez mettre à jour la page ou l'article.

Choisir le modèle de barre latérale dans l'éditeur de blocs

Pour plus de conseils et d'astuces sur l'utilisation de l'éditeur complet ou de l'éditeur de blocs, consultez ces guides :

Méthode 4 : Comment changer le côté de la barre latérale avec CSS Hero (Tous les thèmes)

La méthode suivante utilise un plugin payant appelé CSS Hero, qui est le meilleur plugin WordPress pour l'édition visuelle de CSS. Ce plugin permet de personnaliser le CSS de votre thème sans toucher au code, ce qui le rend idéal pour les débutants.

Cette méthode fonctionne également avec tous les thèmes, donc si vous trouvez que les méthodes précédentes sont légèrement limitantes, vous pouvez utiliser celle-ci à la place. Cela dit, il n'existe pas de version gratuite du plugin, vous devez donc acheter un plan payant.

Pour plus d'informations sur le plugin et ses tarifs, consultez notre avis sur CSS Hero.

Tout d'abord, téléchargez le plugin sur votre ordinateur et installez-le sur votre site WordPress. Pour des instructions étape par étape, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Une fois installé, vous verrez un menu « CSS Hero » dans la barre d'outils. Cliquez dessus pour ouvrir l'éditeur CSS visuel.

Ouverture de CSS Hero dans WordPress

Gardez à l'esprit que, comme tous les thèmes WordPress ne fonctionnent pas de la même manière, la façon dont vous utilisez CSS Hero pour changer le côté de la barre latérale sera différente. Nous vous encourageons donc à jouer avec la plateforme pour voir ce qui vous convient le mieux.

Cela dit, nous allons vous montrer les paramètres que nous avons personnalisés pour changer le côté de la barre latérale de droite à gauche.

Tout d'abord, cliquez sur la zone de la barre latérale sur votre page. Vous saurez que vous avez cliqué sur la bonne zone lorsque tous les éléments de votre barre latérale seront sélectionnés en groupe et auront un surlignage rectangulaire autour d'eux.

Sélectionner la barre latérale dans CSS Hero

Sur le côté gauche de la page, vous verrez quelques menus pour personnaliser vos éléments.

D'après notre expérience, les paramètres qui peuvent changer le placement de la barre latérale sont Position, Mesures et Espacements.

Les paramètres Positions, Mesures et Espacements dans CSS Hero

La position détermine comment la barre latérale est placée par rapport aux autres éléments de la page. Ici, vous pouvez sélectionner « Absolu », ce qui vous donnera une certaine liberté quant à l'emplacement de la barre latérale.

À partir de là, vous pouvez modifier les pixels Haut, Droite, Bas et Gauche pour placer la barre latérale.

Changer les paramètres de position de la barre latérale avec CSS Hero

Vous pouvez voir que maintenant la barre latérale et la zone de contenu principal sont du même côté.

Pour résoudre ce problème, vous pouvez survoler le conteneur qui constitue la zone de contenu principal et cliquer dessus.

Sélectionner la zone de contenu principal dans CSS Hero

Maintenant, dans le panneau latéral gauche, ajustez simplement les paramètres de Position jusqu'à ce que vous trouviez le bon ajustement.

Ce que nous avons fait, c'est laisser la position sur « Relatif » et ajuster les pixels de droite.

Changer les paramètres de position de la zone de contenu principal dans CSS Hero

Techniquement, c'est tout ce que vous avez à faire. Mais si vous voulez ajuster la taille de la barre latérale, sélectionnez la zone de la barre latérale et allez dans les paramètres « Mesures ».

Ici, vous pouvez modifier la largeur et la hauteur de la barre latérale.

Changer les paramètres de Mesures dans CSS Hero

Si vous souhaitez modifier l'espacement entre la zone de la barre latérale et la zone de contenu principal, vous pouvez aller dans « Espacements ».

Vous verrez ici des curseurs pour ajuster le remplissage et la marge de l'élément.

Changer les paramètres d'Espacements dans CSS Hero

Encore une fois, nous vous encourageons à explorer les paramètres de ce plugin pour modifier le côté de la barre latérale selon vos préférences exactes.

Une fois que vous avez terminé, vous pouvez cliquer sur le bouton « Enregistrer » dans le coin inférieur droit de la page.

Sauvegarde des modifications dans CSS Hero

Alternative : Créer des barres latérales personnalisées avec un plugin de constructeur de pages WordPress

Jusqu'à présent, nous avons exploré des méthodes pour changer l'emplacement de la barre latérale pour l'ensemble de votre site Web. Mais que faire si vous ne voulez des barres latérales spécifiques que pour certaines pages ou certains types de publications ? Après tout, toutes les pages n'ont pas besoin du même contenu de barre latérale.

Par exemple, votre page d'accueil pourrait bénéficier d'une barre latérale plus générale avec des icônes de médias sociaux et un appel à l'action. Cependant, une page produit pourrait être mieux avec une barre latérale présentant des produits connexes ou des avis clients.

Dans ce cas, vous voudrez peut-être créer des barres latérales personnalisées pour votre thème WordPress. Avec des barres latérales personnalisées, vous pouvez :

  • Attribuer des barres latérales spécifiques à différentes pages ou types de publications. Cela vous permet d'adapter le contenu de votre barre latérale aux besoins spécifiques de chaque page.
  • Créez une expérience utilisateur plus dynamique et engageante. En proposant un contenu pertinent dans la barre latérale, vous pouvez maintenir l'intérêt des visiteurs et les inciter à explorer davantage votre site web.

C'est là qu'un plugin de constructeur de pages WordPress s'avère utile. Ces plugins offrent une fonctionnalité de glisser-déposer et des bibliothèques de modèles étendues, ce qui facilite la création de barres latérales personnalisées.

Nous vous recommandons d'utiliser SeedProd, qui est un plugin populaire et convivial de construction de pages et de thèmes. Avec SeedProd, vous pouvez facilement concevoir des pages et des thèmes personnalisés grâce à son interface conviviale.

Faites glisser les blocs que vous souhaitez utiliser vers la droite sur la barre latérale

Vous pouvez consulter ces articles pour plus d'informations :

Alternativement, vous pouvez utiliser le constructeur de pages Thrive Architect. Cet outil dispose également de nombreux kits de thèmes et de modèles de pages de destination, et offre même une fonctionnalité pour créer un widget de barre latérale flottante et fixe. Ceci est utile pour maintenir votre barre latérale fixe pendant que les utilisateurs font défiler la page.

Foire aux questions sur les barres latérales WordPress

Voici quelques questions que nos lecteurs posent fréquemment sur les barres latérales de leurs sites Web :

Comment changer la position de la barre latérale dans WordPress ?

La méthode que vous utilisez dépend de votre thème. Pour les thèmes classiques, vous pouvez changer la position dans le personnaliseur de thème si l'option existe, ou en ajoutant du CSS personnalisé. Pour les thèmes de blocs modernes, vous pouvez simplement faire glisser la colonne de la barre latérale de l'autre côté dans l'éditeur de site complet.

Comment personnaliser la barre latérale dans WordPress ?

Vous pouvez personnaliser le contenu de la barre latérale à l'aide de widgets ou de blocs. Si vous avez un thème classique, accédez à Apparence » Widgets pour ajouter ou supprimer des éléments.

Si vous utilisez un thème de blocs, allez dans Apparence » Éditeur et modifiez directement la partie de modèle de la barre latérale en ajoutant ou en supprimant n'importe quel bloc WordPress.

Comment ajouter une barre latérale gauche et droite dans WordPress ?

L'ajout d'une barre latérale gauche et droite nécessite un thème qui prend en charge une disposition à trois colonnes.

Si votre thème n'a pas cette option intégrée, le moyen le plus simple de créer une disposition personnalisée à trois colonnes est d'utiliser un plugin de constructeur de pages WordPress comme SeedProd ou Thrive Architect.

Comment changer la largeur de la barre latérale dans WordPress ?

Le moyen le plus fiable de changer la largeur de la barre latérale est d'utiliser du CSS personnalisé. Vous pouvez utiliser l'outil d'inspection de votre navigateur pour trouver le sélecteur CSS de votre barre latérale, puis ajouter une nouvelle règle de largeur, comme .sidebar { width: 30%; }.

Alternativement, un plugin comme CSS Hero vous permet d'ajuster la largeur visuellement sans code.

Nous espérons que ce tutoriel WordPress vous a aidé à apprendre comment changer le côté de la barre latérale dans WordPress. Vous voudrez peut-être aussi consulter notre article sur comment ajouter un menu plein écran réactif dans WordPress et notre liste des meilleures astuces de barre latérale WordPress pour obtenir des résultats maximums.

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.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

8 CommentsLeave a Reply

  1. Ce serait bien si cela fonctionnait. Cela l'a déplacé mais jette ma barre latérale tout en bas de la page.

    • Il semble que votre thème spécifique puisse avoir des conflits CSS ou similaires. Si vous contactez le support du thème, ils devraient pouvoir vous aider.

      Admin

  2. comment déplacer le champ de commentaire de droite à gauche dans wordpress
    premier commentaire puis la date de publication puis la catégorie

  3. C'est un bon article, le flottement de droite à gauche fait l'affaire ici. Je suggérerais également de créer un nouveau modèle pour cela, où l'un affiche la barre latérale à gauche et l'autre à droite. Cela donnera aux utilisateurs la possibilité de sélectionner la conception souhaitée pour la page.

  4. Aussi bon que ce tutoriel soit, j'ai remarqué qu'il est truffé de nombreuses erreurs. Par exemple, il n'y a aucun changement entre la règle @media et celle modifiée. Veuillez vérifier à nouveau tous les codes de l'article.
    Merci, en tout cas…

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.