Divi'de Izgara Düzeni Referansı Nasıl Oluşturulur

Rifat Divi Eğitimleri Apr 19, 2022

Izgara düzenleri, büyük miktarda bilgi içermek için idealdir. Referansların nasıl yardımcı olabileceğinin harika bir örneği. Neyse ki, referansları Divi'de bir ızgarada sunmak, onları her bir referans için ayrı bir modüle yerleştirmek kadar basittir. Bu eğitimde, bir referans tablosu düzeni oluşturmak için Divi'nin referans modülünün nasıl kullanılacağını öğreneceğiz. Bilgilendirilmiş bir karar vermenize yardımcı olmak için size iki olası düzen göstereceğiz.

? için ne bekliyoruz

Tasarım Önizlemesi

Bu kılavuzda yapacağımız şey aşağıda gösterilmiştir. Web sitemde bir referans alanı oluşturmak için ücretsiz Print Shop Layout Pack'i kullanıyorum.

İlk Izgara Düzeni

Şimdilik, her iki düzeni de ayrıntılı olarak göstereceğiz, ancak ikincisi ilkinden modülleri kullanacak.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Satır Oluştur

İlk önce 3 sütunlu bir satır oluşturun.

Ardından, satır ayarlarını açmak için dişli iyonuna tıklayın.

Menüde tasarım seçeneğini etkinleştirin. Özel Cilt Payı Genişliği seçeneğini kullanarak Cilt Payı Genişliğini 1 olarak ayarlayın.

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

Aralık bölümünde, Üst ve Alt Dolguyu her biri 0 piksele ayarlayın. Satırı bitirin. Bu satırı bitirdikten sonra onu klonlayacağız ve ikinci bir tane oluşturacağız.

  • Dolgu: 0px Üst ve Alt

Referans Modülü Ekle

Ardından, bir referans modülü eklememiz gerekiyor.

Referans İçeriği

Referans içeriği daha sonra eklenmelidir. Bu, yazarın adını, unvanını ve şirketini, ayrıca vücudun içeriğini ve yazarın bir fotoğrafını içerir. Örneklerim için alan adlarını ve varsayılan gövde içeriğini kullanıyorum.

  • Yazar: yazar’s adı
  • İş Unvanı: person’s title
  • Şirket: şirket adı
  • Gövde İçeriği: referans
  • Resim: öne çıkan resim

Referans Modülü Tasarımı

alıntı simgesi

İstediğiniz efekti elde etmek için Alıntı Simgesinin rengini #fd335a ve arka plan rengini beyaz olarak değiştirin. Kişinin adı için simgenin rengini kullanmak da mümkündür. Tüm modüller aynı yapıya sahip olacaktır.

  • Renk: #fd335a
  • Arka Plan Rengi: #ffffff

resim

Resim, listedeki bir sonraki öğedir. Image Border Width 4px olarak ayarlanmalı ve Border Color #0000645 olarak değiştirilmelidir. Her modül için sınır, modülün sınırıyla eşleşecektir. Her biri ekibimiz tarafından bağımsız olarak güncellenecektir.

  • Resim Kenarlık Genişliği: 4px
  • Görüntü Kenarlığı Rengi: #000645

Gövde metni

Bunu yaptığınızda görünen Gövde Metni açılır menüsünden Roboto Mono'yu seçin. Ayarların geri kalanı da varsayılanlarında bırakılmalıdır.

  • Gövde Yazı Tipi: Roboto Mono

Yazar Metni

Yazarın Metni bundan sonra bulunabilir. Son dokunuşlar için yazı tipini Oswald, ağırlığı Yarı Kalın, stili TT ve rengi #fd335a olarak değiştirin.

  • Yazı Tipi: Oswald
  • Tarz: yarı kalın
  • stil: TT
  • Metin Rengi: #fd335a

Konum Metni

Daha sonra iş unvanınızın yazı tipini Roboto Mono olarak değiştirmek isteyeceksiniz. Ayarların geri kalanı da varsayılanlarında bırakılmalıdır.

  • Pozisyon Yazı Tipi: Roboto Mono

Şirket Metni

Ardından, "Şirket Metni" altında, varsayılan yazı tipiniz olarak Roboto Mono'yu seçin. Varsayılan ayarları koruyun.

  • Şirket Yazı Tipi: Roboto Mono

Sınır

