Canlı WordPress Tema Düzenleyicisi CSS Kahramanı

WordPress sitenizi oluşturduğunuzu ve ince ayar yapmak istediğiniz bir öğeyle karşılaştığınızı hayal edin. Cevap, öğeyi özelleştirmek için biraz CSS yazmak olabilir. Tek sorun, onu değiştirecek kadar CSS bilmemeniz ve kullanılacak doğru kodu aramak için şimdiden saatler harcamış olmanızdır.

Sıfırdan CSS yazmayı ortadan kaldıran bir araç kullanarak kendinize tonlarca zaman kazandırabilir ve tam anlamıyla migrenden kurtulabilirsiniz. Müfettişte doğru öğeyi aramayı unutun. Kullanılacak doğru CSS'yi ve onu nerede kullanacağınızı hatırlama konusunda endişelenmeyi bırakabilirsiniz.

CSS Hero eklentisi, WordPress sitenizi hızlı ve kolay bir şekilde özelleştirmenize yardımcı olacak %100 kodsuz bir çözümdür. Hadi kontrol edelim!

CSS Hero ile Sitenizi Özelleştirin

CSS Hero, sitenizin görünümünü özelleştirmeyi kolaylaştıran bir WordPress eklentisidir. Güzel tasarlanmış ve sezgisel bir işaretle ve tıkla arayüzüne sahiptir.

Hangi WordPress temasını kullanırsanız kullanın, sitenizin özelleştirmesi üzerinde tam kontrole sahip olabilirsiniz. Sitenizdeki bir öğeye tıklamak, değişiklik yapmak ve bunun canlı olarak gerçekleşmesini izlemek kadar basit. CSS Hero ile şunları kontrol edebilirsiniz:

• Renk
• Tipografi ve yazı tipi stilleri
• Miktar
• …ve dahası!

CSS Hero ayrıca yerel olarak yanıt verir ve sitenizin hem masaüstü hem de mobil cihazlarda nasıl görüneceğini kontrol etmenize olanak tanır. Sitenizi bozma konusunda da endişelenmenize gerek yok. Canlı önizleme işlevine ek olarak CSS Hero, hayat kurtaran bir masaüstü özelliği içerir, böylece değişiklikleri yalnızca masaüstünde sınırlayabilirsiniz.

Mevcut tema dosyalarınızın hiçbirini değiştirmeden CSS Hero Theme Editor'da istediğiniz kadar değişiklik yapabilirsiniz. CSS Hero eklentisini devre dışı bırakırsanız, siteniz eski haline geri döner.

Deneyimli bir WordPress tasarımcısının bildiği gibi, sitenize çok fazla CSS eklemek performansı önemli ölçüde düşürebilir. Bununla birlikte, CSS Hero, bir ton CSS kodunu istiflemez; bunun yerine, temanızın stil sayfasını geçersiz kılan tek, statik, ekstra bir stil sayfası oluşturur.

Halihazırda CSS yazma deneyiminiz varsa, CSS Hero kod düzenleyicisine kendi kodunuzu da ekleyebilirsiniz. İşaretle ve tıkla arabirimiyle aynı canlı ön izleme işlevini sunar ve kodunuzu anında hatalara karşı kontrol eder. Ayrıca, kendi medya sorgularınızı da ekleyebilirsiniz. Ayrıca başka bir yerde kullanmak için CSS kodunuzu dışa aktarabilirsiniz.

CSS Hero şunlarla iyi çalışır:

• elementor
• Kunduz Oluşturucu
• GeneratePress
• WooCommerce
• Gutenberg
• Temalaştır
• ÖğretmenLMS
• bbbasın
• İletişim Formu 7
• …ve dahası!

Beğendiğiniz herhangi bir temada çalışabilir ve sitenizdeki herhangi bir öğeyi özelleştirebilirsiniz.

Sitenizi Özelleştirmek için CSS Hero Nasıl Kullanılır?

CSS Hero'yu kullanmak tatmin edici ve sezgisel olsa da, kurulum ve eklentinin bazı temel özelliklerinin nasıl kullanılacağı konusunda size yol göstereceğim.

1. Adım: CSS Hero Eklentisini yükleyin

CSS Hero eklentisini web sitelerinde bulabilirsiniz. Satın alma için birden fazla plan var ve fiyatlandırmayı biraz sonra ele alacağım. 30 günlük para iade garantisi sunuyorlar, bu yüzden deneme riski yok.

