Vill du hitta widgetväljarna Elementor ?
En av funktionerna som finns på Elementor Pro
För att lägga till anpassad stil via anpassad CSS till en viss widget Elementor , måste du känna till väljaren för den associerade widgeten. Vi har samlat listan med widgetväljare Elementor för att göra ditt arbete enklare.
Varje Elementor-widget – och dess element – har en CSS-väljare som du kan använda för att rikta in den associerade widgeten när du vill lägga till anpassad CSS för att uppnå en viss stil. Du kan hitta väljaren genom att inspektera widgeten du vill lägga till den anpassade CSS till.
Eftersom att inspektera en widget bara kan göras på en live-sida, kommer det att ta lång tid att inspektera var och en. Det var det som fick oss att skapa den här listan.
Hur man använder en väljare
Anta att du vill använda en annan storlek mellan ikon och text på en knapp. Eftersom standardinställningsalternativet inte tillåter dig att ställa in en annan storlek mellan knappikonen och texten, kan du uppnå detta genom den anpassade CSS. Du kan rikta in dig på ikon eller text för att tillämpa anpassad CSS.
Välj först väljaren för det element du vill rikta in dig på (till exempel knappikonen). Gå till fliken i elementinställningspanelen advanced och öppna blocket Anpassad CSS .
Stiga på selector [selector name] {} i det anpassade CSS-fältet.
Här är exemplet.
Lägg sedan till din innehåll CSS (deklaration) inom krulliga parenteser.
Här är exemplet.
Anm: Varje Elementor-widget har ett överordnat element (omslag). Stiga på selector {} (utan väljarnamnet) betyder att rikta in sig på omslaget.
Elementor Widget Selector List
Dragspel
Widgeten .elementor-dragspel Dragspelens titel .elementor-accordion-title Dragspel Beskrivning .elementor-tab-innehåll Dragspel Ikon Öppna .elementor-dragspel-ikon Dragspel ikon stängd .elementor-dragspel-ikon-stängd
Varna
Widgeten .elementor-alert Varningstitel .elementor-alert-title Varningsbeskrivning .elementor-alert-description Avvisa ikon .elementor-alert-dismiss
Animerad rubrik
Widgeten .elementor-headline Statisk text .elementor-headline-plain-text Dynamisk text .elementor-headline-dynamic-wrapper
Arkivbeskrivning
Arkivtext .elementor-heading-title
Arkivera inlägg
Widgeten .elementor-widget-container Postföremål .elementor-grid-item Utvald bild .elementor-post__thumbnail Märke på Cards Skin .elementor-post__badge Avatar på Cards Skin img.avatar Textinnehållsområde .elementor-post__text Post titel .elementor-post__title post Utdrag .elementor-post__excerpt Läs mer .elementor-post__läs-mer Post Meta Area .elementor-post__meta-data post Datum .elementor-post-date Postförfattare .elementor-post-författare Inläggstid .elementor-post-tid Post kommentar .elementor-post-avatar Paginering .elementor-paginering Tidigare etikett .page-numbers.prev nästa etikett .page-numbers.next Pagineringsnummer .sidnummer Aktivt pagineringsnummer .sidnummer.aktuell Ladda mer-knappen .elementor-knapp-länk Ladda mer knappikon .elementor-knappikon
Författare Box
Widgeten .elementor-author-box Avatar .elementor-author-box__avatar Författare Namn .elementor-author-box__name Författare Bio .elementor-author-box__bio Arkivknapp .elementor-author-box__button
Grundläggande galleri
Widgeten .elementor-image-gallery Galleriobjekt .galleri-objekt Bildtext .wp-caption-text
blockquote
Widgeten .elementor-blockquote Blockcitat innehåll .elementor-blockquote__content Blockquote författare .elementor-blockquote__author Tweet-ikon .elementor-blockquote__tweet-button Tweet Label .elementor-blockquote__tweet-label
Widgeten .elementor-knapp Button Text .elementor-knapp-text Knappikon .elementor-knappikon
Ring till handling
Widgeten .elementor-cta Rubrikbild .elementor-cta__bg band .elementor-band Bandtext .elementor-ribbon-inner Innehållstitel .elementor-cta__title Innehållsbeskrivning .elementor-cta__description Innehållsknapp .elementor-cta__button
Nedräkning
Widgeten .elementor-nedräkning-omslag Dagar .elementor-nedräkningsdagar timmar .elementor-nedräkning-timmar minuter .elementor-nedräkningsminuter Sekunder .elementor-nedräkning-sekunder Nedräkningsetikett .elementor-nedräkningsetikett
Motverka
Widgeten .elementor-räknare Nummerprefix .element-räknare-nummer-prefix Antal .element-räknare-nummer Nummersuffix .element-räknare-nummer-suffix Titel .elementor-counter-title
divider
Widgeten .elementor-avdelare Separator .elementor-divider-separator Text/ikonelement .elementor-divider__element
Vändbox
Widgeten .elementor-flip-box Främre behållare .elementor-flip-box__front Bakre behållare .elementor-flip-box__back Innehållsbehållare .elementor-flip-box__layer__inner Innehållstitel .elementor-flip-box__layer__title Innehållsbeskrivning .elementor-flip-box__layer__description Innehållsknapp .elementor-flip-box__button
Widgeten .elementor-form Stegbehållare .e-form__indikatorer Steg nummer .e-form__indikatorer__indikator Fältetikett .elementor-field-label Fälttext .elementor-field-textual Textfältetikett .elementor-field-type-text Textområde Fältetikett .elementor-field-type-textarea E-postfältetikett .elementor-field-type-e-post URL-fältetikett .elementor-field-type-url Tel Fältetikett .elementor-field-type-tel Radiofältetikett .elementor-field-type-radio Välj Fältetikett .elementor-field-type-select Kryssruta Fältetikett .elementor-field-type-kryssrutan Fältetikettsacceptans .elementor-field-type-acceptance Datumfältetikett .elementor-field-type-date Tidsfältetikett .elementor-field-type-time Nummerfältetikett .element-fält-typ-nummer Filuppladdningsfältetikett .elementor-field-type-upload Nästa knapp e-form__buttons__wrapper__button-next Föregående knapp .e-form__buttons__wrapper__button-föregående Sänd knäppas .elementor-knapp
Galleri
Gallerititel (för flera gallerier) .elementor-gallery-title Galleriobjekt .elementor-gallery-item Beskrivning (på överlägg) .elementor-gallery-item__description
Rubrik
Widgeten .elementor-heading-title
icon
icon Box
Widgeten .elementor-icon-box-omslag icon .elementor-ikon Innehållsbehållare .elementor-ikon-box-innehåll Innehållstitel .elementor-icon-box-title Innehållsbeskrivning .elementor-icon-box-description
Ikonlista
Listikon .elementor-icon-list-icon Listtext .elementor-icon-list-text
Bild
Bild img Bildtext .wp-caption-text
Bildlåda
Bild .elementor-image-box-img TextContainer .elementor-image-box-content Innehållstitel .elementor-image-box-title Innehållsbeskrivning elementor-bild-box-beskrivning
Bildkarusell
ImageContainer .swiper-slide PictureItem .swiper-slide-image Pagineringsbehållare .swiper-paginering Prickar paginering .swiper-pagetion-bullet Föregående ikon .elementor-swiper-button-prev Nästa .elementor-swiper-knapp-nästa Bild Bildtext .elementor-image-carousel-caption
MediaItem .elementor-carousel-image Medieobjektöverlägg .elementor-carousel-image-overlay Punkt paginering .swiper-pagineringsfraktion Föregående knapp .eicon-chevron-vänster Nästa knapp .eicon-chevron-right Bråkpaginering .swiper-pagineringsfraktion Förloppsindikator paginering .swiper-pagetion-progressbar Förloppsindikator Pagineringsfyllning .swiper-pagetion-progressbar-fill
Växla mobilmeny .elementor-menu-toggle Mobil menyikon .eicon-menyfält Vanlig meny .elementor-nav-meny Dropdown .elementor-nav-meny–rullgardinsmeny Menyalternativ med undermeny .elementor-item.has-undermeny Undermenyalternativ .elementor-underobjekt
Widgeten .elementor-betalningsknapp PayPal-knappikon .elementor-knappikon PayPal-knapptext .elementor-knapp-text
Portfölj
Portfolio Produktfamilj .elementor-portfolio-item Portföljobjekt på överlägg .elementor-portfolio-item__överlägg Överläggstitel .elementor-portfolio-item__title Portföljfilter .elementor-portfolio__filter
Svarstitel .comment-reply-title Hur Form Area .kommentar-formulär Kommentarsformulär .comment-form-comment Sänd knäppas .form-submit
Postinfo
Widgeten .elementor-post-info Avatar .elementor-avatar Ikonlista .elementor-icon-list-icon Ikontext .elementor-icon-list-text
Postnavigering
Widgeten .elementor-post-navigation Föregående ikon .post-navigation__arrow-prev Tidigare etikett .post-navigation__prev–label Tidigare inläggs titel .post-navigation__prev–title Nästa ikon .post-navigation__arrow-next nästa etikett .post-navigation__next–label Nästa inläggstitel .post-navigation__next–title
inlägg
Postföremål .elementor-post Utvald bild .elementor-post__thumbnail Märke på Cards Skin .elementor-post__badge Avatar på Cards Skin img.avatar Textinnehållsområde .elementor-post__text Post titel .elementor-post__title post Utdrag .elementor-post__excerpt Läs mer .elementor-post__läs-mer Post Meta Area .elementor-post__meta-data post Datum .elementor-post-date Postförfattare .elementor-post-författare Inläggstid .elementor-post-tid Post kommentar .elementor-post-avatar Paginering .elementor-paginering Tidigare etikett .page-numbers.prev nästa etikett .page-numbers.next Pagineringsnummer .sidnummer Aktivt pagineringsnummer .sidnummer.aktuell Ladda mer-knappen .elementor-knapp-länk Ladda mer knappikon .elementor-knappikon
Post titel
Widgeten .elementor-heading-title
PRISLISTA
Widgeten .elementor-prislista Listobjekt .elementor-price-list-item Listobjekt Bild .elementor-prislista-bild Listobjekts text .elementor-prislista-text Listobjektsrubrik .elementor-price-list-header Listobjekts titel .elementor-price-list-title Listobjektseparator .elementor-prislista-separator Listpris .elementor-price-list-price Listobjektbeskrivning .elementor-prislista-beskrivning
Pris tabell
Widgeten .elementor-pristabell Tabellhuvud .elementor-price-table__header Tabellrubrik Titel .elementor-price-table__heading Tabellrubrik Beskrivning .elementor-pristabell__underrubrik Pris .elementor-price-table__price Valuta .elementor-price-table__valuta Antal efter pris .elementor-price-table__efter-pris Prisperiod .elementor-price-table__period Område med funktionslista .elementor-price-table__features-list Funktionslista .elementor-price-table__feature-inner Tabellfotboll .elementor-price-table__sidfot Bordsfotknapp .elementor-price-table__knapp Tabellsidfotstext .elementor-price-table__additional_info band .elementor-price-table__ribbon Inre band .elementor-price-table__ribbon-inner
Progress Bar
Progress Bar .elementor-progress-bar Framsteg Bakgrund .elementor-progress-wrapper Framstegstitel .elementor-title Framsteg inre text .elementor-progress-text Procentandel framsteg .elementor-progress-procent
Framstegsspårare
Widgeten .elementor-scrolling-tracker Framsteg .current-progress-procent
Omdömen
Widgeten .elementor-swiper Granska objekt .swiper-slide Granskningshuvud .elementor-testimonial__header Bildgranskare .elementor-testimonial__image Granskarens namn .elementor-testimonial__name Recensenttitel .elementor-testimonial__title Rekommendationsinnehåll .elementor-testimonial__content Rekommendationstext .elementor-testimonial__text Punkt paginering .swiper-pagetion-bullet Bråkpaginering .swiper-pagineringsfraktion Bråkpaginering Aktuell .swiper-pagetion-current Bråk paginering Totalt .swiper-pagetion-total Förloppsindikator paginering .swiper-pagetion-progressbar Förloppsindikator Pagineringsfyllning .swiper-pagetion-progressbar-fill Föregående knapp .eicon-chevron-vänster Nästa knapp .eicon-chevron-right
Knappobjekt .elementor-share-btn Knappikon .elementor-share-btn__icon Button Text .elementor-share-btn__text
Diabilder
Widgeten .elementor-slides-wrapper Innehållsområde .swiper-slide-innehåll Innehållsrubrik .elementor-slide-heading Innehållsbeskrivning .elementor-slide-description Innehållsknapp .elementor-slide-button Punkt paginering .swiper-pagetion-bullet Föregående knapp .eicon-chevron-vänster Nästa knapp .eicon-chevron-right
sociala Ikoner
Widgeten .elementor-social-icons-wrapper Ikonobjekt .elementor-social-ikon
Star Rating
Widgeten .elementor-star-rating__wrapper Betygstitel .elementor-star-rating__title Stjärnikon Område .elementor-star-rating Fullfylld stjärnikon .elementor-star-full Halvfylld stjärnikon .elementor-star-5 Tom stjärnikon .elementor-star-tom
Innehållsförteckning
Widgeten .elementor-widget-container ToC Header .elementor-toc__header Rubrik för innehållsförteckning .elementor-toc__header-title Expandera-knappen .elementor-toc__toggle-button–expand Kollapsknapp .elementor-toc__toggle-button–expand Innehållsförteckning Kropp .elementor-toc__body Innehållsförteckning Listobjekt .elementor-toc__list-item Toppnivå för innehållsförteckning .elementor-toc__list-item-text.elementor-toc__top-level
Flikar
Widgeten .elementor-tabs Tabellrubrik .elementor-tab-title Fliken Innehåll .elementor-tab-innehåll
Testimonial
Widgeten .elementor-testimonial-wrapper Rekommendationsinnehåll .elementor-testimonial-content Testimonial Meta .elementor-testimonial-meta Avatar vittnesmål .elementor-testimonial-image Betygsnamn och befattning .elementor-testimonial-detaljer Referensnamn .elementor-testimonial-name Rekommendation jobbtitel .elementor-testimonial-jobb
Vittnesbördskarusell
Widgeten .elementor-widget-container Testimonial Slide Item .elementor-testimonial Rekommendationsinnehåll .elementor-testimonial__content Testimonial Meta .elementor-testimonial__sidfot Avatar vittnesmål .elementor-testimonial__image Betygsnamn och befattning .elementor-testimonial__cite Referensnamn .elementor-testimonial__name Rekommendation jobbtitel .elementor-testimonial__title Punkt paginering .swiper-pagetion-bullet Bråkpaginering .swiper-pagineringsfraktion Bråkpaginering Aktuell .swiper-pagetion-current Bråk paginering Totalt .swiper-pagetion-total Förloppsindikator paginering .swiper-pagetion-progressbar Förloppsindikator Pagineringsfyllning .swiper-pagetion-progressbar-fill Föregående knapp .eicon-chevron-vänster Nästa knapp .eicon-chevron-right
Textredigerare
Widgeten .elementor-text-editor
Växla
Widgeten .elementor-toggle Växla objekt .elementor-toggle-item Växla objekttitel .elementor-tab-title Växla objektinnehåll .elementor-tab-innehåll Växla ikon .elementor-toggle-ikon Växla ikon stängd .elementor-toggle-icon-closed Växla ikon Öppna .elementor-toggle-icon-opened
Även om Elementor erbjuder många stilalternativ för varje widget, kan du gå längre än det med anpassad CSS. För att tillämpa en anpassad stil på en widget (eller dess element) via anpassad CSS, måste du känna till den associerade widgetens väljare.
Andra Elementor-resurser:
Du kan helt enkelt inspektera en widget på en livesida för att hitta dess väljare. För att spara tid har vi skapat Elementors lista över widgetväljare så att du inte behöver inspektera varje widget själv.
Slutsats
Så! Vi har precis presenterat listan över Elementor-widgetväljare. Om du har några funderingar kring hur du ska ta dig dit, låt oss veta inom commentaires
Du kan dock också konsultera våra resurser WordPress blogg skapande Divi: det bästa WordPress-temet genom tiderna
Men under tiden dela den här artikeln på dina olika sociala nätverk
.
Jag gillar detta : som läser in…
liknande föremål
