Table des matières
Il y a une beauté indéniable dans le code. Chaque ligne, chaque caractère a sa raison d’être. Quand on regarde le code, on voit plus qu’une simple série de commandes. On voit une aventure. Aujourd’hui, nous allons nous plonger dans une aventure spécifique : celle du code CSS personnalisé dans Elementor Pro.
A quoi sert le CSS personnalisé ?
Vous vous demandez peut-être pourquoi on s’intéresse au code CSS personnalisé. Eh bien, la réponse est simple. Le CSS personnalisé, c’est la liberté – la possibilité de prendre le contrôle, de personnaliser chaque pixel de votre site web, de le faire vraiment vôtre. Avec Elementor Pro, cette liberté est à portée de main.
D’ordinaire, sur WordPress, tous les thèmes s’éditent avec l’outil de personnalisation, le customizer. Celui-ci permet d’ajouter du code CSS à la main. Sauf qu’il le fait à l’échelle de tout le site.
Au contraire, le code personnalisé sur Elementor Pro ne va s’appliquer que sur la page sur laquelle on l’a ajouté, évitant ainsi d’alourdir le chargement de tout le site. Car en imaginant qu’on ait besoin de 10 lignes de CSS spécifique sur chaque page d’un site de 100 pages, on se retrouverait avec 1000 lignes de code à charger sur 100 pages, chacune n’ayant besoin que d’1% de ce code : lourd, inutile et pas malin.
Comment ajouter du CSS personnalisé sous Elementor Pro
Alors, comment fonctionne concrètement le CSS personnalisé dans Elementor Pro ? La réponse est plus simple que vous ne le pensez peut-être.
Tout d’abord, ouvrez une page avec l’éditeur visuel d’Elementor, sélectionnez l’élément que vous souhaitez personnaliser : une section, une colonne, un widget titre, texte ou image, etc.
Ensuite, dans le panneau de gauche, cliquez sur l’onglet « Avancé ». Vous verrez alors une section intitulée « CSS personnalisé« . C’est là que la magie opère.
Vous pouvez entrer votre code CSS directement dans cette zone.
Attention, il y a une petite subtilité.
Si vous voulez juste ajouter une classe CSS qui n’existait pas avant, vous n’avez qu’à la déclarer de la manière habituelle, par exemple :
.typo { font-size: 2rem}
Mais si vous voulez ajouter ou modifier des paramètres sur un type d’élément ou un sélecteur existant, alors vous devez ajouter le terme « selector » avant l’instruction, comme ceci :
selector p { font-size: 2rem}
Et la beauté de tout cela ? Vous voyez les modifications en temps réel. Pas besoin d’actualiser la page ou de jongler avec plusieurs fenêtres. Vous tapez, et vous voyez le résultat. C’est aussi simple que ça.
Le CSS personnalisé ouvre un monde de possibilités. Vous voulez changer la couleur de fond d’un élément ? Aucun problème. Vous voulez ajuster la marge interne (padding) ou externe (margin) d’un élément, sa bordure, sa typo ? Fastoche. Vous voulez créer une animation complexe ? Vous pouvez le faire. Avec le CSS personnalisé dans Elementor Pro, la seul limite est votre imagination.
Allez-y, lancez-vous. Plongez dans le code. Faites-le vôtre. Créez quelque chose de beau. Avec Elementor Pro et le CSS personnalisé, tout est possible.
PS : de la même manière, Elementor Pro permet d’ajouter des attributs HTML personnalisés.
