Elementor'da Özel CSS nasıl eklenir: 4 Kolay Yöntem

Elementor'da Özel CSS eklemenin yollarını mı arıyorsunuz?

Özel CSS ekleyerek zaten şaşırtıcı olan Elementor tasarımlarını genişletmek, rakiplerinize karşı yenilmez bir avantaj sağlayabilir.

Öyleyse, neden bazı Elementor özel CSS kullanmıyorsunuz ve bu son derece rekabetçi dijital dünyanın kalabalığında öne çıkmıyorsunuz, değil mi?

Yapmaman için hiçbir sebep yok.

Ancak, sürükle ve bırak Elementor sayfa oluşturucusuna özel CSS nasıl eklenir?

Elementor'a birçok şekilde özel CSS ekleyebilirsiniz. Elementor'da özel CSS'nin nasıl ekleneceği hakkında daha fazla ayrıntı öğrenmek için okumaya devam edin…

CSS nedir?

CSS (Basamaklı Stil Sayfaları), HTML veya XML gibi bir biçimlendirme diliyle oluşturulmuş web sayfalarının düzenini ve görünümünü değiştirmek için kullanılan kural tabanlı bir stil sayfası dilidir. CSS kullanmak, web tasarımının etkili bir yoludur, çünkü hem içeriği hem de stili ayrı bir dosyada tutar ve size en fazla esnekliği ve kullanım kolaylığını verir.

Elementor sitesine neden özel CSS eklemelisiniz ?

Bu zorunlu değil çünkü Elementor güzel web siteleri oluşturmak için ihtiyacınız olan tüm özelleştirme seçeneklerini sağlıyor. Ancak, kodlamayı bilen biriyseniz ve sitenin görünümünü geliştirmek için yaratıcılığınızı kullanmak istiyorsanız, Elementor'a Özel CSS ekleyebilirsiniz.

• Elementor'da özel CSS kullanarak yeni bir stil uygulamak için temanın stilini geçersiz kılabilirsiniz. Diyelim ki, temanızın sağladığı bir sayfanın tüm görünümünü beğendiniz, ancak bir bölümde mizanpajı biraz değiştirmek istiyorsunuz, o zaman bunu yapmak için Elementor özel CSS'sinin yardımını alabilirsiniz.

• Benzer şekilde, özel CSS kod parçacıklarını kullanarak Elementor hazır şablonunun tasarımını da geçersiz kılabilirsiniz.

• Ayrıca Elementor'a özel CSS kod parçacıkları ekleyerek web sitenizi farklı cihazlarda farklı görünecek şekilde özel olarak tasarlayabilirsiniz.

Elementor'da özel CSS nasıl eklenir: 3 Farklı Yöntem

Özel CSS eklemek hiç de zor bir iş değil. Aslında, çeşitli yöntemler kullanarak Elementor'a özel CSS ekleyebilirsiniz. Burada sizinle Elementor özel CSS eklemenin en güvenli 4 yolunu paylaşıyorum.

Elementor'un Özel CSS Kod Parçacıklarını kullanarak CSS ekleyin

Elementor, bölümlerinize, sütunlarınıza ve widget'larınıza özel CSS eklemek için gelişmiş bir seçenek sunar. Ancak bu seçenek yalnızca Elementor Pro ile kullanılabilir.

Elementor web sitenizin herhangi bir bölümüne/iç bölümüne özel CSS eklemek için, düzenleme moduna gitmek için Altı Nokta'ya tıklayın , ardından Gelişmiş sekmesine gidin ⇒ Özel CSS . Şimdi Özel CSS sekmesini genişletin ve özel kodunuzu ekleyin.

Benzer şekilde, Elementor widget'larına da özel CSS ekleyebilirsiniz. Bunun için, düzenleme moduna gitmek için widget'a tıklayın, ardından Gelişmiş sekmesine gidin ⇒ Özel CSS. Şimdi Özel CSS sekmesini genişletin ve özel kodunuzu ekleyin.

Elementor özel CSS eklemek için HTML widget'ını kullanın

WordPress web sitenize Elementor özel CSS eklemek için kullanabileceğiniz ikinci seçenek, HTML widget'ını kullanmaktır. Bu seçenek için, HTML widget'ını sürükleyip bırakmanız ve ardından CSS kodunuzu bir Stil etiketine eklemeniz yeterlidir.

Not: HTML etiketini kullanarak hem satır içi hem de bağımsız CSS ekleyebilirsiniz. Ve merak etmeyin sadece stiller siteye yansıyacak, ham kod görünmeyecek.

Elementor site ayarlarında özel CSS ekleyin

