Elementor için 14 Yararlı CSS Parçacığı
Yayınlanan: 2022-12-13Elementor'un sunduğu yerleşik stil seçenekleri, profesyonel sayfalar oluşturmak için fazlasıyla yeterli. Uygulamak istediğiniz belirli bir stil varsa, ancak Elementor'da mevcut değilse, bunu özel CSS ile elde edebilirsiniz.
En basit örnek. Elementor, daha fazlasını oku bağlantısının görünümünü birçok web sitesi tarafından benimsenen düğme benzeri bir görünüme dönüştürmek için yerleşik stil seçenekleri sunmaz. Bunu başarmak için, daha fazlasını oku bağlantısını bir düğme benzeri hale getiren CSS snippet'ini eklemeniz gerekir. Özel CSS'nin kendisini eklemek için ayarlar panelindeki Gelişmiş sekmesine gidebilirsiniz. Özel CSS bloğundaki kullanılabilir alana CSS kodunu ekleyebilirsiniz.
Tüm Elementor öğe türlerine özel CSS ekleyebilirsiniz. Bölümden, sütuna, widget'a.
Elementor'da, her pencere öğesi ve onun destekleyici öğeleri (örneğin, gönderi başlığı, gönderi metası ve Gönderiler parçacığında öne çıkan resim) bir sınıf seçiciye sahiptir (Elementor parçacığı seçicileri listesine bakın). Belirli bir parçacığı veya pencere öğesinin öğelerini hedeflemek için, selector ve ardından sınıf adını yazarak başlayabilirsiniz (örn .elementor-post__read-more ). Ardından, süslü parantezler arasına özel stili ekleyebilirsiniz. Örnek:
seçici .elementor-post__read-more{
dolgu: 0,4em 0,8em;
arka plan: #33ff41;
geçiş: tüm .5'ler;
sınır yarıçapı: 5px;
} Yukarıdaki kod parçacığı, daha fazlasını oku bağlantısını bir düğme benzeri hale getirecektir. İlk olarak, daha fazla oku öğesini ( selector .elementor-post__read-more ) hedefler. Ardından, kıvrık parantezler arasındaki içerik aracılığıyla daha fazla oku öğesine özel stili ekler (daha fazla oku öğesini Gönderiler pencere öğesinde ve Arşiv pencere öğesinde bulabilirsiniz). CSS'de, süslü parantezler arasındaki içeriğe bildirim denir.
Son zamanlarda, bazı widget'lara CSS parçacıkları eklememizi gerektiren bazı projeler üzerinde çalıştık ve bunları bu gönderide sizinle paylaşacağız. Her yeni CSS parçacığı aldığımızda bu gönderiyi düzenli olarak güncelleyeceğiz.
Elementor için Ücretsiz CSS Parçacıkları
1. Devamını Oku Bağlantısını Düğmeye Benzer Hale Getirme
kod:
seçici .elementor-post__read-more {
dolgu: 0,3em 0,8em;
renk: #ffffff!önemli;
kenarlık: katı 1 piksel #01B37E;
satır yüksekliği: 2em;
arka plan: #01B37E;
geçiş: tüm .5'ler;
sınır yarıçapı: 15px;
yazı tipi ağırlığı: 500;
}
/* Üzerinde gezinme */
seçici .elementor-post__read-more:hover{
dolgu: 0,3em 0,8em;
renk: #01B37E!önemli;
kenarlık: katı 1 piksel #01B37E;
satır yüksekliği: 2em;
arka plan: #ffffff;
geçiş: tüm .5'ler;
sınır yarıçapı: 15px;
yazı tipi ağırlığı: 500;
}Yukarıdaki kodu, daha fazlasını oku öğesini içeren Gönderiler widget'ında ve Gönderileri Arşivle widget'ında kullanabilirsiniz.
2. Numaralandırılmış Sayfalandırmaya Gelişmiş Stil Ekleme
kod:
/*normal durum*/
seçici .elementor-pagination{
kenar boşluğu: 50 piksel;
}
seçici .sayfa numaraları{
dolgu: 10 piksel 15 piksel;
renk:#FFFFFF!önemli;
arka plan: #0161cd;
geçiş: tüm .5'ler;
sınır yarıçapı: 20px;
}
/* üzerine gelme durumu */
seçici .page-numbers:hover{
dolgu: 10 piksel 15 piksel;
renk:#384958!önemli;
arka plan: #edf2f7;
geçiş: tüm .5'ler;
sınır yarıçapı: 20px;
}
/* aktif durum */
seçici .page-numbers.current{
dolgu: 10 piksel 15 piksel;
renk:#384958!önemli;
arka plan: #f0f3f6;
geçiş: tüm .5'ler;
sınır yarıçapı: 20px;
}Yukarıdaki kodu, sayfalandırma öğesine sahip Gönderiler widget'ında ve Arşiv Gönderileri widget'ında kullanabilirsiniz. Elementor'da sayfalandırma eklemeyi öğrenmek için bir önceki yazımızı okuyabilirsiniz.
3. Bireysel Gönderi Öğelerine Vurgulu Efekti Ekleme
kod:
seçici .elementor-post:hover{
geçiş: tüm .50'ler kolay giriş;
dönüştürme: ölçek(1.01);
imleç: işaretçi;
z-endeksi: 1;
}Yukarıdaki kodu Gönderiler pencere öğesinde ve Gönderileri Arşivle pencere öğesinde de kullanabilirsiniz. Elementor'da tek tek blog yazısı öğelerine fareyle üzerine gelme efektinin nasıl ekleneceğini öğrenmek için önceki makalemizi okuyun.
4. Küçük Resim/Öne Çıkan Görüntüye Fareyle Üzerine Gelme Efekti Ekleme
kod:
seçici .elementor-post__thumbnail:hover{
geçiş: tüm .50'ler kolay giriş;
dönüştürme: ölçek(1.05);
imleç: işaretçi;
z-endeksi: 1;
}Yukarıdaki kodu Gönderiler pencere öğesinde ve Gönderileri Arşivle pencere öğesinde kullanabilirsiniz. Resmi ana gönderi ayarlarında gösterdiğinizden emin olun.
5. Gönderi Başlığına Vurgulu Efekti Ekleme
kod:
seçici .elementor-post__title{
ekran: satır içi;
}
seçici .elementor-post__title:hover{
metin süslemesi: yok;
kutu gölgesi: iç metin 0 -.5em 0 #F8C273;
renk: miras;
ekran: satır içi;
}
Yukarıdaki kodu Gönderiler widget'ında ve gönderi başlığı öğesi olan Arşiv Gönderilerinde de kullanabilirsiniz.
6. Bağlantılara Hover Efektleri Ekleme
kod:
seçici .elementor-widget-theme-post-content a:hover{
metin süslemesi: yok;
kutu gölgesi: iç metin 0 -.5em 0 #FD63FD;
renk: #B017B0;
}Elementor Theme Builder'ı kullanarak özel bir tek gönderi şablonu oluştururken İçerik Yayınla widget'ında yukarıdakileri kullanabilirsiniz. Daha fazlasını öğrenmek için bu yazıyı okuyun.
7. Post Info Widget'ında Avatar Sınır Yarıçapını Ayarlama
kod:
seçici .elementor-avatar {
kenarlık: 2 piksel katı #FFFFFF;
sınır yarıçapı: 10px;
}Bu kodu Gönderi Bilgileri widget'ında kullanabilirsiniz. Kullanmak için meta veri ayarında Avatar'ı etkinleştirdiğinizden emin olun. Daha fazlasını öğrenmek için burayı okuyun.
8. Degrade İlerleme Çubuğu Oluşturma
kod:
seçici .elementor-ilerleme çubuğu
{
arka plan: radyal gradyan(daire, rgba(7,149,238,1) %16, rgba(37,252,255,1) %70);
}İlerleme Çubuğu widget'ını kullanarak bir degrade ilerleme çubuğu oluşturmak için yukarıdaki kodu kullanabilirsiniz. Daha fazlasını öğrenmek için burayı okuyun. Daha fazla gradyan seçeneği için aşağıdaki gönderilere başvurabilirsiniz:
- Elementor için 70+ Gelişmiş Gradyan Arka Planı
- Elementor için 18 3 Renkli Degrade Arka Plan
- Elementor için 17 Pastel Degrade Arka Plan
9. Degrade Metin Oluşturma
kod:
seçici .elementor-text-editor {
arka plan görüntüsü: doğrusal gradyan(sola, #feac5e, #c779d0,#4bc0c8);
-webkit-arka plan-klip: metin;
ekran: satır içi blok;
-webkit-text-fill-color: #00000000;
}Metin Düzenleyici widget'ında yukarıdaki kodu kullanabilirsiniz. Diğer widget'larda (örn. Başlık) degrade metin oluşturmak için seçiciyi değiştirmeniz yeterlidir. Daha fazlasını öğrenmek için bu yazıyı okuyun.
10. Fareyle Üzerine Gelince Kayan Görüntü
kod:
seçici {
-webkit-geçişi: kolay giriş 4s !önemli;
geçiş: kolay giriş 4s !önemli;
}
seçici: üzerine gelin{
arka plan konumu: orta alt !önemli;
}Fareyle üzerine gelindiğinde görüntüyü otomatik olarak kaydırmak için yukarıdaki kodu kullanabilirsiniz. Açılış sayfasının, ana sayfanın, blog sayfasının vb. ekran görüntüsü gibi uzun bir ekran görüntüsünü ortaya çıkarmak için kullanışlıdır. Daha fazlasını öğrenmek için bu yazıyı okuyun.
11. Aşağı Kaydırmada Başlığı Değiştirme
kod:
.başlık-2 {
dönüştürme: çeviri(-80px);
-moz-geçiş: tüm .3'ler kolay!önemli;
-webkit-geçişi: tüm .3'ler kolay!önemli;
geçiş: tüm .3'ler kolaylık!önemli;
}
.elementor-yapışkan--efektler.başlık-2 {
yükseklik: otomatik!önemli;
dönüştür: çeviri(0px);
}
.elementor-yapışkan--efektler.başlık-1 {
görüntü: yok!önemli;
}Aşağı kaydırıldığında otomatik olarak değişen bir başlık oluşturmak ister misiniz? Evet ise, yukarıdaki kodu kullanabilirsiniz. Daha fazlasını öğrenmek için bu yazıyı okuyabilirsiniz.
12. Aşağı Kaydırıldığında Başlığı Küçültmek
kod:
header.sticky-header {
--header-height: 90px;
-- opaklık: 0,90;
--beni küçült: 0,80;
--yapışkan-arka plan rengi: #0e41e5;
--geçiş: .3 sn çıkış kolaylığı;
geçiş: arka plan rengi var(--geçiş),
arka plan resmi var(--geçiş),
zemin filtresi var(--geçiş),
opaklık var(--geçiş);
}
header.sticky-header.elementor-sticky--efektler {
arka plan rengi: var(--yapışkan-arka plan rengi) !önemli;
arka plan resmi: yok !önemli;
opaklık: var(--opaklık) !önemli;
-webkit-backdrop-filter: blur(10px);
zemin filtresi: blur(10px);
}
header.sticky-header > .elementor-container {
geçiş: minimum yükseklik var(--geçiş);
}
header.sticky-header.elementor-sticky--efektler > .elementor-container {
minimum yükseklik: calc(var(--header-height) * var(--shrink-me))!önemli;
yükseklik: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
geçiş: dolgu var(--geçiş);
}
header.sticky-header.elementor-sticky--efektler .elementor-nav-menu .elementor-item {
alt dolgu: 10px!önemli;
üst dolgu: 10px!önemli;
}
header.sticky-header > .elementor-container .logo img {
geçiş: maksimum genişlik var(--geçiş);
}
header.sticky-header.elementor-sticky--efektler .logo img {
maksimum genişlik: calc(%100 * var(--shrink-me));
}Aşağı kaydırıldığında otomatik olarak küçüldüğü ve yukarı kaydırıldığında orijinal boyutuna geri döndüğü bir başlık davranışı oluşturmak için yukarıdakini kullanabilirsiniz. Daha fazlasını öğrenmek için bu yazıyı okuyabilirsiniz.
13. Başlık Metnine Görüntü Arka Planı Ekleme
kod:
seçici .elementor-heading-title
{
arka plan: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") yeşil tekrar %30 %70 ;
-webkit-arka plan-klip:metin;
-webkit-text-fill-color:transparent;
}Heading widget'ına görüntü arka planı eklemek için yukarıdaki kodu kullanabilirsiniz. Kendi resminizi kullanmak için resim URL'sini değiştirmeniz yeterlidir. Daha fazlasını öğrenmek için bu yazıyı okuyun.
Alt çizgi
Elementor'da zaten her öğeyi şekillendirmek için birçok yerleşik seçenek var. Bölüm, sütun veya widget olabilir. Bunlar sizin için yeterli değilse, CSS bilgisine sahip olmanız koşuluyla, CSS parçacıklarını kullanarak kendi özel stilinizi uygulayabilirsiniz. Özel CSS'nin kendisini ekleme özelliği yalnızca Elementor Pro'da mevcuttur, bu nedenle özel CSS'yi eklemeden önce WordPress web sitenizde Elementor Pro'nun kurulu ve etkinleştirildiğinden emin olun ( okuyun: Elementor Free vs Pro).
Projeleriniz için aynı durumlara sahipseniz, yukarıda sağladığımız CSS parçacıklarını kullanabilirsiniz.