Elementor Pro'da bulunan özelliklerden biri, özel CSS ekleme yeteneğidir ( Okuyun: Elementor Free vs Pro). Bu özellik, istediğiniz stil ayar seçenekleri listesinde bulunmadığında herhangi bir stili uygulayabileceğiniz için ötesine geçmenize olanak tanır. Belirli bir Elementor widget'ına (veya widget'ın öğelerine) özel CSS aracılığıyla özel stil eklemek için ilgili widget'ın seçicisini bilmeniz gerekir. İşinizi kolaylaştırmak için Elementor widget seçicilerinin listesini topladık.
Her Elementor widget'ında ve öğelerinde, belirli bir stil elde etmek için özel CSS eklemek istediğinizde ilişkili widget'ı hedeflemek için kullanabileceğiniz bir CSS seçici bulunur. Özel CSS'yi eklemek istediğiniz widget'ı inceleyerek seçiciyi anlayabilirsiniz.
Bir widget'ı incelemek yalnızca canlı bir sayfada yapılabileceğinden, her birini incelemek 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 gerçekleştirebilirsiniz. Özel bir CSS uygulamak için simgeyi veya metni hedefleyebilirsiniz.
İlk olarak, hedeflemek istediğiniz öğenin seçicisini seçin (örneğin, düğme simgesi). Elementor ayarları panelinde Gelişmiş sekmesine gidin ve Özel CSS bloğunu açın.
Özel CSS alanına selector [selector name] {} yazın. İşte örnek.
Ardından, CSS içeriğinizi (bildirim) küme parantezlerinin içine ekleyin. İşte örnek.
Elementor Widget Seçici Listesi Akordeon Uyarı Hareketli Başlık Arşiv Açıklaması Arşiv Yazıları Yazar Kutusu Temel Galeri blok alıntı Buton Eylem çağrısı geri sayım Tezgah bölücü Çevirme Kutusu Biçim Galeri Başlık Simge Simge Kutusu resim Resim Kutusu Görüntü Döngüsü Medya Karusel Gezinti Menüsü PayPal Düğmesi portföy Yorum göndermek Gönderi Bilgileri Navigasyon gönderisi Gönderiler Yazı başlığı Fiyat listesi Fiyat Tablosu İlerleme çubuğu İlerleme İzleyici İncelemeler Düğmeleri Paylaş Slaytlar Sosyal Simgeler Yıldız Derecelendirmesi İçindekiler Sekmeler referans Referans Döngüsü Metin düzeltici Aç/Kapat Akordeon Widget'ı .elementor-akordeon Akordeon Başlığı .elementor-akordeon-başlık Akordeon Açıklama .elementor-sekme-içeriği Akordeon Simgesi Açık .elementor-akordeon-ikon Akordeon Simgesi Kapalı .elementor-akordeon-ikon-kapalı
Uyarı Widget'ı .elementor-uyarı Uyarı Başlığı .elementor-uyarı-başlığı Uyarı Açıklaması .elementor-alert-description Kapat Simgesi .elementor-alert-dismiss
Hareketli 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-container Öğe Gönder .elementor-ızgara-öğesi Özellikli resim .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 Alıntı Gönder .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-post-time Yorum Gönder .elementor-post-avatar sayfalandırma .elementor-sayfalama Önceki Etiket .page-numbers.prev Sonraki Etiket .page-numbers.next 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 Biyografisi .elementor-yazar-box__bio Arşiv Düğmesi .elementor-author-box__button
Temel Galeri Widget'ı .elementor-resim-galeri Galeri Öğesi .gallery-öğesi Altyazı .wp-caption-text
blok alıntı Widget'ı .elementor-blockquote Blok Alıntı İçeriği .elementor-blockquote__content Blok Alıntı Yazarı .elementor-blockquote__author Tweet Simgesi .elementor-blockquote__tweet-butonu Tweet Etiketi .elementor-blockquote__tweet-label
Buton Widget'ı .elementor-düğmesi Düğme Metni .elementor-düğme-metni Düğme Simgesi .elementor-düğme-simgesi
Eylem çağrısı 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-countdown-wrapper Günler .elementor-countdown-günleri Saat .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
Tezgah Widget'ı .elementor-sayaç Sayı Öneki .elementor-sayaç-sayı-ön eki Sayı .elementor-sayaç-numarası Sayı Soneki .elementor-sayaç-sayı-soneki Başlık .elementor-counter-title
bölücü Widget'ı .eleman-bölücü Ayırıcı .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
Biçim Widget'ı .elementor-form Adım Konteyner .e-form__göstergeleri Adım Sayısı .e-form__indicators__indicator Alan Etiketi .elementor-alan-etiketi Alan Metni .elementor-alan-metinsel Metin Alanı Etiketi .elementor-alan-türü-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-alan-türü-onay kutusu Kabul Alanı Etiketi .elementor-alan-tipi-kabul Tarih Alanı Etiketi .elementor-alan-türü-tarih Zaman Alanı Etiketi .elementor-alan-tipi-zaman Sayı Alanı Etiketi .elementor-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 Gönder Düğmesi .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
Simge Widget'ı .elementor-simgesi
Simge Kutusu Widget'ı .elementor-icon-box-wrapper Simge .elementor-simgesi İçerik Kapsayıcı .elementor-icon-box-içeriği İçerik Başlığı .elementor-icon-box-title Içerik açıklaması .elementor-icon-box-açıklama
Simge Listesi Liste Simgesi .elementor-icon-list-icon Liste Metni .elementor-icon-list-text
resim resim resim Altyazı .wp-caption-text
Resim Kutusu resim .elementor-image-box-img Metin İçeriği Kabı .elementor-image-box-content İçerik Başlığı .elementor-image-box-title Içerik açıklaması elementor-görüntü-kutusu-açıklama
Görüntü Döngüsü Görüntü Kapsayıcı .swiper-slayt Resim Öğesi .swiper-slide-image Sayfalandırma Konteyneri .swiper-sayfalama Sayfalandırma Noktaları .swiper-sayfalama-madde işareti Önceki Simge .elementor-swiper-button-prev Sonraki .elementor-swiper-button-sonraki Resim Altyazısı .elementor-image-carousel-caption
Medya Karusel Medya Öğesi .elementor-carousel-image Medya Öğesi Yerleşimi .elementor-carousel-image-overlay 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-pagination-progressbar-fill
Gezinti Menüsü 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
PayPal Düğmesi Widget'ı .elementor-ödeme-düğmesi PayPal Düğme Simgesi .elementor-düğme-simgesi PayPal Düğme Metni .elementor-düğme-metni
portföy Portföy Öğesi .elementor-portföy-öğesi Yer Paylaşımlı Portföy Öğesi .elementor-portfolio-item__overlay Yer Paylaşımlı Başlık .elementor-portfolio-item__title Portföy Filtresi .elementor-portfolio__filter
Yorum göndermek Yanıt Başlığı .yorum-cevap-başlık Yorum Formu Alanı .yorum-formu Yorum Formu .yorum-form-yorum Gönder Düğmesi .form-gönder
Gönderi Bilgileri Widget'ı .elementor-post-bilgi avatar resim Simge Listesi .elementor-icon-list-icon Simge Metni .elementor-icon-list-text
Navigasyon gönderisi Widget'ı .elementor-post-navigasyon Önceki Simge .post-navigation__arrow-prev Önceki Etiket .post-navigation__prev–label Önceki Yazı Başlığı .post-navigation__prev–title Sonraki Simge .post-navigation__arrow-next Sonraki Etiket .post-navigation__next–label Sonraki Yazı Başlığı .post-navigation__next–title
Gönderiler Öğe Gönder .elementor-post Özellikli resim .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 Alıntı Gönder .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-post-time Yorum Gönder .elementor-post-avatar sayfalandırma .elementor-sayfalama Önceki Etiket .page-numbers.prev Sonraki Etiket .page-numbers.next 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-price-table__header Tablo Başlığı Başlığı .elementor-price-table__heading Tablo Başlığı Açıklama .elementor-price-table__subheading Fiyat .elementor-price-table__price Para birimi .elementor-price-table__currency Fiyat Sonrası Sayı .elementor-price-table__after-price Fiyatlandırma Dönemi .elementor-price-table__period Özellik Listesi Alanı .elementor-price-table__features-liste Özellik Listesi Öğesi .elementor-fiyat-tablo__özellik-inner Tablo Altbilgisi .elementor-price-table__footer Tablo Altbilgi Düğmesi .elementor-price-table__button Tablo Altbilgi Metni .elementor-price-table__additional_info Kurdele .elementor-price-table__ribbon iç şerit .elementor-price-table__ribbon-inner
İ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 İlerlemek .akım-ilerleme-yüzdesi
İncelemeler Widget'ı .elementor-swiper Öğeyi İncele .swiper-slayt İnceleme Başlığı .elementor-testimonial__header İnceleyen Resmi .elementor-testimonial__image İnceleyen Adı .elementor-testimonial__name Hakem Başlığı .elementor-testimonial__title Referans İçeriği .elementor-testimonial__content Referans Metni .elementor-testimonial__text Nokta Sayfalandırma .swiper-sayfalama-madde işareti 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-pagination-progressbar-fill Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ
Düğmeleri Paylaş Düğme Öğesi .elementor-share-btn Düğme Simgesi .elementor-share-btn__icon Düğme Metni .elementor-share-btn__text
Slaytlar Widget'ı .elementor-slayt-sarmalayıcı İçerik alanı .swiper-slide-içeriği İçerik Başlığı .elementor-slide-heading Içerik açıklaması .elementor-slayt-açıklama İçerik Düğmesi .elementor-slayt düğmesi Nokta Sayfalandırma .swiper-sayfalama-madde işareti Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ
Sosyal Simgeler Widget'ı .elementor-sosyal-icon-sarmalayıcı Simge Öğesi .elementor-sosyal-ikon
Yıldız Derecelendirmesi Widget'ı .elementor-star-rating__wrapper Derecelendirme Başlığı .elementor-star-rating__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-container ToC Başlığı .elementor-toc__header ToC Başlık Başlığı .elementor-toc__header-title 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-sekme-başlığı Sekme İçeriği .elementor-sekme-içeriği
referans Widget'ı .elementor-referans-sarmalayıcı Referans İçeriği .elementor-referans-içerik referans metası .elementor-referans-meta Referans Avatarı .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-container Referans Slayt Öğesi .elementor-referans Referans İçeriği .elementor-testimonial__content referans metası .elementor-testimonial__footer Referans Avatarı .elementor-testimonial__image Referans Adı ve İş Unvanı .elementor-testimonial__cite Referans Adı .elementor-testimonial__name Referans İş Unvanı .elementor-testimonial__title Nokta Sayfalandırma .swiper-sayfalama-madde işareti 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-pagination-progressbar-fill Önceki Düğme .eicon-chevron-sol Sonraki düğmesi .eicon-chevron-sağ
Metin düzeltici Widget'ı .elementor-metin-editörü
Aç/Kapat Widget'ı .elementor-geçiş Öğeyi Aç/Kapat .elementor-geçiş-öğesi Öğe Başlığını Aç/Kapat .elementor-sekme-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ı
Alt çizgi Elementor, her bir widget için çok sayıda stil seçeneği sunarken, özel CSS ile ö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. Seçicisini bulmak için canlı bir sayfada bir widget'ı inceleyebilirsiniz. Size zaman kazandırmak için, her bir widget'ı tek tek incelemek zorunda kalmamanız için Elementor widget seçicilerinin listesini oluşturduk.