Ayrıca site ayarları seçeneğini kullanarak Elementor'a özel CSS ekleyebilirsiniz. Global site ayar seçeneklerine erişmek için sol üst köşedeki hamburger menüsüne ve ardından ayarlar altında Site ayarları seçeneğine tıklayın.

Şimdi Özel CSS seçeneğine gidin, sekmeyi açın ve özel stillerinizi buraya ekleyin.

WordPress özelleştirme ayarlarından Elementor'a özel CSS ekleyin

Özel CSS eklemek için Elementor tarafından verilen seçenekleri kullanmanız gerekmez. Özel CSS eklemek için WordPress özelleştirme seçeneklerini de kullanabilirsiniz.

Bunun için WordPress Kontrol Paneli ⇒ Görünüm ⇒ Özelleştir'e gidin.

Artık WordPress sitenizi özelleştirmek için kullanabileceğiniz birçok ayar bulacaksınız. Sitenize özel CSS eklemek için aşağı kaydırın ve Ek CSS sekmesini açın.

Elementor özel CSS'sinin çalışmaması sorunu nasıl düzeltilir

Bazen Elementor'a özel CSS eklemek, bazı teknik sorunlar nedeniyle siteye hemen yansımayabilir. Bu sorunu çözmek için uygulayabileceğiniz adımlar şunlardır:

CSS'yi yeniden oluştur

CSS'yi yeniden oluşturmak bu sorunu çözebilir. CSS'yi yeniden oluşturmak için Elementor ⇒ Araçlar'a gidin ve CSS ve Verileri Yeniden Oluştur'a ve ardından Değişiklikleri kaydet'e tıklayın.

Web Sitesi Önbelleğini ve Tarayıcı Önbelleğini Temizle

Herhangi bir WordPress önbellek eklentisiyle web sitesinin önbelleğini temizleyin. Varsa, herhangi bir sunucu düzeyinde önbelleği de temizleyebilirsiniz. Web sitesi önbelleğini temizledikten sonra, CSS'nin çalışıp çalışmadığını kontrol etmek için tarayıcı önbelleğinizi temizleyin ve siteyi yenileyin.

Tema Uyumsuzluğu

Bazen Elementor tema uyumsuzluğu, özel CSS'nin ön uçta görünmemesinin nedeni olabilir. CSS'nin çalışıp çalışmadığını kontrol etmek için herhangi bir varsayılan temaya geçmeyi deneyebilir, css ön uçta varsayılan bir temayla görünüyorsa, tema geliştiricinizle uyumluluk sorunu hakkında konuşabilirsiniz.

Elementor ile birlikte başka bir sayfa oluşturucu kullanma

Aynı anda birden çok sayfa oluşturucu kullanmak, özel CSS'nizin çalışmamasına neden olabilir. Bunun basit nedeni, farklı sayfa oluşturuculardan gelen CSS'nin birbiriyle çakışabilmesi ve diğer sayfa oluşturucunun Elementor özel CSS'sini geçersiz kılabilmesidir. Bu gibi durumlarda, yalnızca Elementor sayfa oluşturucuyu kullanmalısınız.

Sıkça Sorulan Sorular

Cevapları ile Elementor özel CSS ile ilgili en popüler sorulardan bazılarına göz atın:

Elementor'da özel CSS'yi nasıl kullanırım?

Elementor'a özel CSS'yi 4 şekilde ekleyebilirsiniz. Bu yollar HTML bloğu, Elementor Özel CSS pasajı, WordPress özelleştirme seçenekleri ve Elementor Site oluşturma ayarlarını kullanmaktır.

Elementor'a özel CSS'yi ücretsiz olarak nasıl ekleyebilirim?

WordPress özelleştirme seçeneklerinden Elementor web sitesine ücretsiz olarak özel CSS ekleyebilirsiniz.

Elementor özel CSS ile tamamlama

Artık Elementor'da özel CSS eklemek için kullanabileceğiniz 4 yolu biliyorsunuz. Hepsini kullanabilirken, CSS öncelik hiyerarşisini aklınızda bulundurmalısınız. Örneğin, bir satır içi stil, sayfa düzeyinde veya web sitesi düzeyinde yazılan CSS'ye göre her zaman daha fazla önceliğe sahip olacaktır.

Bu nedenle, CSS'yi çok iyi bildiğinizde yalnızca özel CSS kullanmanızı öneririm. Aksi takdirde, yarardan çok zarar verebilir ve web sitenizin görünümünü ve düzenini bozabilirsiniz.

Bunu söyledikten sonra, bir CSS uzmanıysanız, endişelenecek bir şeyiniz yok, web sitenizin görünümünü başarılı bir şekilde değiştirmek için özel CSS'nizi eklemek için bu blogda açıklanan yöntemleri kullanmaktan çekinmeyin.