Masquer des éléments de pages web
Comment masquer ou cacher un élément d’un site web ? Le tutoriel pas à pas
Comment faire disparaître un élément de votre site WordPress ?
Dans cet article, nous vous montrerons comment faire pour masquer un élément d’un site web ou un WordPress. Cela peut être très utile si vous voulez cacher un bouton, une pastille, un badge ou tout autre élément sur votre page. Tout d’abord, vous devrez ouvrir le Customizer. Pour ce faire, allez dans votre tableau de bord WordPress et cliquez sur « Apparence » > « Personnaliser ».
Une fois que vous êtes dans le Customizer, naviguez jusqu’à la section » Additional CSS « . Dans cette section, vous serez en mesure d’ajouter votre propre code CSS.
Cette astuce fonctionne avec n’importe quel type de site WordPress.
Dans ce tutoriel, nous utiliserons le code CSS suivant pour masquer un élément d’un site web :
display : none ;
Ce code fera en sorte que l’élément avec une « classe » spécifique ne soit pas affichée sur votre page. Vous pouvez appliquer ce code à n’importe quel élément de votre site WordPress. Par exemple, si vous souhaitez masquer un bouton, vous pouvez simplement ajouter cibler « la classe » du bouton.
Comment trouver la classe de l’élément à masquer ?
Pour cibler la classe de l’élément à masquer, nous allons utiliser l’inspecteur de Google Chrome.
Tout d’abord, ouvrez la page de votre site où vous souhaitez masquer l’élément. Ensuite, faites un clic droit sur l’élément et cliquez sur « Inspecter ».
Dans la fenêtre de l’inspecteur, vous verrez le code HTML de l’élément. La classe est située dans l’attribut « class ». Dans notre exemple, nous allons cibler la classe « et_pb_button et_pb_button_2 ».
Comment masquer un élément d’un site web à partir du thème enfant
Masquer un élément d’un site web : Rendez vous maintenant dans l’éditeur de fichier du thème. Pour ce faire, allez dans votre tableau de bord WordPress et cliquez sur « Apparence » > « Éditeur ».
Sur le côté droit, vous verrez une liste de tous les fichiers du thème. Trouvez le fichier nommé « style.css » et cliquez dessus.
Une fois que vous êtes dans l’éditeur, ajoutez le code suivant à la fin du fichier:
.et_pb_button et_pb_button_2 {
display : none ;
}
Ce code va masquer l’élément avec la classe « et_pb_button et_pb_button_2 ». Vous pouvez remplacer cette classe par la classe de l’élément que vous souhaitez masquer.
N’oubliez pas d’enregistrer vos modifications.
Comment masquer un élément à partir du CSS additionnel de votre thème
Si vous souhaitez masquer un élément dans le CSS supplémentaire de votre thème, vous pouvez utiliser le même code que ci-dessus. La seule différence est que vous devrez ajouter le code dans la section « Additional CSS » du Customizer.
Vous pouvez même copier l’intégralité du sélecteur et le coller dans le code CSS additionnel, comme illustrer dans l’image ci-dessous.
Nous irons maintenant dans le menu » personnalisé » de votre thème, puis dans « CSS additionnel »
et ajoutez le code suivant après avoir collé le sélecteur précédemment copié.
{
display : none ;
}
Remarque
Masquer un élément d’un site web : Si cela masque tous les boutons de votre thème, vous pouvez affiner votre sélection en copiant et en testant sur un élément parent ou en effaçant au fur et à mesure les classes sélectionnées.
Voici un exemple qui masque uniquement le bouton « Ajouter au panier » sur la page du produit :
.et-product-button {
display : none
}
Vous pouvez également utiliser ce code pour masquer d’autres éléments sur votre site WordPress. Par exemple, vous pouvez l’utiliser pour masquer un widget spécifique de votre barre latérale ou de votre site Web.
Conseil
Comme toute manipulation sur votre site, nous vous conseillons d’abord d’effectuer une sauvegarde complète avant d’effectuer toute modification.
Vous pouvez utiliser un plugin comme UpdraftPlus, WordPress Backup Plugin pour créer une sauvegarde de votre site.
Conclusion
Voilà, c’est fait ! Vous savez maintenant comment faire disparaître un élément de votre site WordPress à l’aide de CSS. Si vous avez des questions, n’hésitez pas à nous en faire part en passant par le chat en bas à droite de votre écran ou en prenant rendez vous avec votre agence sur la page d’accueil. Et n’oubliez pas de partager.
