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
alternatif düzenleme
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.
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.
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
Ardından aşağı kaydırın aralık.
- Dolgu (Üst ve Alt): 0 piksel
sonra, kopyalamak hat.
Seçenekleri seçin ikinci sıra düzeni ve düzeni seçin 2/3 sol et 1/3 sağ.
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.
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
Nihai sonuçlar
Izgara Düzeni
İşte ızgara düzenimize bir bakış. Referanslar aynı boyuttaysa bu harika çalışır.
alternatif düzenleme
İşte alternatif düzen. Farklı boyutlardaki referanslar için idealdir.
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ş.
...