Yellowpencen Review: WordPress için Başlayan Dostu Visual CSS Editör
Tema stili ayarlarınızın ve WordPress sitelerinizin her birinin stilinin ötesine geçebileceğinizi hiç umuyorsunuz? Temanızla garip görünen eklentiyi düzeltebilirsiniz … veya widget’ın görünümünü daha iyi çalışacak şekilde değiştirebilirsiniz … CSS, bunu yapmanıza izin veren bir işaretleme dilidir. WordPress sitenizi ayarlamak çok güçlü, ama … engeller var. Bir geliştirici değilseniz veya en azından HTML’nin temellerine aşina olmadıkça, kendi sitenizi düzenlemek için CSS kullanmak neredeyse imkansızdır. Temel olarak, sıradan kullanıcılar CSS kullanamazlar çünkü öğrenme eğrisi çok büyüktür.
Yellowpencil, onu değiştiren bir WordPress freemium eklentisidir. Bu, yeni başlayanlar için samimi bir görsel arayüz kullanarak CSS stilinde WordPress sitenizdeki herhangi bir öğede değişiklik yapmanızı sağlar. İster sıradan bir kullanıcı olun ve sitenizi daha fazla kontrol etmek isteyin, isterse CSS ile çalışırken iş akışınızı hızlandırmak isteyen bir geliştirici olursanız, bence YellowPence’in sunabileceği bir şey var. Nasıl çalıştığını ilk elden görmek için Yellowpencil incelememi ve eklentiler hakkındaki düşüncelerimi okumaya devam edin. YellowPencil İnceleme: YellowPenm ile özelliklerin eksiksiz bir listesi, WordPress araç çubuğundan erişebileceğiniz YellowPence yeni düğmesine sahip düzenlemeyi alırsınız.
Yellowpencil arayüzünü açtıktan sonra:
Seçmek için sayfanızdaki herhangi bir öğeyi tıklayın.
Stil öğeleri açılır, renk seçmenleri vb. Grafik arayüzleri kullanır.
Tüm eklentinin temel işlevi budur – doğrudan bölümde göstereceğim. Buna ek olarak, YellowPenem de şunları sunar:
Sürükle ve bırak düzeni kontrolü. Sadece konumlarını değiştirmek için canlı önizlemede öğeleri sürükleyip bırakın. Sürükle ve bırak boyutunu değiştirin. Benzer şekilde, görsel önizlemedeki belirli öğelerin boyutunu değiştirmek için sürükle ve bırak kullanabilirsiniz.
Sorumlu tasarım. Duyarlı önizlemeyi görebilir ve yalnızca cihaz için geçerli olan yürürlükte değişiklikler yapabilirsiniz.
Görüntü çerçevesi modu. Bu kullanışlı mod, görsel öğeleri gizleyerek ve yalnızca basit çerçeve görüntülerini görüntüleyerek düzeni ayarlamayı kolaylaştırır.
Geri Al/Yeniden Yap ve Revizyon Geçmişi. Bu, gerektiğinde geri çekilmeyi veya ilerlemeyi kolaylaştırır.
Doğrudan CSS editörü. CSS’ye alışkınsanız, doğrudan kod düzenleyicisinde de değişiklikler yapabilirsiniz.
Ve en havalı şeylerden biri, sarıpenlemin her şeyle çalışmasıdır. Yani, WordPress temanızı ve kullandığınız eklentinin çıktısını düzenlemek için kullanabilirsiniz.
Yellowpemen ile Uygulamalı: Sayfayı doğrudan YellowPence kullanacak şekilde düzenleyerek, WPForms iletişim formu ile yeni bir iletişim sayfası oluşturdum. Şimdi, tema menümün yanı sıra ayarlayacağım, böylece Yellowpencen’in nasıl çalıştığını görebilirsiniz. Yellowpencil arayüzünü açtığınızda şöyle görünüyor:
1 – Bu kenar çubuğu, duyarlı tasarım modu veya tel kafes modu gibi farklı modlara erişmenize yardımcı olur.
3 – Elementleri seçtikten sonra, burası yeni bir stil belirleyeceğiniz yerdir.
Elemanları Seçme (2 Mod) Yellowpencil size öğeleri seçmenin iki yolunu verir:
Esnek Müfettiş – Esnek Müfettiş kullandığınızda, tüm bu unsurları seçeceksiniz. Örneğin, esnek muayene edenle bir menü bağlantısını tıklarsanız, aynı stili tüm menü bağlantılarına uygulayabilirsiniz. Tek Müfettiş – Tek bir müfettiş kullandığınızda, yalnızca belirli bir unsur seçeceksiniz. Örneğin, tek bir denetçi ile bir menü bağlantısını tıklarsanız, stili yalnızca tek bağlantıya uygulayabilirsiniz.
İşte bir örnek: Bir menü bağlantısı seçmek ve bir sınır eklemek için esnek bir müfettiş kullanırsam, tüm menü öğeleri için geçerli olduğunu göreceksiniz:
Şimdi, bu tek müfettiş ile aynı stilin görünümüdür (yalnızca ana menü bağlantısının nasıl bir sınır aldığını unutmayın):
Dolayısıyla, her zaman istediğiniz doğru öğeleri seçebilmenizi sağlamak için oldukça yararlı bir özelliktir. CSS seçmenleri karmaşıklaşır – ancak bu iki mod arasında geçiş bunu basitleştirir. Yukarıda gördüğünüz yan panellerle düzenleme elemanı, ancak iş öğelerini düzenleyerek biraz daha derin olalım. Her element için, sarı pansiyon size bir sekme verir: Metin Arka fon
Sınırlamak
Katman
Sınır
Sınır yarıçapı
Durum
Boyut
Animasyon
Gölge kutusu
Ekstra (opaklık, şamandıra pozisyonu, imleci vb. Gibi daha fazla geliştirici odaklı özellikler)
Örneğin, giriş formları alanına bazı gölge kutuları eklemek için, yalnızca gölge kutusu sekmesine gitmeniz ve basit arabirim kontrolünü kullanarak düzenlemeniz gerekir:
Bu benim en sevdiğim özellik. Elemanın boyutunu değiştirmek istiyorsanız, aynı yan paneli kullanabilirsiniz. Veya şöyle sürükleyip bırakabilirsiniz: aynı şekilde, bazı öğeleri taşımak için sürükleme ve gevşek de kullanabilirsiniz (bu her öğe için çalışmaz, ancak çoğu şeyleri hareket ettirebilirsiniz). Örneğin, sayfa başlığını taşımak kolaydır:
Sadece sürükle ve bırak işlevselliği, görsel CSS editör eklentisi için benzersiz bir şey değil, aynı zamanda sayfanızın görünümünü değiştirmek için de çok yararlıdır. Ve bu sarı püskürtme özü. Şimdi size aldığınız diğer bazı modları göstereyim.
Diğer sarı püskürtme modlarını keşfetmek, sarı püskürtme diğer modlara erişmek için soldaki yan bıçakları kullanabilirsiniz. Duyarlı Mod Duyarlı modda, Siteniz için duyarlı olsa da, tüm durdurma noktaları ile ekranınızın üstünde yeni bir cetvel ve hangi sürümü düzenlediğinizi söyleyen mesajlar:
Farklı bir cihazı düzenlemek için, üstteki kesme noktalarından birini tıklayabilirsiniz. Size doğrudan cihazın boyutundan bir önizleme verecektir. Ancak bundan daha fazlası – bu modda yaptığınız herhangi bir stildeki değişiklikler yalnızca cihaz için geçerli olacaktır: Genel olarak, YellowPence’in duyarlı kontrolünü nasıl uyguladığını seviyorum. Yukarıdaki cetvelde görsel olarak kesme noktasını görebilmek oldukça yararlıdır. Tel çerçeve modu çerçeve modu, içeriğiniz için temel bir düzen oluşturmanıza yardımcı olur. Temel olarak, bu tüm stilleri, sadece konumun konumuna odaklanabilmeniz için kararttı. Ayrıca, imleci her öğeye yönlendirdiğinizde ayrıntılı boyut bilgilerini gösterir: bir kez daha – oldukça kullanışlıdır. Özellikle sıradan bir kullanıcıysanız, çok fazla mod kullanamayabilirsiniz. Ama sahip olmak güzel.Kod Editörü Kodla doğrudan çalışmak istiyorsanız, stilleri düzenlemek için tam bir kod düzenleyicisini açabilirsiniz: Düzenlediğiniz belirli gönderi Düzenlediğiniz belirli şablon Tüm Siteniz (Global)
Animasyon Yöneticisi Animasyonu sayfanızda kullanıyorsanız, o sayfadaki tüm animasyon olaylarının zaman satırını görmek için Animasyon Yönetimi modunu kullanabilirsiniz. Rahat olan animasyonlu olayların süresini değiştirmek için Drag ve Loose’u da kullanabilirsiniz:
Son Yellowpencil ayarlarını keşfeden sarı püskürtme, ayar alanında size başka yararlı kontroller de sunar.
Ayarlama sekmesinde, eklediğiniz tüm özel CS’leri görebilirsiniz. Ayrıca, düğmeyi tıklayarak tüm CSS’nizi de aktarabilirsiniz:
Bu, asla kilitlenmediğiniz ve istediğiniz zaman sarı püskürtme kullanmayı bırakabileceğiniz anlamına gelir. Bunun ötesinde, Ayarlar sekmesi, özel CSS’nizi dinamik bir CSS satır içi veya statik harici CSS dosyası olarak dahil etmek isteyip istemediğinizi seçmenizi sağlar: Yellowpencil’in maliyeti nedir? İncelediğim YellowPencil Premium sürümü, CodeCanyon’da sadece 26 $ maliyetle mevcuttur ve 10.000’den fazla satışta 4.77 -STAR derecesine sahiptir. Test etmek istiyorsanız WordPress.org adresinden ücretsiz olarak sunulan Lite sürümü de vardır. Bu, yukarıda gördüğünüz birçok temel özelliği içerir, ancak çok fazla seçeneği yoktur. Ancak, ücretsiz sürüm eklentilerle oynamak ve beğenip beğenmediğinizi görmek için iyi bir yoldur. O zaman, Pro’yu kullanmaya karar verirseniz, 26 $ bankaya gerçekten zarar vermez. Yellowpencil Yellowpence ile ilgili son zihin, gelişmeyen bir perspektiften şimdiye kadar kullandığım en iyi görsel görsel ayarlama eklentisidir. Bir geliştiriciyseniz, CSS Hero’yu kontrol etmek isteyebilirsiniz, çünkü en son sürümdeki geliştiricilere odaklanan birkaç özelliğe sahiptir. Ancak sıradan kullanıcılar için sarı püskürtme tercih ediyorum çünkü: sürükle ve bırak boyutunun konumu ve değişimi çok rahat. Duyarlı tasarım modu iyi yapılır. Ayrıca sıradan kullanıcıların Breakpoint’in Yellowpemen’de nasıl çalıştığını anlamaları daha kolay.
Her öğe için çok fazla tasarım kontrolü elde edersiniz. İlgileniyorsanız, ücretsiz sürümle oynamak için WordPress.org adresini ziyaret edin. Ve isterseniz, bir Pro sürümü satın almayı düşünün. Yellowpencil Pro alın ve bazı CSS’yi kendiniz öğrenmek istiyorsanız, WordPress için CSS’yi incelemek için yeni başlayan kılavuzumuza bakın.
