Nous allons voir dans ce tutoriel comment ajouter du CSS personnalisé aux éléments créés avec Elementor.
Si le constructeur de pages Elementor offre un très large éventail de paramètres pour styliser tous les éléments d’une page / article, certains parmi vous ayant des connaissances en CSS voudront peut-être affiner dans les moindres détails un ou des éléments.
Pour ce faire, Elementor a prévu la possibilité de rajouter vos propres règles CSS sur n’importe quels éléments, sections, colonnes ou widgets qui composent vos pages ou articles.
Comment ajouter du CSS à un élément avec Elementor ?
Selector est l’un des sélecteurs les plus utilisés lorsque vous souhaitez apporter des règles CSS à l’un de vos éléments.
Premier exemple, créons une section avec 3 colonnes.
La première colonne va faire 50% de large et contenir une liste de prix tandis que les deux autres vont faire 25% de large chacune et rester vide.
Bien maintenant, imaginons que nous voulons que cet élément (la liste de prix) grossisse au passage de la souris.
Si l’on peut agrandir directement certains éléments via leur onglet Style ce n’est pas possible de le faire avec le widget liste de prix.
Alors, comment y parvenir ?
C’est très simple, on va se rendre dans l’onglet Avancé puis sur Custom Css et on écrit la règle Css qui permet d’agrandir l’élément.
Ps: Il est important de nommer le sélecteur selector.
selector:hover {
transition: all .5s ease-in-out;
transform: scale(1.2);
cursor: pointer;
z-index: 1;
}
Important !
Si vous dupliquez l’élément il va reprendre les mêmes règles Css et ce même si la case Custom Css reste vide.
En revanche si vous recréez le même élément sans le dupliquer, les règles Css ne s’appliqueront plus sur cet élément et devront être ajoutées à nouveau si vous souhaitez y créer le même effet.
Autre exemple, faire grossir une rangée (ou section) au passage de la souris ce qui n’est pas possible sans rajouter du Css.
Eh bien, on reprend notre code CSS et on l’applique a la rangée.
Et si l’on appliquait la même règle Css, mais cette fois-ci a une colonne ?
Comment ajouter du CSS à un élément enfant avec Elementor ?
En d’autres termes, ajouter du code Css un élément se situant dans un autre élément.
La procédure est un petit peu plus compliquée, car le sélecteur selector ne va pas être suffisant pour sélectionner l’élément souhaité.
Nous allons donc devoir trouver la classe CSS de l’élément enfant et la rajouter au sélecteur pour pouvoir appliquer le CSS uniquement à l’élément enfant.
Nous allons prendre pour cet exemple le widget compte à rebours d’Elementor.
Disons que nous voulons changer uniquement la couleur des heures et laisser les couleurs par défaut pour les jours, minutes et secondes.
Avec les options de style de l’élément, ce n’est pas possible. On peut changer la couleur pour tous les chiffres, mais pas pour un en particulier.
On doit donc modifier la classe de l’élément enfant qui représente les heures sur le compte à rebours pour ne modifier que ce chiffre.
Comment trouver la classe d’un élément enfant ?
On va utiliser l’inspecteur de notre Navigateur.
Pour Firefox :
Cliquez sur l’icône en haut droite du navigateur représenté par trois barres parallèles. Puis cliquez sur Outils supplémentaires – outils de développement web.
Dans la fenêtre qui s’ouvre, vous trouverez l’onglet Inspecteur.
Pour Chrome :
Cliquez sur l’icône en haut droite du navigateur représenté par trois points les uns au-dessus des autres. Puis cliquez sur Plus d’outils– outils de développement.
Dans la fenêtre qui s’ouvre, vous trouverez l’onglet Elements.
Maintenant, nous allons cliquer sur le petit icône tout à droite et passer la souris sur l’élément que l’on veut changer pour trouver sa classe Css.
Il vous faudra très souvent chercher et essayer plusieurs classes Css avant de trouver la bonne.
Ici, nous avons deux classes qui s’affichent lorsqu’on passe la souris sur l’élément.
.elementor-countdown-digits et .elementor-countdown-hours.
Au vu des noms donnés à ces classes ils fort probable que la classe qui nous concerne soit .elementor-countdown-hours .
La classe Css en poche, nous allons l’appliquer à notre élément enfant de la manière suivante :
- On clique sur l’élément parent.
- On clique sur l’onglet Avancé.
- On clique sur Custom CSS.
- On écrit notre code CSS.
- En premier, on place le sélecteur (selector) puis la classe css et enfin les propriétés que l’on veut donner à notre classe ce qui donne :
selector .elementor-countdown-hours{
color:green;
}
- Selector : représente l’élément parent (le compte a rebours).
- .elementor-countdown-hours : représente l’élément enfant (le chiffre des heures).
Comme vous pouvez le voir, on a trouvé la bonne classe, la modification s’est réalisée correctement et seuls les chiffres des heures ont changé de couleur.
Créer, nommer et intégrer notre propre classe CSS avec Elementor.
Il peut être utile de créer notre propre classe CSS pour la retrouver et l’utiliser plus facilement sur d’autres éléments dans le futur.
Pour ce faire, nous cliquons sur l’élément auquel on veut donner une classe CSS, puis sur l’onglet Avancé on écrit dans le champ Classes CSS le nom de notre classe sans le point.
Exemple :
- growmouse correct.
- .growmouse incorrect
Reprenons le code permettant de faire grossir un élément au passage de la souris et plaçons-le dans le champ custom CSS.
Cette fois-ci, nous faisons précéder notre classe du point habituel et ne mettons pas le sélecteur selector.
- .growmouse correct
- growmouse incorrect
Voyons maintenant ce qui se passe si l’on ajoute cette classe à un autre élément.
réons un témoignage avec le widget fournit par Elementor et donnons-lui la classe .growmouse que l’on vient de créer pour le compte à rebours.
Vous venez de créer votre propre classe CSS !
Cette classe CSS n’est valable que sur les éléments situés sur cette page. Si vous voulez créer le même effet sur un élément d’une autre page, vous devrez réécrire la classe et ses propriétés.
Bien sûr, vous pouvez faire la même chose pour les ID, le principe est le même pensez juste à changer le . par le # dans le champ custom CSS.
