Son zamanlarda Elementor'un Pro sürümüne sahip olmayan okuyucularımızdan biri, web sitesine nasıl özel CSS ekleyebileceği konusunda bize meydan okudu.
Sorun biraz daha karmaşık olduğundan, birkaç kullanıcının bu sorunla karşılaşabileceğini düşündük. Bu yüzden oraya nasıl gidileceğine dair ayrıntılı bir makale sunmaya karar verdik.
Bu makalede, bir Elementor sayfasına veya web sitesine nasıl özel CSS ekleyeceğinizi göstereceğiz.
Bir Elementor sayfasına veya web sitesine özel CSS eklemenin üç yolu aşağıdaki gibidir:
- HTML öğesi aracılığıyla CSS kodu ekleyin.
- Eklenti aracılığıyla Snippet kodu.
- Elementor'un Tema Özelleştiricisini Kullanma
Yöntem 1: Elementor'un HTML öğesinden CSS kodu ekleyin
Yalnızca tek bir sayfaya CSS eklemek istiyorsanız bu yöntemi kullanın.
Adım 1: Elementor'un HTML öğesini sürükleyip bırakın
Bu HTML öğesini sayfanın herhangi bir yerine yerleştirebilirsiniz ve gayet iyi çalışacaktır.
2. Adım: HTML'yi Düzenle simgesini tıklayın
Simgesine tıklayın HTML'yi düzenle Elementor HTML öğesinin sağında. Üzerine tıklamak, ekranın sol tarafında bir HTML düzenleme araç kutusu getirecektir.
3. Adım: CSS kodunuzu ekleyin
- Sekmesine tıklayın içindekiler ve açılır listeyi açın HTML kodu.
- CSS kodunuzu işaretçiler.
Yöntem 2: Code Snippets eklentisi aracılığıyla Elementor için Özel CSS
Kod Parçacıkları eklentisini kullanmanın faydaları:
- WordPress temanızı değiştirmek veya güncellemek isterseniz, CSS her zaman uygulanacaktır.
- Eklentiler gibi CSS kodunu etkinleştirip devre dışı bırakabileceğiniz için bu, CSS kodu eklemenin en uygun ve verimli yoludur.
1. Adım: Kontrol panelinizde uzantılar menüsünü açın
2. Adım: Yeni bir eklenti ekleyin
Düğmesine tıklayın Ayriyeten »Yeni eklentiler eklemek için sayfaya erişmek için.
- Eklentiyi arayın " Kod Parçaları ".
- Düğmeye tıklayarak yükleyin Şimdi yükleyin Araştırma sonuçları olumlu olduğunda.
3. Adım: Eklentiyi etkinleştirin
Düğmesine tıklayın etkinleştirmek »Eklentiyi etkinleştirmek için kurulum tamamlandıktan sonra Kod parçacıkları.
Adım 4: Eklenti sayfasını açın ve bir kod parçacığı ekleyin
- Menüyü aç Hulasa gösterge tablonuzdan
- düğmesine tıklayın Nouveau yeni bir kod parçacığı eklemek için
Adım 5: Bir snippet oluşturun ve etkinleştirin
- Kod parçacığınıza bir ad verin.
- Etiketin içine kodunuzu yazın. Bu kod kopyalamak için aşağıda mevcuttur.
- Düğmesine tıklayın Değişiklikleri Kaydet Kod parçacığını kaydetmek için.
- CSS'yi kaydettikten sonra " etkinleştirmek CSS kodunu etkinleştirmek için.
Kodu kopyala
add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );
Yöntem 3: Elementor Tema Özelleştirici'yi kullanın
Not: Bu yöntemi kullanmadan önce dikkatli olun çünkü temayı değiştirirseniz bu özel CSS'yi kaybedersiniz..
1. Adım: Tema özelleştiriciyi açın
Web sitenize gidin ve üst gezinme çubuğundaki özelleştirme seçeneğine tıklayın. Bu, bir tema özelleştirme penceresi açacaktır.
Adım 2: Ek CSS sekmesine tıklayın
Bu, CSS giriş sayfasını açacaktır.
3. Adım: CSS kodunuzu ekleyin
İyi! Artık bir Elementor sayfasına veya web sitesine özel CSS'yi nasıl kolayca ekleyeceğinizi biliyorsunuz. Bu, Elementor Free'deki benzersiz web sayfalarının tasarımını daha esnek hale getirecektir.
Elementor Pro'yu Hemen Alın!
Ayrıca bazı premium WordPress eklentilerini keşfedin
diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.
Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.
1. FileBird
WordPress FTP'nize yüklediğiniz binlerce resim, video veya belge dosyasını yönetmekte hiç zorlandınız mı? evet ya da hayır, önemli değil, önemli olan WordPress Plugin FileBird, medya dosyalarınızı kolaylıkla yönetmenize ve kitaplığınıza daha fazla güç getirmenize yardımcı olacaktır.
Kusursuz kullanıcı arayüzü ve içerik menüsü, kullanıcıların dosyaları klasörlere sürükleyip bırakmalarına veya klasörleri bilgisayarınızda olduğu gibi hızlı bir şekilde oluşturma, yeniden adlandırma veya silme haklarına sahip olmalarını sağlar.
Bu eklenti elinizde olduğunda, medya dosyalarınız sistematik olarak organize edilecek ve bir sayfaya eklemek veya yayınlamak için kolayca bir resim seçebileceksiniz. Ek olarak, bu eklenti en popüler eklentilerle tam uyumludur, özellikle WooCommerceve ayrıca çok sayıda dili destekler.
daha fazla bilgi edinmek için ziyaret dosya ve klasörleri WordPress nasıl yönetilir
Yani eğer bir destek vermek istiyorsanız medya kütüphanenizi yönetme olarak da adlandırılan WordPress Plugin FileBird gizli silahınız olabilir.
Indir | gösteri | Web hosting
2. Ultimate WooCommerce Genişletilebilir Kategoriler
Ce WordPress Plugin Sıkıcı WooCommerce kategorilerinin uzun listelerini kolayca değiştirmenize ve bunları bir akordeon menüsünde farklı seviyelerde alt öğelerle değiştirmenize olanak tanır.
Başlıca işlevleri şunlardır: onu etkinleştirme olasılığı ve son olarak otomatik olarak çalışması (parametre gerekmez!), Birden çok kategori düzeyi desteği (kategoriler, alt kategoriler, vb.), aktif kategori, mevcut kategori içindeyse tüm üst kategorilerin açılması, herhangi bir WooCommerce temasıdileğe duyarlı, ücretsiz güncellemeler ve çok aktif bir müşteri desteği.
Indir | gösteri | Web hosting
3. waveplayer
Adından da anlaşılacağı gibi WavePlayer, çalınan ses dosyasının dalga biçimini alan bir ses oynatıcı eklentisidir. Bu eklentiyle parçaları barındırabilecek veya basitçe diğer hizmetlerle entegre edebileceksiniz.bulut barındırmaSoundCloud gibi.
Aynı zamanda podcasting amaçları için de kullanılabilir ve diğer özellikler sunar: HTML5 desteği, duyarlı düzen, WooCommerce entegrasyonu vb.
Ayrıca, yayınlamadan önce görsel olarak bir oynatma listesi oluşturabileceksiniz. Bir diğer önemli özellik ise hızı ve verimliliğidir.
Indir | gösteri | Web hosting
Önerilen Kaynaklar
Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.
- sıkıştırmak ve WordPress üzerinde resimlerinizin boyutunu nasıl
- WordPress barındırma ile e-posta adresine sahip Nasıl
- WordPress blog görüntüleri yeniden adlandırmak için nasıl
- WordPress giriş sayfasının bağlantısını bulmak için nasıl
Sonuç
Buraya ! Bu eğitim için bu kadar, umarız Elementor'a ücretsiz özel CSS eklemenize yardımcı olur. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın.
Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.
Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.
...