Möchten Sie die Widget-Selektoren finden Elementor ?
Eine der Funktionen, die auf verfügbar sind Elementor Pro
So fügen Sie einem bestimmten Widget benutzerdefiniertes Styling über benutzerdefiniertes CSS hinzu Elementor , müssen Sie den Selektor des zugehörigen Widgets kennen. Wir haben die Liste der Widget-Selektoren zusammengestellt Elementor um Ihre Arbeit zu erleichtern.
Jedes Elementor-Widget – und seine Elemente – verfügt über einen CSS-Selektor, mit dem Sie auf das zugehörige Widget abzielen können, wenn Sie benutzerdefiniertes CSS hinzufügen möchten, um einen bestimmten Stil zu erreichen. Sie finden den Selektor, indem Sie das Widget untersuchen, dem Sie das benutzerdefinierte CSS hinzufügen möchten.
Da die Überprüfung eines Widgets nur auf einer Live-Seite erfolgen kann, wird es lange dauern, jedes einzelne zu überprüfen. Das hat uns dazu veranlasst, diese Liste zu erstellen.
So verwenden Sie einen Selektor
Angenommen, Sie möchten eine andere Größe zwischen Symbol und Text auf einer Schaltfläche anwenden. Da Sie mit der Standardeinstellungsoption keine unterschiedliche Größe zwischen dem Schaltflächensymbol und dem Text festlegen können, können Sie dies über das benutzerdefinierte CSS erreichen. Sie können auf Symbole oder Text abzielen, um benutzerdefiniertes CSS anzuwenden.
Wählen Sie zunächst den Selektor des Elements aus, auf das Sie abzielen möchten (z. B. das Schaltflächensymbol). Wechseln Sie im Elementeinstellungsfenster zur Registerkarte fortgeschritten und öffne den Block Benutzerdefiniertes CSS .
Eingeben selector [selector name] {} im benutzerdefinierten CSS-Feld.
Hier ist das Beispiel.
Dann fügen Sie Ihre hinzu Inhalt CSS (Deklaration) in geschweiften Klammern.
Hier ist das Beispiel.
Anmerkung: Jedes Elementor-Widget hat ein übergeordnetes Element (Wrapper). Eintreten selector {} (ohne den Selektornamen) bedeutet, auf den Wrapper abzuzielen.
Elementor-Widget-Auswahlliste
Akkordeon
Das Widget .elementor-akkordeon Akkordeon Titel .elementor-akkordeon-titel Akkordeon-Beschreibung .elementor-Tab-Inhalt Akkordeon-Symbol geöffnet .elementor-akkordeon-symbol Akkordeon-Symbol geschlossen .elementor-akkordeon-symbol-geschlossen
Aufmerksam
Das Widget .elementor-alarm Warnungstitel .elementor-Alert-Titel Warnungsbeschreibung .elementor-alert-description Symbol „Ablehnen“. .elementor-alert-dismiss
Animierte Überschrift
Das Widget .elementor-Überschrift Statischer Text .elementor-Überschrift-Klartext Dynamischer Text .elementor-headline-dynamischer-wrapper
Archivbeschreibung
Archivtext .elementor-Überschrift-Titel
Beiträge archivieren
Das Widget .elementor-Widget-Container Artikel posten .elementor-grid-item Ausgewähltes Bild .elementor-post__thumbnail Abzeichen auf der Kartenhaut .elementor-post__badge Avatar auf Karten-Skin img.avatar Textinhaltsbereich .elementor-post__text Post-Titel .elementor-post__title Post Auszug .elementor-post__excerpt Weiterlesen .elementor-post__weiterlesen Post-Meta-Bereich .elementor-post__meta-Daten Nach Datum .elementor-post-date Beitragsautor .elementor-post-autor Post Time .elementor-post-time Geben Sie Anmerkung .elementor-post-avatar Paginierung .elementor-paginierung Vorheriges Etikett .Seitenzahlen.prev nächstes Label .seitenzahlen.nächste Paginierungsnummer .Seitenzahlen Aktive Paginierungsnummer .Seitenzahlen.aktuell Schaltfläche "Mehr laden" .elementor-button-link Laden Sie mehr Schaltflächensymbol .elementor-button-icon
Autorenbox
Das Widget .elementor-Autor-Box Avatar .elementor-autor-box__avatar Name des Autors .elementor-autor-box__name Autor Bio .elementor-autorenbox__bio Archivierungsschaltfläche .elementor-Autor-Box__button
Grundlegende Galerie
Das Widget .elementor-Bildergalerie Galerie-Gegenstand .gallery-item Bildunterschrift .wp-Beschriftungstext
blockquote
Das Widget .elementor-blockquote Blockquote-Inhalt .elementor-blockquote__content Blockzitat-Autor .elementor-blockquote__autor Tweet-Symbol .elementor-blockquote__tweet-Schaltfläche Tweet-Label .elementor-blockquote__tweet-label
Das Widget .elementor-Schaltfläche Button-Text .elementor-button-text Schaltflächensymbol .elementor-button-icon
Call to Action
Das Widget .elementor-cta Header-Bild .elementor-cta__bg Band .elementor-Band Ribbon-Text .elementor-Band-Innen Inhaltstitel .elementor-cta__title Inhaltsbeschreibung .elementor-cta__description Inhaltsschaltfläche .elementor-cta__button
Countdown
Das Widget .elementor-countdown-wrapper Tage
.elementor-countdown-tage Stunden .elementor-countdown-stunden Minuten .elementor-countdown-minuten Sekunden .elementor-countdown-sekunden Countdown-Etikett .elementor-countdown-label
Counter
Das Widget .elementor-counter Nummernpräfix .element-counter-nummer-präfix Nummer .Element-Zähler-Nummer Nummernzusatz .element-counter-nummer-suffix Titel .elementor-Gegentitel
Trennwand
Das Widget .elementor-teiler Separator .elementor-Teiler-Trennzeichen Text-/Icon-Element .elementoder-divider__element
Flip-Box
Das Widget .elementor-Flip-Box Frontcontainer .elementor-Flip-Box__vorne Hinterer Behälter .elementor-Flip-Box__zurück Inhaltscontainer .elementor-flip-box__layer__innen Inhaltstitel .elementor-flip-box__layer__title Inhaltsbeschreibung .elementor-flip-box__layer__description Inhaltsschaltfläche .elementor-Flip-Box__button
Das Widget .elementor-Form Step-Container .e-Formular__Indikatoren Schritte Nummer .e-Formular__Indikatoren__Indikator Feldbezeichnung .elementor-Feldbezeichnung Feldtext .elementor-field-textuell Beschriftung des Textfeldes .elementor-Feldtyp-Text Beschriftung des Textbereichsfelds .elementor-Feldtyp-Textbereich E-Mail-Feldbezeichnung .elementor-Feldtyp-E-Mail URL-Feldbezeichnung .elementor-Feldtyp-URL Tel-Feldbezeichnung .elementor-Feldtyp-Tel Funkfeldbezeichnung .elementor-field-type-radio Wählen Sie Feldbezeichnung aus .elementor-field-type-select Feldbezeichnung des Kontrollkästchens .elementor-Feldtyp-Kontrollkästchen Annahme der Feldbeschriftung .elementor-field-type-acceptance Bezeichnung des Datumsfelds .elementor-Feldtyp-Datum Zeitfeldbeschriftung .elementor-Feldtyp-Zeit Nummernfeldbeschriftung .element-feldtypnummer Datei-Upload-Feldbezeichnung .elementor-Feldtyp-Upload Nächster Knopf E-Formular__buttons__wrapper__button-next Vorheriger Button .e-form__buttons__wrapper__button-zurück Taste Senden .elementor-Schaltfläche
Bildergalerie
Galerietitel (für mehrere Galerien) .elementor-Galerietitel Galerie-Gegenstand .elementor-gallery-item Beschreibung (auf Overlay) .elementor-gallery-item__description
Überschrift
Das Widget .elementor-Überschrift-Titel
Symbol
Das Widget .elementor-Symbol
Icon Box
Das Widget .elementor-icon-box-wrapper Symbol .elementor-Symbol Inhaltscontainer .elementor-icon-box-inhalt Inhaltstitel .elementor-icon-box-titel Inhaltsbeschreibung .elementor-icon-box-beschreibung
Icon Liste
Listensymbol .elementor-icon-list-icon Listentext .elementor-icon-list-text
Bild
Bild img Bildunterschrift .wp-Beschriftungstext
Image Box
Bild .elementor-image-box-img TextContainer .elementor-image-box-content Inhaltstitel .elementor-Bildbox-Titel Inhaltsbeschreibung Elementor-Image-Box-Beschreibung
Bild Karussell
ImageContainer .swiper-slide PictureItem .swiper-slide-image Paginierungscontainer .swiper-paginierung Punkte-Paginierung .swiper-pagination-bullet Vorheriges Symbol .elementor-swiper-button-prev Weiter .elementor-swiper-button-next Bildunterschrift .elementor-image-carousel-caption
MediaItem .elementor-carousel-image Medienelement-Overlay .elementor-carousel-image-overlay Punkt-Paginierung .swiper-pagination-fraction Vorheriger Button .eicon-chevron-links Nächster Knopf .eicon-chevron-rechts Bruch-Paginierung .swiper-pagination-fraction Fortschrittsbalken-Paginierung .swiper-pagination-progressbar Fortschrittsbalken Paginierung füllen .swiper-pagination-progressbar-fill
Mobil Menu Toggle .elementor-menu-toggle Mobiles Menüsymbol .eicon-Menüleiste Normales Menü .elementor-nav-menü Dropdown .elementor-nav-menu–Dropdown Menüpunkt mit Untermenü .elementor-item.has-untermenü Untermenüpunkt .elementor-sub-item
Das Widget .elementor-Zahlungsschaltfläche PayPal-Button-Symbol .elementor-button-icon Text der PayPal-Schaltfläche .elementor-button-text
Portfolio
Portfolioelement .elementor-Portfolio-Element Portfolio-Element auf Overlay .elementor-portfolio-item__overlay Titel überlagern .elementor-portfolio-item__title Portfoliofilter .elementor-portfolio__filter
Antworttitel .Kommentar-Antwort-Titel Wie Formularbereich .Kommentarformular Kommentarformular .comment-form-comment Taste Senden .form-submit
Beitragsinfo
Das Widget .elementor-post-info Avatar .elementor-avatar Icon Liste .elementor-icon-list-icon Symboltext .elementor-icon-list-text
Postnavigation
Das Widget .elementor-post-navigation Vorheriges Symbol .post-navigation__arrow-prev Vorheriges Etikett .post-navigation__prev–label Titel des vorherigen Beitrags .post-navigation__prev–Titel Nächstes Symbol .post-navigation__arrow-next nächstes Label .post-navigation__next–label Titel des nächsten Beitrags .post-navigation__next–title
BLOG-POSTS
Artikel posten .elementor-post Ausgewähltes Bild .elementor-post__thumbnail Abzeichen auf der Kartenhaut .elementor-post__badge Avatar auf Karten-Skin img.avatar Textinhaltsbereich .elementor-post__text Post-Titel .elementor-post__title Post Auszug .elementor-post__excerpt Weiterlesen .elementor-post__weiterlesen Post-Meta-Bereich .elementor-post__meta-Daten Nach Datum .elementor-post-date Beitragsautor .elementor-post-autor Post Time .elementor-post-time Geben Sie Anmerkung .elementor-post-avatar Paginierung .elementor-paginierung Vorheriges Etikett .Seitenzahlen.prev nächstes Label .seitenzahlen.nächste Paginierungsnummer .Seitenzahlen Aktive Paginierungsnummer .Seitenzahlen.aktuell Schaltfläche "Mehr laden" .elementor-button-link Laden Sie mehr Schaltflächensymbol .elementor-button-icon
Post-Titel
Das Widget .elementor-Überschrift-Titel
Preisliste
Das Widget .elementor-Preisliste Listenpunkt .elementor-Preislistenartikel Listenelementbild .elementor-Preislistenbild Listenelementtext .elementor-preislistentext Kopfzeile des Listenelements .elementor-Preislistenkopfzeile Titel des Listenelements .elementor-preislistentitel Listenelement-Trennzeichen .elementor-Preislisten-Trennzeichen Artikelpreis auflisten .elementor-Preis-Listenpreis Listenelement Beschreibung .elementor-Preislistenbeschreibung
Preisliste
Das Widget .elementor-Preistabelle Tabellenkopf .elementor-Preistabelle__Kopfzeile Titel der Tabellenüberschrift .elementor-Preistabelle__Überschrift Beschreibung der Tabellenüberschrift .elementor-preistabelle__unterüberschrift PREISLISTE .elementor-Preistabelle__Preis Währung .elementor-Preistabelle__Währung Zahl nach Preis .elementor-Preistabelle__Nachpreis Preisperiode .elementor-Preistabelle__Zeitraum Funktionslistenbereich .elementor-Preistabelle__Funktionsliste Feature-Listenelement .elementor-preistabelle__feature-inner Tabelle Footer .elementor-preistabelle__footer Tabellenfuß-Schaltfläche .elementor-Preistabelle__button Tabellenfußtext .elementor-preistabelle__zusätzliche_info Band .elementor-preistabelle__band Inneres Band .elementor-preistabelle__band-innen
Progress Bar
Progress Bar .elementor-fortschrittsbalken Fortschrittshintergrund .elementor-progress-wrapper Fortschrittstitel .elementor-Titel Innerer Text des Fortschritts .elementor-fortschrittstext Fortschrittsprozentsatz .elementor-fortschrittsprozentsatz
Fortschrittsanzeige
Das Widget .elementor-Scrolling-Tracker Fortschritt .aktueller-Fortschrittsprozentsatz
Bewertungen
Das Widget .elementor-swiper Artikel überprüfen .swiper-slide Kopfzeile überprüfen .elementor-testimonial__header Bildbewerter .elementor-testimonial__image Prüfername .elementor-testimonial__name Titel des Rezensenten .elementor-testimonial__title Testimonial-Inhalt .elementor-testimonial__content Zeugnis Text .elementor-testimonial__text Punkt-Paginierung .swiper-pagination-bullet Bruch-Paginierung .swiper-pagination-fraction Bruch Paginierung Strom .swiper-pagination-current Bruch Paginierung Gesamt .swiper-pagination-total Fortschrittsbalken-Paginierung .swiper-pagination-progressbar Fortschrittsbalken Paginierung füllen .swiper-pagination-progressbar-fill Vorheriger Button .eicon-chevron-links Nächster Knopf .eicon-chevron-rechts
Schaltflächenelement .elementor-share-btn Schaltflächensymbol .elementor-share-btn__icon Button-Text .elementor-share-btn__text
Slides
Das Widget .elementor-slides-wrapper Inhaltsbereich .swiper-slide-inhalt Inhaltsüberschrift .elementor-slide-heading Inhaltsbeschreibung .elementor-slide-description Inhaltsschaltfläche .elementor-slide-button Punkt-Paginierung .swiper-pagination-bullet Vorheriger Button .eicon-chevron-links Nächster Knopf .eicon-chevron-rechts
Social Icons
Das Widget .elementor-social-icons-wrapper Symbolelement .elementor-soziales-Symbol
Sternebewertung
Das Widget .elementor-star-rating__wrapper Bewertung Titel .elementor-star-rating__title Sternsymbolbereich .elementor-Sterne-Bewertung Vollständig gefülltes Sternsymbol .elementor-stern-voll Halbgefülltes Sternsymbol .elementor-star-5 Leeres Sternsymbol .elementor-star-leer
Inhaltsverzeichnis
Das Widget .elementor-Widget-Container Inhaltsverzeichnis-Header .elementor-toc__header ToC-Header-Titel .elementor-toc__Header-Titel Erweitern-Schaltfläche .elementor-toc__toggle-button–erweitern Schaltfläche „Reduzieren“. .elementor-toc__toggle-button–erweitern ToC-Körper .elementor-toc__body ToC-Listenelement .elementor-toc__list-item Inhaltsverzeichnis oberste Ebene .elementor-toc__list-item-text.elementor-toc__top-level
Tabs
Das Widget .elementor-Tabs Titel der Registerkarte .elementor-Tab-Titel Tab Content .elementor-Tab-Inhalt
Testimonial
Das Widget .elementor-Testimonial-Wrapper Testimonial-Inhalt .elementor-testimonial-content Zeugnis Meta .elementor-testimonial-meta Avatar-Testimonial .elementor-testimonial-image Referenzname und Berufsbezeichnung .elementor-testimonial-details Referenzname .elementor-testimonial-name Testimonial Berufsbezeichnung .elementor-testimonial-job
Testimonial Karussell
Das Widget .elementor-Widget-Container Testimonial-Folienelement .elementor-Testimonial Testimonial-Inhalt .elementor-testimonial__content Zeugnis Meta .elementor-testimonial__footer Avatar-Testimonial .elementor-testimonial__image Referenzname und Berufsbezeichnung .elementor-testimonial__zitieren Referenzname .elementor-testimonial__name Testimonial Berufsbezeichnung .elementor-testimonial__title Punkt-Paginierung .swiper-pagination-bullet Bruch-Paginierung .swiper-pagination-fraction Bruch Paginierung Strom .swiper-pagination-current Bruch Paginierung Gesamt .swiper-pagination-total Fortschrittsbalken-Paginierung .swiper-pagination-progressbar Fortschrittsbalken Paginierung füllen .swiper-pagination-progressbar-fill Vorheriger Button .eicon-chevron-links Nächster Knopf .eicon-chevron-rechts
Texteditor
Das Widget .elementor-Texteditor
Toggle
Das Widget .elementor-toggle Element umschalten .elementor-toggle-item Elementtitel umschalten .elementor-Tab-Titel Elementinhalt umschalten .elementor-Tab-Inhalt Symbol umschalten .elementor-toggle-icon Umschaltsymbol geschlossen .elementor-toggle-icon-geschlossen Umschaltsymbol Öffnen .elementor-toggle-icon-geöffnet
Obwohl Elementor viele Styling-Optionen für jedes Widget bietet, können Sie mit benutzerdefiniertem CSS darüber hinausgehen. Um einen benutzerdefinierten Stil auf ein Widget (oder seine Elemente) über benutzerdefiniertes CSS anzuwenden, müssen Sie den Selektor des zugehörigen Widgets kennen.
Weitere Elementor-Ressourcen:
Sie können ein Widget einfach auf einer Live-Seite untersuchen, um seinen Selektor zu finden. Um Ihnen Zeit zu sparen, haben wir Elementors Liste mit Widget-Selektoren erstellt, damit Sie nicht jedes Widget selbst überprüfen müssen.
Zusammenfassung
So! Wir haben Ihnen gerade die Liste der Elementor-Widget-Selektoren vorgestellt. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires
Sie können sich aber auch beraten unsere Ressourcen WordPress-Blog-Erstellung Divi: das beste WordPress-Theme aller Zeiten
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken
...
Ich mag das : wie Wird geladen ...
Ähnliche Artikel
