Divi ile Benzersiz Bir Çapraz Düzen Nasıl Tasarlanır

Sayfa içeriğiniz için çapraz bir düzen oluşturmak, özellikle duyarlı web tasarımında biraz zor olabilir. Ancak Divi Builder ile bunun gerçekten eğlenceli olabileceğini gördüm. Doğru bölüm bölücüler, sütun aralığı ve vw uzunluk birimleri kombinasyonu ile herhangi bir Divi bölümüne diyagonal bir düzen ekleyebilirsiniz. Ve şaşırtıcı bir şekilde, bu tasarım tekniği farklı tarayıcı boyutlarında güzel bir şekilde ölçeklenecektir.

Bu eğitimde, size harika görünen ve tarayıcı pencerenizin boyutuna göre güzel bir şekilde ölçeklenen çapraz içerik satırları (modüller) içeren bir düzenin nasıl oluşturulacağını göstereceğim.

Başlayalım.

gizli zirve

Saldırı Planı

Divi'de oluşturduğunuz her bölüm, bölümler arasında güzel geçiş tasarım öğeleri eklemek için bu harika bölüm ayırıcıları ekleme seçeneğine sahiptir. Bu, bölümlerinizi ayırmak için kolayca tanısal ayırıcılar oluşturmanıza olanak tanır. Yeterince basit. Zorluk, içeriğinize çapraz bir çerçeve eklemek için bu bölüm ayırıcıları kullanmak istediğinizde ortaya çıkar. Tanısal tasarımın simetriyi veya içerik görünürlüğünü bozmadan tutarlı kaldığından emin olmalısınız.

Bu tasarımın anahtarı, bölücülerimizi boyutlandırmak ve modüllerimizi her sütuna yerleştirmek için vw uzunluk biriminin tutarlı kullanımıdır. vw uzunluk birimi, tarayıcı görünüm alanınızın/pencerenizin genişliğine bağlıdır. İhtiyacınız olursa, fırsat bulduğunuzda Divi ile uzunluk birimlerini kullanma hakkında daha fazla bilgi edinmekten çekinmeyin.

Bölüm bölücülerin boyutuna ve açısına karar verdikten sonra, modüllerimizin bölücülerin çapraz ilerlemesiyle eşleşmesi için her sütuna aşamalı olarak dolgu uygulamamız gerekir. Her bir sütuna eklediğiniz herhangi bir resim veya içerik, her şeyi sıralı ve görünür tutmak için aynı boyut/miktarda olmalıdır.

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

Bu ilk bölüm oldukça yalındır. Vurgulamak istediğim ana tasarım öğesi, 20vw'lik alt bölme bölücü yüksekliğidir. Bu yükseklik, yerleşim tasarımı boyunca tüm bölüm bölücülerimiz için standart boyut görevi görecektir. Çapraz tasarımın simetrik ve paralel olmasını sağlamak için bu boyutu aynı tutmak önemlidir.

İlk bölümü oluşturmak için yeni bir sayfa ekleyin, ona bir başlık verin ve görsel oluşturucuyu dağıtın. Tek sütunlu bir satıra sahip normal bir bölüm ekleyin (veya yalnızca varsayılan olarak gösterileni kullanın).

Modül eklemeden önce, bölüm ayarlarını arka plan görüntüsü ve degrade kaplaması olacak şekilde güncelleyin.

Arka Plan Resmi: [1920 x 1080 resmi girin] Arka plan gradyan sol rengi: rgba(87,113,113,0.89)
Arka plan gradyanı Sağ renk: rgba(68,112,112,0.9)

Ardından vw uzunluk birimini kullanarak bazı özel dolgular ekleyin:

Özel Dolgu: 30vw Üst, 40vw Alt

Ayarları kaydet.

Şimdi tek sütunlu satırınıza aşağıdaki içeriğe sahip bir metin modülü ekleyin:

<h1>Diagonal Design</h1>
Creative Services

Tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Poppins
Metin Metin Boyutu: 2vw (masaüstü), 20px (tablet)
Metin Yönü: orta
Metin Rengi: Açık

Başlık Yazı Tipi: Poppins
Başlık Yazı Tipi Ağırlığı: Yarı Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metni Boyutu: 4vw (masaüstü), 30px (tablet)
Başlık Harf Aralığı: 0.2em

