Divi ile Duyarlı Beş Sütun “Vitrin” Düzeni Nasıl Tasarlanır

İçeriğiniz için yeterli alana sahip beş sütunlu bir düzen tasarlamak zor olabilir. Tüm tarayıcı boyutlarında güzel bir şekilde ölçeklendiğinden emin olmanın daha büyük zorluğundan bahsetmiyorum bile. Bu öğreticide, daha küçük ekran boyutlarında (tablet ve akıllı telefon gibi) tasarımdan ödün vermeden içeriği beş sütunlu bir düzene sığdırmak için gereken alanı nasıl en üst düzeye çıkaracağınızı göstereceğim. Bu tasarım ürünleri, hizmetleri ve projeleri sergilemek için idealdir. Biraz ilham almak için birkaç bonus tasarım özelliği bile vereceğim.

Başlayalım.

Gizlice Bakış

Kullanılan Duyarlı Teknikler

Özel Satır Genişliği ve Cilt Payı Genişliği kullanın

Beş sütun düzenini duyarlı hale getirmenin anahtarı, öncelikle sütunlarınıza içeriği tutacak kadar alan vermektir. Bu öğreticinin tasarımında, beş sütunu tutan satıra %89'a kadar özel bir genişlik vereceğim. Ardından, oluk genişliğini 1'e ayarlayarak daha da fazla alan yaratacağım, bu da temelde sütunlar arasındaki boşlukları ortadan kaldırıyor. Bu tasarım için, sırayı tam genişliğe ayarlamak yerine %89'luk özel bir genişlik kullanmak önemlidir, çünkü oluk genişliğini 1'e ayarlayabilir ve yine de sıranızın her iki tarafında bir kenar boşluğu bırakabilirsiniz. Ne demek istediğimi göreceksin.

Boşluk ve başlık metni için vw uzunluk birimlerini kullanın

İşleri beş sütunlu bir düzende duyarlı tutmanın bir başka anahtarı da vw uzunluk birimlerini kullanarak içeriğinizi boşluk bırakmaktır. Ve tüm boşluklarınız boyunca vw'yi kullanma konusunda tutarlı olmak önemlidir. Bu, pencerenizin genişliğini ayarlarken öğelerin kırılmasına veya etrafta zıplamasına neden olmadan tüm tarayıcı boyutlarında işlerin tutarlı bir şekilde ölçeklenmesini sağlar. Metnin başlığı için vw uzunluk biriminin kullanılması, metnin daha küçük tarayıcı pencerelerinde yeni bir satıra bölünmemesi için de önemli olacaktır. Ancak, başlık metni için, metnin çok fazla küçülmesine uyum sağlamak için tablet ve akıllı telefon için bir px birimi atamamız gerekecek.

Bölüm 1: Başlarken

Bu eğitim için ihtiyacınız olan tek şey Divi Teması. Mimari Firma Ana Sayfa Düzeni ile birlikte Görsel Oluşturucu'yu kullanacağız.

Başlamak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Visual Builder'ı dağıtın. “Hazır Düzen Seçin” seçeneğini seçin. Kütüphaneden yükle açılır penceresinde, İç Tasarım düzen paketini seçin ve ardından Mimari Firma Ana Sayfa Düzenini sayfanıza yükleyin.

Bölüm 2: Başlık Bölümünü Oluşturma

Yeni başlayanlar için, üç tanıtım yazısı içeren ikinci bölümü çoğaltın.

Bu tasarım için iki bölüme ihtiyacımız var çünkü üst bölüm iki amaca hizmet edecek. İlk olarak, aşağıdaki bölümümüzün başlığını tutacaktır. İkincisi, bir bölüm ayırıcı kullanarak benzersiz bir tasarım eklememize izin verecek.

Devam edelim.

Orijinal bölümde (yinelenen değil), üç tanıtıcıyı silin ve satırın sütun yapısını tek sütun olarak değiştirin.

Ardından, mizanpajın en altına, son bölüme gidin ve sol sütundaki metin modülünü kopyalayın.

Ardından, az önce oluşturduğunuz bir sütun satırının içine yapıştırın ve h2 başlığının altındaki tüm metin içeriğini silin, böylece sadece “Bir Şey İnşa Edelim” kalsın.

Bölüm 3: Beş Sütunlu Düzen için Blur'ları Özelleştirme

Şimdi, 3 sütun satırının içindeki orijinal üç tanıtım yazımızla çoğalttığımız bölümü ziyaret etme zamanı. İlk olarak, satır yapısını beş sütunlu bir düzene değiştirelim.

İlk sütunda tanıtım yazısı modülünün tanıtım yazısı ayarlarını açın ve ardından simge olarak kullanılan görüntüyü silin.

Ardından, tanıtım modülünü ilk sütunda çoğaltın. Bu tasarım için sütun başına iki tanıtım yazısı kullanacağız çünkü arka plan resmimizi tutmak için üst tanıtım yazısına ihtiyacımız var.

İlk sütunda en üstteki tanıtım yazısının ayarlarını açın ve içerik kutusundaki gövde metnini silin.

En üstteki Blurb modülüne bir arka plan resmi ve degrade ekleyin

Ardından aynı tanıtım yazısına bir arka plan görüntüsü verin ve görüntüyü aşağıdaki gibi kaplamak için bir degrade ekleyin:

Arka Plan Resmi Ekle
Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0)
Arka Plan Gradyanı Sağ Renk: rgba(18,18,18,0.65)
Başlangıç ​​Konumu: %50
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Başlık metnimizin daha açık renkli arka plan resimleriyle daha okunaklı hale gelmesine yardımcı olmak için gradyan gereklidir.

