WordPress'e özel CSS sınıfları nasıl eklenir (3 kolay yol)

CSS'yi bilenler, CSS sınıflarının tüm bir siteyi şekillendirirken büyük bir zamanlar olduğunu bilirler. Ancak kodlamazsanız, ne kadar güçlü olabileceğini hiç fark etmemiş olabilirsiniz. Bugün bunu değiştiriyoruz.

Bu yazıda, WordPress'e CSS sınıfı eklemenin 3 kolay yolunu göstereceğim - hiç tek bir kod satırı yazmamış olsanız bile. Ayrıca, güçlü WordPress web sitesi oluşturucu Divi'yi kullanarak bunu nasıl yapacağınızı öğreneceksiniz.

CSS sınıfları nelerdir ve nasıl yardımcı olurlar?

CSS ( basamaklı stil sayfaları ), bir web sitesinde renkler, boşluk ve yazı tipleri gibi öğelerin tasarımını ve görünümünü kontrol eden koddur. CSS sınıfı, birden fazla öğeye atadığınız yeniden kullanılabilir bir etikettir, böylece her öğe için aynı işlemi tekrarlamak yerine hepsini bir kerede stilize edebilirsiniz.

CSS sınıfları olmadan, özellikle birden fazla sayfaya sahip daha büyük WordPress sitelerinde çalışırken zaman alıcı hale gelen her öğeyi manuel olarak şekillendirmeniz gerekir. Ancak çoğu zaman, çoğu web sitesi, fiyatlandırma sayfasındaki düğmeler veya farklı bölümlerdeki özellik kutuları gibi tekrarlayan öğeleri ve motifleri içerir.

Bu öğeler benzer görünüyor çünkü arka uçta aynı sınıf grubunu paylaşıyorlar. Dolayısıyla, CSS'yi ortak bir sınıf grubunun bir öğesine uyguladığınızda, içindeki her öğe otomatik olarak aynı stil ayarlarını devralır. Ön uçta, bu onlara görsel olarak benzer bir görünüm verir. CSS sınıfları zamandan tasarruf edin, tasarımı tutarlı tutun ve gelecekteki düzenlemeleri kolaylaştırın - sadece her öğeyi tek tek değiştirmek yerine sınıfı güncellemeniz gerektiğinden.

WordPress'e CSS sınıfları eklemenin yolları

CSS kullanma yeterliliğinize bağlı olarak bir WordPress web sitesine CSS sınıflarını çeşitli şekillerde ekleyebilirsiniz. WordPress özelleştirici ve basit özel CSS gibi bir eklenti kullanarak nasıl yapılacağını size göstereceğim, ancak her iki yöntem de CSS yazmanızı gerektiriyor.

Kodsuz yöntemle daha fazla ilgileniyorsanız üçüncü yöntemi atlayın.

1. WordPress Customer'ı kullanarak

Diyelim ki WordPress sayfanızda birden fazla düğme var. Şu anda sade görünüyorlar ve öne çıkmalarını istiyorsunuz, bu yüzden lacivert bir sınır ve gök mavisi arka plan eklemeyi planlıyorsunuz.

Her bir düğmeye CSS eklemek, işlemi sekiz kez tekrarlamanız gerektiğinden, önemli ölçüde zaman ayıracaktır. Ancak CSS sınıflarıyla, her düğmeye aynı CSS sınıfını atayabilir ve CSS'yi yalnızca bir kez yazabilirsiniz. CSS sınıfımızı ' Custom-A' adlandıralım. WordPress Sayfa Düzenleme pencerenizde, herhangi bir düğmeye tıklayın> Ayarlar (Dişli simgesi)> Gelişmiş seçeneği aşağı indirin. Şimdi, sınıf adını ek CSS sınıflarına yazın.

Her düğme için işlemi tekrarlayın ve kaydet. Stil kodunu bu düğmelere eklemek için WordPress Customerer> Ek CSS'ye gitmeniz gerekir.

