Izgara şeklinde bir Görüşler bölümü oluşturmak ister misiniz? Testimonial modülü ile web sayfanızda Divi ?

Izgara düzenleri aşağıdakiler için idealdir: içindekiler bir arada tutulması gerekenler. Tanıklıklar bunun harika bir örneğidir. İçinde Divi, her referans için yeni bir modül ile referanslar oluşturulur. Ama neyse ki, onları bir ızgarada görüntülemek basittir. 

Bu yazıda, modül ile bir ızgara şeklinde referansların nasıl düzenleneceğini göreceğiz. Yorumlar de Divi. İki farklı düzen göreceğiz, böylece ihtiyaçlarınıza en uygun olanı seçebilirsiniz.

Başlayalım!

anket

İşte bu eğitimde ne yapacağımıza genel bir bakış.

Izgara Düzeni

Izgara biçiminde Divi Referans modülü

alternatif düzenleme

Izgara biçiminde Divi Referans modülü

Divi ile ilk yerleşimin tasarımı

Her iki düzenin ayrıntılarını göstereceğiz, ancak ikinci düzen, birinciden modülleri kullanacak.

Bir çizgi oluştur

İlk önce, yeni bir satır oluşturun ve bir 3 sütun düzeni.

sonra aç hat parametreleri dişli simgesine tıklayarak.

Sekmeyi seçin Dizayn ve etkinleştir Özel Oluk Genişliği Kullan ve 1'e ayarlayın.

  • Özel Oluk Genişliğini Kullan: Evet
  • Oluk Genişliği: 1

Ardından aşağı kaydırın aralık ve boşluk ayarlarını aşağıdaki gibi değiştirin. Satırı kapatın. İkinci bir satır oluşturacağız, ancak önce bunu bitirip sonra klonlayacağız.

  • Dolgu (Üst ve Alt): 0 piksel

Bir "Tanıtım" modülü ekleyin

Sonra bir ekleyin referans modülü Sol sütunda.

Bir referans modülü ekleyin

Modül içerik ayarları

Sonra ekleyin içindekiler tanıklığın. Bu, yazarın adını, iş unvanını, şirket adını, içindekiler ifade veren kişinin cesedi ve fotoğrafı.

  • Yazar: yazarın adı
  • İş Ünvanı: Şirkette Bulunduğu Görev
  • Şirket: şirket adı
  • Gövde İçeriği: referans
  • Resim: seçilen resim

Modül tasarım parametreleri

Ardından sekmeyi seçin Dizayn.

alıntı simgesi

Simge ayarlarını değiştirin. Simge rengi, kişinin adı için de kullanılacaktır. Tüm modüller için aynı olacaktır.

  • Alıntı Simge Rengi: #fd335a
  • Alıntı Simgesi Arka Plan Rengi: #ffffff
Resim

Ardından aşağı kaydırın Resim ve aşağıdaki ayarları değiştirin:

  • Resim Kenarlığı Genişliği: 4 piksel
  • Görüntü Kenarlığı Rengi: #000645
Gövde metni

Ardından aşağı kaydırın gövde metni ve yazı tipini değiştir

  • Gövde Yazı Tipi: Roboto Mono
YazarMetin

Ardından aşağı kaydırın YazarMetin.

  • Yazar Yazı Tipi : Oswald
  • Yazı Ağırlığı: Yarı Kalın
  • Yazı Tipi Stili: TT
  • Metin Rengi: #fd335a
Konum Metni

Ardından aşağı kaydırın Konum Metni (iş unvanı) ve yazı tipini değiştirin.

  • Pozisyon Yazı Tipi: Roboto Mono
Şirket Metni

Ardından aşağı kaydırın Şirket Metni ve yazı tipini de değiştirin.

  • Şirket Yazı Tipi: Roboto Mono
sınır

Son olarak, aşağı kaydırın sınır ve kenarlığı aşağıdaki gibi değiştirin:

  • Kenar Genişliği: 24px
  • Kenar Rengi: #000645

Referans modülünü çoğaltın

ebeveyn, modülü iki kez çoğalt ve klonlanmış iki modülü satırdaki diğer sütunlara sürükleyin.

İkinci Referans modülünü özelleştirin

Aç onları ayarlar ikinci Referans modülünün ve içeriği düzenleyin.

Resim

Ardından sekmeyi seçin Desing ve kaydır Resim. Kenarlık rengini değiştirin.

  • Görüntü Kenarlığı Rengi: #acf8f5
sınır

Son olarak, aşağı kaydırın sınır ve rengi değiştirin.

  • Kenar Rengi: #acf8f5

Üçüncü Referans Modülünü Özelleştirin

Aç onları ayarlar üçüncü Referans modülünün ve içeriği düzenleyin.

Resim

Ardından sekmeye gidin Dizayn, kaydır Resim ve kenarlık rengini değiştirin.

  • Görüntü Kenarlığı Rengi: #fccaa0
sınır

Son olarak, aşağı kaydırın sınır ve kenarlık rengini Görüntü Kenarlığına uyacak şekilde değiştirin. Modül ayarlarını kapatın.

  • Kenar Rengi: #fccaa0

Yinelenen satır

