YellowPencil İncelemesi: Görsel düzenleme ile kolay CSS özelleştirmesi

WordPress sitenizdeki her öğenin görünümünü gerçekten ayarlamak için temanın sınırlarının ve eklenti seçeneğinin ötesine geçmek istiyorsanız, CSS bunu yapmanın bir yoludur. Ancak – daha önce burada yazdığımız gibi – CSS ile ilgili büyük bir sorun, güçlü olmasına rağmen, CSS yeni başlayanların ulaşmasını zorlaştıran özel bilgi gerektirir. Yani – bu güçlü stil tarzına sahipsiniz – ancak sadece gelişmiş kullanıcılar bunu kullanabilir. Ne yapalım…? Girin, sarı kalem. YellowPencil, CSS düzenlemesini, temalar ve eklenti içeriği de dahil olmak üzere sitenizdeki her öğeyi düzenlemenize yardımcı olacak görsel arayüzler sunarak hem yeni başlayanlar hem de gelişmiş kullanıcılar için daha erişilebilir hale getiren bir eklentidir.
Yellowpencil ile, nokta ve tıklama, sürükle ve bırak ve grafik arayüzü kullanarak temalarınızı ve çıktı eklentilerinizi kolayca ayarlayabilirsiniz. Yellowpencil incelememde, nasıl çalıştığını göstereceğim ve bazı düşüncelerimi paylaşacağım. YellowPencil İncelemesi: Aşağıdaki işlevler, sarı vericinin CSS’yi gerçekte tüm WordPress kullanıcıları tarafından nasıl daha kolay erişilebilir hale getirdiğinin giriş ve çıkışlarının tümüdür … İlk olarak, YellowPenm CSS’yi iki farklı şekilde düzenlemenize izin verir:
Grafik Arabirim – Çoğu kullanıcının seçeceği şey budur. Düzenlemek istediğiniz ve basit açılır, renk seçmenleri ve düzenleme için diğer seçenekleri kullanmak istediğiniz öğeleri tıklamanız yeterlidir.
Kod Düzenleyicisi – CSS’ye alışkınsanız, hemen kendi kodunuzu ekleyebilirsiniz. Bu hala rahat çünkü müfettiş aracı doğru CSS seçmenlerini almayı kolaylaştırıyor.
Yellowpencil ayrıca kolay duyarlı bir tasarım içerir. Daha duyarlı siteler için CSS stilini belirli medya sorgularına uygulayabilirsiniz. Ayrıca, istenirse medya sorgularının işlevinin işlevini de düzenleyebilirsiniz (eğer alışkın değilseniz, medya sorguları temel olarak stil seçimini akıllı telefonlar veya tabletler gibi belirli cihazlara hedeflemenize izin verir). Diğer faydalı özellikler de düzenleyebilirsiniz. Dahil etmek:
Aşağıda bağlı makaleler

Görsel boyutunu değiştirme – Microsoft Word’deki görüntünün boyutunu değiştirdiğiniz gibi öğenin boyutunu değiştirebilirsiniz.
Sürükle ve Kaldır – Sayfanızın etrafındaki tek tek öğeleri çekip serbest bırakabilirsiniz.
Tel Kafes Modu – Bu, estetik elemanların engellenmesi olmadan düzeni ayarlamayı kolaylaştırır.
Animasyon Araçları – Seçilen öğeye animasyon uygulayın
Geri alın/yeniden yap – bir hata yaparsanız.
Yellowpemen ile Uygulamalı: Yellowpencil’in ne yaptığını bildikten sonra sayfamı düzenleme, bu Yellowpence incelemesine biraz daha bakalım.
Astra’nın elementleri ve temalarıyla oluşturulan bir test sayfası hazırlıyorum, bu da Yellowpencen’in eklenti temaları ve çıktılarıyla nasıl çalıştığına iyi bir örnek vermelidir. YellowPenme Arayüzüne Genel Bakış YellowPenm Arayüzünü hem olağan WordPress düzenleyicisinden hem de WordPress araç çubuğundan başlatabilirsiniz. Arayüzde bulunduktan sonra, sitenizi doğrudan sol ve sağ taraflardaki sarı püskürtme arayüzünü göreceksiniz:
1 – Burası seçmenleri değiştirebileceğiniz, duyarlı modları değiştirebileceğiniz, erişim kaynak kodu editörleri ve daha fazlası.

2-Elementleri seçtikten sonra, gerçekten stil uygulayacağınız yer burasıdır.
Yellowpencil Sarı Kalem Müfettişi kullanmak, bir öğeye tıkladığınızda ne olacağını kontrol etmek için size üç farklı seçenek sunar. Bu temel olarak neyi düzenlemek istediğinizi kontrol etmenize izin verir: imleç-bu, web sitesi ile sıradan bir ziyaretçiymiş gibi etkileşime girmenizi sağlar. Örneğin, düzenlenecek yeni bir sayfayı gerçekten yüklemek için bir bağlantıyı tıklayabilirsiniz.
Esnek Müfettiş – Bu tüm sınıf öğelerini seçer. Örneğin, Gezinme menüsündeki bir bağlantıyı tıklarsanız, tüm Gezinme Menüsü bağlantılarını ayarlayabilirsiniz.
Tek Müfettiş – Bu yalnızca tıkladığınız belirli öğeleri seçer. Örneğin, bu, tüm gezinme menüsü bağlantıları yerine gezinme menünüzde yalnızca belirli bir bağlantı düzenlemenize olanak tanır.
Yellowpemen ile düzenleme elemanı tamam, şimdi bazı elementleri düzenleyelim. Bu aynı zamanda bana esnek müfettiş ve tek bir müfettiş arasındaki farkı daha ayrıntılı olarak gösterme fırsatı verecektir.
Navigasyon menüsü bağlantısını tıklamak için esnek bir denetçi kullandığınızı varsayalım. Şimdi, sağ tarafta yeni bir stil uygulayabileceğiniz birçok seçenek elde edersiniz:

