Czy chcesz znaleźć selektory widżetów? Elementor ?
Jedna z funkcji dostępnych na Elementor Pro
Aby dodać niestandardową stylizację za pomocą niestandardowego CSS do określonego widżetu Elementor , musisz znać selektor powiązanego widgetu. Zebraliśmy listę selektorów widżetów Elementor aby ułatwić Ci pracę.
Każdy widżet Elementor — i jego elementy — ma selektor CSS, którego możesz użyć do kierowania powiązanego widżetu, gdy chcesz dodać niestandardowy CSS w celu uzyskania określonego stylu. Selektor możesz znaleźć, sprawdzając widżet, do którego chcesz dodać niestandardowy kod CSS.
Ponieważ sprawdzenie widżetu można przeprowadzić tylko na aktywnej stronie, sprawdzenie każdego z nich zajmie dużo czasu. To właśnie doprowadziło nas do stworzenia tej listy.
Jak korzystać z selektora
Załóżmy, że chcesz zastosować inny rozmiar między ikoną a tekstem na przycisku. Ponieważ domyślna opcja ustawienia nie pozwala na ustawienie innego rozmiaru między ikoną przycisku a tekstem, możesz to osiągnąć za pomocą niestandardowego CSS. Możesz kierować ikonę lub tekst, aby zastosować niestandardowy CSS.
Najpierw wybierz selektor elementu, na który chcesz kierować (na przykład ikonę przycisku). W panelu ustawień elementu przejdź do zakładki zaawansowany i otwórz blok Niestandardowy CSS .
Wchodzić selector [selector name] {} w niestandardowym polu CSS.
Oto przykład.
Następnie dodaj swoje treść CSS (deklaracja) w nawiasach klamrowych.
Oto przykład.
Remarque: Każdy widżet Elementora ma element nadrzędny ( wrapper ). Wchodzić selector {} (bez nazwy selektora) oznacza kierowanie na opakowanie.
Lista wyboru widżetów Elementora
Akordeon
Widżet .elementor-akordeon Tytuł Akordeonu .elementor-akordeon-tytuł Opis akordeonu zawartość karty .elementor Ikona akordeonu Otwórz .elementor-akordeon-ikona Ikona akordeonu zamknięta .elementor-ikona-akordeon-zamknięta
Alarm
Widżet .elementor-alert Tytuł alertu .elementor-alert-title Opis alertu .elementor-opis-alertu Odrzuć ikonę .elementor-alert-odrzuć
Animowany nagłówek
Widżet .elementor-nagłówek Tekst statyczny .elementor-nagłówek-zwykły tekst Tekst dynamiczny .elementor-nagłówek-dynamic-wrapper
Opis archiwum
Tekst archiwum .elementor-tytuł-tytuł
Posty archiwalne
Widżet .elementor-widget-kontener Opublikuj przedmiot .element-siatka-element Prześlij zdjęcia .elementor-post__thumbnail Odznaka na skórce kart .elementor-post__badge Awatar na Karcianej Skórce img.awatar Obszar zawartości tekstu .elementor-post__text Tytuł postu .elementor-post__title Fragment postu .elementor-post__fragment Czytaj więcej .elementor-post__czytaj-więcej Obszar Post Meta .elementor-post__meta-data Data wysłania .elementor-data-post Autor postu .elementor-post-autor Post czas .elementor-post-czas Zamieść komentarz .elementor-po-awatar Paginacja .elementor-paginacja Poprzednia etykieta .numery-stron.prev następna etykieta .numery-stron.następny Numer paginacji .numery stron Aktywny numer paginacji .numery-stron.bieżące Załaduj więcej przycisk .elementor-przycisk-link Załaduj więcej ikona przycisku .elementor-przycisk-ikona
Pole autora
Widżet .elementor-autor-box Avatar .elementor-autor-box__avatar Autor Nazwa .elementor-autor-box__nazwa Bio Autor .elementor-autor-box__bio Przycisk archiwizacji .elementor-autor-box__button
Podstawowa galeria
Widżet .elementor-galeria-obrazów Element galerii .galeria-element Podpis .wp-podpis-tekst
blockquote
Widżet .elementor-blockquote Treść cytatu blokowego .elementor-blockquote__content Autor cytatów blokowych .elementor-cytat_blokowy__autor Ikona tweeta .elementor-blockquote__przycisk-tweet Etykieta tweeta .elementor-blockquote__tweet-label
Widżet .elementor-przycisk Tekst Przycisk .elementor-przycisk-tekst Ikona przycisku .elementor-przycisk-ikona
Wezwanie do działania
Widżet .elementor-cta Obraz nagłówka .elementor-cta__bg wstążka .elementor-wstążka Tekst wstążki .elementor-wstążka-wewnętrzna Tytuł treści .elementor-cta__title Opis zawartości .elementor-cta__opis Przycisk zawartości .elementor-cta__button
Odliczanie
Widżet .elementor-opakowanie-odliczające Dni .elementor-odliczanie-dni godzin .elementor-odliczanie-godzin minut .elementor-odliczanie-minut Sekund .elementor-odliczanie-sekundy Etykieta odliczania .elementor-odliczanie-etykieta
Przeciwdziałać
Widżet .elementor-licznik Prefiks numeru .element-licznik-numer-przedrostek Numer .elementor-liczba-liczba Sufiks numeru .sufiks-numeru-licznika-elementu Tytuł .elementor-kontr-tytuł
dzielnik
Widżet .elementor-dzielnik Separator .elementor-dzielnik-separator Element tekstowy/ikona .elementor-dzielnik__element
Odwróć pudełko
Widżet .elementor-flip-box Pojemnik przedni .elementor-flip-box__front Powrót pojemnik .elementor-flip-box__back Pojemnik na zawartość .elementor-flip-box__warstwa__inner Tytuł treści .elementor-flip-box__layer__title Opis zawartości .elementor-flip-box__warstwa__opis Przycisk zawartości .elementor-flip-box__przycisk
Widżet .elementor-forma Kontener schodkowy .e-form__wskaźniki Liczba kroków .e-formularz__wskaźniki__wskaźnik Etykieta pola .elementor-field-etykieta Tekst pola .elementor-field-textual Etykieta pola tekstowego .elementor-pola-tekst-typu Etykieta pola tekstowego .elementor-pola-typu-obszaru tekstowego Etykieta pola e-mail .elementor-pole-typ-e-mail Etykieta pola adresu URL .elementor-typ-pola-adres URL Etykieta pola Tel .elementor-typ-pola-tel Etykieta pola radiowego .elementor-radio typu pola Wybierz etykietę pola .elementor-pole-typ-wybierz Etykieta pola wyboru .pole wyboru typu-elementu-pola Akceptacja etykiety pola .elementor-field-type-acceptation Etykieta pola daty .elementor-typ-pola-data Etykieta pola czasu .elementor-pole-typ-czas Etykieta pola liczbowego .element-numer-typu-pola Etykieta pola przesyłania pliku Przesyłanie typu pola .elementor Następny przycisk e-formularz__buttons__wrapper__button-next Poprzedni przycisk .e-form__buttons__wrapper__button-poprzedni Umieść przycisk .elementor-przycisk
Galeria
Tytuł galerii (dla wielu galerii) .elementor-tytuł-galerii Element galerii .elementor-galeria-item Opis (na nakładce) .elementor-galeria-element__opis
Nagłówek
Widżet .elementor-tytuł-tytuł
Ikona
Ikona Box
Widżet .elementor-icon-box-wrapper Ikona .elementor-ikona Pojemnik na zawartość .elementor-ikona-zawartość-pudełka Tytuł treści .elementor-icon-box-title Opis zawartości .elementor-ikona-opis-box
Lista ikon
Ikona listy .elementor-icon-list-ikona ListTekst .elementor-ikon-lista-tekst
Obraz
Obraz img Podpis .wp-podpis-tekst
Box pliku
Obraz .elementor-image-box-img Pojemnik na tekst .elementor-image-box-treść Tytuł treści .elementor-image-box-title Opis zawartości opis-pudełka-obrazu elementu
Karuzela obrazów
ImageContainer .swiper-slajd PictureItem .swiper-slajd-obraz Kontener stronicowania .swiper-paginacja Paginacja kropek .swiper-paginacja-bullet Poprzednia ikona .elementor-swiper-przycisk-poprzedni Następna .elementor-swiper-button-next Tytuł Zdjęcia .elementor-image-carousel-caption
Element multimedialny .elementor-karuzela-obraz Nakładka elementu multimedialnego .elementor-karuzela-nakładka-obrazu Paginacja kropkowa .swiper-paginacja-frakcja Poprzedni przycisk .eicon-chevron-lewo Następny przycisk .eicon-szewron-prawo Paginacja frakcji .swiper-paginacja-frakcja Paginacja paska postępu .swiper-paginacja-pasek postępu Wypełnianie stronicowania paska postępu .swiper-pagination-progressbar-fill
Przełączanie menu mobilnego .elementor-menu-toggle Ikona menu mobilnego .eicon-menu-pasek Zwykłe menu .elementor-nav-menu Upuścić .elementor-nav-menu-rozwijane Pozycja menu z podmenu .elementor-element.ma-podmenu Pozycja podmenu .elementor-pozycja podrzędna
Widżet .elementor-przycisk-płatności Ikona przycisku PayPal .elementor-przycisk-ikona Tekst przycisku PayPal .elementor-przycisk-tekst
Portfolio
Pozycja portfela elementor-portfolio-item Pozycja portfela na nakładce .elementor-portfolio-item__overlay Tytuł nakładki .elementor-portfolio-item__title Filtr portfela .elementor-portfolio__filter
Tytuł odpowiedzi .tytuł-odpowiedzi na komentarz Jak obszar formularza .formularz-komentarzy Formularz komentarza .komentarz-formularz-komentarz Umieść przycisk .prześlij formularz
Opublikuj informacje
Widżet .elementor-post-info Avatar .elementor-awatar Lista ikon .elementor-icon-list-ikona Tekst ikony .elementor-ikon-lista-tekst
Nawigacja po
Widżet .elementor-post-nawigacja Poprzednia ikona .post-nawigacja__strzałka-poprzednia Poprzednia etykieta .post-navigation__prev–etykieta Poprzedni tytuł postu .post-navigation__prev–tytuł Następna ikona .post-navigation__arrow-next następna etykieta .po nawigacji__następna-etykieta Tytuł następnego postu .post-navigation__next–tytuł
Wiadomości
Opublikuj przedmiot .elementor-post Prześlij zdjęcia .elementor-post__thumbnail Odznaka na skórce kart .elementor-post__badge Awatar na Karcianej Skórce img.awatar Obszar zawartości tekstu .elementor-post__text Tytuł postu .elementor-post__title Fragment postu .elementor-post__fragment Czytaj więcej .elementor-post__czytaj-więcej Obszar Post Meta .elementor-post__meta-data Data wysłania .elementor-data-post Autor postu .elementor-post-autor Post czas .elementor-post-czas Zamieść komentarz .elementor-po-awatar Paginacja .elementor-paginacja Poprzednia etykieta .numery-stron.prev następna etykieta .numery-stron.następny Numer paginacji .numery stron Aktywny numer paginacji .numery-stron.bieżące Załaduj więcej przycisk .elementor-przycisk-link Załaduj więcej ikona przycisku .elementor-przycisk-ikona
Tytuł postu
Widżet .elementor-tytuł-tytuł
Cennik
Widżet .elementor-cennik Element listy .elementor-pozycja-cennika Wyświetl obraz pozycji .elementor-cennik-obraz Tekst pozycji listy .elementor-cennik-tekst Nagłówek elementu listy .elementor-cennik-nagłówek Tytuł pozycji listy .elementor-tytuł-cennika Separator elementów listy .elementor-cennik-separator Podaj cenę przedmiotu .elementor-cennik-cena Lista pozycji Opis .elementor-cennik-opis
Tabela cen
Widżet .elementor-tabela-cen Nagłówek tabeli .elementor-cena-tabela__header Tytuł nagłówka tabeli .elementor-cena-tabela__nagłówek Opis nagłówka tabeli .elementor-cena-tabela__podtytuł Cena .elementor-cena-tabela__cena Waluta .elementor-cena-tabela__waluta Numer po cenie .elementor-cena-tabela__po-cenie Okres cenowy .elementor-tabela-cen__okres Obszar listy funkcji .elementor-tabela-cen__lista-funkcji Element listy funkcji .elementor-tabela-cen__funkcja-wewnętrzna Stopka stołu .elementor-tabela-cen__stopka Przycisk stopki tabeli .elementor-cena-tabela__przycisk Tekst stopki tabeli .elementor-tabela-cen__dodatkowe_informacje wstążka .elementor-tabela-cen__wstążka Wewnętrzna wstążka .elementor-tabela-cen__wstążka-wewnętrzna
Pasek postępu
Pasek postępu .elementor-pasek-postępu Tło postępu .elementor-opakowanie-postępu Tytuł postępu .elementor-tytuł Postęp wewnętrzny tekst .elementor-tekst-postępu Procent postępu .elementor-progress-procent
Śledzenie postępu
Widżet .elementor-przewijany-tracker Postęp .bieżący-procent-postępu
Recenzje
Widżet .elementor-swiper Przejrzyj element .swiper-slajd Nagłówek recenzji .elementor-testimonial__header Recenzent obrazu .elementor-testimonial__image Imię i nazwisko recenzenta .elementor-oświadczenie__nazwa Tytuł recenzenta .elementor-testimonial__title Treść referencji .elementor-testimonial__treść Tekst opinii .elementor-referencja__tekst Paginacja kropkowa .swiper-paginacja-bullet Paginacja frakcji .swiper-paginacja-frakcja Aktualna paginacja frakcji .swiper-paginacja-bieżąca Łączna paginacja frakcji .swiper-paginacja-całkowita Paginacja paska postępu .swiper-paginacja-pasek postępu Wypełnianie stronicowania paska postępu .swiper-pagination-progressbar-fill Poprzedni przycisk .eicon-chevron-lewo Następny przycisk .eicon-szewron-prawo
Pozycja przycisku .elementor-share-btn Ikona przycisku .elementor-share-btn__icon Tekst Przycisk .elementor-share-btn__text
slajdy
Widżet .elementor-slajdy-wrapper Obszar treści .swiper-zawartość-slajdu Nagłówek treści .elementor-nagłówek-slajdu Opis zawartości .elementor-opis-slajdu Przycisk zawartości .elementor-suwak-przycisk Paginacja kropkowa .swiper-paginacja-bullet Poprzedni przycisk .eicon-chevron-lewo Następny przycisk .eicon-szewron-prawo
Ikony społeczne
Widżet .elementor-social-icons-wrapper Element ikony .elementor-social-ikon
Ocena w skali gwiazdkowej
Widżet .elementor-gwiazdkowa-ocena__wrapper Tytuł oceny .elementor-gwiazdkowa-ocena__tytuł Obszar ikony gwiazdki .elementor-gwiazdkowa-ocena Pełna ikona gwiazdy .elementor-gwiazda-pełna Do połowy wypełniona ikona gwiazdy .elementor-gwiazda-5 Pusta ikona gwiazdy .elementor-star-pusty
Spis treści
Widżet .elementor-widget-kontener Nagłówek spisu treści .elementor-toc__header Tytuł nagłówka spisu treści .elementor-toc__tytuł-nagłówka Rozwiń przycisk .elementor-toc__toggle-button–rozwiń Zwiń przycisk .elementor-toc__toggle-button–rozwiń Ciało ToC .elementor-toc__body Pozycja listy ToC .elementor-toc__list-element ToC Najwyższy poziom .elementor-toc__list-item-text.elementor-toc__najwyższy-poziom
Tabs
Widżet zakładki .elementor Tytuł karty .elementor-tytuł-zakładki Tab Content zawartość karty .elementor
Testimonial
Widżet .elementor-recenzja-wrapper Treść referencji .elementor-oświadczenie-treść Meta świadectwa .elementor-referencja-meta Świadectwo awatara .elementor-referencja-obraz Świadectwo Imię i stanowisko .elementor-referencje-szczegóły Nazwa świadectwa .elementor-referencja-nazwa Tytuł stanowiska pracy .elementor-referencja-praca
Karuzela opinii
Widżet .elementor-widget-kontener Element slajdu z referencjami .elementor-recenzja Treść referencji .elementor-testimonial__treść Meta świadectwa .elementor-testimonial__footer Świadectwo awatara .elementor-testimonial__image Świadectwo Imię i stanowisko .elementor-testimonial__cite Nazwa świadectwa .elementor-oświadczenie__nazwa Tytuł stanowiska pracy .elementor-testimonial__title Paginacja kropkowa .swiper-paginacja-bullet Paginacja frakcji .swiper-paginacja-frakcja Aktualna paginacja frakcji .swiper-paginacja-bieżąca Łączna paginacja frakcji .swiper-paginacja-całkowita Paginacja paska postępu .swiper-paginacja-pasek postępu Wypełnianie stronicowania paska postępu .swiper-pagination-progressbar-fill Poprzedni przycisk .eicon-chevron-lewo Następny przycisk .eicon-szewron-prawo
Edytor tekstu
Widżet .elementor-edytor-tekstu
Przełączanie
Widżet .elementor-przełącz Przełącz element .elementor-przełącznik-element Przełącz tytuł elementu .elementor-tytuł-zakładki Przełącz zawartość elementu zawartość karty .elementor Przełącz ikonę .elementor-toggle-ikona Przełącz ikonę zamkniętą .elementor-toggle-ikon-zamknięty Przełącz ikonę Otwórz .elementor-toggle-ikona-otwarty
Chociaż Elementor oferuje wiele opcji stylizacji dla każdego widżetu, możesz wyjść poza to dzięki niestandardowemu CSS. Aby zastosować niestandardowy styl do widżetu (lub jego elementów) za pomocą niestandardowego CSS, musisz znać selektor powiązanego widżetu.
Inne zasoby Elementora:
Możesz po prostu sprawdzić widżet na aktywnej stronie, aby znaleźć jego selektor. Aby zaoszczędzić Twój czas, stworzyliśmy listę selektorów widżetów Elementora, dzięki czemu nie musisz samodzielnie sprawdzać każdego widżetu.
Wnioski
Więc! Właśnie przedstawiliśmy Ci listę selektorów widżetów Elementor. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires
Możesz jednak również skonsultować się nasze zasoby Tworzenie bloga WordPress Divi: najlepszy motyw WordPress wszechczasów
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych
...
Podobne produkty