ebeveyn, çizgiyi çoğalt çizginin üzerine geldiğinizde görünen çoğaltma seçeneğine tıklayarak. Üst ve alt dolguya 0px eklediğimiz için bu yeni satır otomatik olarak üstündeki satıra dokunuyor. İçeriğini ve renklerini değiştirmek için her modülü ikinci bölümde açacağız.

Dördüncü Referans modülünü özelleştirin

Aç onları ayarlar ikinci Referans modülünün ve içeriği düzenleyin.

Resim

Ardından aşağı kaydırın Resim ve kenarlık rengini #6eea9d olarak değiştirin.

  • Görüntü Kenarlığı Rengi: #6eea9d
sınır

Son olarak, aşağı kaydırın sınır ve görüntünün Kenarlığına uyması için kenarlık rengini #6eea9d olarak değiştirin. Modül ayarlarını kapatın.

  • Kenar Rengi: #6eea9d

Beşinci Referans modülünü özelleştirin

Aç onları ayarlar Beşinci Referans modülünün ve içeriğini değiştirin.

Resim

Ardından aşağı kaydırın Resim ve kenarlık rengini #fff67f olarak değiştirin.

  • Görüntü Kenarlığı Rengi: #fff67f
sınır

Son olarak, aşağı kaydırın sınır ve kenarlık rengini Görüntü Kenarlığına uyacak şekilde değiştirin. Modül ayarlarını kapatın.

  • Kenar Rengi: #fff67f

Altıncı Referans Modülünü Özelleştirin

Son olarak, açın ayarlar altıncı Referans modülünün içeriğini değiştirin.

Resim

Ardından aşağı kaydırın Resim ve kenarlık rengini #593a94 olarak değiştirin.

  • Kenarlık Resmi Rengi: #593a94
sınır

Son olarak, aşağı kaydırın sınır ve rengi görüntünün Kenarlığına uyacak şekilde değiştirin. Modül ayarlarını kapatın.

  • Kenar Rengi: #593a94

Sonuç

İşte şimdiye kadar elde ettiğimiz sonuç.

Divi ile ikinci düzenin tasarımı

Referanslar kabaca aynı boyuttaysa, oluşturduğumuz referans tablosu harika çalışır. 

Ya kısa ve uzun referanslarınız olsaydı? Bunun için bir sütunlar için farklı boyutlarda ızgara idealdir. En fazla bilgi içeren referansları büyük sütunlara yerleştirebiliriz.

Bu örnek için. aynı boşluk ayarlarına sahip yeni sütunlar oluşturacağız ve öncekiyle aynı referansları kullanacağız, ancak farklı miktarlarda metinle.

Alternatif satırları oluşturun

İlk olarak, 2 sütuna bir satır ekle ile sütun 1/3 sola ve bir sütun 2/3 sağda.

Alternatif satırları oluşturun

Ardından hat ayarlarını açın, sekmesine gidin. Dizayn, kaydır Boyutlandırma ve seç Özel Oluk Genişliğini Kullan. Oluk genişliğini 1 olarak değiştirin.

  • Özel Oluk Genişliğini Kullan: EVET
  • Oluk Genişliği: 1
Alternatif satırları oluşturun

Ardından aşağı kaydırın aralık.

  • Dolgu (Üst ve Alt): 0 piksel
Alternatif satırları oluşturun

sonra, kopyalamak hat.

Alternatif satırları oluşturun

Seçenekleri seçin ikinci sıra düzeni ve düzeni seçin 2/3 sol et 1/3 sağ.

Alternatif satırları oluşturun

Dört Referans modülü ekleyin

Son olarak, Referans modüllerinizi oluşturun veya sürükleyin çizgilere. Önceki örnektekiyle aynı modülleri kullanıyoruz, ancak içerik farklı boyutlar oluşturacak şekilde değiştirildi.

Izgara biçiminde Divi Referans modülü

Modüller, önceki örnekte olduğu gibi sütunlarının genişliğine uyum sağlar, ancak her birinin gövde içeriği nedeniyle farklı yükseklikleri vardır. Bu, ızgarada garip boşluklar yaratır. Neyse ki, düzeltmek kolaydır.

İlk modülün ayarlarını açın ve sekmeye gidin Dizayn. Kaydır Boyutlandırma ve "Yükseklik" için %100 girin. 

Bunu her modül için tekrarlayın .

  • Yükseklik: %100
Izgara biçiminde Divi Referans modülü

Nihai sonuçlar

Izgara Düzeni

İşte ızgara düzenimize bir bakış. Referanslar aynı boyuttaysa bu harika çalışır.

Izgara biçiminde Divi Referans modülü

alternatif düzenleme

İşte alternatif düzen. Farklı boyutlardaki referanslar için idealdir.

Izgara biçiminde Divi Referans modülü

DIVI'yı Şimdi İndirin !!!

Sonuç

Bu, modülle ızgara biçiminde bir referans bölümünün nasıl oluşturulacağına bakışımızdır. Yorumlar Divi'nin. Divi'nin satır ve modül ayarları, birden çok satır ve sütundan oluşan bir ızgara oluşturmak için birlikte mükemmel şekilde çalışır. 

Burada gösterdiğimiz örnekler, daha da büyük ızgaralar oluşturmak için kolayca genişletilebilir. Kavramlar ayrıca diğer Divi modülleriyle de çalışır.

Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...