Would you like to find the widget selectors Elementor ?
One of the features available on Elementor Pro
To add custom styling via custom CSS to a certain widget Elementor , you need to know the selector of the associated widget. We have collected the list of widget selectors Elementor to facilitate your work.
Each Elementor widget — and its elements — has a CSS selector that you can use to target the associated widget when you want to add custom CSS to achieve a certain style. You can find the selector by inspecting the widget you want to add the custom CSS to.
Since inspecting a widget can only be done on a live page, it will take a long time to inspect each one. That's what led us to create this list.
How to use a selector
Suppose you want to apply a different size between icon and text on a button. Since the default setting option does not allow you to set a different size between the button icon and the text, you can achieve this through the custom CSS. You can target icon or text to apply custom CSS.
First, select the selector of the element you want to target (for example, the button icon). In the element settings panel, go to the tab Advanced and open the block Custom CSS .
Enter selector [selector name] {} in the custom CSS field.
Here is the example.
Then add your contents CSS (declaration) inside curly brackets.
Here is the example.
Note: Every Elementor widget has a parent element ( wrapper ). Enter selector {} (without the selector name) means to target the wrapper.
Elementor Widget Selector List
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 Posts 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 Paging Number .page-numbers.current Load More Button .elementor-button-link Load More Button Icon .elementor-button-icon
AuthorBox
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
A kind request
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 .element-counter-number-prefix Number .element-counter-number Number Suffix .element-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 BackContainer .elementor-flip-box__back ContentContainer .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 Field Label Acceptance .elementor-field-type-acceptance Date Field Label .elementor-field-type-date Time Field Label .elementor-field-type-time Number Field Label .element-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 ContentContainer .elementor-icon-box-content Content Title .elementor-icon-box-title content description .elementor-icon-box-description
Icon list
List Icon .elementor-icon-list-icon ListText .elementor-icon-list-text
Image
Image img Caption .wp-caption-text
Image Box
Image .elementor-image-box-img TextContainer .elementor-image-box-content Content Title .elementor-image-box-title content description elementor-image-box-description
Image Carousel
ImageContainer .swiper-slide PictureItem .swiper-slide-image Pagination Container .swiper-pagination Dots Pagination .swiper-pagination-bullet Previous Icon .elementor-swiper-button-prev Next .elementor-swiper-button-next Image Caption .elementor-image-carousel-caption
MediaItem .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 filters .elementor-portfolio__filter
Reply Title .comment-reply-title How Form Area .comment-form How to 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 NextIcon .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 Posts 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 Paging Number .page-numbers.current Load More Button .elementor-button-link Load More Button Icon .elementor-button-icon
Posts 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 headers .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 .element-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 Image Reviewer .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 IconItem .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 Title tab .elementor-tab-title Content tab .elementor-tab-content
Testimonial
The Widget .elementor-testimonial-wrapper Testimonial Content .elementor-testimonial-content Testimonial Meta .elementor-testimonial-meta Avatar Testimonial .elementor-testimonial-image Testimonial Name and Job Title .elementor-testimonial-details testimonial name .elementor-testimonial-name Testimonial Job Title .elementor-testimonial-job
Carousel Testimonial
The Widget .elementor-widget-container Testimonial Slide Item .elementor-testimonial Testimonial Content .elementor-testimonial__content Testimonial Meta .elementor-testimonial__footer Avatar Testimonial .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
Although Elementor offers plenty of styling options for each widget, you can go beyond that with custom CSS. To apply a custom style to a widget (or its elements) via custom CSS, you need to know the associated widget's selector.
Other Elementor resources:
You can simply inspect a widget on a live page to find its selector. To save you time, we've created Elementor's list of widget selectors so you don't have to inspect every widget yourself.
Conclusion
So! We have just introduced you the list of Elementor widget selectors. If you have any concerns about how to get there let us know within Comments
However, you can also consult our resources WordPress blog creation Divi: the best WordPress theme of all time
But meanwhile, share this article on your different social networks
...
I like this : I love loading…
Similar items
