Widget seçicilerini bulmak ister misiniz? Elementor ?
Mevcut özelliklerden biri Elementor Pro
Belirli bir widget'a özel CSS aracılığıyla özel stil eklemek için Elementor , ilgili widget'ın seçicisini bilmeniz gerekir. Widget seçicilerin listesini topladık Elementor işinizi kolaylaştırmak için.
Her Elementor pencere aracı - ve öğeleri - belirli bir stil elde etmek için özel CSS eklemek istediğinizde ilişkili pencere aracını hedeflemek için kullanabileceğiniz bir CSS seçiciye sahiptir. Seçiciyi, özel CSS'yi eklemek istediğiniz widget'ı inceleyerek bulabilirsiniz.
Bir widget'ı incelemek yalnızca canlı bir sayfada yapılabileceğinden, her birini incelemek uzun zaman alacaktır. Bizi bu listeyi oluşturmaya iten şey buydu.
seçici nasıl kullanılır
Bir düğmedeki simge ve metin arasında farklı bir boyut uygulamak istediğinizi varsayalım. Varsayılan ayar seçeneği, düğme simgesi ve metin arasında farklı bir boyut belirlemenize izin vermediğinden, bunu özel CSS aracılığıyla yapabilirsiniz. Özel CSS uygulamak için simgeyi veya metni hedefleyebilirsiniz.
İlk olarak, hedeflemek istediğiniz öğenin seçicisini seçin (örneğin, düğme simgesi). Öğe ayarları panelinde sekmeye gidin gelişmiş ve bloğu aç Özel CSS .
Giriş selector [selector name] {} özel CSS alanında.
İşte örnek.
Sonra ekleyin içindekiler Kıvrımlı parantez içindeki CSS (bildirim).
İşte örnek.
Remarque: Her Elementor widget'ının bir üst öğesi ( sarmalayıcı ) vardır. Girmek selector {} (seçici adı olmadan) sarmalayıcıyı hedeflemek anlamına gelir.
Elementor Widget Seçici Listesi
Akordeon
Widget'ı .elementor-akordeon Akordeon Başlığı .elementor-akordeon-başlık akordeon açıklaması .elementor-sekme-içeriği Akordeon Simgesi Açık .elementor-akordeon-ikon Akordeon Simgesi Kapalı .elementor-akordeon-ikon-kapalı
Uyarmak
Widget'ı .elementor-uyarı Uyarı Başlığı .elementor-uyarı-başlığı Uyarı Açıklaması .elementor-alert-açıklama Kapat Simgesi .elementor-alert-red
Animasyonlu Başlık
Widget'ı .elementor-başlık Statik Metin .elementor-başlık-düz metin Dinamik Metin .elementor-başlık-dinamik-sarmalayıcı
Arşiv Açıklaması
Arşiv Metni .elementor-başlık-başlık
Arşiv Yazıları
Widget'ı .elementor-widget-konteyner Öğe Gönder .elementor-ızgara-öğesi <span style="color:white">Resim</span> .elementor-post__thumbnail Kart Görünümünde Rozet .elementor-post__rozeti Kart Görünümünde Avatar resim.avatar Metin İçeriği Alanı .elementor-post__text Yazı başlığı .elementor-post__title mesaja Alıntı .elementor-post__alıntı Devamını Oku .elementor-post__read-more Meta Alanı Sonrası .elementor-post__meta-veri Posta tarihi .elementor-post-tarih Yazı yazarı .elementor-post-yazar Posta zamanı .elementor-zaman sonrası Yorum Ekle .elementor-post-avatar Sayfalara numara koyma .elementor-sayfalama Önceki Etiket .sayfa numaraları.önceki sonraki etiket .sayfa numaraları.sonraki Sayfa Numarası .sayfa numaraları Etkin Sayfalandırma Numarası .sayfa-numaraları.geçerli Daha Fazla Yükle Düğmesi .elementor-düğme-bağlantısı Daha Fazla Düğme Yükle Simgesi .elementor-düğme-simgesi
Yazar Kutusu
Widget'ı .elementor-yazar-kutusu Avatar .elementor-yazar-kutusu__avatar Yazar Adı .elementor-yazar-kutusu__name Yazar Bio .elementor-yazar-kutusu__bio Arşiv Düğmesi .elementor-yazar-kutusu__düğmesi
Temel Galeri
Widget'ı .elementor-resim-galeri Galeri Öğesi .gallery-öğesi Başlık .wp-altyazı-metin
Satria Nugraha
Widget'ı .elementor-blockquote Blok Alıntı İçeriği .elementor-blockquote__content Blok Alıntı Yazarı .elementor-blockquote__yazar Tweet Simgesi .elementor-blockquote__tweet-butonu Tweet Etiketi .elementor-blockquote__tweet etiketi
Widget'ı .elementor düğmesi Düğme Yazı .elementor-düğme-metni Düğme Simgesi .elementor-düğme-simgesi
Eyleme Çağrı
Widget'ı .elementor-cta Başlık görüntü .elementor-cta__bg kurdele .elementor-şerit Şerit Metni .elementor-şerit-iç İçerik Başlığı .elementor-cta__title Içerik açıklaması .elementor-cta__description İçerik Düğmesi .elementor-cta__button
Geri sayım
Widget'ı .elementor-geri sayım-sarmalayıcı Günler .elementor-countdown-günleri Saatler .elementor-geri sayım-saatleri dakika .elementor-geri sayım-dakikaları saniye .elementor-geri sayım-saniye geri sayım etiketi .elementor-geri sayım-etiketi
sayaç
Widget'ı .elementor-sayaç Sayı Öneki .element-sayaç-sayı-ön eki Numara .elementor-sayaç-numarası Sayı Soneki .element-sayaç-sayı-soneki Başlık .elementor-counter-başlığı
bölen
Widget'ı .eleman-bölücü Separatör .elementor-bölücü-ayırıcı Metin/Simge Öğesi .elementor-divider__element
Çevirme kutusu
Widget'ı .elementor-flip-box Ön Konteyner .elementor-flip-box__front Arka Konteyner .elementor-flip-box__back İçerik Kapsayıcı .elementor-flip-box__layer__inner İçerik Başlığı .elementor-flip-box__layer__title Içerik açıklaması .elementor-flip-box__layer__description İçerik Düğmesi .elementor-flip-box__button
Widget'ı .elementor-form Adım Konteyner .e-form__göstergeleri Adım Sayısı .e-form__göstergeler__gösterge Alan Etiketi .elementor-alan-etiketi Alan Metni .elementor-alan-metinsel Metin Alanı Etiketi .elementor-alan-tipi-metin Metin Alanı Alanı Etiketi .elementor-alan-türü-metin alanı E-posta Alan Etiketi .elementor-alan-türü-e-posta URL Alan Etiketi .elementor-alan-türü-url Tel Alan Etiketi .elementor-alan-tipi-tel Radyo Alanı Etiketi .elementor-alan tipi-radyo Alan Etiketini Seçin .elementor-alan-tipi-seçimi Onay Kutusu Alan Etiketi .elementor-field-type-onay kutusu Alan Etiketi Kabulü .elementor-alan tipi-kabul Tarih Alanı Etiketi .elementor-alan-türü-tarih Zaman Alanı Etiketi .elementor-alan-tipi-zaman Sayı Alanı Etiketi .element-alan-tür-sayı Dosya Yükleme Alanı Etiketi .elementor-alan tipi-yükleme Sonraki düğmesi e-form__buttons__wrapper__button-sonraki Önceki Düğme .e-form__buttons__wrapper__button-önceki Düğmesi Gönder .elementor düğmesi
Galeri
Galeri Başlığı (Birden Fazla Galeri için) .elementor-galeri-başlığı Galeri Öğesi .elementor-galeri-öğesi Açıklama (Yer Paylaşımında) .elementor-galeri-item__description
Başlık
Widget'ı .elementor-başlık-başlık
ikon
Widget'ı .elementor-simgesi
simge Kutusu
Widget'ı .elementor-icon-box-sarmalayıcı ikon .elementor-simgesi İçerik Kapsayıcı .elementor-icon-box-içeriği İçerik Başlığı .elementor-icon-box-başlığı Içerik açıklaması .elementor-icon-box-açıklama
Simge Listesi
Liste Simgesi .elementor-icon-liste-simgesi Liste Metni .elementor-simge-liste-metni
Resim
Resim img Başlık .wp-altyazı-metin
Görüntü kutusu
Resim .elementor-resim-kutusu-img MetinKabı .elementor-görüntü-kutusu-içeriği İçerik Başlığı .elementor-resim-kutusu-başlığı Içerik açıklaması elementor-görüntü-kutusu-açıklama
Görüntü Carousel
ImageContainer .swiper-slayt Resim Öğesi .swiper-slayt-resmi Sayfalandırma Konteyneri .swiper-sayfalama Nokta Sayfalandırma .swiper-sayfalama-mermi Önceki Simge .elementor-swiper-düğmesi-önceki Sonraki .elementor-swiper-button-sonraki Görüntü Başlık .elementor-image-carousel-caption
Medya Öğesi .elementor-atlıkarınca-görüntü Medya Öğesi Yerleşimi .elementor-atlıkarınca-görüntü-yer paylaşımı Nokta Sayfalandırma .swiper-sayfalama-fraksiyonu Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ Kesir Sayfalandırma .swiper-sayfalama-fraksiyonu İlerleme Çubuğu Sayfalandırması .swiper-sayfalama-ilerleme çubuğu İlerleme Çubuğu Sayfalandırma Doldurma .swiper-sayfalandırma-ilerleme çubuğu-doldurma
Mobil Menü Geçişi .elementor-menü-geçiş Mobil Menü Simgesi .eicon-menü-bar Normal Menü .elementor-nav-menüsü Yıkılmak .elementor-nav-menü–açılır menü Alt Menülü Menü Öğesi .elementor-item.has-altmenüsü Alt Menü Öğesi .elementor-alt öğe
Widget'ı .elementor-ödeme-düğmesi PayPal Düğme Simgesi .elementor-düğme-simgesi PayPal Düğme Metni .elementor-düğme-metni
Portföyümüz
Portföy kalemi .elementor-portföy-öğesi Yer Paylaşımlı Portföy Öğesi .elementor-portföy-öğesi__overlay Yer Paylaşımlı Başlık .elementor-portföy-item__title Portföy Filtresi .elementor-portfolio__filter
Yanıt Başlığı .yorum-cevap-başlık Nasıl Form Alanı .yorum-formu Yorum Formu .yorum-form-yorum Düğmesi Gönder .form-gönder
Gönderi Bilgisi
Widget'ı .elementor-post-bilgi Avatar .elementor-avatar Simge Listesi .elementor-icon-liste-simgesi Simge Metni .elementor-simge-liste-metni
Gezinme Sonrası
Widget'ı .elementor-post-navigasyon Önceki Simge .post-navigation__arrow-önceki Önceki Etiket .post-navigation__prev–etiket Önceki Yazı Başlığı .post-navigation__prev–başlık Sonraki Simge .post-navigation__arrow-sonraki sonraki etiket .post-navigation__sonraki–etiket Sonraki Yazı Başlığı .post-navigation__next–başlık
Mesajlar
Öğe Gönder .elementor-post <span style="color:white">Resim</span> .elementor-post__thumbnail Kart Görünümünde Rozet .elementor-post__rozeti Kart Görünümünde Avatar resim.avatar Metin İçeriği Alanı .elementor-post__text Yazı başlığı .elementor-post__title mesaja Alıntı .elementor-post__alıntı Devamını Oku .elementor-post__read-more Meta Alanı Sonrası .elementor-post__meta-veri Posta tarihi .elementor-post-tarih Yazı yazarı .elementor-post-yazar Posta zamanı .elementor-zaman sonrası Yorum Ekle .elementor-post-avatar Sayfalara numara koyma .elementor-sayfalama Önceki Etiket .sayfa numaraları.önceki sonraki etiket .sayfa numaraları.sonraki Sayfa Numarası .sayfa numaraları Etkin Sayfalandırma Numarası .sayfa-numaraları.geçerli Daha Fazla Yükle Düğmesi .elementor-düğme-bağlantısı Daha Fazla Düğme Yükle Simgesi .elementor-düğme-simgesi
Yazı başlığı
Widget'ı .elementor-başlık-başlık
Fiyat listesi
Widget'ı .elementor-fiyat listesi Liste Öğesi .elementor-fiyat-listesi-öğesi Liste Öğesi Resmi .elementor-fiyat-listesi-resmi Liste Öğesi Metni .elementor-fiyat-listesi-metni Liste Öğesi Başlığı .elementor-fiyat-listesi-başlığı Liste Öğesi Başlığı .elementor-fiyat-listesi-başlığı Liste Öğesi Ayırıcı .elementor-fiyat-listesi-ayırıcı Liste Öğesi Fiyatı .elementor-fiyat-liste-fiyatı Liste Öğesi Açıklama .elementor-fiyat-listesi-açıklama
Fiyat Tablosu
Widget'ı .elementor-fiyat-tablosu Tablo Başlığı .elementor-fiyat tablosu__header Tablo Başlığı Başlığı .elementor-fiyat tablosu__başlık Tablo Başlığı Açıklama .elementor-fiyat tablosu__alt başlık Ücret .elementor-fiyat tablosu__price Para birimi .elementor-fiyat-tablosu__para birimi Fiyat Sonrası Sayı .elementor-fiyat-tablosu__son-fiyat Fiyatlandırma Dönemi .elementor-fiyat tablosu__dönem Özellik Listesi Alanı .element-price-table__features-list Özellik Listesi Öğesi .elementor-fiyat-tablo__özellik-inner Masa Altlığı .elementor-fiyat tablosu__footer Tablo Altbilgi Düğmesi .elementor-fiyat tablosu__button Tablo Altbilgi Metni .elementor-fiyat-tablosu__additional_info kurdele .elementor-fiyat tablosu__ribbon iç şerit .elementor-fiyat tablosu__şerit-iç
İlerleme Çubuğu
İlerleme Çubuğu .elementor-ilerleme çubuğu İlerleme Arka Planı .elementor-ilerleme-sarmalayıcı İlerleme Başlığı .eleman-başlığı İlerleme İç Metni .elementor-ilerleme-metni İlerleme Yüzdesi .elementor-ilerleme-yüzdesi
İlerleme İzleyici
Widget'ı .elementor-kaydırma-izleyici Ilerleme .mevcut-ilerleme-yüzdesi
Yorumları
Widget'ı .elementor-swiper Öğeyi İncele .swiper-slayt İnceleme Başlığı .elementor-referans__header Resim İnceleyici .elementor-tanıklık__image İnceleyen Adı .elementor-referans__name Hakem Başlığı .elementor-tanıklık__title Referans İçeriği .elementor-tanıklık__content Referans Metni .elementor-tanıklık__text Nokta Sayfalandırma .swiper-sayfalama-mermi Kesir Sayfalandırma .swiper-sayfalama-fraksiyonu Kesir Sayfalandırma Akımı .swiper-sayfalama-akımı Kesir Sayfalandırma Toplamı .swiper-sayfalama-toplam İlerleme Çubuğu Sayfalandırması .swiper-sayfalama-ilerleme çubuğu İlerleme Çubuğu Sayfalandırma Doldurma .swiper-sayfalandırma-ilerleme çubuğu-doldurma Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ
Düğme Öğesi .elementor-share-btn Düğme Simgesi .elementor-share-btn__icon Düğme Yazı .elementor-share-btn__text
Slaytlar
Widget'ı .elementor-slayt-sarmalayıcı İçerik alanı .swiper-slide-içeriği İçerik Başlığı .elementor-slayt başlığı Içerik açıklaması .elementor-slayt-açıklama İçerik Düğmesi .elementor-slayt düğmesi Nokta Sayfalandırma .swiper-sayfalama-mermi Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ
Sosyal Simgeler
Widget'ı .elementor-social-simgeler-sarmalayıcı Simge Öğesi .elementor-sosyal-ikon
Star Rating
Widget'ı .elementor-yıldız derecelendirmesi__wrapper Reyting Başlığı .elementor-yıldız derecelendirmesi__title Yıldız Simgesi Alanı .elementor-yıldız derecelendirmesi Dolu Yıldız Simgesi .elementor-yıldız-dolu Yarım Dolu Yıldız Simgesi .elementor-yıldız-5 Boş Yıldız Simgesi .elementor-yıldız-boş
İçindekiler
Widget'ı .elementor-widget-konteyner ToC Başlığı .elementor-toc__başlık ToC Başlık Başlığı .elementor-toc__header-başlık Genişlet Düğmesi .elementor-toc__toggle-button–genişlet Daralt Düğmesi .elementor-toc__toggle-button–genişlet ToC Gövdesi .elementor-toc__body ToC Liste Öğesi .elementor-toc__list-öğesi ToC Üst Düzey .elementor-toc__list-item-text.elementor-toc__üst düzey
Sekmeler
Widget'ı .elementor-sekmeleri Sekme Başlığı .elementor-tab-başlığı Tab Content .elementor-sekme-içeriği
Testimonial
Widget'ı .elementor-referans-sarmalayıcı Referans İçeriği .elementor-referans-içerik referans metası .elementor-referans-meta Avatar Görüşü .elementor-referans-resmi Referans Adı ve İş Unvanı .elementor-referans-detaylar Referans Adı .elementor-referans-adı Referans İş Unvanı .elementor-referans-iş
Referans Döngüsü
Widget'ı .elementor-widget-konteyner Referans Slayt Öğesi .elementor-referans Referans İçeriği .elementor-tanıklık__content referans metası .elementor-tanıklık__footer Avatar Görüşü .elementor-tanıklık__image Referans Adı ve İş Unvanı .elementor-tanıklık__cite Referans Adı .elementor-referans__name Referans İş Unvanı .elementor-tanıklık__title Nokta Sayfalandırma .swiper-sayfalama-mermi Kesir Sayfalandırma .swiper-sayfalama-fraksiyonu Kesir Sayfalandırma Akımı .swiper-sayfalama-akımı Kesir Sayfalandırma Toplamı .swiper-sayfalama-toplam İlerleme Çubuğu Sayfalandırması .swiper-sayfalama-ilerleme çubuğu İlerleme Çubuğu Sayfalandırma Doldurma .swiper-sayfalandırma-ilerleme çubuğu-doldurma Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ
Metin düzeltici
Widget'ı .elementor-metin-editörü
Toggle
Widget'ı .elementor-geçiş Öğeyi Aç/Kapat .elementor-geçiş-öğesi Öğe Başlığını Aç/Kapat .elementor-tab-başlığı Öğe İçeriğini Aç/Kapat .elementor-sekme-içeriği Simgeyi Değiştir .elementor-geçiş-simgesi Simge Kapatıldı .elementor-toggle-icon-kapalı Simgeyi Aç/Kapat .elementor-toggle-icon-açıldı
Elementor, her bir widget için çok sayıda stil seçeneği sunsa da, özel CSS ile bunun ötesine geçebilirsiniz. Özel CSS aracılığıyla bir pencere bileşenine (veya öğelerine) özel bir stil uygulamak için ilgili pencere öğesinin seçicisini bilmeniz gerekir.
Diğer Elementor kaynakları:
Seçicisini bulmak için canlı bir sayfada bir widget'ı inceleyebilirsiniz. Size zaman kazandırmak için Elementor'un widget seçiciler listesini oluşturduk, böylece her widget'ı kendiniz incelemek zorunda kalmazsınız.
Sonuç
Yani! Size Elementor widget seçicilerinin listesini az önce tanıttık. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize içinde bildirin. Yorumlar
Ancak, ayrıca kaynaklarımız WordPress blog oluşturma Divi: Tüm zamanların en iyi WordPress teması
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş
...
Bunu severim : gibi Yükleniyor ...
Benzer öğeler
