Souhaitez-vous trouver les sélecteurs de widgets Elementor ?
L’une des fonctionnalités disponibles sur Elementor Pro
Pour ajouter un style personnalisé via le CSS personnalisé à un certain widget Elementor , vous devez connaître le sélecteur du widget associé. Nous avons collecté la liste des sélecteurs de widgets Elementor pour faciliter votre travail.
Chaque widget Elementor — et ses éléments — a 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 trouver le sélecteur en inspectant le widget auquel vous souhaitez ajouter le CSS personnalisé.
Étant donné que l’inspection d’un widget ne peut se faire que sur une page en direct, il sera long d’inspecter chacun d’eux. C’est ce qui nous a amenés à 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 sur 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 le CSS personnalisé. Vous pouvez cibler l’icône ou le texte pour 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 de l’élément, accédez à l’onglet Avancé et ouvrez le bloc CSS personnalisé .
Saisissez selector [selector name] {} dans le champ CSS personnalisé.
Voici l’exemple.
Ensuite, ajoutez votre contenu CSS ( déclaration ) à l’intérieur des supports bouclés.
Voici l’exemple.
Remarque: Chaque widget Elementor a un élément parent ( wrapper ). Saisissez selector {} ( sans le nom du sélecteur ) signifie cibler le wrapper.
Liste des sélecteurs de widgets Elementor
Accordion
The Widget .elementor-accordion Accordion Title .elementor-accordion-title Accordion Description .elementor-tab-content Accordion Icon Open .elementor-accordion-icon Accordion Icon Closed .elementor-accordion-icon-closed
Alert
The Widget .elementor-alert Alert Title .elementor-alert-title Alert Description .elementor-alert-description Dismiss Icon .elementor-alert-dismiss
Animated Headline
The Widget .elementor-headline Static Text .elementor-headline-plain-text Dynamic Text .elementor-headline-dynamic-wrapper
Archive Description
Archive Text .elementor-heading-title
Archive Posts
The Widget .elementor-widget-container Post Item .elementor-grid-item Featured Image .elementor-post__thumbnail Badge on Cards Skin .elementor-post__badge Avatar on Cards Skin img.avatar Text Content Area .elementor-post__text Post Title .elementor-post__title Post Excerpt .elementor-post__excerpt Read More .elementor-post__read-more Post Meta Area .elementor-post__meta-data Post Date .elementor-post-date Post Author .elementor-post-author Post Time .elementor-post-time Post Comment .elementor-post-avatar Pagination .elementor-pagination Previous Label .page-numbers.prev Next Label .page-numbers.next Pagination Number .page-numbers Active Pagination Number .page-numbers.current Load More Button .elementor-button-link Load More Button Icon .elementor-button-icon
Author Box
The Widget .elementor-author-box Avatar .elementor-author-box__avatar Author Name .elementor-author-box__name Author Bio .elementor-author-box__bio Archive Button .elementor-author-box__button
Basic Gallery
The Widget .elementor-image-gallery Gallery Item .gallery-item Caption .wp-caption-text
Blockquote
The Widget .elementor-blockquote Blockquote Content .elementor-blockquote__content Blockquote Author .elementor-blockquote__author Tweet Icon .elementor-blockquote__tweet-button Tweet Label .elementor-blockquote__tweet-label
The Widget .elementor-button Button Text .elementor-button-text Button Icon .elementor-button-icon
Call to Action
The Widget .elementor-cta Header Image .elementor-cta__bg Ribbon .elementor-ribbon Ribbon Text .elementor-ribbon-inner Content Title .elementor-cta__title Content Description .elementor-cta__description Content Button .elementor-cta__button
Countdown
The Widget .elementor-countdown-wrapper Days .elementor-countdown-days Hours .elementor-countdown-hours Minutes .elementor-countdown-minutes Seconds .elementor-countdown-seconds Countdown Label .elementor-countdown-label
Counter
The Widget .elementor-counter Number Prefix .elementor-counter-number-prefix Number .elementor-counter-number Number Suffix .elementor-counter-number-suffix Title .elementor-counter-title
Divider
The Widget .elementor-divider Separator .elementor-divider-separator Text/Icon Element .elementor-divider__element
Flip Box
The Widget .elementor-flip-box Front Container .elementor-flip-box__front Back Container .elementor-flip-box__back Content Container .elementor-flip-box__layer__inner Content Title .elementor-flip-box__layer__title Content Description .elementor-flip-box__layer__description Content Button .elementor-flip-box__button
The Widget .elementor-form Step Container .e-form__indicators Steps Number .e-form__indicators__indicator Field Label .elementor-field-label Field Text .elementor-field-textual Text Field Label .elementor-field-type-text Text Area Field Label .elementor-field-type-textarea Email Field Label .elementor-field-type-email URL Field Label .elementor-field-type-url Tel Field Label .elementor-field-type-tel Radio Field Label .elementor-field-type-radio Select Field Label .elementor-field-type-select Checkbox Field Label .elementor-field-type-checkbox Acceptance Field Label .elementor-field-type-acceptance Date Field Label .elementor-field-type-date Time Field Label .elementor-field-type-time Number Field Label .elementor-field-type-number File Upload Field Label .elementor-field-type-upload Next Button e-form__buttons__wrapper__button-next Previous Button .e-form__buttons__wrapper__button-previous Submit Button .elementor-button
Gallery
Gallery Title (for Multiple Gallery) .elementor-gallery-title Gallery Item .elementor-gallery-item Description (on Overlay) .elementor-gallery-item__description
Heading
The Widget .elementor-heading-title
Icon
The Widget .elementor-icon
Icon Box
The Widget .elementor-icon-box-wrapper Icon .elementor-icon Content Container .elementor-icon-box-content Content Title .elementor-icon-box-title Content Description .elementor-icon-box-description
Icon List
List Icon .elementor-icon-list-icon List Text .elementor-icon-list-text
Image
Image img Caption .wp-caption-text
Image Box
Image .elementor-image-box-img Text Content Container .elementor-image-box-content Content Title .elementor-image-box-title Content Description elementor-image-box-description
Image Carousel
Image Container .swiper-slide Image Item .swiper-slide-image Pagination Container .swiper-pagination Pagination Dots .swiper-pagination-bullet Previous Icon .elementor-swiper-button-prev Next .elementor-swiper-button-next Image Caption .elementor-image-carousel-caption
Media Item .elementor-carousel-image Media Item Overlay .elementor-carousel-image-overlay Dot Pagination .swiper-pagination-fraction Previous Button .eicon-chevron-left Next Button .eicon-chevron-right Fraction Pagination .swiper-pagination-fraction Progress Bar Pagination .swiper-pagination-progressbar Progress Bar Pagination Fill .swiper-pagination-progressbar-fill
Mobile Menu Toggle .elementor-menu-toggle Mobile Menu Icon .eicon-menu-bar Regular Menu .elementor-nav-menu Dropdown .elementor-nav-menu–dropdown Menu Item with Sub-Menu .elementor-item.has-submenu Sub-Menu Item .elementor-sub-item
The Widget .elementor-payment-button PayPal Button Icon .elementor-button-icon PayPal Button Text .elementor-button-text
Portfolio
Portfolio Item .elementor-portfolio-item Portfolio Item on Overlay .elementor-portfolio-item__overlay Overlay Title .elementor-portfolio-item__title Portfolio Filter .elementor-portfolio__filter
Reply Title .comment-reply-title Comment Form Area .comment-form Comment Form .comment-form-comment Submit Button .form-submit
Post Info
The Widget .elementor-post-info Avatar .elementor-avatar Icon List .elementor-icon-list-icon Icon Text .elementor-icon-list-text
Post Navigation
The Widget .elementor-post-navigation Previous Icon .post-navigation__arrow-prev Previous Label .post-navigation__prev–label Previous Post Title .post-navigation__prev–title Next Icon .post-navigation__arrow-next Next Label .post-navigation__next–label Next Post Title .post-navigation__next–title
Posts
Post Item .elementor-post Featured Image .elementor-post__thumbnail Badge on Cards Skin .elementor-post__badge Avatar on Cards Skin img.avatar Text Content Area .elementor-post__text Post Title .elementor-post__title Post Excerpt .elementor-post__excerpt Read More .elementor-post__read-more Post Meta Area .elementor-post__meta-data Post Date .elementor-post-date Post Author .elementor-post-author Post Time .elementor-post-time Post Comment .elementor-post-avatar Pagination .elementor-pagination Previous Label .page-numbers.prev Next Label .page-numbers.next Pagination Number .page-numbers Active Pagination Number .page-numbers.current Load More Button .elementor-button-link Load More Button Icon .elementor-button-icon
Post Title
The Widget .elementor-heading-title
Price List
The Widget .elementor-price-list List Item .elementor-price-list-item List Item Image .elementor-price-list-image List Item Text .elementor-price-list-text List Item Header .elementor-price-list-header List Item Title .elementor-price-list-title List Item Separator .elementor-price-list-separator List Item Price .elementor-price-list-price List Item Description .elementor-price-list-description
Price Table
The Widget .elementor-price-table Table Header .elementor-price-table__header Table Header Title .elementor-price-table__heading Table Header Description .elementor-price-table__subheading Price .elementor-price-table__price Currency .elementor-price-table__currency Number After Price .elementor-price-table__after-price Pricing Period .elementor-price-table__period Feature List Area .elementor-price-table__features-list Feature List Item .elementor-price-table__feature-inner Table Footer .elementor-price-table__footer Table Footer Button .elementor-price-table__button Table Footer Text .elementor-price-table__additional_info Ribbon .elementor-price-table__ribbon Inner Ribbon .elementor-price-table__ribbon-inner
Progress Bar
Progress Bar .elementor-progress-bar Progress Background .elementor-progress-wrapper Progress Title .elementor-title Progress Inner Text .elementor-progress-text Progress Percentage .elementor-progress-percentage
Progress Tracker
The Widget .elementor-scrolling-tracker Progress .current-progress-percentage
Reviews
The Widget .elementor-swiper Review Item .swiper-slide Review Header .elementor-testimonial__header Reviewer Image .elementor-testimonial__image Reviewer Name .elementor-testimonial__name Reviewer Title .elementor-testimonial__title Testimonial Content .elementor-testimonial__content Testimonial Text .elementor-testimonial__text Dot Pagination .swiper-pagination-bullet Fraction Pagination .swiper-pagination-fraction Fraction Pagination Current .swiper-pagination-current Fraction Pagination Total .swiper-pagination-total Progress Bar Pagination .swiper-pagination-progressbar Progress Bar Pagination Fill .swiper-pagination-progressbar-fill Previous Button .eicon-chevron-left Next Button .eicon-chevron-right
Button Item .elementor-share-btn Button Icon .elementor-share-btn__icon Button Text .elementor-share-btn__text
Slides
The Widget .elementor-slides-wrapper Content Area .swiper-slide-contents Content Heading .elementor-slide-heading Content Description .elementor-slide-description Content Button .elementor-slide-button Dot Pagination .swiper-pagination-bullet Previous Button .eicon-chevron-left Next Button .eicon-chevron-right
Social Icons
The Widget .elementor-social-icons-wrapper Icon Item .elementor-social-icon
Star Rating
The Widget .elementor-star-rating__wrapper Rating Title .elementor-star-rating__title Star Icon Area .elementor-star-rating Full-filled Star Icon .elementor-star-full Half-filled Star Icon .elementor-star-5 Empty Star Icon .elementor-star-empty
Table of Contents
The Widget .elementor-widget-container ToC Header .elementor-toc__header ToC Header Title .elementor-toc__header-title Expand Button .elementor-toc__toggle-button–expand Collapse Button .elementor-toc__toggle-button–expand ToC Body .elementor-toc__body ToC List Item .elementor-toc__list-item ToC Top Level .elementor-toc__list-item-text.elementor-toc__top-level
Tabs
The Widget .elementor-tabs Tab Title .elementor-tab-title Tab Content .elementor-tab-content
Testimonial
The Widget .elementor-testimonial-wrapper Testimonial Content .elementor-testimonial-content Testimonial Meta .elementor-testimonial-meta Testimonial Avatar .elementor-testimonial-image Testimonial Name and Job Title .elementor-testimonial-details Testimonial Name .elementor-testimonial-name Testimonial Job Title .elementor-testimonial-job
Testimonial Carousel
The Widget .elementor-widget-container Testimonial Slide Item .elementor-testimonial Testimonial Content .elementor-testimonial__content Testimonial Meta .elementor-testimonial__footer Testimonial Avatar .elementor-testimonial__image Testimonial Name and Job Title .elementor-testimonial__cite Testimonial Name .elementor-testimonial__name Testimonial Job Title .elementor-testimonial__title Dot Pagination .swiper-pagination-bullet Fraction Pagination .swiper-pagination-fraction Fraction Pagination Current .swiper-pagination-current Fraction Pagination Total .swiper-pagination-total Progress Bar Pagination .swiper-pagination-progressbar Progress Bar Pagination Fill .swiper-pagination-progressbar-fill Previous Button .eicon-chevron-left Next Button .eicon-chevron-right
Text Editor
The Widget .elementor-text-editor
Toggle
The Widget .elementor-toggle Toggle Item .elementor-toggle-item Toggle Item Title .elementor-tab-title Toggle Item Content .elementor-tab-content Toggle Icon .elementor-toggle-icon Toggle Icon Closed .elementor-toggle-icon-closed Toggle Icon Open .elementor-toggle-icon-opened
Bien qu’Elementor offre de nombreuses options de style pour chaque widget, vous pouvez aller au-delà avec du CSS personnalisé. Pour appliquer un style personnalisé à un widget ( ou à ses éléments ) via CSS personnalisé, vous devez connaître le sélecteur du widget associé.
Autres ressources Elementor:
Vous pouvez simplement inspecter un widget sur une page en direct pour trouver son sélecteur. Pour vous faire gagner du temps, nous avons créé la liste des sélecteurs de widgets d’Elementor afin que vous n’ayez pas à inspecter vous-même chaque widget.
Conclusion
Voilà! Nous venons de vous présenter la liste des sélecteurs de widgets Elementor. Si vous avez des soucis sur comment y arriver faites-nous savoir dans les commentaires
Cependant, vous pourrez aussi consulter nos ressources création de blog WordPress Divi : le meilleur thème WordPress de tous les temps
Mais en attendant, partagez cet article sur vos différents réseaux sociaux
…
J’aime ça : J’aime chargement…
Articles similaires