Sınır lacivertini ve arka plan gökyüzünü mavi yapmak için CSS'nizi buraya yapıştıracaksınız.

Seçtiğimiz CSS sınıf adının koddaki stil kurallarından önce geldiğine dikkat edin. Bu, kodun bu sınıf adını atanan her öğeye uygulanmasını sağlar.

Sayfanızı yayınladıktan ve önizlemedikten sonra, stil düğmeleri şöyle görünecektir:

Bu basit - eğer CSS biliyorsanız.

WordPress Customerer da küçük değişiklikler yapmak için mükemmeldir. Bununla birlikte, sorun, temaya bağlı CSS eklenmesidir, yani temaları değiştirirseniz kaybolabilir. Bu nedenle, web sitenizdeki farklı temaları test etmeyi seviyorsanız, farklı bir temaya her geçiş yaptığınızda kodu güncellemeniz gerekir, bu da eğlenceli değildir. Bu durumda, CSS sınıf stillerinizi güvende tutmak için bir eklenti kurmak çok daha iyi bir seçenektir.

2. Basit özel CSS gibi bir eklenti kullanma

Basit özel CSS eklentisini yükledikten sonra, görünüm bölümüne özel CSS seçeneği eklenir. Şimdi yalnızca CSS kodunuzu eklemeniz ve değişiklikleri yansıtacak özel CSS'yi güncellemeniz gerekir. (Hala ortak stillere sahip olmak istediğiniz öğelere sınıf adları atamanız gerekiyor.)

Bunun gibi eklentiler, temanızı daha sonra değiştirseniz bile, özel CSS'nizi sağlam tutar. Ayrıca WordPress Customerer'dan biraz daha düzenli. Bununla birlikte, her iki yöntem de ölçeklenebilir değildir, çünkü tüm web sitenizin birden fazla eleman grubu için özel CSS tasarruf ettiğinizde kolayca dağınabilir.

Bu nedenle, site çapında stil için önerilen yaklaşım bir çocuk teması oluşturmak ve stil sayfasını güncellemektir. Bu şekilde, tema güncellemelerinden sonra bile tüm değişiklikleriniz çocuk temasında güvende tutulur.

Etkili olmasına rağmen (ve kodlayıcılar tarafından önerilse), bu yöntem hala manuel çalışma gerektirdiği için hızlı bir şekilde teknik hale gelebilir-zaman alıcı ve yeni başlayan dostu olmayan her öğeyi (veya CSS sınıflarını kullanarak birden fazla öğeyi) şekillendirmeniz gerekecektir. Ayrıca sınıf adlarını takip etmeniz gerekecek - sadece belirli bir düğme sınıfını düzenlemek istediğinizi ve sonsuz kod dizelerinde kaydırdığınızı hayal edin.

Peki ya tek bir kod satırı yazmadan stilleri ölçekleyebilseydiniz? Divi gibi modern sürükle ve bırak sayfa oluşturucular burada.

3. Divi gibi kodsuz bir web sitesi oluşturucu kullanma

Divi gibi modern bir kodlu web sitesi oluşturucu kullanmanın güzelliği, sitenizde tutarlı stiller uygulamak için CSS (veya herhangi bir kod) yazmanız gerekmemesidir. Görsel bir arabirimle, sadece tasarım ayarlarını seçip özelleştirerek bölümlere, satırlara, sütunlara ve modüllere stiller atayabilirsiniz.

Divi'de, CSS sınıfları yerine ön ayarlar oluşturursunuz. Divi yıllarca, düğmeler, bulanıklık ve görüntüler gibi modüller için stilleri kaydetmenize ve yeniden kullanmanıza izin veren modül tabanlı ön ayarlar sundu. Ancak daha da şaşırtıcı bir şey başlattık - daha da ileri gitmenize izin veren seçim grubu ön ayarları.

Seçenek grup ön ayarlarından önce, yalnızca modüller arasında ön ayar uygulamanıza izin verildi. Örneğin, bir bulanıklık ön ayarına sadece başka bir bulanıklıkta kullanılabilir. Şimdi, ayarları modüller arasında bile paylaşabilirsiniz.