Bir hesap oluşturduğunuzda, eklentinin en son sürümünü hesap kontrol panelinizden indirmeniz yeterlidir.

.zip dosyasını bilgisayarınıza kaydettikten sonra, WordPress sitenize gidin ve Eklentiler → Yeni Ekle seçeneğine gidin. Eklenti zip dosyasına göz atın, yükleyin ve etkinleştirin.

2. Adım: Hesabınızı Bağlayın

Hemen WordPress Yönetici kontrol panelinizde lisansınızı etkinleştirmenizi isteyen bir bildirim göreceksiniz. Büyük mavi düğmeyi tıklayın ve lisansınızı sitenize eklemek için istemleri izleyin.

Şimdi üst menü çubuğunuzda CSS Hero için bir sekme göreceksiniz. Düzenleme ortamına girmek için tıklayın.

3. Adım: Sitenizi Düzenleme

CSS Hero'da düzenleme moduna girdiğinizde, geçerli sayfanın Özelleştirici'ye benzer bir önizleme penceresi görürsünüz. Ancak, artık çok sayıda düzenleme seçeneğiniz var.

Editör

İmlecinizi ön izleme penceresi etrafında hareket ettirdiğinizde, tarayıcınızın denetçisinde göreceğiniz gibi sayfa öğelerinin sizin için çağrıldığını, ancak daha ayrıntılı ve net bir şekilde göreceksiniz.

Sol taraftaki menüde, seçilen öğeyi değiştirmenize izin veren bir dizi düzenleme aracına sahipsiniz. Örneğimde, basitçe .site-title öğesini seçtim ve renk, yazı tipi boyutu, yazı tipi ağırlığı, harf aralığı üzerinde değişiklikler yaptım ve bir gölge ekledim. Bunların tümü, tam teşekküllü bir site oluşturucuya çok benzeyen kaydırıcılar ve seçiciler içeren sezgisel menü kullanılarak yapıldı. Tasarım seçimlerim ne kadar şüpheli olsa da, düzenleyicinin kullanımı son derece kolaydır. Bu, bir yalama kod yazmak zorunda kalmadan site öğelerinin gerçek görsel düzenlemesidir.

Görsel düzenleyici penceresinin altında, öğeyi değiştirirken doğru CSS kodunun yazıldığını görebileceğiniz bir kod düzenleyici vardır. CSS'yi biliyorsanız ve kodu değiştirmekten keyif alıyorsanız, her iki seçeneğe de sahip olmaktan keyif alacaksınız. CSS'de yeniyseniz, yararlı bir öğrenme aracı olarak işlev görür.

Kod düzenleyicide doğrudan kod üzerinde değişiklikler veya eklemeler yapabilirsiniz ve canlı ön izlemeyi görsel düzenleyiciyi kullandığınız gibi görürsünüz. CSS Hero, çalışırken sizi kodlama hatalarına karşı da uyarır. Örneğin, renk seçicideki bağımsız değişkenlerden birini eleyip virgülden ayrılırken, hemen nerede hata yaptığımı söyleyen bir uyarı belirdi.

Hatanın düzeltilmesi, uyarının otomatik olarak kaybolmasına neden olur.

Çoklu Cihaz Önizlemesi

CSS Hero düzenleyicisinin üst çubuğunda, çeşitli cihazlar için bir dizi simge bulacaksınız. Varsayılan masaüstü modudur. Herhangi bir cihaz simgesine tıklamak, o cihazda göründüğü şekliyle ve yönüyle size bir önizleme gösterecektir. Ek olarak, tutamaçları kullanarak veya alttaki kutuya piksel genişliğini girerek önizleme penceresinin boyutunu ayarlayabilirsiniz.

Ayrıca üst çubuk menüsünde, düzenleme için öğeleri seçmek yerine sitede gezinmenizi sağlayan bir düğme bulacaksınız.

Geri al ve yinele simgelerini tıklayabilir ve düzenlemelerin tam geçmişini görüntüleyebilirsiniz.

Daha fazla özellik

Bunlar, CSS Hero arayüzünün ana özellikleridir. Bu düzenleyici ile yapabileceğiniz daha çok şey var. Üst menü çubuğundaki Proje açılır menüsüne tıklamak size daha da fazla seçenek sunar.

Değişkenler

