L'une des fonctionnalités disponibles sur Elementor Pro est la possibilité d'ajouter du CSS personnalisé ( lire : Elementor Free vs Pro). La fonctionnalité vous permet d'aller au-delà car vous pouvez appliquer n'importe quel style lorsque le style que vous souhaitez n'est pas disponible dans la liste des options de réglage. Pour ajouter un style personnalisé via CSS personnalisé à un certain widget Elementor (ou éléments de widget), vous devez connaître le sélecteur du widget associé. Nous avons rassemblé la liste des sélecteurs de widgets Elementor pour faciliter votre travail.
Chaque widget Elementor - et ses éléments - possède un sélecteur CSS que vous pouvez utiliser pour cibler le widget associé lorsque vous souhaitez ajouter du CSS personnalisé pour obtenir un certain style. Vous pouvez déterminer le sélecteur en inspectant le widget auquel vous souhaitez ajouter le CSS personnalisé.
Étant donné que l'inspection d'un widget ne peut être effectuée que sur une page en direct, il faudra du temps pour inspecter chacun d'entre eux. C'est ce qui nous a amené à créer cette liste.
Comment utiliser un sélecteur
Supposons que vous souhaitiez appliquer une taille différente entre l'icône et le texte d'un bouton. Étant donné que l'option de réglage par défaut ne vous permet pas de définir une taille différente entre l'icône du bouton et le texte, vous pouvez l'obtenir via un CSS personnalisé. Vous pouvez cibler l'icône ou le texte auquel appliquer un CSS personnalisé.
Tout d'abord, sélectionnez le sélecteur de l'élément que vous souhaitez cibler (par exemple, l'icône du bouton). Dans le panneau des paramètres Elementor, accédez à l'onglet Avancé et ouvrez le bloc CSS personnalisé .
Tapez selector [selector name] {} dans le champ CSS personnalisé. Voici l'exemple.
Ensuite, ajoutez votre contenu CSS (déclaration) à l'intérieur des accolades. Voici l'exemple.
Liste des sélecteurs de widget Elementor
Accordéon
Alerte
Titre animé
Description des archives
Archiver les messages
Boîte Auteur
Galerie de base
Citation en bloc
Bouton
Appel à l'action
Compte à rebours
Compteur
Diviseur
Boîte à rabat
Formulaire
Galerie
Titre
Icône
Boîte à icônes
Image
Boîte à images
Carrousel d'images
Carrousel des médias
Menu de navigation
Bouton PayPal
Portefeuille
Poster des commentaires
Informations sur la publication
Navigation dans les messages
Des postes
Titre de l'article
Liste de prix
Table de prix
Barre de progression
Suivi des progrès
Commentaires
Boutons de partage
Diapositives
Icônes sociales
Évaluation étoilée
Table des matières
Onglets
Témoignage
Carrousel de témoignages
Éditeur de texte
Basculer
Accordéon
Le gadget
.elementor-accordéon
Titre accordéon
.elementor-accordion-title
Description de l'accordéon
.elementor-tab-content
Icône accordéon ouverte
.elementor-accordion-icon
Icône accordéon fermée
.elementor-accordion-icon-fermé
Alerte
Le gadget
.elementor-alerte
Titre de l'alerte
.elementor-alerte-titre
Description de l'alerte
.elementor-alert-description
Ignorer l'icône
.elementor-alert-dismiss
Titre animé
Le gadget
.elementor-headline
Texte statique
.elementor-headline-plain-text
Texte dynamique
.elementor-headline-dynamic-wrapper
Description des archives
Texte d'archive
.elementor-heading-title
Archiver les messages
Le gadget
.elementor-widget-container
Publier un article
.elementor-grid-item
L'image sélectionnée
.elementor-post__thumbnail
Badge sur la peau des cartes
.elementor-post__badge
Avatar sur la peau des cartes
img.avatar
Zone de contenu textuel
.elementor-post__text
Titre de l'article
.elementor-post__title
Extrait du message
.elementor-post__extrait
Lire la suite
.elementor-post__read-more
Postez la zone méta
.elementor-post__meta-data
Date de publication
.elementor-post-date
Auteur du message
.elementor-post-auteur
Heure de publication
.elementor-post-temps
Poster un commentaire
.elementor-post-avatar
Pagination
.elementor-pagination
Étiquette précédente
.numéros-de-page.prev
Libellé suivant
.numéros-de-page.suivant
Numéro de pagination
.Numéros de page
Numéro de pagination actif
.numéros-de-page.current
Bouton Charger plus
.elementor-bouton-lien
Icône du bouton Charger plus
.elementor-bouton-icône
Boîte Auteur
Le gadget
.elementor-author-box
Avatar
.elementor-author-box__avatar
Nom de l'auteur
.elementor-author-box__name
Biographie de l'auteur
.elementor-author-box__bio
Bouton Archiver
.elementor-author-box__bouton
Galerie de base
Le gadget
.elementor-image-gallery
Objet de la galerie
.gallery-item
Légende
.wp-caption-text
Citation en bloc
Le gadget
.elementor-blockquote
Contenu de la citation en bloc
.elementor-blockquote__content
Auteur de la citation en bloc
.elementor-blockquote__auteur
Icône Tweeter
.elementor-blockquote__tweet-button
Libellé du tweet
.elementor-blockquote__tweet-label
Bouton
Le gadget
.elementor-bouton
Texte du bouton
.elementor-bouton-texte
Icône du bouton
.elementor-bouton-icône
Appel à l'action
Le gadget
.elementor-cta
Image d'en-tête
.elementor-cta__bg
Ruban
.elementor-ruban
Texte du ruban
.elementor-ruban-intérieur
Titre du contenu
.elementor-cta__title
Description du contenu
.elementor-cta__description
Bouton Contenu
.elementor-cta__bouton
Compte à rebours
Le gadget
.elementor-countdown-wrapper
Journées
.elementor-countdown-days
Heures
.elementor-countdown-hours
Minutes
.elementor-countdown-minutes
Secondes
.elementor-countdown-seconds
Étiquette de compte à rebours
.elementor-countdown-label
Compteur
Le gadget
.elementor-counter
Préfixe numérique
.elementor-counter-number-prefix
Numéro
.elementor-counter-number
Suffixe numérique
.elementor-counter-number-suffix
Titre
.elementor-contre-titre
Diviseur
Le gadget
.elementor-diviseur
Séparateur
.elementor-diviseur-séparateur
Élément texte/icône
.elementor-divider__element
Boîte à rabat
Le gadget
.elementor-flip-box
Conteneur avant
.elementor-flip-box__avant
Retour Conteneur
.elementor-flip-box__back
Conteneur de contenu
.elementor-flip-box__layer__inner
Titre du contenu
.elementor-flip-box__couche__titre
Description du contenu
.elementor-flip-box__layer__description
Bouton Contenu
.elementor-flip-box__bouton
Formulaire
Le gadget
.elementor-form
Conteneur d'étape
.e-form__indicateurs
Nombre d'étapes
.e-form__indicateurs__indicateur
Étiquette de champ
.elementor-field-label
Texte du champ
.elementor-field-textual
Libellé du champ de texte
.elementor-field-type-text
Libellé du champ de la zone de texte
.elementor-field-type-textarea
Libellé du champ d'e-mail
.elementor-field-type-email
Étiquette de champ d'URL
.elementor-field-type-url
Libellé du champ tél.
.elementor-field-type-tel
Étiquette de champ radio
.elementor-field-type-radio
Sélectionnez l'étiquette du champ
.elementor-field-type-select
Étiquette de champ de case à cocher
case à cocher .elementor-field-type
Libellé du champ d'acceptation
.elementor-field-type-acceptance
Libellé du champ de date
.elementor-field-type-date
Libellé du champ de temps
.elementor-field-type-time
Libellé du champ numérique
.elementor-field-type-number
Étiquette de champ de téléchargement de fichier
.elementor-field-type-upload
Bouton Suivant
e-form__buttons__wrapper__button-next
Bouton Précédent
.e-form__buttons__wrapper__button-previous
Bouton de soumission
.elementor-bouton
Galerie
Titre de la galerie (pour plusieurs galeries)
.elementor-gallery-title
Objet de la galerie
.elementor-gallery-item
Description (sur superposition)
.elementor-gallery-item__description
Titre
Le gadget
.elementor-heading-title
Icône
Le gadget
.elementor-icon
Boîte à icônes
Le gadget
.elementor-icon-box-wrapper
Icône
.elementor-icon
Conteneur de contenu
.elementor-icon-box-content
Titre du contenu
.elementor-icon-box-title
Description du contenu
.elementor-icon-box-description
Liste des icônes
Icône de la liste
.elementor-icon-list-icon
Texte de la liste
.elementor-icon-list-text
Image
Image
image
Légende
.wp-caption-text
Boîte à images
Image
.elementor-image-box-img
Conteneur de contenu textuel
.elementor-image-box-content
Titre du contenu
.elementor-image-box-title
Description du contenu
elementor-image-box-description
Carrousel d'images
Conteneur d'images
.swiper-slide
Élément d'image
.swiper-slide-image
Conteneur de pagination
.swiper-pagination
Points de pagination
.swiper-pagination-bulle
Icône précédente
.elementor-swiper-button-prev
Prochain
.elementor-swiper-button-next
Légende
.elementor-image-carrousel-légende
Carrousel des médias
Élément multimédia
.elementor-carousel-image
Superposition d'éléments multimédias
.elementor-carousel-image-superposition
Pagination des points
.swiper-pagination-fraction
Bouton Précédent
.eicon-chevron-gauche
Bouton Suivant
.eicon-chevron-droite
Pagination des fractions
.swiper-pagination-fraction
Pagination de la barre de progression
.swiper-pagination-barre de progression
Remplissage de la pagination de la barre de progression
.swiper-pagination-progressbar-fill
Menu de navigation
Mobile Permutateur de Menu
.elementor-menu-toggle
Icône de menu mobile
.eicon-menu-bar
Menu régulier
.elementor-nav-menu
Menu déroulant
.elementor-nav-menu–liste déroulante
Élément de menu avec sous-menu
.elementor-item.has-submenu
Élément de sous-menu
.elementor-sub-item
Bouton PayPal
Le gadget
.elementor-bouton-de-paiement
Icône du bouton PayPal
.elementor-bouton-icône
Texte du bouton PayPal
.elementor-bouton-texte
Portefeuille
Élément de portefeuille
.elementor-portfolio-item
Élément de portfolio sur superposition
.elementor-portfolio-item__overlay
Titre de superposition
.elementor-portfolio-item__title
Filtre de portefeuille
.elementor-portfolio__filter
Poster des commentaires
Titre de la réponse
.comment-reply-title
Zone de formulaire de commentaire
.comment-form
Formulaire de commentaire
.comment-form-comment
Bouton de soumission
.form-soumettre
Informations sur la publication
Le gadget
.elementor-post-info
Avatar
image
Liste des icônes
.elementor-icon-list-icon
Texte de l'icône
.elementor-icon-list-text
Navigation dans les messages
Le gadget
.elementor-post-navigation
Icône précédente
.post-navigation__arrow-prev
Étiquette précédente
.post-navigation__prev–étiquette
Titre du message précédent
.post-navigation__prev–title
Icône Suivant
.post-navigation__arrow-next
Libellé suivant
.post-navigation__next–étiquette
Titre du message suivant
.post-navigation__suivant–titre
Des postes
Publier un article
.elementor-post
L'image sélectionnée
.elementor-post__thumbnail
Badge sur la peau des cartes
.elementor-post__badge
Avatar sur la peau des cartes
img.avatar
Zone de contenu textuel
.elementor-post__text
Titre de l'article
.elementor-post__title
Extrait du message
.elementor-post__extrait
Lire la suite
.elementor-post__read-more
Postez la zone méta
.elementor-post__meta-data
Date de publication
.elementor-post-date
Auteur du message
.elementor-post-auteur
Heure de publication
.elementor-post-temps
Poster un commentaire
.elementor-post-avatar
Pagination
.elementor-pagination
Étiquette précédente
.numéros-de-page.prev
Libellé suivant
.numéros-de-page.suivant
Numéro de pagination
.Numéros de page
Numéro de pagination actif
.numéros-de-page.current
Bouton Charger plus
.elementor-bouton-lien
Icône du bouton Charger plus
.elementor-bouton-icône
Titre de l'article
Le gadget
.elementor-heading-title
Liste de prix
Le gadget
.elementor-liste de prix
Élément de liste
.elementor-price-list-item
Image de l'élément de liste
.elementor-price-list-image
Texte de l'élément de liste
.elementor-price-list-text
En-tête d'élément de liste
.elementor-price-list-header
Titre de l'élément de liste
.elementor-price-list-title
Séparateur d'éléments de liste
.elementor-price-list-separator
Prix de l'article de liste
.elementor-price-list-price
Description de l'élément de liste
.elementor-price-list-description
Table de prix
Le gadget
.elementor-price-table
En-tête de tableau
.elementor-price-table__header
Titre de l'en-tête du tableau
.elementor-price-table__heading
En-tête du tableau Description
.elementor-price-table__subheading
Prix
.elementor-price-table__price
Devise
.elementor-price-table__currency
Nombre après prix
.elementor-price-table__after-price
Période de tarification
.elementor-price-table__period
Zone de la liste des fonctionnalités
.elementor-price-table__features-list
Élément de la liste des fonctionnalités
.elementor-price-table__feature-inner
Pied de tableau
.elementor-price-table__footer
Bouton de pied de tableau
.elementor-price-table__bouton
Texte de pied de tableau
.elementor-price-table__additional_info
Ruban
.elementor-price-table__ribbon
Ruban intérieur
.elementor-price-table__ribbon-inner
Barre de progression
Barre de progression
.elementor-barre de progression
Contexte de progression
.elementor-progress-wrapper
Titre de progression
.elementor-titre
Texte intérieur de progression
.elementor-progress-text
Pourcentage de progression
.elementor-progress-pourcentage
Suivi des progrès
Le gadget
.elementor-scrolling-tracker
Progrès
.current-progress-percentage
Commentaires
Le gadget
.elementor-swiper
Article d'examen
.swiper-slide
En-tête de révision
.elementor-testimonial__header
Image de l'évaluateur
.elementor-testimonial__image
Nom de l'examinateur
.elementor-testimonial__name
Titre de l'examinateur
.elementor-testimonial__title
Contenu du témoignage
.elementor-testimonial__content
Texte du témoignage
.elementor-testimonial__text
Pagination des points
.swiper-pagination-bulle
Pagination des fractions
.swiper-pagination-fraction
Fraction Pagination Courant
.swiper-pagination-current
Fraction Pagination Total
.swiper-pagination-total
Pagination de la barre de progression
.swiper-pagination-barre de progression
Remplissage de la pagination de la barre de progression
Remplissage de la pagination de la barre de progression
.swiper-pagination-progressbar-fill
Bouton Précédent
.eicon-chevron-gauche
Bouton Suivant
.eicon-chevron-droite
Éditeur de texte
Le gadget
.elementor-text-editor
Basculer
Le gadget
.elementor-toggle
Basculer l'élément
.elementor-toggle-item
Basculer le titre de l'élément
.elementor-tab-title
Basculer le contenu de l'élément
.elementor-tab-content
Basculer l'icône
.elementor-toggle-icon
Basculer l'icône fermée
.elementor-toggle-icon-fermé
Basculer l'icône Ouvrir
.elementor-toggle-icon-opened
L'essentiel
Bien qu'Elementor offre de nombreuses options de style pour chaque widget, vous pouvez aller au-delà avec un CSS personnalisé. Pour appliquer un style personnalisé à un widget (ou à ses éléments) via un CSS personnalisé, vous devez connaître le sélecteur du widget associé. Vous pouvez simplement inspecter un widget sur une page en direct pour déterminer son sélecteur. Pour vous faire gagner du temps, nous avons créé la liste des sélecteurs de widgets Elementor afin que vous n'ayez pas à inspecter vous-même chaque widget.