Bir seferde bir öğeyi özelleştirmek yerine, seçenek grubu ön ayarları, arka planlar, sınırlar veya metin stilleri gibi paylaşılan ayarlar için stilleri kaydetmenizi ve aynı anda birden fazla farklı öğeye uygulamanızı sağlar. Örneğin, bir bölüm ve bir sütun arka plan rengi kullanıyorsa, bu stil ayarını önceden ayar olarak kaydedebilir ve uyumlu bir tasarım oluşturmak için tüm ilgili öğelere uygulayabilirsiniz.

Divi, herhangi bir kodlamadan sürükle ve bırak özellikleri aracılığıyla oluşturma ve tasarruf stillerini ön ayar olarak basitleştirir, özellikle de kodlayıcı olmayanlar için site çapında tasarım değişikliklerini daha hızlı ve daha erişilebilir hale getirir.

Divi 5'i indir

Bakalım aşağıda daha ayrıntılı olarak ne demek istediğimi görelim

Divi'nin seçenek grup ön ayarları CSS sınıflarını eklemeyi kolaylaştırır

Divi'nin seçenek grup ön ayarları CSS sınıfları kavramını alır ve kodlayıcı olmayanlar için basitleştirir. Sınıfları manuel olarak yazmak ve atamak yerine, artık sadece birkaç tıklamayla farklı öğelerde paylaşılan tasarım stillerini uygulamak için Divi'nin görsel oluşturucusunu kullanabilirsiniz.

Bu ön ayarlar seçenek seviyesinde çalışır, yani arka plan renkleri, sınırlar veya birden çok öğe türü arasında paylaşılan aralıklar gibi belirli tasarım ayarlarını hedeflerler. Örneğin, bir bölümün arka plan ayarları bir sütuna, satıra ve hatta metin öğesine uygulanabilir.

Web sitenizin tasarımını tutarlı tutmanın daha hızlı, daha kolay ve daha sezgisel bir yoludur. İşte nasıl:

• Elemanlar arasında yeniden kullanılabilir stiller: Her öğeyi manuel olarak özelleştirmeniz gerekmez. Seçenek grup stillerini ön ayar olarak kaydedin ve bunları herhangi bir öğeye uygulayın.
• Global güncellemeler tek bir düzenleme ile: Bir ön ayarını bir kez değiştirin ve bu ön ayarı kullanan tüm öğeler otomatik olarak güncellenir. Bu, tasarım ayarlamalarını tüm web sitenizde hızlı ve verimli hale getirir.
• Birden çok ön ayarları birleştirin: Katman ve Sıfırdan başlamadan esnek ve yaratıcı bir tasarım kombinasyonu için herhangi bir öğe üzerinde farklı ön ayarları (örn. Sınırlar, gölgeler, metin stilleri) karıştırın.
• Temel stiller için varsayılan ön ayarları özelleştirin: Bunları otomatik olarak tüm ilgili öğelere uygulamak için ön ayarları varsayılan olarak kaydedin.

Seçenek Grup Ön Ayarları hakkında daha fazla bilgi edinin

Kodlamadan WordPress'e CSS sınıfları eklemek için divi nasıl kullanılır

Artık Divi'nin opsiyon grup ön ayarlarını ne olduğunu bildiğinize ve onlarla çalışmak için kodlamayı bilmenize gerek olmadığına göre, size Divi Builder içinde tam olarak nasıl çalıştığını göstermek istedim. Arka plan, sınır, kutu gölgesi vb. Gibi herhangi bir seçenek ayarına grup ön ayarlarını oluşturmak, kaydetmek ve uygulamak için yapmanız gerekenler. Örneğimiz için bir fiyatlandırma sayfasını özelleştirelim.

Düğme arka planını değiştirme

