Una dintre caracteristicile disponibile pe Elementor Pro este capacitatea de a adăuga CSS personalizat ( Citiți: Elementor Free vs Pro). Caracteristica vă permite să mergeți mai departe, deoarece puteți aplica orice stil atunci când stilul dorit nu este disponibil în lista de opțiuni de setare. Pentru a adăuga stil personalizat prin CSS personalizat unui anumit widget Elementor (sau elemente ale widget-ului), trebuie să cunoașteți selectorul widget-ului asociat. Am colectat lista de selectoare de widget-uri Elementor pentru a vă ușura munca.
Fiecare widget Elementor - și elementele sale - are un selector CSS pe care îl puteți folosi pentru a viza widgetul asociat atunci când doriți să adăugați CSS personalizat pentru a obține un anumit stil. Puteți descoperi selectorul inspectând widgetul la care doriți să adăugați CSS-ul personalizat.
Deoarece inspectarea unui widget se poate face numai pe o pagină live, va dura mult timp să inspectați fiecare dintre ele. Asta ne-a determinat să creăm această listă.
Cum să utilizați un selector Să presupunem că doriți să aplicați o dimensiune diferită între pictogramă și textul unui buton. Deoarece opțiunea de setare implicită nu vă permite să setați o dimensiune diferită între pictograma butonului și text, o puteți obține prin CSS personalizat. Puteți viza pictograma sau textul pentru a aplica un CSS personalizat.
Mai întâi, selectați selectorul elementului pe care doriți să îl vizați (de exemplu, pictograma butonului). În panoul de setări Elementor, accesați fila Avansat și deschideți blocul CSS personalizat .
Tastați selector [selector name] {} în câmpul CSS personalizat. Iată exemplul.
Apoi, adăugați conținutul dvs. CSS (declarația) între paranteze. Iată exemplul.
Lista selectoarelor de widgeturi Elementor Acordeon Alerta Titlu animat Descrierea arhivei Arhivați postări Cutia autorului Galeria de bază Blockquote Buton Apel la acțiune Numărătoare inversă Tejghea Divizor Flip Box Formă Galerie Titlu Pictogramă Caseta cu pictograme Imagine Caseta de imagine Carusel de imagini Carusel media Meniul Nav Butonul PayPal Portofoliu Postați comentarii Postați informații Post Navigare Postări Titlul postării Listă de prețuri Tabelul de prețuri Bara de progres Monitor de progres Recenzii Butoane de distribuire Diapozitive Icoane sociale Evaluare cu stele Cuprins Filele Mărturie Carusel de mărturii Editor de text Comutare Acordeon Widgetul .elementor-acordeon Titlul acordeonului .elementor-acordeon-titlu Descrierea acordeonului .elementor-fila-conținut Pictograma Acordeon Deschis .elementor-acordeon-icoană Pictograma acordeon închisă .elementor-acordeon-icoană-închis
Alerta Widgetul .elementor-alerta Titlul alertei .elementor-alerta-titlu Descrierea alertei .elementor-alerta-descriere Pictograma de respingere .elementor-alertă-revocare
Titlu animat Widgetul .elementor-titlu Text static .elementor-titlu-text simplu Text dinamic .elementor-headline-dynamic-wrapper
Descrierea arhivei Text de arhivare .elementor-titlu-titlu
Arhivați postări Widgetul .elementor-widget-container Postați articolul .elementor-grilă-articol Imagine prezentată .elementor-post__thumbnail Insigna pe pielea cărților .elementor-post__insignă Avatar pe pielea cărților img.avatar Zona de conținut text .elementor-post__text Titlul postării .elementor-post__title Postare Extras .elementor-post__extras Citeste mai mult .elementor-post__citește-mai mult Post Meta Zona .elementor-post__meta-date Data postării .elementor-post-date Autor post .elementor-post-autor Ora de postare .elementor-post-time posteaza comentariu .elementor-post-avatar Paginare .elementor-paginare Eticheta anterioară .numerele-paginii.prev Eticheta următoare .numerele-paginii.urmatorul Numărul de paginare .numerele-paginii Număr de paginare activă .numerele-paginii.actuale Buton Încărcare mai mult .elementor-buton-link Pictograma Buton Încărcare mai mult .pictogramă-buton-elementor
Cutia autorului Widgetul .elementor-author-box Avatar .elementor-author-box__avatar Numele autorului .elementor-author-box__name Biografia autorului .elementor-author-box__bio Butonul Arhivare .elementor-author-box__button
Galeria de bază Widgetul .elementor-galerie-imagini Element din galerie .articol-galerie Legendă .wp-caption-text
Blockquote Widgetul .elementor-blockquote Blockquote Conținut .elementor-blockquote__conținut Blockquote Autor .elementor-blockquote__autor Pictograma Tweet .elementor-blockquote__tweet-button Tweet Etichetă .elementor-blockquote__tweet-label
Buton Widgetul .buton-elementor Buton Text .elementor-buton-text Pictogramă Buton .pictogramă-buton-elementor
Apel la acțiune Widgetul .elementor-cta Imagine de antet .elementor-cta__bg Panglică .elementor-panglică Text panglică .elementor-panglică-interior Titlul conținutului .elementor-cta__title Descrierea conținutului .elementor-cta__descriere Butonul de conținut .elementor-cta__button
Numărătoare inversă Widgetul .elementor-numaratoare inversa-wrapper Zile .elementor-zile-număratoare inversă Ore .elementor-ore-număratoare inversă Minute .elementor-număratoare inversă-minute secunde .elementor-numaratoare inversa-secunde Etichetă numărătoare inversă .etichetă-elementor-countdown-
Tejghea Widgetul .elementor-contor Prefix de număr .elementor-număr-număr-prefix Număr .număr-număr-elementor Sufixul numărului .elementor-număr-număr-sufix Titlu .elementor-contra-titlu
Divizor Widgetul .elementor-divizor Separator .elementor-divizor-separator Element text/pictogramă .elementor-divizor__element
Flip Box Widgetul .elementor-flip-box Container frontal .elementor-flip-box__front Container din spate .elementor-flip-box__back Container de conținut .elementor-flip-box__layer__inner Titlul conținutului .elementor-flip-box__layer__title Descrierea conținutului .elementor-flip-box__layer__description Butonul de conținut .buton-elementor-flip-box__
Formă Widgetul .elementor-formă Container pas .e-form__indicatori Numărul pașilor .e-form__indicatori__indicator Etichetă de câmp .elementor-câmp-etichetă Textul câmpului .elementor-câmp-textual Etichetă câmp text .elementor-câmp-tip-text Eticheta câmpului zonei de text .elementor-câmp-tip-textarea Eticheta câmpului de e-mail .elementor-field-type-email Eticheta câmpului URL .elementor-field-type-url Etichetă câmp Tel .elementor-câmp-tip-tel Radio Field Label .radio-tip-câmp-elementor Selectați Eticheta câmpului .elementor-câmp-tip-selectare Casetă de selectare Etichetă câmp .elementor-field-type-checkbox Eticheta câmpului de acceptare .elementor-câmp-tip-acceptare Eticheta câmpului de dată .elementor-câmp-tip-date Eticheta câmpului de timp .element-câmp-tip-timp Eticheta câmpului numeric .element-câmp-tip-număr Eticheta câmpului de încărcare fișier .elementor-field-type-upload Butonul Următorul e-form__buttons__wrapper__button-next Butonul precedent .e-form__buttons__wrapper__button-anterior Buton de trimitere .buton-elementor
Galerie Titlul galeriei (pentru mai multe galerii) .elementor-galerie-titlu Element din galerie .elementor-galerie-articol Descriere (pe suprapunere) .elementor-galerie-articol__descriere
Titlu Widgetul .elementor-titlu-titlu
Pictogramă Widgetul .elementor-icoană
Caseta cu pictograme Widgetul .elementor-icoană-cutie-wrapper Pictogramă .elementor-icoană Container de conținut .elementor-pictogramă-conținut-cutie Titlul conținutului .elementor-pictogramă-cutie-titlu Descrierea conținutului .descriere-cutie-icoană-elementor
Lista de pictograme Pictograma Listă .pictogramă-elementor-listă Listă text .elementor-icoană-listă-text
Imagine Imagine img Legendă .wp-caption-text
Caseta de imagine Imagine .elementor-image-box-img Container de conținut text .elementor-imagine-box-content Titlul conținutului .elementor-image-box-title Descrierea conținutului elementar-image-box-description
Carusel de imagini Container de imagini .glisor-tobogan Element de imagine .imagine-swiper-slide Container de paginare .swiper-paginare Puncte de paginare .swiper-pagination-glonț Pictograma anterioară .buton-swiper-elementor-prev Următorul .buton-swiper-elementor-next Legendă imagine .elementor-imagine-carusel-caption
Carusel media Element media .elementor-carusel-imagine Suprapunere element media .elementor-carusel-imagine-suprapunere Paginare puncte .swiper-pagination-fractie Butonul precedent .eicon-chevron-stânga Butonul Următorul .eicon-chevron-dreapta Paginarea fracțiunilor .swiper-pagination-fractie Paginarea barei de progres .swiper-pagination-progressbar Umplere paginare bară de progres .swiper-pagination-progressbar-umplere
Meniul Nav Comutare meniu mobil .elementor-menu-toggle Pictograma meniului mobil .eicon-menu-bar Meniu obișnuit .elementor-nav-meniu Scapă jos .elementor-nav-meniu–menu derulant Element de meniu cu submeniu .elementor-element.are-submeniu Element de submeniu .elementor-sub-element
Butonul PayPal Widgetul .buton-elementor-plata Pictograma butonului PayPal .pictogramă-buton-elementor Textul butonului PayPal .elementor-buton-text
Portofoliu Element din portofoliu .elementor-portfoliu-articol Element din portofoliu pe suprapunere .elementor-portfolio-item__overlay Titlu suprapus .elementor-portfolio-item__title Filtru de portofoliu .elementor-portfolio__filter
Postați comentarii Titlu răspuns .comentare-răspuns-titlu Zona formularului de comentarii .formular de comentariu Formular de comentarii .comment-form-coment Buton de trimitere .formular-trimitere
Postați informații Widgetul .elementor-post-info Avatar img Lista de pictograme .pictogramă-elementor-listă Textul pictogramei .elementor-icoană-listă-text
Post Navigare Widgetul .elementor-post-navigaţie Pictograma anterioară .post-navigation__arrow-prev Eticheta anterioară .post-navigation__prev–label Titlul postării anterioare .post-navigation__prev–title Următoarea pictogramă .post-navigation__arrow-next Eticheta următoare .post-navigation__next–etichetă Articolul următor Titlu .post-navigation__next–titlu
Postări Postați articolul .elementor-post Imagine prezentată .elementor-post__thumbnail Insigna pe pielea cărților .elementor-post__insignă Avatar pe pielea cărților img.avatar Zona de conținut text .elementor-post__text Titlul postării .elementor-post__title Postare Extras .elementor-post__extras Citeste mai mult .elementor-post__citește-mai mult Post Meta Zona .elementor-post__meta-date Data postării .elementor-post-date Autor post .elementor-post-autor Ora de postare .elementor-post-time posteaza comentariu .elementor-post-avatar Paginare .elementor-paginare Eticheta anterioară .numerele-paginii.prev Eticheta următoare .numerele-paginii.urmatorul Numărul de paginare .numerele-paginii Număr de paginare activă .numerele-paginii.actuale Buton Încărcare mai mult .elementor-buton-link Pictograma Buton Încărcare mai mult .pictogramă-buton-elementor
Titlul postării Widgetul .elementor-titlu-titlu
Listă de prețuri Widgetul .lista-preturi-elementor Element din listă .elementor-lista-preturi-articol Imaginea articolului din listă .elementor-lista-preturi-imagine Textul articolului din listă .elementor-lista-preturi-text Antetul articolului din listă .elementor-listă-prețuri-antet Titlul articolului din listă .elementor-lista-preturi-titlu Separator de articole din listă .elementor-lista-preturi-separator Prețul articolului de listă .elementor-pret-list-pret Descrierea articolului din listă .elementor-lista-preturi-descriere
Tabelul de prețuri Widgetul .tabel-pret-elementor Antet tabel .elementor-price-table__header Titlul antetului tabelului .elementor-price-table__heading Descriere antet tabel .elementor-tabel-prețuri__subtitlu Preț .elementor-price-table__price Valută .elementor-price-table__currency Număr după preț .tabel-preț-elementor__după-preț Perioada de stabilire a prețurilor .elementor-tabel-pret__perioada Zona Lista de caracteristici .elementor-tabel-prețuri__lista-funcții Element din lista de caracteristici .elementor-tabel-preț__funcție-internă Subsolul tabelului .elementor-tabel-preț__subsol Buton pentru subsolul tabelului .butonul-tabel__prețurilor-elementor Text subsol tabel .elementor-price-table__informații_suplimentare Panglică .elementor-tabel-prețuri__panglică Panglică interioară .elementor-tabel-preț__ribbon-interior
Bara de progres Bara de progres .elementor-progress-bar Contextul progresului .elementor-progress-wrapper Titlul progresului .elementor-titlu Progresul text interior .elementor-progres-text Procentul de progres .elementor-procent-progres
Monitor de progres Widgetul .elementor-scrolling-tracker Progres .procent-progres curent
Recenzii Widgetul .elementor-swiper Examinați articolul .glisor-tobogan Antet de revizuire .elementor-testimonial__header Imaginea recenzentului .elementor-mărturie__imagine Numele recenzentului .elementor-testimonial__name Titlul recenzentului .elementor-testimonial__title Conținutul mărturiei .elementor-mărturie__conținut Text de mărturie .elementor-testimonial__text Paginare puncte .swiper-pagination-glonț Paginarea fracțiunilor .swiper-pagination-fractie Curent de paginare fracție .swiper-paginare-curent Fracție Paginare Total .swiper-pagination-total Paginarea barei de progres .swiper-pagination-progressbar Umplere paginare bară de progres .swiper-pagination-progressbar-umplere Butonul precedent .eicon-chevron-stânga Butonul Următorul .eicon-chevron-dreapta
Butoane de distribuire Buton Articol .elementor-share-btn Pictogramă Buton .elementor-share-btn__icon Buton Text .elementor-share-btn__text
Diapozitive Widgetul .elementor-diapozitive-ambalaj Zona de continut .conţinut-swiper-slide Titlu de conținut .elementor-slide-heading Descrierea conținutului .elementor-diapozitiv-descriere Butonul de conținut .elementor-buton-glisare Paginare puncte .swiper-pagination-glonț Butonul precedent .eicon-chevron-stânga Butonul Următorul .eicon-chevron-dreapta
Icoane sociale Widgetul .elementor-social-icoane-wrapper Element de pictogramă .elementor-social-icoană
Evaluare cu stele Widgetul .elementor-star-rating__wrapper Titlul de evaluare .elementor-star-rating__title Zona pictogramei stea .elementor-star-rating Pictogramă stea plină .elementor-stea-plin Pictogramă stea pe jumătate .elementor-stea-5 Pictograma stea goală .elementor-stea-gol
Cuprins Widgetul .elementor-widget-container Antet ToC .elementor-toc__header Titlul antet ToC .elementor-toc__header-title Butonul de extindere .elementor-toc__toggle-button–extinde Butonul de restrângere .elementor-toc__toggle-button–extinde ToC Corp .elementor-toc__body Element din lista ToC .elementor-toc__list-item ToC Nivelul Superior .elementor-toc__list-item-text.elementor-toc__top-level
Filele Widgetul .elementor-file Titlul filei .elementor-fila-titlu Conținutul filei .elementor-fila-conținut
Mărturie Widgetul .elementor-mărturie-învelire Conținutul mărturiei .elementor-mărturie-conţinut Mărturie Meta .elementor-mărturie-meta Avatar de mărturie .elementor-mărturie-imagine Numele mărturiei și titlul postului .elementor-mărturie-detalii Nume de mărturie .elementor-mărturie-nume Titlul postului de mărturie .elementor-marturie-post
Carusel de mărturii Widgetul .elementor-widget-container Element de diapozitiv pentru mărturie .elementor-mărturie Conținutul mărturiei .elementor-mărturie__conținut Mărturie Meta .elementor-testimonial__footer Avatar de mărturie .elementor-mărturie__imagine Numele mărturiei și titlul postului .elementor-marturie__cite Nume de mărturie .elementor-testimonial__name Titlul postului de mărturie .elementor-testimonial__title Paginare puncte .swiper-pagination-glonț Paginarea fracțiunilor .swiper-pagination-fractie Curent de paginare fracție .swiper-paginare-curent Fracție Paginare Total .swiper-pagination-total Paginarea barei de progres .swiper-pagination-progressbar Umplere paginare bară de progres .swiper-pagination-progressbar-umplere Butonul precedent .eicon-chevron-stânga Butonul Următorul .eicon-chevron-dreapta
Editor de text Widgetul .elementor-text-editor
Comutare Widgetul .elementor-toggle Comutați elementul .elementor-toggle-element Comutați titlul articolului .elementor-fila-titlu Comutați conținutul articolului .elementor-fila-conținut Comutare pictogramă .elementor-toggle-pictogramă Comutare pictogramă închisă .elementor-toggle-pictogramă-închis Comutați pictograma Deschidere .elementor-toggle-pictogramă-deschisă
Concluzia În timp ce Elementor oferă o mulțime de opțiuni de stil pentru fiecare widget, puteți merge mai departe cu CSS personalizat. Pentru a aplica un stil personalizat unui widget (sau elementelor acestuia) prin CSS personalizat, trebuie să cunoașteți selectorul widget-ului asociat. Puteți inspecta pur și simplu un widget pe o pagină live pentru a afla selectorul acestuia. Pentru a vă economisi timp, am creat lista de selectoare de widget-uri Elementor, astfel încât să nu fie nevoie să inspectați singur fiecare widget.
