Divi referans modülü ile referans ızgara düzeni nasıl yapılır
Kutu düzeni bir araya getirilmesi gereken içerik için çok iyidir. Tanıklıklar çok iyi bir örnektir. Divi referansları her referans için yeni bir modülle yapılır, ancak neyse ki kutuda görüntülemek basittir. Bu makalede, bir divi referans modülü ile referans ızgara düzeni nasıl yapılacağını göreceğiz. İki farklı düzen göreceğiz, böylece ihtiyaçlarınız için en iyisini seçebilirsiniz. Başlayalım! Aşağıdaki önizleme, bu öğreticide ne yapacağımızdır. Divi’de bulunan ücretsiz baskılı mağaza düzen paketinin tasarım stilini kullanarak referans bölümünü yaptım.
Referans ızgara düzeni sonuçları
Özel genişlik kullanın: evet
Talang genişliği: 1 Ardından, alana gidin ve üst ve alt dolguyu 0px olarak değiştirin. Sırayı kapatın. İkinci bir sıra yapacağız, ama önce bunu bitireceğiz, sonra klonlayacağız.
Dolgu: 0px üst ve alt Bir sonraki tanıklık modülünü ekleyin, sol sütuna bir referans modülü ekleyin. Ayrıca, referans içeriği modülü içeriği eklenir. Bu, yazarın adı, pozisyon, şirket adı, içeriği ve kişinin resmini içerir. Örneğin için alanın adını ve varsayılan içeriğin içeriğini kullanıyorum.
Yazar: Yazar Adı
İş Başlığı: Şirket Başlığı: Şirket Adı
Vücut İçeriği: Referanslar
Resim: Üstün Görüntü
Ayrıca, tasarım modülü tasarım ayarlarını seçin, Tasarım sekmesini seçin. Alıntı simgesi renk teklif simgesini #fd335a olarak değiştirin ve arka plan rengini beyaza ayarlayın. Simgenin rengi de kişinin adı için kullanılacaktır. Bu tüm modüller için aynı olacaktır. Renk: #FD335A
Arka plan rengi: #ffffff
Bir sonraki resim, görüntüye gidin. Sınır genişliği görüntüsünü 4px olarak ayarlayın ve sınır rengini #000645 olarak değiştirin. Sınır, her modül için modül sınırıyla eşleşecektir. Bunu tek tek değiştireceğiz. Görüntü Sınırı Genişliği: 4px
Renk Görüntü Sınırı: #000645
Bir sonraki vücut metni, vücut metnine gidin ve Roboto Mono’yu seçin. Kalan ayarları varsayılan olarak bırakın. Vücut yazı tipi: Roboto Mono
Yazarın bir sonraki metni, yazar metnine gidin. Yazı tipini Oswald olarak değiştirin, ağırlık için yarı kalın, stil için TT’yi seçin ve rengi #fd335a olarak değiştirin. Yazı tipi: Oswald
Stil: Yarı Kalınlık
Stil: TT
Metin Rengi: #FD335A
Bir sonraki konum metni, konum metnine (iş başlığı) gidin ve yazı tipini Roboto Mono olarak değiştirin. Kalan ayarları varsayılan olarak bırakın. Konum Yazı Tipi: Roboto Mono
Bir sonraki şirket metni, şirket metnine gidin ve yazı tipleri için Roboto Mono’yu seçin. Ayarları varsayılan olarak bırakın. Şirket yazı tipi: Roboto Mono
Son sınır, sınıra doğru kaydırın. Sınır görüntüsüne uyacak şekilde genişliği 24px ve kenar rengini #000645 olarak değiştirin. Modül ayarlarını kapatın. Her modül için sınır rengi de değişecektir. Genişlik: 24 piksel
Renk: #000645
Bir sonraki referans modülünü, yinelenen modülleri iki kez çoğaltın ve iki klonlama modülü satırdaki diğer sütunlara sürükleyin. İkinci tanıklık modülü, ikinci referans modülü için ayarları açıktır ve içeriği değiştirir. Sonraki resim, tasarım sekmesini seçin ve görüntüye gidin. Sınır rengini #acf8f5 olarak değiştirin. Görüntü Sınır Rengi: #ACF8F5 Son sınır, sınıra doğru kaydırın. Sınır resmine uyacak şekilde sınır rengini #ACF8F5 olarak değiştirin. Modül ayarlarını kapatın. Modül ayarlarını kapatın.
Renk: #acf8f5 Üçüncü Tanıklık modülü kuvveti, üçüncü referans modülü ayarlarını açar ve içeriği değiştirir.
Bir sonraki resim, tasarım sekmesini açın, görüntüye gidin ve sınır rengini #FCCAA0 olarak değiştirin. Görüntü Sınır Rengi: #FCCAA0 Son kenarlık, sınır görüntüsüne uyacak şekilde sınır ve sınır rengine #fCCAA0’a gidin. Modül ayarlarını kapatın.
Renk: #FCCAA0
İmleciyi satıra yönlendirdiğinizde görünen yinelenen seçeneği tıklayarak bir sonraki satır, yinelenen satırları çoğaltın. Üst ve alt dolguya 0px eklediğimiz için, bu yeni çizgi otomatik olarak üzerindeki çizgiye dokunuyor. İçeriği ve rengi değiştirmek için ikinci bölümdeki her modülü açacağız.
Dördüncü tanıklık modülü stili, ikinci referans modülü için ayarları açar ve içeriği değiştirir.
Renk: #6EEA9D Beşinci Tanıklık modülü kuvveti, beşinci referans modülü ayarlarını açar ve içeriği ekler.
Bir sonraki resim, görüntüye gidin ve sınır rengini #fff67f olarak değiştirin. Görüntü Sınır Rengi: #FFF67F Son kenarlık, sınır görüntüsüne uyacak şekilde sınır ve sınır rengine #fCCAA0’a gidin. Modül ayarlarını kapatın. Renk: #fff67f
Son altıncı tanıklık modülü, altıncı referans modül ayarlarını açın ve referans içeriğini değiştirin. Bir sonraki resim, görüntüye gidin ve sınır rengini #593A94 olarak değiştirin.
Renk Görüntü Sınırı: #593A94 Son kenarlık, sınır görüntüsüne uyacak şekilde sınır ve sınır rengine #593A94’e gidin. Modül ayarlarını kapatın. Renk: #593A94
Yaptığımız alternatif referans düzeni referans kutusu, referans boyutu aynıysa iyi çalışıyor. Ya küçük ve bazı büyük referanslarınız varsa? Bunun için, sütunlar için farklı boyutlara sahip kafes idealdir. Daha fazla bilgi ile referansları daha büyük bir sütunda yerleştirebiliriz. Bu örnek için. Aynı boşluk ayarlarına sahip yeni bir sütun oluşturacağız ve daha önce olduğu gibi aynı referansları kullanacağız, ancak çeşitli metinlerle. İlk alternatif satırı oluşturun, solda 1/3 sütun ve sağdaki sütunların 2/3’ünü içeren 2 sütun ekleyin.
Ardından, satır ayarlarını açın, tasarım sekmesini açın, boyutlandırmaya gidin ve özel oluk genişliğini kullanmayı seçin. Oluğun genişliğini 1 olarak değiştirin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Ardından, uzaya gidin. Üst ve alt dolgu için 0px girin. Satır ayarlarını kapatın.
Dolgu: 0px üst, alt
Sonra, yinelenen çizgiler. İkinci Satır Düzeni seçeneğini seçin ve solda 2/3 ve sağda 1/3 olan düzeni seçin.
Son dört tanık ekleyin, referans modülünüzü hatta yapın veya sürükleyin. Önceki örnekte olduğu gibi aynı modülü kullanıyorum, ancak farklı boyutlar oluşturmak için içerik içeriğini değiştirdim. Modüller önceki örnekte olduğu gibi sütunun genişliğine göre, ancak her birinin vücut içeriği nedeniyle farklı bir yüksekliği var. Bu, ızgarada garip bir mesafe oluşturur. Neyse ki, bunu düzeltmek kolaydır. Ayrıca, referans içeriğiniz farklı bir boyuta sahipse sıradan kafes için de çalışır. İlk modül için ayarları açın ve tasarım sekmesini açın. Boyutuna kadar aşağı kaydırın ve yükseklik için% 100 girin. Bunu her modül için tekrarlayın. Yükseklik:% 100 Aşağıdaki referans ızgara düzeninin sonuçları ızgara düzenimizin gösterimidir. Eğer referans aynı boyuta sahipse bu iyi çalışır. Alternatif bir düzen ile birlikte alternatif referans düzeninin sonuçları. Bu, çeşitli boyutlardaki içerik için idealdir. Zihni sona erdirme Bu, bir divi referans modülü ile referans ızgara düzeni nasıl yapılır. Satır ayarları ve divi modülleri, birkaç satırın bir kafesini ve sütun sayısını yapmak için birlikte iyi çalışır. Burada gösterdiğimiz örnek, daha büyük bir ızgara oluşturmak için kolayca genişletilebilir. Bu kavram aynı zamanda diğer divi modülleri ile de çalışır. Senden duymak istiyoruz. Burada tartıştığımız yöntemi kullanarak bir referans ızgarası yaptınız mı? Bize yorumlardaki deneyiminizden bahsedin.
