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

  1. Sekmesine tıklayın içindekiler ve açılır listeyi açın HTML kodu.
  2. 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.

  1. Eklentiyi arayın " Kod Parçaları ".
  2. Düğmeye tıklayarak yükleyin Şimdi yükleyin Araştırma sonuçları olumlu olduğunda.

3. Adım: Eklentiyi etkinleştirin

Elementor'da Özel CSS

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

  1. Menüyü aç Hulasa gösterge tablonuzdan
  2. düğmesine tıklayın Nouveau yeni bir kod parçacığı eklemek için

Adım 5: Bir snippet oluşturun ve etkinleştirin

  1. Kod parçacığınıza bir ad verin.
  2. Etiketin içine kodunuzu yazın. Bu kod kopyalamak için aşağıda mevcuttur.
  3. Düğmesine tıklayın Değişiklikleri Kaydet Kod parçacığını kaydetmek için.
  4. 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

Elementor'da Özel CSS

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

Elementor'da Özel CSS

İ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

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.

Indirgösteri | Web hosting

2. Ultimate WooCommerce Genişletilebilir Kategoriler

Ultimate WooCommerce genişletilebilir kategorileri

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.

Waveplayer premium wordpress eklentileri ses oynatıcı ekler

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.

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.

...