CSS Hero'da kullanabileceğiniz iki tür değişken vardır: LESS Değişkenleri ve CSS Değişkenleri. Sık kullanılan değişkenleri AZ Değişkenler altında ekleyebilir ve tek bir menüden yönetebilirsiniz. CSS Değişkenleri altında herhangi bir değişkeni arayabilir, adını ve değerini düzenleyebilirsiniz.

Medya Sorgu Ayarları

Bu menü, tüm mevcut medya sorgularınızı yönetmeniz ve gerektiğinde özel sorgular eklemeniz için size tek bir yer sağlar.

kontrol noktaları

Diyelim ki sitenizdeki bazı değişiklikleri önizlemek istiyorsunuz, ancak canlı siteyi güncellemeye henüz hazır değilsiniz. Kontrol Noktalarının size yardımcı olabileceği yer burasıdır. İstediğiniz değişiklikleri yapın, ardından bir Kontrol Noktası oluşturun. Canlı siteyi etkilememeleri için değişikliklerinizi iptal edebilirsiniz, ancak istediğiniz zaman geri dönebilir ve tüm sıkı çalışmanızı tekrarlamadan bu değişiklikleri etkinleştirebilirsiniz.

Özel yazı tipleri

.ttf, otf ve woff biçimlerinde istediğiniz özel yazı tiplerini yükleyebilirsiniz.

Video arka planları

Bu kaygan ve kompakt video döngülerinden birini arka plan olarak eklemek ister misiniz? Şaşırtıcı bir şekilde, bunu doğrudan düzenleyicide yapabilirsiniz. CSS Hero, size coverr tarafından sağlanan, aralarından seçim yapabileceğiniz çok sayıda hazır video sunar. Sadece bir öğe seçin, bir video seçin ve ayarlayın. Bu kadar basit.

CSS Hero'dan Önce ve Sonra

Şu anda, Özelleştirici'de istediğiniz tüm CSS'leri ekleyebilirsiniz. WordPress size bir önizleme de gösterecektir.

Bu iyi çalışıyor, ancak birkaç şeyi göz önünde bulundurun:

1. Çok fazla - veya hiç - CSS bilmiyor olabilirsiniz.
2. Daha önce kodladığınız bir şeyi aramak çok zaman alabilir.
3. Özelleştiricideki tüm bu CSS, sitenizi önemli ölçüde yavaşlatabilir.

CSS Hero düzenleyicisini kullanmaya başladıktan sonra, görsel bir düzenleyici kullanılarak kodlama gerekmeden hızlı bir şekilde değişiklikler yapılabilir. Öğeye tıklayarak neyi değiştirdiğinizi kolayca bulabilirsiniz. CSS kodu sitenizi yavaşlatmaz, çünkü kendi düzgün düzenlenmiş stil sayfasında bulunur.

Fiyatlandırma

CSS Hero, üç katmanlı yıllık fiyatlandırma planları ve bir ömür boyu plan sunar. Daha önce de belirttiğim gibi, herhangi bir planın satın alınmasından sonraki 30 gün içinde %100 para iade garantisi vardır. Denemek için neredeyse hiç risk yok.

başlangıç

Bu plan, yalnızca bir siteyi özelleştirmeniz gerektiğinde en iyisidir. Yılda yalnızca 29 ABD Doları karşılığında tüm ürün güncellemelerini ve temel desteği alırsınız.

Kişisel

Serbest çalışıyorsanız veya küçük bir ajans işletiyorsanız, bir sonraki aşama sizin için en iyisi olabilir. CSS Hero'yu en fazla beş siteye yükleyebilir ve tüm ürün güncellemelerini ve temel desteği alırsınız. Fiyatlandırma yıllık 59 $ 'dır.

profesyonel

Göründüğü gibi, bu plan profesyonel yayıncılar ve daha büyük ajanslar için en iyisidir. Yılda 199 ABD Doları karşılığında, WordPress Multisite desteğiyle 999 yükleme elde edersiniz.

Ömür Boyu Pro

Bu, size 999 site yüklemesi, öncelikli destek ve ömür boyu ürün güncellemesi sağlayan... sonsuza kadar tek seferlik bir plandır. Tek seferlik 599$'lık bir ödemeyle ömür boyu sigortalısınız.

Sezgisel ve Kolay CSS Özelleştirme

Herhangi bir WordPress tasarımcısı için CSS Hero'nun muazzam bir değeri vardır. CSS'yi avucunuzun içi gibi bilseniz bile, CSS Hero düzenleyicisini kullanmak sitenizi düzenlemeyi inanılmaz derecede verimli hale getirecektir.