Tôt ou tard chaque construction Elementor frappe un mur que les commandes du panneau ne peuvent pas escalader : un effet de survol que l'onglet Style n'offre pas, ou une animation d'image clé que vous avez trouvée dans un tutoriel Elementor conserve un CSS personnalisé par élément derrière une licence Pro. Le Css personnalisé extension dans Modules complémentaires principaux pour Elementor supprime ce mur : un éditeur CSS sur chaque section, conteneur, colonne et widget, dans l'éditeur gratuit.
Le voici dans l'éditeur Le CSS atterrit dans la boîte, et les cartes de témoignage commencent à glisser sur la toile la même seconde :
Ce que fait l'extension Custom CSS #
Une fois activé, chaque élément de l'éditeur Elementor obtient un Css personnalisé section sous son Avancé onglet. À l'intérieur se trouve un éditeur de code avec coloration syntaxique et numéros de ligne. Tout ce que vous écrivez là-bas s'applique à cet élément uniquement et le canevas le prévisualise en direct, vous regardez donc la règle prendre effet lorsque vous tapez.
L'éditeur prend en charge le sélecteur mot-clé, qui signifie le propre wrapper de l'élément Écrivez selector { } et la règle cible exactement cette section ou ce widget, pas de chasse pour les noms de classes générés par Elementor Les sélecteurs enfants fonctionnent aussi : selector .some-class atteint l'intérieur de l'élément.
Avant de commencer #
- WordPress avec Élémenteur installée et active La version gratuite suffit.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- CSS personnalisé est une extension gratuite, donc aucune licence Pro n'est requise.
- Certains CSS. Même les extraits collés fonctionnent, puisque le mot-clé du sélecteur supprime la partie dure.
Comment activer l'extension Custom CSS #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. CSS personnalisé se trouve dans le Widgets utilitaires groupe avec un badge Populaire, à côté de Custom JS et Duplicateur de messages/pages. Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Ouvrez l'éditeur Custom CSS sur un élément #
Sélectionnez n'importe quel élément dans l'éditeur Elementor, un conteneur entier dans la démo et ouvrez le Avancé onglet. Faites défiler jusqu'au Css personnalisé section avec le badge MA violet et développez-le Un éditeur de code vide apparaît, avec un indice en dessous : utilisez le mot-clé “selector” pour cibler l'élément wrapper.
Écrire ou coller le CSS #
La démo transforme une rangée statique de cartes de témoignage en un chapiteau mobile avec une animation d'image clé :
selector {
animation: testimonial 5s linear infinite alternate;
}
@keyframes testimonial {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(calc(-100% + 100vw));
}
}Collez-le et le canevas obéit immédiatement : les cartes commencent à glisser de droite à gauche, inversent à la fin et bouclent, exactement comme le montre le GIF en haut de cette page Il n'y a rien à sauvegarder ou à rafraîchir en premier selector le mot-clé épingle l'animation sur ce conteneur, donc rien d'autre sur la page n'est touché.
Le résultat sur la page #
Frapper Publier et le frontal propose la même animation : la rangée de témoignages dérive à travers la fenêtre, met en pause la direction à chaque extrémité et continue de faire du vélo toute seule.
Une habitude qui mérite d'être conservée : le CSS vit sur l'élément, pas dans une feuille de style globale Dupliquez la section sur une autre page et l'animation voyage avec.
Où le CSS personnalisé par élément aide #
- Animations d'images clés. Des chapiteaux, des boutons pulsés, des badges flottants, tout ce que le panneau contrôle ne peut exprimer.
- États de vol stationnaire.
selector:hoverrègles pour les ascenseurs, les ombres et les changements de couleur sur les cartes. - Corrections d'extraits. Cette seule réponse Stack Overflow qui résout votre bug de mise en page, appliquée exactement là où le bug vit.
- Ajustements réactifs. Une requête multimédia sur une section au lieu d'une modification de feuille de style à l'échelle du site.
- Expériences de conception. Testez une règle en direct sur la toile avant de la promouvoir sur le CSS de votre thème.
Tutoriel Vidéo #
Regardez l'ensemble du flux, depuis l'activation de l'extension jusqu'aux cartes animées exécutées sur la page publiée.
Foire aux questions #
Comment ajouter un CSS personnalisé dans Elementor sans Pro ?
Activez l'extension CSS personnalisée dans l'onglet Extensions des addons principaux, sélectionnez n'importe quel élément dans l'éditeur et ouvrez CSS personnalisé sous l'onglet Avancé Écrivez ou collez CSS dans l'éditeur de code et il s'applique à cet élément avec un aperçu en direct, aucune licence Pro n'est nécessaire.
Que fait le mot-clé du sélecteur ?
Il signifie l'emballage de l'élément que vous modifiez Une règle comme selector {color : red ; } cible exactement cette section ou ce widget sans connaître les noms de classe générés par Elementor, et selector.child atteint les éléments à l'intérieur de celui-ci.
Le CSS s'applique-t-il à l'ensemble du site ou à un seul élément ?
Juste l'élément qui le porte Chaque section, colonne, ou widget a sa propre boîte CSS personnalisée, donc les règles restent portées Dupliquer l'élément copie son CSS avec lui, ce qui maintient les effets portables entre les pages.
Puis-je exécuter des animations CSS avec cette extension ?
Oui. L'éditeur accepte les CSS complets, y compris les @keyframes, les requêtes multimédias et les pseudo-classes comme le survol. La démo sur cette page exécute une animation de marque d'image clé sur une ligne de témoignage, prévisualisée en direct dans l'éditeur avant de la publier.
L'extension Custom CSS est-elle gratuite ?
Oui. CSS personnalisé est livré avec la version gratuite de Master Addons for Elementor, dans le groupe Utilities Widgets de l'onglet Extensions La page de tarification couvre ce que les plans Pro ajoutent.
Envelopper #
L'extension Custom CSS donne à Elementor gratuit la trappe d'évacuation dont chaque projet réel a éventuellement besoin : un éditeur CSS étendu sur n'importe quel élément, avec un aperçu en direct et un mot-clé de sélection qui vous épargne l'archéologie du nom de classe. Associez-le au Extension d'arrière-plan de gradient animé pour le mouvement sans écrire d'images clés du tout, et parcourir l'ensemble complet de Widgets et extensions Master Addons pour le reste de la boîte à outils.