Harf aralığı için em uzunluk değeri, yazı tipi boyutu vw değeriyle güzel bir şekilde ölçeklenir.

Ayarları kaydet

Metin modülünün altına aşağıdaki ayarlarla bir düğme modülü ekleyin:

Düğme Hizalama: merkez
Metin rengi: Açık
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 16px
Düğme Sınır Yarıçapı: 50px
Düğme Yazı Tipi: Poppins

Özel Dolgu: 0,2em Üst, 0,2em Alt, 1,5em Sol, 1,5em Sağ

Ayarları kaydet.

Artık tüm başlık bölümü öğelerimizi yerleştirdiğimize göre, bölüm ayarlarına geri dönün ve diyagonal tasarımımızı başlatacak alt ayırıcıyı ekleyin.

Bölücüler: Alt
Bölücü STyle: ekran görüntüsüne bakın
Bölücü Rengi: #ffffff
Bölücü Yüksekliği: 20vw
Bölücü Çevirme: dikey

Ayarları kaydet.

İkinci Bölümün Oluşturulması

Bir sonraki bölüm için, bu süslü veya karmaşık bir şey değil. Tek sütunlu bir satıra sahip yeni bir normal bölüm eklemeniz yeterlidir.

Bölümün aşağıdaki özel dolguya sahip olduğundan emin olun:

Özel Dolgu: 15vw Üst, 15vw Alt

Ardından, aşağıdaki sahte içeriğe sahip satıra bir metin modülü ekleyin:

<h2>About US</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Tasarım ayarlarını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Poppins
Başlık 2 Yazı Tipi: Poppins
Başlık 2 Yazı Ağırlığı: Yarı Kalın
Başlık 2 Yazı Tipi Stili: TT
Başlık 2 Metin Boyutu: 4vw

Genişlik: %70 (masaüstü), %80 (tablet), %100 (akıllı telefon)

İkinci Bölüm Oluşturma: Görüntüler için Çapraz Düzen

Bu sonraki bölüm için 4 resimli bir diyagonal bölüm oluşturacağız. Bu tasarımın düzgün çalışabilmesi için vw uzunluk birim değerlerinizde maksatlı olmanız ve baştan sona aynı boyutta görseller kullanmanız gerektiğini unutmayın.

Dört sütunlu satır yapısına sahip yeni bir normal bölüm ekleyin. Ardından sol sütuna bir görüntü modülü ekleyin. Modülü aşağıdaki ayarlarla güncelleyin:

Lightbox'ta Güncelleme: EVET

Görüntü Bindirme: AÇIK
Yer Paylaşımı Simge Rengi: #ffffff
Vurgulu Yer Paylaşımı Rengi: rgba(87,113,113,0.69)
Tam Genişliği Zorla: EVET
Resmin Altındaki Boşluğu Göster: HAYIR

Ayarlar yerinde eklenmiş bir görüntünüz olduğunda, diğer üç görüntüyü oluşturmak ve bunları her sütuna yerleştirmek için görüntü modülünü çoğaltın. Bu şekilde, her biri için ayarları güncellemeniz gerekmez.

Ardından her biri için yeni resimler yükleyin. Resimlerinizin tam olarak aynı boyutlarda olduğundan emin olun (600 piksele 850 piksel).

Şimdi, tam genişlikte bir düzen oluşturmak ve görüntüleri özel dolgu ile kademelendirmek için satır ayarlarını güncelleyeceğiz.

Satır ayarlarını aşağıdaki gibi güncelleyin:

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Özel Dolgu: 0px Üst, 0px Alt, 0px Sol, 0px Sağ
Sütun 1 Özel Dolgu: 15vw Üst (masaüstü), 0px Üst (tablet)
Sütun 2 Özel Dolgu: 10vw Üst (masaüstü), 0px Üst (tablet)
Sütun 3 Özel Dolgu: 5vw Üst (masaüstü), 0px Üst (tablet)

İlk üç sütunun, çapraz görüntü düzenini oluşturmak için kademeli olarak azalan özel bir üst dolguya sahip olduğuna dikkat edin.

Ayarları kaydet.

Görsellerimiz yerindeyken, tasarımı tamamlamak için bölüm ayırıcılarımızı ekleyelim. Bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

