Kahramanların Gözden Geçirilmesi CSS: WordPress özelleştirmesinden gelen ağrıyı kaldırın
Çekici bir tasarım olmadan eksiksiz bir web sitesi yoktur ve okuyucunuzun dikkatini çeker. Ancak piyasada bulunan birçok WordPress tema seçeneği ile hangilerinin kullanılacağına karar vermek zor olabilir. Önce denemeden hangi temanın sizin için en iyi olduğunu nasıl anlarsınız? Ya kapsamlı ayarlamalar yapmanız gerekiyorsa, ancak sınırlı bir bütçeniz varsa? Ya da, tasarım becerileriniz çok eksikse ve kodlama deneyiminiz yoksa, ancak sizin için çalışmak için pahalı bir profesyonel kullanmak mümkün değil mi?
Bu durumlardan biri sizin için geçerli olabilir. Aslında, kendim oradaydım. Peki ya bir kod çizgisine dokunmak, bir tasarımcıya kiralamak veya çok para harcamak zorunda kalmadan web siteniz için ihtiyacınız olan tasarım değişikliklerini yapmanıza yardımcı olabilecek araçlar olduğunu söylersem ne olur? Hazır ol, çünkü yapacağım şey bu. WordPress temasını gerçek zamanlı olarak ayarlamanıza yardımcı olacak bir WordPress eklentisi olan CSS Hero ile tanışın.
CSS Kahramanları Al »CSS kahramanı nedir ve nasıl çalışır? Sayfa yapımcılarına benzer şekilde, CSS Hero, Visual Direct editörlerini kullanarak web sitesi öğelerinizi seçmenize ve değiştirmenize izin vererek çalışır. Editör, web sitenizin ön ucunda görüntülenir. Ve bunu alın, web sitenizdeki her öğeyi işaretleme ve tıklama kadar kolay ayarlayın. Tema dosyanızdaki herhangi bir koda dokunmadan WordPress temanızı düzenlemek istiyorsanız bu iyi bir haber. Ayrıca, bilmediğiniz kodla uğraşmak, WordPress ölümünün beyaz ekranına neden olabilir. Başka bir deyişle, sitenize zarar verebilir, site ziyaretçileri için kullanıcı deneyimine zarar verebilir ve çok fazla çalışmayı kaybedebilirsiniz. Bunun yerine, yeni kod eskisinin yerini alır, ancak daha sonra varsayılan koda geri dönmek istiyorsanız sağlam kalmasına ve kullanılabilir olmasına izin verin. Buna ek olarak, en popüler WordPress temalarının birçoğu ile geniş uyumluluğu sayesinde, herhangi bir çatışma yaşamayacaksınız. CSS Hero, yirmi on dokuz, All Genesis temaları ve Divi gibi temalarla eşleşir. Aşağıda uyumlu temaların tam bir listesi bulunmaktadır. Ana özellikler şunları içerir:
Yazı tipini Google Web yazı tipiyle ayarlayın
Mükemmel renk paletini seçmek için renk seçmenleri
Kaydırıcı değişim marjı, metin yüksekliği ve sütun genişliği
Gradyanlar, geçişler ve gölgeler gibi özel efektler
CSS çıkışı temiz ve azaltılmış
Kolayca iptal etmek için değişiklik geçmişi
Çeşitli ekran boyutları için duyarlı önizleme modu
Belirli bir cihaza düzenlemeyi taahhüt edin
WordPress Giriş Sayfası Düzenlemesi
Sitenin “Günlüğe Girmeyen Kullanıcı” olarak özelleştirilmesi En sevdiğiniz düzenlemelerden kontrol noktasını veya anlık görüntüyü kaydedin ve yükle
Her şeyi varsayılan moda döndürme seçeneğini sıfırlayın
Bu eklentide o kadar çok potansiyel var ki, kullanım ve deney yoluyla bulabileceğiniz çok daha fazlası olduğundan eminim.
CSS kahramanının maliyeti nedir? Fiyat açısından, CSS Hero çok pahalı değil. Farklı ihtiyaç ve gereksinimlere göre dört fiyat paketi mevcuttur. Bununla birlikte, bu eklenti satın almadan önce dikkate alınması gereken bir şey, tüm paketlerin sadece bir yıllık iyileştirme ve desteği kapsadığıdır. Bu, destek ekibini kullanarak güncellemelere ve ek avantajlara erişmeye devam etmek istiyorsanız, lisansınızı her yılın sonunda güncellemeniz gerektiği anlamına gelir.
Kahramanların fiyatının kısa detayları aşağıdadır:
Yeni başlayan paketi (29 $/yıl): 1 sitede kullanım için. Özel Paket (59 $/yıl): 2-5 site için ve birçok web sitesine sahip yayıncılar için iyi.
Pro Paket (199 $/yıl): 999’a kadar siteye kadar ve web ajanslarını çalıştıran ve birçok web sitesini yönetenler için mükemmeldir.
LifeTime Pro (bir kez 599 $ ödeme): 999’a kadar siteye, yaşam boyu ürünlerin iyileştirilmesi ve desteği ve WordPress Multisite
Yani kaç WordPress siteniz olduğuna bağlı, CSS Hero’nun sizin için bir planı var.
Peki ya eklentileri kullanmaya ne dersiniz? Kendi web sitelerimden birinde test ettiğimde sonuçların nasıl olduğunu görelim. CSS Kahramanları ile başlayan CSS kahramanlarını gözden geçirmek basittir. Yapmanız gereken ilk şey, CSS Hero eklentisini satın almak ve indirmek ve daha sonra diğer eklentilerde yaptığınız gibi WordPress sitenize yüklemektir. Ardından, ekrandaki talimatları izleyerek eklentiyi etkinleştirmeniz gerekir. Bu, şimdi WordPress kontrol panelinizde anahtarımı almak için düğmeye tıklamayı, CSS Hero hesabınızı girin ve WordPress sitenizi eklentiye bağlayın. Lisansınız etkinleştirildiğinde ve kullanıma hazır olduğunda, sitenizi CSS Hero’da kayıtlı göreceksiniz. Aktif lisans altında gösterge paneli.
Web sitenizi ayarlamak için CSS kahramanlarını kullanmaya hazır olduğunuzda, sayfalara, gönderiye veya web sitenize bakarak başlayın. Bu örnek için blog yayınlarını göreceğim. Önizleme ekranının en üstünde, CSS Hero ile özelleştirilmiş kalem simgesini göreceksiniz. CSS kahramanlarını başlatmak için tıklayın ve WordPress web sitesi öğelerinizi ayarlamaya başlayın.
Bu incelemenin amacı için, WordPress Twenty On altı temasını kullanıyorum. Bu, eklentiyi test etmek için iyi bir temadır çünkü uyumlu temalar listesinde bulunur.
CSS Kahramanı Kahramanlığı Nasıl Yapılır CSS Hero’nun nasıl çalıştığını göstermek için, blogumun yayınının arka planını ayarlayarak başlayacağım. Bunu değiştirmek istediğim blog gönderme alanımı tıklayarak yapacağım. Bu, istediğiniz değişiklikleri yapabileceğiniz seçeneğin seçenek tarafını açacaktır. Blog yayınımın arka plan rengini ayarlamak için arka plan etiketli menü öğesini tıklayacağım. Bunu yapmak istediğim değişiklikleri yapmak için kullanabileceğim diğer ayar ayarlama seçeneklerini açıyor. Renk seçeneğini tıkladığımda renk seçmenleri ile sunuldum. Tek yapmam gereken rengi seçmek. Hemen, blog yazımın arka plan rengi değişti. Değişiklikleri beğendiysem, Tamam’ı tıklayacağım. Bu, yayınlanmış blog yazıma gerçek zamanlı olarak bir değişiklik yapacak. Unutmayın, arka plan ayarlayabileceğim tek bir bölüm. Ben de değişiklikler yapabilirim:
Tipografi sınır Sınırlamak
Uzay
Değiştirmek
Filtre
Liste
Sitenizde tekrar tekrar kullanılabilecek ayarlamalar yapabileceğiniz bir yer de vardır. Örneğin, küresel bir düğme stili yapın veya arka planı, imleci yönlendirmenin etkisini ve daha fazlasını değiştirin. Ve gerçekten yaratıcı olmak istiyorsanız, animasyon bölümünü kullanarak içeriğinize dahil olduklarında sitenize ziyaretçilerin görüldüğü kaydırma efektlerini bile ayarlayabilirsiniz. Açıklama, kolaylaştırma, gecikme ve animasyon süresinin etkileri gibi şeyleri belirleyin ve web sitenize saniyeler içinde kolayca uygulayın.
Ve ne yaparsanız yapın, web sitenizi bozma konusunda endişelenmeyin. Size daha sonra göstereceğim gibi, her şey iptal edilebilir ve varsayılan ayarlara döndürülebilir, bu nedenle küçük bir deneyden kaçınmak için bir neden yoktur. Bunların hepsi, insanların web sitelerinde yapmayı sevdikleri popüler ayarlamalardan birinin detaylarında, blog yayınlarındaki köprülerin rengini değiştirmek. Şimdi, bu, CSS’yi düzenlemeye alışkın olan insanlar için basit bir istek gibi görünebilir, ancak bilmiyorsanız, özellikle CSS kahramanı olmadan çok korkutucu olabilir. CSS Hero ile sayfadaki en küçük öğelere göz atabilir (bağlantı gibi) ve istediğiniz gibi ayarlayabilirsiniz. Kodlama yok, bir stil sayfası yeniden yazmak yok. Basitçe işaret et, tıklayın ve kaydet. Bunu nasıl yapacağınızı bilmek ister misiniz? Köprünüzü içeren ekrana tıklayarak başlayın. Ardından, farenizi doğrudan ayarlamak ve doğru tıklamak istediğiniz köprüye yönlendirin. Küçük bir kutu görünen göreceksiniz. Tek öğe seçeneğini tıklayın. Bu, CSS kahramanına sadece bu öğeyi değiştirmesini söyler.
Ardından, yan taraftaki tipografi bölümüne tıklayın ve renk seçmeninden köprünüz için istediğiniz rengi seçin.
Bir bağlantıyı sağ tıklattığınızda yalnızca bu öğeyi seçmek yerine tüm köprüleri aynı renkte değiştirmek istiyorsanız, giriş içeriği bağlantısını tıklayın. Ardından, tipografiyi tıklayın ve renk seçmeninden bağlantının rengini seçin.
Gördüğünüz gibi, CSS Hero ile sitenizdeki öğeleri değiştirmek gerçekten sadece tıklamanızı, değiştirmenizi ve saklamanızı içerir. CSS Hero tarafından sizin için yapılan CSS stil sayfasına gerçek kodu eklemekle ilgileniyor musunuz? CSS Kahraman Düzenleyicisinin sol üst köşesine yakın Müfettiş sekmesini tıklayın ve kod snippet’inizi doğrudan Müfettiş bölümüne ekleyin. Varsayılan koda açıklayın, ayarlanmış siteyi varsayılan ayarlara kurtarmak istediğiniz zamanlar olabilir. Ancak belki de değişikliklerinizi diğer web sitelerine dışa aktarmak istersiniz, çünkü bu bir müşteri sitesidir ve kullanıma hazırdır. CSS Hero ile bunu çok kolay bir süreçle yapabilirsiniz. CSS Hero, sitenizde yaptığınız değişiklikleri en aza indirir ve tutmak için yeni bir stil sayfası oluşturur. Bu size bu değişiklikleri istediğiniz yerde kolayca ihraç etme özgürlüğü verir. Bunu yapmak için, CSS Kahraman Editörü’ndeki sekmeyi değiştirerek başlayın. Sol üst köşede Müfettiş sekmesini tıklayın.
Oradan, dışa aktarma bölümünün altındaki editörün altına yakın CSS veya Minified CSS’yi (ne isterseniz isterseniz) tıklayın ve panonuza otomatik olarak eklenin. Oradan, yeni stil sayfanızı müşterinin web sitesi gibi istediğiniz yere koyabilirsiniz.
Değişiklikleri güvenli bir şekilde dışa aktardıktan sonra, temanızı orijinal durumuna döndürmek için her şeyi sıfırlayabilirsiniz. Bunu yapmak için aracı tıklayın ve CSS Hero Editor’un sağ üst köşesindeki düzenleme temalarını sıfırlayın.