Başlık metni ve boşluk için VW Birimlerini kullanın

Ardından tasarım sekmesi ayarlarını aşağıdaki gibi güncelleyin:

Başlık metni Boyut: 2.7vw (masaüstü), 46px (tablet), 36px (akıllı telefon)
Başlık Harf Aralığı: -3px
Özel Kenar Boşluğu: 1.5vw sol, 1.5vw sağ
Özel Dolgu: 35vw Üst, 2vw Alt, 1vw Sol, 1vw Sağ

Ayarları kaydet.

35vw'lik özel üst dolgu, benzersiz uzun dikey görüntü tasarımını yaratan şeydir. Metnin farklı tarayıcı genişliklerinde tutarlı bir şekilde ölçeklenmesini sağlamak için başlık metnine 2,7vw değeri verilir. Daha sonra satırımıza daha fazla boşluk eklediğimizde, boşlukların geri kalanı daha anlamlı olacaktır.

Alt tanıtıcıyı özelleştirme

Ardından, ilk sütunun altındaki ikinci tanıtım modülünün ayarlarını açın ve Başlık metnini silin. Ardından aşağıdakileri güncelleyin:

Gövde Metni Hizalama: Sol
Gövde Metni Rengi: #666666
Özel Dolgu: 2vw Üst, 2vw Alt, 2vw Sol, 2vw Sağ

Artık ilk sütunumuzda iki tanıtım yazısı tasarladık. Her ikisini de kopyalayın ve kalan sütunların her birine yapıştırın. Önce sütun 2 ve 3'teki orijinal tanıtım modüllerini silmeniz gerekecek. Şimdi tasarımınız şöyle görünmelidir.

Bölüm 4: Bölüm Ayarlarını Özelleştirme

Şimdi bölüm ayarlarımızı beyaz bir arka plana ve altta satırımızın örtüşmesi için bir boşluk oluşturacak bir kutu gölgesine sahip olacak şekilde güncelleyelim.

Arka Plan Rengi: #ffffff
Özel Dolgu: varsayılan Üst, 5vw Alt, varsayılan Sol, varsayılan Sağ
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Dikey Konumu: -200px
Kutu Gölge Bulanıklığı Gücü: 0px
Gölge Rengi: #121212

Bölüm 5: Satır Ayarlarını Özelleştirme

Şimdi sıramıza geri dönelim ve ayarları aşağıdaki gibi güncelleyelim:

Arka Plan Resmi: #ffffff
Satır Hizalama: Merkez
Özel Genişlik: %89
Oluk Genişliği: 1
Özel Marj: -10vw
Özel Dolgu: 3vw üst, 3vw Alt, 1.5vw Sol, 1.5vw Sağ
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Bulanıklığı Gücü: 80px

Eğiticide daha önce belirtildiği gibi, özel genişlik ve cilt payı genişliği, beş sütunlu bir düzen için ihtiyaç duyduğumuz içerik alanını oluşturmak için gereklidir.

Bu noktada tasarımın temel yapısı tamamlanmış olur. İşte tasarımın şu ana kadar nasıl göründüğü.

Bölüm 6: Son Dokunuşları Ekleme

Şimdi bitirmek için birkaç tasarım ince ayarı daha ekleyebiliriz.

Bulanıklıkları şaşırtmak

İlk olarak, birkaçının dolgusunu azaltarak, bulanık arka plan görüntülerinin yüksekliğini kademelendirelim. İkinci satırdaki üst tanıtım modülünün ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

Özel Dolgu: 28vw Üst

Ve üçüncü sütundaki en üstteki tanıtım yazısı için, üst dolguyu 30vw olarak değiştirin.

Beş sütunlu Satırınıza doku eklemek için bir Bölüm Bölücü ekleyin

Harika bir tasarım tekniği, beş sütunumuzla bölümün hemen üzerindeki bölüme bir üst bölüm ayırıcı eklemektir. Ayırıcı arka plan, yukarıdaki bölümle örtüşse bile, beş sütun satırının arka planında görünecektir. Bunu yapmak için “Bir Şey İnşa Edelim” başlığını içeren bölüme gidin ve ona aşağıdaki gibi bir bölücü verin:

Ayırıcının rengi, %15'lik bir opaklıkla bölüm arka planının rengiyle aynı olduğundan, ayırıcı üst bölümde görünmez, ancak aşağıdaki bölümde ve örtüşen satırda görünür hale gelir. Ve sıraya bir kutu gölgesi verdiğimiz için bu benzersiz bir tasarım yaratıyor.

Tasarımın farklı resimlerle nasıl görüneceğine dair daha iyi bir fikir edinmek için devam ettim ve birkaç arka plan resmini güncelledim.

İşte son tasarım.

Beş sütun düzeniyle ilgili harika şeylerden biri, tablette güzel bir iki sütun düzeni elde etmenizdir.

Ve işte akıllı telefonda nasıl göründüğü.

Son düşünceler

Duyarlı düzenler oluşturmak için Divi'nin gücünü keşfetmeyi seviyorum. Beş sütunlu bir düzenin zorluğu, içeriğinizi tüm tarayıcı boyutlarında güzel bir şekilde ölçeklendirmek için uygun şekilde boşluk bırakmak için doğru teknikleri kullanmadığınız sürece, içeriğe gerçekten fazla yer kalmamasıdır. Umarım bu tasarım, bir sonraki projeniz için beş sütun düzenini kullanmak için bazı olasılıkları tanıtmaya yardımcı olmuştur.

Yorumlarda sizden haber bekliyorum.

Şerefe!