Son bölümde, Kenarlık'a tıklayın. Görüntü kenarlığını eşleştirmek için genişliği 24 piksel ve kenarlık rengini #0000645 olarak değiştirin. Modülün yapılandırma ayarlarını kapatın. Ayrıca her modül için ayrı ayrı bordür rengini değiştirmek de mümkündür.

  • Genişlik: 24 piksel
  • Renk: #000645

Modülü Çoğalt

Ardından, modülü iki kez kopyalayıp o satırdaki diğer sütunlara taşımanız gerekir.

2. Referans Modülünü Stillendirin

İkinci referans modülünün ayarlarındaki içeriği değiştirin.

resim

Ardından, tasarım sekmesine gidin ve sayfanın altındaki Görüntü'ye tıklayın. Kenarlığın rengini değiştirmek mümkündür.

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

Sınır

Son bölümde, Kenarlık'a tıklayın. Resmin kenarlığını eşleştirmek için Kenarlık rengini #acf8f5 olarak değiştirin. Modülün yapılandırma ayarlarını kapatın. Modülün yapılandırma ayarlarını kapatın.

  • Renk: #acf8f5

3. Referans Modülünü Stillendirin

Üçüncü referans modülünün ayarlarında gerekli düzenlemeleri yapın.

resim

Tasarım sekmesinde, Görüntü'ye gidin ve Kenarlık Rengi'ni #fccaa0 olarak ayarlayın.

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

Sınır

Son olarak, Görüntü Kenarlığını eşleştirmek için Kenar Rengini #fccaa0 olarak değiştirin. Modülün yapılandırma ayarlarını kapatın.

  • Renk: #fccaa0

Satırı Çoğalt

Ardından, farenizi satırın üzerine getirdiğinizde, bir kopyasını oluşturmak için çoğaltma seçeneğini seçin. 0px Üst ve Alt Dolgu eklemek, bu yeni satırın hemen öncekiyle çakıştığı anlamına gelir. Her modülün içerik ve renklerinin değiştirilmesi ikinci bölümde yapılacaktır.

4. Tanıtma Modülünü Stillendirin

Dördüncü referans modülünün ayarlarındaki içeriği değiştirin.

resim

Görüntü ayarlarını açın ve kenarlık rengini değiştirin.

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

Sınır

Sonunda, görüntü kenarlığına uyması için kenarlık rengini #6eea9d olarak değiştirin. Modülün yapılandırma ayarlarını kapatın.

  • Renk: #6eea9d

5. Referans Modülünü Stillendirin

Beşinci referans modülünün ayarlarındaki içeriği değiştirin.

resim

Görüntüleyici kenarlık rengini değiştirmek için görüntü ayarlarını açın.

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

Sınır

Sonunda, görüntüyle eşleştirmek için kenarlık rengini #6eea9d olarak değiştirin. Son olarak, Görüntü Kenarlığını eşleştirmek için Kenar Rengini #fccaa0 olarak değiştirin. Modülün yapılandırma ayarlarını kapatın.

  • Renk: #fff67f

6. Referans Modülünü Stillendirin

Altıncı referans modülünün ayarlarındaki bilgileri değiştirin.

resim

Şimdi bu açık görüntü ayarları için görüntü rengini tekrar değiştirmemiz gerekiyor.

  • Görüntü Kenarlığı Rengi: #593a94

Sınır

Son olarak, Görüntü Kenarlığına uyması için Kenarlık Rengini #593a94 olarak değiştirin. Modülün yapılandırma ayarlarını kapatın.

  • Renk: #593a94

Son Önizleme

Şebekemizin nasıl düzenlendiğine bir göz atın. Tüm referanslar aynı boyuttaysa, bu teknik mükemmel çalışır.

İşte farklı bir tasarım yaklaşımı. Çeşitli boyutlardaki içerikler için idealdir.

Kapanış Düşünceleri

Bu, Divi'nin referans modülünün bir referans ızgara düzeni oluşturma yeteneğine olan bakışımızı sonlandırıyor. Divi'nin satır ve modül seçeneklerini kullanarak, çeşitli farklı satır ve sütun konfigürasyonlarına sahip bir ızgara oluşturabilirsiniz. Burada gösterdiklerimizi genişleterek, kolayca çok daha büyük bir ızgara yapabiliriz. Diğer türdeki Divi modülleri de bu tekniklerden yararlanabilir.