Blog Yazısı Tasarımını Kolaylaştırmak için Divi Düzen Blokları ile Global Önayarlar Nasıl Kullanılır
Yayınlanan: 2020-08-19Blogunuz için içerik oluşturmak, tasarım konusunda endişelenmenize gerek kalmadan yeterince zordur. Bu nedenle, harika içerik oluşturmaya daha fazla odaklanabilmeniz için tasarım öğelerinin hazır (veya önceden tasarlanmış) olması siteniz için önemlidir. Elbette, geleneksel bir WordPress alt teması bunu halledebilir, ancak çoğu durumda, kolayca değiştirilemeyen bir tasarıma takılıp kalırsınız.
Divi ile bir blog gönderisinin tasarım deneyimi üzerinde daha fazla kontrol sahibi oluyoruz. Divi'nin global ön ayarları, sitenizdeki öğeler için site genelinde bir tasarım (bir alt tema gibi) oluşturmanıza olanak tanır ve tasarımı birkaç tıklamayla istediğiniz gibi değiştirebilmenin ek rahatlığıyla birlikte. Ayrıca, varsayılan WordPress Blok düzenleyicisinde içerik oluşturmaya alışkınsanız, Divi Düzen Bloğunun gücünden yararlanarak gönderi içeriğindeki bu Küresel Ön Ayar öğelerini anında çekebilirsiniz. Bu, şablonla ve sitenin geri kalanıyla eşleşen bir blog gönderisine yepyeni tasarım öğeleri eklemenize olanak tanır.
Bu eğitimde, bir blog yazısı tasarlama sürecini kolaylaştırmak için genel hazır ayarları Divi Mizanpaj bloklarıyla nasıl kullanacağınızı göstereceğiz. Bunu yapmak için, yeni blog yazısı içeriğini hızlı ve verimli bir şekilde tasarlamak için Global Hazır Ayarları nasıl kullanacağınızı göstereceğiz. Bu, sitenizin genel markasından ödün vermeyen bir blog deneyimi oluşturmaya yardımcı olacaktır.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Global Ön Ayarlara Hızlı Bir Bakış
Divi'nin güzelliği, herhangi bir öğenin veya modülün görünümünü özelleştirmek için kullanabileceğiniz çok çeşitli tasarım ayarlarını kullanarak web sitenizin tasarımı üzerinde tam kontrol sahibi olmanızdır.
Yeni Divi Ön Ayarları sistemi, bir Divi öğesi için (bir düğme modülü gibi) özel bir görünüm tasarlamanıza ve bunu ön ayar olarak kaydetmenize olanak tanır. Yaptığınız tüm tasarım değişiklikleri ön ayara kaydedilir. Sayfanıza yeni bir modül eklediğinizde, kayıtlı ön ayarlarınıza göz atabilir ve bunları hızlı bir şekilde uygulayabilirsiniz.
Bir ön ayar uygulandıktan sonra, modülün varsayılan tasarımı ön ayar tarafından kontrol edilir. Bir ön ayarın stilini güncellerseniz, bu ön ayarı kullanan tüm modüller de güncellenir. Bu, küçük bir kayıtlı ön ayar koleksiyonu kullanarak tüm web sitenizin tasarımını kontrol etmenizi sağlar. Ayrıca, sayfanıza yeni modüller eklerken tonlarca zaman kazandırır, çünkü her yeni modülü sıfırdan tasarlamanız gerekmez, bunun yerine Divi Presets kitaplığınızdan hızlı bir şekilde bir görünüm seçebilirsiniz.
Küresel Ön Ayarlı Stil Kılavuzları
Global Preset Style Guides (bu eğitimde kullanacağımız gibi) web sitenizi tasarlarken öğelerin tasarımına hızlı bir başlangıç yapmak için oluşturulabilir. Bu stil kılavuzları, sitenizin tasarımına uyan farklı ön ayarlara sahip bir modül koleksiyonu içerir. Ön ayarların başlangıçta mevcut olması, her yeni modül için tasarım ayarlarını güncelleme zahmetini ortadan kaldırarak tasarım sürecini kolaylaştıracaktır. Kendi stillerini oluşturmak isteyenler için bir stil kılavuzu çerçevemiz bile var.
Divi Düzen Bloklarına Hızlı Bir Bakış
Divi Düzen Bloğu, kullanıcıların Gutenberg düzenleyicisi içindeki bir blog gönderisine herhangi bir Divi Düzeni eklemesine olanak tanır. Hatta diğer WordPress blokları gibi bir Divi Layout Block'u Gutenberg'de yeniden kullanılabilir bir bloğa dönüştürebiliriz. Bu, bazı yararlı Divi Layout tasarımlarını Gutenberg'de bir yazı yazmanın normal akışına dönüştürmek için kapıyı açar.
Global Hazır Ayarlar ve Düzen Blokları Birlikte Nasıl Çalışır?
Genel bir ön ayar "genel" olduğundan, bu ön ayarın stilleri site genelindeki tüm ön ayar örneklerini etkiler. Bu, düzen bloğu düzenleyicisinde bir öğe tasarlarken genel ön ayarları kullanabileceğiniz ve bu ön ayarların da buna göre güncelleneceği anlamına gelir. Bu nedenle, Divi Düzen Bloğu'nu kullanarak blog gönderi içeriğinize bir CTA eklemek istiyorsanız, normal bir sayfa veya gönderide yaptığınız gibi Global Presets ile modüller ekleyerek CTA'yı oluşturabilirsiniz. Bu, gönderinize hızlı ve verimli bir şekilde eşleşen tasarım öğeleri eklemenize olanak tanır.
Blog Yazısı Tasarımını Kolaylaştırmak için Divi Düzen Blokları ile Global Hazır Ayarları Kullanma
Global Hazır Ayarlar Stil Kılavuzunu Yükleme
Bu eğitim için, Web Ajansı Düzeni için Küresel Önayarlar Stil Kılavuzu Düzenini kullanarak Küresel Önayarlar oluşturmaya hızlı bir başlangıç yapacağız. Stil kılavuzunu yükledikten sonra, Divi Düzen Bloğu kullanılarak bir blog gönderisine tasarım öğeleri eklerken kullanılabilecek bazı Global Ön Ayarlara sahip olacağız.
Global Ön Ayarları indirmek için blog gönderisine gidin. “Global Presets Style Guide'ı İndirin” başlıklı bölüme ilerleyin. Ardından e-posta adresinizi girin ve indirmeyi almak için tıklayın.
Zip dosyasını bilgisayarınıza indirdikten sonra dosyayı açın ve WordPress Dashboard'a geri dönün.
Stil kılavuzu JSON dosyasını Divi Kitaplığına aktarmak için…
- Divi > Divi Kitaplığı'na gidin.
- İçe Aktar ve Dışa Aktar düğmesini tıklayın.
- Taşınabilirlik Açılır Penceresi altında, içe aktarma sekmesini seçin.
- Web ajansı global stil kılavuzu JSON dosyasını seçin.
- Ön Ayarları İçe Aktar'ı seçtiğinizden emin olun.
- Ardından içe aktar düğmesini tıklayın.
Artık tüm bu global ön ayarlar Divi Builder'da mevcuttur.
Gönderi Şablonunu Yükleme
Artık stil rehberi hazır olduğuna göre, halihazırda stil rehberi öğeleriyle eşleşen web ajansı blog gönderisi şablonunu içe aktararak blog gönderisi şablonunun tasarımına bir adım atacağız.
Şablonu indirmek için blog gönderisine gidin, e-posta adresinizi girin ve dosyaları indirmek için tıklayın.
Gönderi şablonunu içe aktarmak için…
- Divi > Tema Oluşturucu'ya gidin.
- Ardından taşınabilirlik simgesini tıklayın.
- Taşınabilirlik modu altında, içe aktarma sekmesini seçin.
- İndirdiğiniz gönderi şablonu JSON dosyasını seçin.
- Ardından içe aktar düğmesini tıklayın.
Gönderi Şablonunu Güncellemek/Tasarımlamak için Ön Ayarları Kullanma
Özel gönderi şablonunu yerleştirdikten sonra, özel gövde şablonunu düzenlemek için tıklayın. Burada gönderi şablonu tasarımını da görebilir ve içe aktarılan stil kılavuzunda bulunan genel ön ayarları kullanarak ayarlamalar yapabilirsiniz. Kendi gönderi şablonunuzu sıfırdan oluşturuyorsanız, gönderi şablonu tasarımını web sitesindeki diğer öğelerle eşleştirmeye yardımcı olması için genel ön ayarları kullanabilirsiniz. Örneğin, gönderi başlığında “WALP – H1 – 1” ön ayarını aşağıdaki gibi kullanabilirsiniz:
Veya dinamik yazar bilgilerini içeren tanıtım yazısı üzerinde “WALP – Blurb 2” tanıtım yazısı modülü ön ayarını kullanabilirsiniz.
Gönderi içeriği modülü, blog gönderi içeriğinizin sayfada oluşturulacağı alandır. Bu nedenle, içerik sonrası modülünün tasarım ayarlarını sitenizde kullanılan diğer metin öğeleriyle eşleştirmeniz önemlidir.
Gönderi şablonunu sıfırdan oluşturuyorsanız, site üzerinden çeşitli metin modüllerinden metin ayarlarını kopyalayıp yapıştırabilirsiniz. Veya önceden siteniz için önceden ayarlanmış bir stil kılavuzu oluşturduysanız, stil kılavuzundaki bu modüllerden tasarım öğelerini kopyalayabilirsiniz.
Örneğin, tüm metin stilleri için yapılan genel hazır ayar için başlık metni stillerini tek bir metin modülünde kopyalayabilirsiniz.
Ardından, bu başlık metin stillerini gönderi şablonu için gönderi içeriği modülüne geçirin. Bu, gönderi içeriğiniz için kullanılan tüm başlığın sitenin stiliyle eşleşmesini sağlamaya yardımcı olacaktır.
Burada önemli olan sitenizin stiline uygun bir yazı şablonunuzun olmasıdır. Şablonu sıfırdan tasarlıyorsanız, genel hazır ayarları kullanmak bu sürece çok yardımcı olabilir.
Genel Ön Ayarları Divi Düzen Bloklarıyla Kullanma
Şablon tasarlandıktan sonra, varsayılan WordPress blok düzenleyicisini kullanarak ek gönderi içeriği öğeleri tasarlamak için Divi Layout bloklarıyla global ön ayarları kullanmaya başlamaya hazırız.
Bunu yapmak için bir blog gönderisini düzenleyin (veya oluşturun). Ardından, bazı sahte içeriğiniz olduğundan emin olun (birkaç başlık ve paragraf ve öne çıkan bir resim gibi).
Şu anda, gönderiye ön uçtan bakarsanız, gönderi içeriği gönderi şablonunda görüntülenecektir ve içerik (başlıklar, gövde metni vb.), stili gönderi içeriği modülü ayarlarından devralır.
İçerik sonrası modülü yalnızca temel metin içeriğinin stilini işleyecektir. Varsayılan WordPress Blok düzenleyicisini kullanarak gönderinize ek öğeler eklemek istiyorsanız, bu öğelerin stilinin bir alt temada özel CSS aracılığıyla değiştirilmesi gerekir. Bu, Divi Düzen Bloklarını kullanmadığınız sürece geçerlidir.
Gönderi şablonunuzla ve sitenizle eşleştirmek istediğiniz ek içerik eklemek için Divi Düzen bloklarını kullanabilirsiniz. Bu, istediğiniz herhangi bir içeriği eklemenize ve Divi Builder'ı kullanarak biçimlendirmenize olanak tanır. Ayrıca, global hazır ayarları da kullanabildiğimiz için, blog yazısı içeriğimizin tasarımını anında daha da kolaylaştırabiliriz.
Tasarım #1: Global Hazır Ayarlar ve Divi Düzen Bloğu ile bir Blog CTA'sı Oluşturma
Bu ilk örnekte, gönderi şablonu ve site tasarımıyla eşleşen özel bir blog CTA'sı oluşturalım.
Bunu yapmak için gönderi içeriğine bir Divi Düzen Bloğu ekleyin.
Ardından Yeni Düzen Oluştur'a tıklayın.
Bu, temelde her zamanki gibi Divi Builder olan düzen bloğu düzenleyicisini açacaktır. Varsayılan bölüme tek sütunlu bir satır verin.
Global Presets Layout'unuzu farklı bir tarayıcıda açın, öğeleri görebilmek için ön uçta oluşturmak için tıkladığınızdan emin olun. Bu şekilde, bir tarayıcıda Düzen düzenleyiciyi ve diğerinde stil kılavuzunu açarsınız.
Bir stil rehberiniz yoksa, getirmek istediğiniz tüm tasarım öğelerine erişebilmeniz için sitenizde sayfa düzenini açabilirsiniz.
Stil Kılavuzundan Arka Planı Kopyala
Bu CTA için stil kılavuzundaki koyu mavi arka planı kullanacağız. Metin modülünün ayarlarını açın ve arka planı kopyalayın.
Ardından, düzen düzenleyicide bölümün ayarlarını açın ve arka planı bölüme geçin.
H3 Ön Ayarlı Metin Modülü Ekle
Ardından, satıra yeni bir metin modülü ekleyin.
Ardından ayarları açın ve aşağıdakileri güncelleyin:
Aşağıdaki HTML'yi gövdeye yapıştırarak CTA için bir H3 başlığı ekleyin:
<h3>Learn How One Client Increased Revenue by 500%</h3>
Global Presents açılır menüsünü açın ve H3 başlığı için ön ayarı seçin (WALP – H3 – 1)
Tasarımı Güncelle
Ardından metin rengini beyaza güncelleyin ve hizalamayı ortalayın.
Global Preset ile Düğme Ekle
Metin modülünün altına yeni bir düğme ekleyin.
Ardından düğme metnini güncelleyin ve genel ön ayarlı düğme tasarımlarından birini seçin. Bu örnek için “WALP – Button 3”ü kullanalım.
Değişiklikleri Kaydet
Tamamlandığında, Kaydet ve Çık'ı tıklayın.
Artık WordPress Blok Düzenleyici'de görüntülenen öğeyi görebilirsiniz.
Tasarım #2: Global Önayarlar ve Divi Düzen Bloğu ile bir Blog Alıntısı Oluşturma
Bu sonraki tasarım öğesi için blog gönderisine bir alıntı ekleyeceğiz.
Divi Düzen Bloğu Ekle
Başlamak için, teklifin görüntülenmesini istediğiniz yere Divi Düzen Bloğu ekleyin.
Ardından Yeni Düzen Oluştur'a tıklayın.
Stil Rehberinden Arka Planı Kopyala ve Yapıştır
Stil kılavuzundan koyu mavi arka planı kopyalayın.
Ardından, düzen düzenleyicinin varsayılan bölümüne yapıştırın.
Satır ekle
Ardından, bölüme tek sütunlu bir satır ekleyin.
Ön Ayarlı Referans Modülü Ekle
Ardından sütuna bir referans modülü ekleyin. Ardından Global Preset “WALP – Testimonial 2”yi seçin.
Bu, blog yazısı için teklifin tasarımında size harika bir başlangıç sağlayacaktır.
Tasarımı güncelle
Tasarım sekmesi altında tasarım ayarlarını aşağıdaki gibi yapın:
- Alıntı Simge Rengi:
- Gövde Yazı Tipi Ağırlığı: Hafif
- Gövde Yazı Tipi Stili: italik
- Gövde Metni Hizalama: sol
- Gövde Metni Rengi: #ffffff
- Yazar Yazı Tipi: Ubuntu
- Yazar Metin Boyutu: 16px
Yeni Küresel Ön Ayar Ekle
Bu referans ön ayarında önemli değişiklikler yaptığımız için, gelecekteki gönderi alıntılarında kullanılmak üzere bu noktada yeni bir tane oluşturmak mantıklıdır.
Yeni bir tane oluşturmak için “Mevcut Stillerden Yeni Hazır Ayar Oluştur” düğmesine tıklayın. Ardından yeni ön ayara bir ad verin (“blog gönderisi alıntısı”) ve kaydedin. Global ön ayar artık ileride kullanılmaya hazırdır.
Düzeni kaydedin ve gönderi içeriğinde göreceksiniz.
Tasarım #1: Global Önayarlar ve Divi Düzen Bloğu ile Bir Blog Gönderisine Blurb Ekleme
Bu sonraki örnek için, gönderiye birkaç tanıtım yazısı ekleyeceğiz.
Yeni Divi Düzen Bloğu Ekle
Başka bir Divi Düzen Bloğu ekleyin ve Yeni Düzen Oluştur düğmesini tıklayın.
Düzen Düzenleyici'de, düzene iki sütunlu bir satır ekleyin.
Ön Ayarlı Blurb Modülü Ekle
Sol sütuna bir tanıtıcı modül ekleyin.
Tanıtım yazısına yeni bir simge görüntüsü ekleyin. Ardından, ön ayarlar açılır menüsünü açın ve “WALP – Blurb 4” ön tanımlı ön tanımını seçin.
İkinci Bulanıklığı Ekle
Ardından, tanıtım metnini kopyalayın ve 2. sütuna yapıştırın ve resmi güncelleyin.
Düzeni kaydedin ve gönderi içeriğinde göreceksiniz.
Son sonuç
Şimdi nihai sonucu görmek için gönderiyi ön uçta açın.
Global Önayarlı Yeniden Kullanılabilir Bloklar
Divi yerleşim blokları ile yeniden kullanılabilir bloklardan yararlanmak istiyorsanız, bunların global ön ayarlarla çalışacaklarını bilmek güzel. Bu nedenle, daha önce oluşturduğumuz blog CTA'sını yeniden kullanılabilir bir blok olarak kaydetmek istiyorsanız, gönderilerinizi oluştururken CTA'ları eklemek için kullanabileceğiniz uygun bir bloğunuz olacaktır. Ve CTA, genel ön ayarlı bir düğme ve metin kullandığından, o öğe için genel ön ayarın güncellenmesi, yeniden kullanılabilir bloktaki öğeyi de güncelleyecektir.
Son düşünceler
Global Presets, Divi'de bulunan en güçlü tasarım araçlarımızdan biridir. Site genelinde kullandığınız modüllere genel ön ayarlar eklemek için zaman ayırdığınızda, düzen bloklarını kullanarak blog yazısı şablonları ve içeriği tasarlamanın kolaylaştırılmış sürecinden gerçekten yararlanabilirsiniz.
Yorumlarda sizden haber bekliyorum.
Şerefe!