Dikkatli düğmeyi sayfanın rengine uyacak şekilde mor olarak değiştirmek istediğimi varsayalım. Bu nedenle, ilk sütunun düğmesini özelleştireceğim ve ayarları birincil ışık düğmesi ön ayar olarak kaydedeceğim. (UI ayarlarındaki siyah renk, bir ayar ayar ayarını düzenlediğinizi gösterir. Karanlık modu seçtiyseniz, tam tersi olacaktır.)

Şimdi, aynı ayarları diğer iki düğmeye uygulamak için, düğme ön ayarını birincil ışığa değiştireceğim.

Bir sütunun gölgesini değiştirmek

Tüm sütunlara bir kutu gölgesi ekleyelim. İlk sütuna bir kutu gölgesi ekleyeceğim ve Shadow Box Shadow ön ayar olarak kaydedeceğim.

Aynı gölgeyi diğer iki sütuna uygulamak için, Box Shadow ön ayarını Gölge olarak değiştireceğim.

Metin ön ayarlarını değiştirme

H1 ve H2S gibi metin öğeleri için stilleri de değiştirebilirsiniz. H3 ön ayarlı sütunların güncellenmesi şu şekildedir:

Kaydettikten sonra, fiyatlandırma sayfası nasıl görünecek:

Size nasıl çalıştığını göstermek için küçük değişiklikler yapmama rağmen, olasılıkları hayal edebilirsiniz. Divi'nin opsiyon grup ön ayarlarıyla, grupların özel stillerini düzenlemek bir düğmenin tıklaması kadar basittir. Ama bu sadece buzdağının ucu. Ayrıca:

• Başlıklar veya düğmeler gibi temel öğelerin site genelinde otomatik olarak devralınması için seçenek grupları için varsayılan ön ayarları ayarlayın. Varsayılan ön ayarların nasıl çalıştığını anladıktan sonra, eski yöntemleri kullanmaya asla geri dönmeyeceksiniz.
• Katman Seçenek Grup ön ayarları, paylaşılan bir arka plan uygulamak ve daha sonra belirli unsurları öne çıkarmak için bir gölge veya sınır stili istiflemek gibi ekstra vurgu eklemek için eleman ön ayarlarının üstünde ön ayarlar.

Divi'nin seçenek grup ön ayarları hakkında bilmeniz gereken her şey hakkında bir kılavuz yazdık. Divi ile sınıf tabanlı web tasarımının nasıl basitleştirileceği konusunda tasarım fikirleri ve tavsiyeler almak için makalenin tamamını okuyun.

Seçenek Grup Ön Ayarları hakkında daha fazla bilgi edinin

Divi, sınıf tabanlı tasarım sistemi için bir oyun değiştiricidir

Divi'nin seçenek grup ön ayarları CSS sınıflarının gücünü herkese getiriyor. İster solo tasarlar, ister bir ekiple işbirliği yapın, ön planlar iş akışınızı hızlandırın, siteniz büyüdükçe güzel bir şekilde ölçeklendirin ve tutarlı stilleri zahmetsiz hale getirin. Geleneksel CSS iş akışlarından daha hızlı, daha verimli ve çok daha sezgiseller.

Bugün Divi 5'e başlayın

Divi 5 tam güncelleme modunda. Her hafta yeni özellikler piyasaya sürüyoruz, tıpkı seçenek grup ön ayarları gibi, gelişmiş birimler, CSS tasarım değişkenleri ve herhangi bir web sitesi tasarlamaya yaklaşma şeklinizi değiştiren daha fazlasını bilmek iyi bir fikirdir.

Divi 5 hakkında daha fazla bilgi edinin

Divi 5, Divi Dash, Divi Hızlı Siteler ve Divi AI gibi güçlü araçlara sahip güçlü bir tasarım çerçevesidir - tek bir kod satırına dokunmadan özel, profesyonel web siteleri oluşturmanıza yardımcı olmak için kullanılmıştır. Sizi sınırlayan hiçbir şey yok, web sitesi tasarımının geleceğine bir test sürüşü almaya hazır mı?

Divi 5'i indir