Aşağıda bağlı makaleler
Sınırı ekleyin, Sınır ekleyin, Sınır Stili seçeneğini kullanabilirsiniz. Ve bunun gibi, her menü bağlantısının yeni bir sınırı vardır:


Sadece hesap bağlantıma bir sınır eklemek istiyorsanız, tek bir müfettiş kullanmayı seçebilirsiniz. Daha çok şuna benzeyecek:

Toplamda, Yellowpencil tasarımınıza eklemek için 50’den fazla CSS seçeneği sunar:

Metin

Arka fon
Sınırlamak
Katman
Sınır
Sınır yarıçapı
Durum
Boyut
Animasyon
Gölge kutusu
Çok çekici pozisyon ve boyut seçeneği. Bir konum seçerseniz, sadece öğenin konumunu yönetmek için basit bir kontrol almakla kalmaz, aynı zamanda ekranda çekip kaldırabilirsiniz: aynı şekilde, boyutu seçmek, sürükleme kullanarak öğenin boyutunu değiştirmenizi sağlar ve Gevşek de:
Bu oldukça şaşırtıcı, dürüst!
Aşağıda bağlı makaleler

Boyutu ve konumunu ayarlarsanız, çeşitli öğeleri konumlandırmayı ve uyumlu hale getirmeyi kolaylaştırmak için özel bir tel çerçeve modunu bile etkinleştirebilirsiniz:

Genel olarak, özellikle piyasadaki diğer birkaç araçla karşılaştırıldığında, burada çok derinlik elde edeceğinizi düşünüyorum. Duyarlı Tasarım ve Medya Sorularını Kazma Sitenizin duyarlı tasarımını düzenlemek istiyorsanız, tek yapmanız gereken duyarlı modu etkinleştirmek ve temanız sırasında tüm durdurma noktalarını görebileceksiniz ve ayrıca hangi cihazı size bildiren bildirim Düzenleme:

Üstteki seçeneğe tıklayarak, belirli duyarlı düzenleri düzenleyebileceksiniz. Bu arayüzde çalışırken, değişiklikleriniz yalnızca belirli medya sorguları için geçerlidir.

CSS’ye aşina iseniz, koda doğrudan düzenleme yapın, yine de gerektiğinde kodun düzenlenmesini doğrudan yapabilirsiniz. Tek yapmanız gereken sol taraf bıçağının kod düzenleyicisini etkinleştirmek ve üç sekmeye ayrılmış bir doğrudan kod düzenleyicisi göreceksiniz:

Mevcut CSS’yi değiştirebilir veya kendi CSS’nizi buraya ekleyebilirsiniz. Yukarıda gösterdiğim arayüz seçeneğinin dışında sarı veri ayarlarını ve dışa aktarma kodlarını dışa aktarmak, CSS kodunuzu statik harici CSS dosyası veya dinamik CSS olarak ekleyip eklemeyeceğini de yapılandırabilirsiniz (YellowPenm, kodu yalnızca ilgili sayfaya ekler): ayrıca indirebilirsiniz. Kodunuzu dışa aktarmak istiyorsanız tüm düzenlemelerinizin CSS dosyaları. Bu, kullanmayı bitirdikten sonra eklentiyi silmenizi sağlayabilir:

Bir eklenti sizi kilitlemeye çalışmak yerine size esneklik kazandırdığında her zaman eğlencelidir. Yellowpencil’in maliyeti nedir? Yellowpencil, bence aldığınız şey için oldukça uygun olan Codecanyon’da 26 $ karşılığında mevcuttur. WordPress.org adresinde ücretsiz bir sürümün ücretsiz bir sürümü de vardır. Referanslar için Pro sürümünü inceliyorum. Yellowpencen hakkında son düşünce sarı pisans incelemem keyif aldım ve özellikle yeni başlayanlar için iyi bir seçim olarak gördüm.
Bir geliştiriciyseniz, diğer birkaç CSS editörüne ait olan snippets ve değişkenler gibi bazı gelişmiş CSS araçlarını kaçırabilirsiniz. Ancak YellowPencil’in de sürükleme ve serbest bırakma boyutunu konumlandırma ve değiştirme gibi kendi benzersiz virajı vardır, bu da onu sıradan kullanıcılar için olağanüstü hale getirir. WordPress temanızın ve eklentinizin görünümü üzerinde daha fazla kontrole sahip olmayı umuyorsanız, YellowPence’i deneyin. CSS’yi hiç duymamış olsanız bile, hızlı bir şekilde alabilmeniz ve WordPress sitenizde önemli bir düzenleme başlatabilmelisiniz. Sarı Kalem Alın