L’un des plus grands arguments de vente de l’utilisation de constructeurs de pages tels qu’Elementor est que vous avez accès à des éléments de page pré-construits, ou « widgets ». Les widgets d’Elementor comprennent de nombreuses options de personnalisation et de style. Cependant, la seule façon d’appliquer un style particulier est parfois d’utiliser des feuilles de style en cascade (CSS).
Le CSS vous donne un degré de contrôle incroyable sur chaque composant de votre site Web. Leur ajout à WordPress est simple si vous êtes familier avec ce langage. Elementor offre également plusieurs options pour ajouter des CSS personnalisés.
Dans cet article, nous parlerons de ce qu’est le CSS et de la façon dont vous pouvez ajouter un style personnalisé à Elementor. Enfin, nous discuterons des meilleures pratiques d’utilisation des CSS dans WordPress. C’est parti !
Qu’est-ce que le CSS ?
CSS est ce qu’on appelle un langage de « feuille de style ». Vous pouvez utiliser les feuilles de style CSS pour ajouter un style personnalisé aux documents HTML ou XML. En utilisant CSS, vous pouvez prendre une page HTML de base et la transformer en un design d’apparence moderne.
Considérez le CSS comme un langage qui décrit comment les éléments doivent apparaître sur un navigateur. Il fonctionne sur tous les navigateurs et c’est l’un des principaux langages de l’Internet.
Par exemple, voici le code CSS que vous utiliseriez pour attribuer une couleur d’arrière-plan au corps d’un document HTML :
body {
background-color: red;
}Vous pouvez utiliser CSS pour appliquer des styles à des composants, des classes et des ID spécifiques en HTML. Par exemple, l’extrait suivant appliquerait une couleur de texte et un alignement spécifiques à tous les H2 d’une page :
h2 {
color: black;
text-align: left;
}En général, lorsque vous chargez une page HTML, elle charge également une feuille de style séparée qui comprend tout le code CSS. Cela signifie que vous pouvez réutiliser les feuilles de style sur plusieurs pages.
Vous êtes libre d’appliquer le code CSS directement à n’importe quelle page HTML. Vous pouvez également l’utiliser « en ligne ». Il s’agit d’un terme faisant référence au code CSS qui s’applique à un seul élément HTML et qui réside dans ce fichier.
Voici un exemple de CSS en ligne pour un en-tête H2 spécifique :
<h2 style="color:black;text-align:center;">This is where the heading text goes</h1>Il est considéré comme une meilleure pratique d’ajouter le CSS dans une feuille de style séparée. Cependant, l’un des nombreux avantages de l’utilisation de WordPress et d’Elementor est que vous pouvez ajouter du CSS sans modifier les fichiers manuellement. Voyons de plus près comment cela fonctionne.
Options CSS personnalisées dans Elementor
Si vous êtes familier avec Elementor, vous savez que le constructeur utilise des sections, des colonnes et des widgets pour vous aider à créer des pages. Les sections contiennent une ou plusieurs colonnes, et chaque colonne peut avoir plusieurs modules :
L’une des meilleures parties de l’utilisation d’Elementor est que vous pouvez ajouter du code CSS séparé au niveau de la section, de la colonne et du widget. Lorsque vous survolez une section, vous pouvez sélectionner l’icône à six points pour ouvrir le menu Modifier la section sur le côté gauche de l’écran :Colonnes et modules dans Elementor
Si vous passez à l’onglet Avancé dans le menu Modifier la section , vous verrez une section une section CSS personnalisé . À l’intérieur, vous trouverez un champ qui vous permet d’ajouter du code pour cette section spécifique :
Lorsque vous modifiez les colonnes et les widgets, vous remarquerez que vous avez accès aux trois mêmes onglets dans leurs menus de réglages respectifs. Les sections, les colonnes et les widgets comprennent tous des réglages de mise en page, de style et des réglages avancés.
Pour ajouter un CSS personnalisé à une colonne, survolez-la et sélectionnez l’icône à deux colonnes dans le coin supérieur droit de l’élément. Ensuite, accédez à l’option Avancé et ouvrez la section CSS personnalisé :
Vous pouvez suivre le même processus pour ajouter un CSS personnalisé à un widget Elementor. Il suffit de sélectionner le widget que vous souhaitez personnaliser et de passer directement à l’onglet Avancé > CSS personnalisé :
L’ajout de CSS personnalisés à des éléments spécifiques dans le constructeur de pages Elementor est très simple. Cependant, gardez à l’esprit que le style ne s’appliquera qu’à ces éléments. Si vous souhaitez ajouter un CSS personnalisé qui affecte l’ensemble de votre site, vous devrez utiliser une approche différente.
Comment ajouter un CSS personnalisé à l’aide d’Elementor (5 méthodes)
Dans cette section, nous allons explorer d’autres façons d’ajouter du CSS personnalisé Elementor. Nous couvrirons les méthodes qui appliquent le CSS à l’ensemble de votre site web, à des pages spécifiques et aux widgets Elementor.
Méthode 1 : utiliser le widget HTML d’Elementor
Elementor vous permet d’ajouter du CSS personnalisé à n’importe lequel de ses widgets. Toutefois, dans certains cas, vous voudrez peut-être ajouter des éléments manuellement à l’aide de HTML et de CSS. Dans ces cas, vous devrez utiliser le widget HTML :
Le widget HTML peut analyser le HTML, le CSS et le JavaScript. Vous pouvez ajouter le code que vous voulez dans le champ Code HTML et s’il est valide, Elementor l’affichera comme un widget :
Le widget HTML prend en charge les CSS en ligne et autonomes. Tout code que vous ajoutez à l’aide du widget n’affectera que cet élément unique.
Méthode 2 : Utiliser le menu des réglages du site Elementor
Elementor comprend une collection de réglages globaux qui ressemblent aux options que vous pouvez trouver dans la personnalisation de WordPress. Pour accéder au menu Réglages du site Elementor, ouvrez l’éditeur et cliquez sur le menu hamburger dans le coin supérieur gauche de l’écran :
Sur la page suivante, sélectionnez l’option Réglages du site :
À l’intérieur, vous verrez une collection de réglages qui vous permettent de personnaliser le style de votre site. Toute modification apportée dans ce menu s’appliquera à l’ensemble de votre site, même si, techniquement, vous ne modifiez qu’une seule page.
Vous pouvez lire comment utiliser le menu Réglages du site pour personnaliser votre page sur le site officiel d’Elementor. Pour l’instant, la seule section qui nous intéresse est l’onglet CSS personnalisé . Ouvrez-le et vous verrez un champ qui ressemble aux options CSS personnalisées pour les sections, les widgets et les colonnes :
Tout CSS personnalisé que vous ajoutez ici affectera l’ensemble de votre site web. Si vous avez uniquement l’intention de personnaliser des éléments spécifiques, nous vous recommandons d’utiliser une approche plus ciblée (comme l’ajout de CSS directement dans un widget).
Méthode 3 : Utiliser la personnalisation de WordPress
La personnalisation de WordPress vous permet également d’ajouter des CSS personnalisés à l’échelle du site. Pour cela, allez dans Apparence > Personnaliser et sélectionnez l’option CSS supplémentaire dans le menu de gauche :
Toutefois, il convient de noter que les champs de code d’Elementor sont plus conviviaux que ceux disponibles dans la personnalisation. Si vous utilisez déjà Elementor pour la création de votre site, il n’y a aucune raison d’ajouter du CSS personnalisé via la personnalisation.
Méthode 4 : Mettre en file d’attente les fichiers CSS personnalisés
Si vous êtes à l’aise pour modifier les fichiers WordPress et accéder à votre site web via un client FTP (File Transfer Protocol), vous pouvez mettre en file d’attente une feuille de style CSS à charger avec Elementor. Cette approche nécessite que vous ajoutiez du code au fichier functions. php de WordPress.
Pour accéder au fichier functions.php , connectez-vous à votre site web via FTP et allez dans le dossier racine de WordPress. Ouvrez le dossier, trouvez le fichier functions.php , et modifiez-le.
Voici un exemple du code que vous voulez ajouter au fichier :
add_action( 'elementor/frontend/before_enqueue_scripts', function() {
wp_enqueue_script(
'custom-stylesheet',
get_stylesheet_uri()
);
} );Ce code utilise le hook before_enqueue_scripts pour charger une feuille de style appelée custom-stylesheet. Nous utilisons également la fonction get_stylesheet_urifunction pour pointer vers l’emplacement de la feuille de style dans le serveur.
Idéalement, vous ajouterez la feuille de style personnalisée dans le répertoire de votre thème enfant ou dans le dossier Themes lui-même. La feuille de style peut contenir tout code CSS Elementor que vous souhaitez. L’extrait que vous avez ajouté à functions.php garantit que le code ne se charge que lorsqu’Elementor est actif sur votre site web.
Méthode 5 : Utiliser un plugin CSS
Il existe plusieurs extensions qui vous permettent d’ajouter du CSS personnalisé à votre site web sans utiliser la personnalisation ou les constructeurs de pages. L’un de nos outils préférés pour ce travail s’appelle Simple Custom CSS and JS:
Avec Simple Custom CSS and JS, vous avez la possibilité d’ajouter du code directement dans les éléments d’en-tête et de pied de page de votre thème. Pour commencer, allez dans Custom CSS & JS > Ajouter du CSS personnalisé et cliquez sur Ajouter du code CSS.
Un éditeur CSS de base s’affiche sur la gauche. À droite, vous pouvez configurer le chargement du code CSS dans une feuille de style externe ou en interne. Vous pouvez également décider si le code doit être placé dans l’en-tête ou le pied de page :
Lorsque vous avez fini de modifier le code CSS, appuyez sur le bouton Publier . Vous devrez peut-être passer à une vue frontend pour voir le code en action.
Meilleures pratiques pour la création de CSS personnalisés avec Elementor
Lorsque vous avez affaire à un CSS personnalisé ou à l’ajout de tout type de code à votre site web, vous avez tout intérêt à garder à l’esprit les meilleures pratiques suivantes. Commençons par l’utilisation d’un thème enfant.
Utiliser un thème enfant WordPress
Si vous souhaitez modifier une partie du style de votre thème à l’aide de CSS, nous vous recommandons d’utiliser un thème enfant. Un thème « enfant » est un modèle qui hérite de tous les styles d’un thème désigné.
De cette façon, si vous apportez des modifications au thème original, elles n’auront pas d’impact sur les personnalisations que vous ajoutez au thème enfant. De plus, lorsque vous mettez à jour votre thème, celui-ci conservera ces modifications.
Utilisez un pré-processeur de code pour faciliter l’écriture
L’un des plus grands défis de l’ajout de code dans WordPress ou en utilisant Elementor est que vous n’avez pas accès à toutes les fonctionnalités que les éditeurs de code modernes offrent. Au lieu de vous débattre avec du code à l’aide d’éditeurs de base sur place, nous vous recommandons d’utiliser votre pré-processeur préféré. Ensuite, vous pouvez simplement copier et coller votre code dans WordPress.
Pensez à utiliser un site de staging
Lorsque vous envisagez d’apporter des modifications importantes à WordPress, nous vous recommandons d’utiliser un site de staging. Les sites de staging vous permettent de tester les changements de style et de fonctionnalité sans risquer de casser quoi que ce soit sur votre site réel.
Certains hébergeurs vous permettent d’accéder à la fonctionnalité de staging depuis votre panneau de configuration. Si vous utilisez Kinsta, vous pouvez sélectionner votre site web à l’aide du tableau de bord MyKinsta et basculer entre les environnements live et staging :
Si votre hébergeur ne propose pas de fonctionnalité de staging, vous pouvez utiliser un environnement de développement WordPress local tel que DevKinsta à des fins de test. Sinon, vous pouvez envisager de changer d’hébergeur.
Résumé
L’ajout de CSS personnalisés Elementor est plus facile que vous ne l’imaginez. Le constructeur de pages propose plusieurs méthodes pour ajouter du code aux sections, colonnes, widgets et pour l’ensemble de votre site web.
Pour récapituler, voici les cinq principales façons d’ajouter du CSS personnalisé à Elementor (ou à votre site web en général) :
- Utilisez le widget HTML d’Elementor.
- Utilisez le menu Réglages du site d’Elementor.
- Utilisez la personnalisation de WordPress.
- Mettez en file d’attente les fichiers CSS personnalisés.
- Utilisez une extension CSS.
Chez Kinsta, nos plans sont conçus pour vous aider à construire le site de vos rêves avec des constructeurs de pages comme Elementor. Consultez nos plans ou contactez le service commercial pour trouver le plan qui vous convient le mieux.
Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.
Laisser un commentaire