Bölücüler: Üst
Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: #ffffff
Bölücü Yüksekliği: 20vw (masaüstü), 0px (tablet), 0px (akıllı telefon)
Bölücü Çevirme: yatay

Bölücü: Alt
Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: #ffffff
Bölücü Yüksekliği: 20vw (masaüstü), 0px (tablet), 0px (akıllı telefon)
Bölücü Çevirme: yatay

Özel Dolgu: 0px Üst, 0px Alt

NOT: Görüntülerinizin boyutu 600×850'den farklıysa, ayırıcıların görüntülerin doğru şekilde üst üste gelmesini sağlamak için satır dolgusunu ayarlamanız gerekir.

Dördüncü Bölüm Oluşturma

Dördüncü bölümü oluşturmak için ikinci bölümü kopyalayıp üçüncü bölümün altına yapıştırmanız yeterlidir.
Ardından içeriği aşağıdakilerle güncelleyin:

<h2>Our Members</h2>
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Beşinci Bölüm Oluşturma: Ekip Üyeleri için Çapraz Düzen

Bu sonraki bölüm için, sayfanızda üyeleri sergilemek için bir bölüm oluşturacağız. Tasarım sürecini hızlandırmak için, devam edin ve üçüncü bölümü (resimlerinizi içeren) kopyalayın ve sayfanın altına yapıştırın.

Dördüncü sütundaki görüntü modülünü silin ve satır sütun yapısını dört yerine üç sütun olarak değiştirin.

İlk sütundaki görüntü modülünün altına bir kişi modülü ekleyin.

Varsayılan metin içeriğini koruyacağız. Ancak devam edin ve modülde görünmeleri için sosyal profil URL'leri ekleyin. Daha sonra kişi resmimiz için yukarıdaki resim modülünü kullanacağımız için resmi silin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Metin Rengi: Açık
Özel Dolgu: %8 Üst, %8 Alt, %8 Sol, %8 Sağ

Metni henüz göremeyeceksiniz, ancak üç sütunun her birine arka plan rengini eklediğimizde görünür hale gelecektir.

Şimdi kişi modülünü kopyalayın ve diğer iki sütundaki diğer iki görüntü modülünün altına ekleyin

Satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Sütun 1 Arka Plan Rengi: #577171
Sütun 2 Arka Plan Rengi: #577171
Sütun 3 Arka Plan Rengi: #577171

Tasarım sekmesi altında, boyutu ve aralığı aşağıdaki gibi güncelleyin:

Oluk Genişliği: 3

Sütun Yüksekliklerini Eşitle: EVET

Özel Dolgu: 0px alt

Sütun 1 Özel Dolgu (masaüstü): 12vw Üst, 6vw Alt
Sütun 1 Özel Dolgu (tablet): 0vw Üst, 0vw Alt

Sütun 2 Özel Dolgu (masaüstü): 6vw Üst
Sütun 2 Özel Dolgu (tablet): 0vw Üst

Sütun 3 Özel Dolgu: 0px Üst

Ayarları kaydet.

Resimlerinizi yenileriyle güncellemeyi unutmayın.

Şimdi nihai sonuca bakın…

Duyarlı Çapraz Düzen

Bu tasarım vw uzunluk biriminin gücünü vurgular. Tasarım boyunca boşlukları ve öğeleri boyutlandırmak için vw kullandığımızdan, sonuç masaüstü için tüm tarayıcı boyutlarında mükemmel şekilde ölçeklenecektir.

Ve tablet ve akıllı telefonda, düzen, köşegen elemanlar olmadan normal ve temiz bir tasarıma uyum sağlayacaktır.

Son düşünceler

Divi ile diyagonal bir düzen tasarlamak, çarpıcı şekilde benzersiz sonuçlar üretebilir. İşin sırrı, tasarımı tarayıcı genişliğinize göre ölçeklendirmek için vw uzunluk birimini kullanarak bölücü yüksekliği, görüntü boyutu ve aralığının doğru kombinasyonunu kullanmaktır.

Bu, farklı modüller, bölücüler ve renklerle oluşturabileceğiniz olası tasarımların buzdağının görünen kısmıdır. Umarım bu size kendi geometrik şaheserinizi yaratmanız için ilham verir.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!