Divi'nin 6 Sütunlu Satır ve Görüntü Alanı Birimleriyle Nasıl Yaratıcı Olunur?

Divi'nin sütun yapılarının çeşitliliği, temel olarak aklınızdaki herhangi bir tasarımı oluşturmanıza olanak tanır. Sütun yapılarını orijinal formlarında kullanmak yapılacak en basit şey olsa da, tasarım öğelerini 6 sütunlu bir satırda görünüm alanı birimleriyle birleştirerek bir adım daha ileri gidebilirsiniz.

Örneğin oluşturabileceğiniz şeylerden biri bir kolajdır. Hiç bir resim düzenleme yazılımı kullanmanıza gerek kalmayacak! Bunun da ötesinde, görüntülerin her birinin ayrı bir ışık kutusunda açılmasına da izin verebilirsiniz. Bu gönderide, yalnızca Divi'nin yerleşik seçeneklerini kullanarak yukarıdakilerin tümünü nasıl yapacağınızı göstereceğiz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

Yaklaşmak

• Her modüle manuel olarak özel kenar boşluğu ve dolgu ekleyebilmemiz için bölüm, satır ve sütunlar arasındaki tüm oluk genişliğini kaldırıyoruz (görüntü alanı birimlerini kullanarak)
• Görünüm alanı birimleri, tasarım öğelerinin konumunun tüm masaüstü ekran boyutlarında aynı kalmasını sağlar
• Genel kolaj tasarımına uyması için her bir tasarım öğesinin boşluk ayarlarını ayrı ayrı ayarlayacağız.
• Divi'deki duyarlı seçenekler sayesinde, yukarıda belirtilen ayarların tablet ve telefon için geçerli olmadığından emin olabiliyoruz.

Oluşturmaya başlayalım

Arka Uç Önizlemesi

Bu, arka uç perspektifinden elde edilen sonuçtur:

Yeni Bölüm Ekle

Yapmanız gereken ilk şey, yeni bir sayfa oluşturmak veya mevcut bir sayfayı açmak ve ona normal bir bölüm eklemek.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin. Bu, bu eğitimde önemli bir adımdır. Bölüm, satır ve modüller arasındaki tüm varsayılan kenar boşluğu ve dolgu değerlerini kaldırarak, görünüm alanı birimlerini kullanarak her bir tasarım öğesine manuel olarak boşluk ekleyebiliyoruz.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Satıra bazı özel sol ve sağ dolgular da ekleyin.

• Sol Dolgu: 6.5vw
• Sağ Dolgu: 6.5vw

Sütun 6'ya Başlık Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Sütun 6'ya bir Metin Modülü başlığı ekleyerek başlayacağız. Seçtiğiniz başlık 2'nin bir kısmını ekleyin.

Başlık Metni Ayarları

Ardından, tasarım sekmesine gidin ve modülün başlık metni ayarlarını değiştirin.

• Başlık 2 Yazı Tipi: Battambang
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Boyutu: 4.2vw (Masaüstü), 10vw (Tablet), 8vw (Telefon)
• Başlık 2 Harf Aralığı: -1px

aralık

Bu satırın, satırın 6. ve 5. sütunlarıyla örtüşmesi için yanına bazı özel boşluk değerleri ekleyin.

• Üst Marj: 10vw
• Sol Kenar Boşluğu: -8vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -50vw (Tablet ve Telefon)

Sütun 6'ya Açıklama Metni Modülü Ekle

İçerik Ekle

Sütun 6'da ihtiyaç duyacağımız bir sonraki modül, bir açıklama Metin Modülü'dür. Seçtiğiniz bazı içeriği ekleyin.

aralık

Ardından boşluk ayarlarına gidin ve bu modülü de sola doğru itin.

• Üst Marj: 2vw
• Sol Kenar Boşluğu: -8vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -50vw (Tablet), -3vw (Telefon)

Sütun 6'ya Düğme Modülü Ekle

Kopya Ekle

Sütun 6'da ihtiyaç duyulan sonraki ve son modül bir Düğme Modülüdür. Seçimin bir kopyasını ekleyin.

Düğme Ayarları

Ardından tasarım sekmesine gidin ve düğme ayarlarını değiştirin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #ffffff
• Düğme Kenar Genişliği: 1px
• Düğme Kenar Rengi: #000000
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: -2px

aralık

Ve yine, boşluk ayarlarında özel kenar boşluğu değerlerini kullanarak bu modülün sütun 5 ve 6 ile çakışmasını sağlamamız gerekecek.

• Üst Marj: 2vw (Masaüstü), 5vw (Tablet), 10vw (Telefon)
• Sol Kenar Boşluğu: -8vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -50vw (Tablet ve Telefon)
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

Resim Modülü #1'i Sütun 1'e ekleyin

Görüntü Boyutları

Tüm farklı görüntü modüllerini eklemeye başlama zamanı! Yalnızca 880 piksel genişliğinde ve 1320 yüksekliğinde resimler kullanıyorsanız, yeniden oluşturduğumuz örnek %100 duyarlıdır . Bu nedenle, aynı örneği sıfırdan oluşturmak istiyorsanız, o belirli boyut kümesine sahip resimler kullanmalısınız. Bununla birlikte, bunun herhangi bir görüntü boyutu seti için çalışmasını istiyorsanız, genel tasarıma uyması için her Görüntü Modülünün görüntü alanı birimlerini manuel olarak ayarlamanız gerekecektir.

Fotoğraf yükleniyor

İlk üç sütunun her biri iki Görüntü Modülü sayacaktır. İlk Görüntü Modülünü sütun 1'e ekleyin.

aralık

Ardından, boşluk ayarlarına gidin ve görüntü alanı birimlerini kullanarak görüntünün boyutunu artırın.

• Üst Marj: 0,5vw (Yalnızca Tablet ve Telefon)
• Alt Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Kenar Boşluğu: -5vw (Masaüstü), 0,5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -2vw (Masaüstü), 0,5vw (Tablet ve Telefon)

Resim Modülü #2'yi Sütun 1'e ekleyin

Fotoğraf yükleniyor

Sütun 1'deki ikinci Görüntü Modülünü de yükleyin.

aralık

Ve bu modülün boşluk ayarlarını da değiştirin.

• Üst Marj: 0.4vw (Masaüstü), 0.5vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Kenar Boşluğu: -8.1vw (Masaüstü), 0.5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 3,7vw (Masaüstü), 0,5vw (Tablet ve Telefon)
• Sol Dolgu: 3vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 2'ye Görüntü Modülü #3'ü ekleyin

Fotoğraf yükleniyor

İkinci sütuna geç! Yeni bir Resim Modülü ekleyin ve bir resim yükleyin.

aralık

Resmin boyutunu küçültmek için boşluk ayarlarında özel kenar boşluğu ve dolgu değerleri kullanarak devam edin.

• Üst Marj: 0,5vw (Yalnızca Tablet ve Telefon)
• Alt Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Kenar Boşluğu: -0.5vw (Masaüstü), 0.5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Dolgu: 3vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 0vw (Tablet ve Telefon)

Resim Modülü #4'ü Sütun 2'ye ekleyin

Fotoğraf yükleniyor

2. sütuna da ikinci bir Görüntü Modülü ekleyin.

aralık

Ve burada da boşluk ayarlarını değiştirin.

• Üst Marj: 0.5vw
• Alt Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Kenar Boşluğu: -0.5vw (Masaüstü), 0.5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Dolgu: 3vw (Masaüstü), 0vw (Tablet ve Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 3'e Resim Modülü #5 ekleyin

Fotoğraf yükleniyor

Bir sonraki ve son sütuna. İlk Görüntü Modülünü ekleyin.

aralık

Daha sonra Görüntü Modülünün boşluk ayarlarını değiştirin. Bu değerler, aşağıdaki yazdırma ekranında da görebileceğiniz gibi görüntünün boyutunu artırmaya yardımcı olacaktır.

• Üst Marj: 0,5vw (Yalnızca Tablet ve Telefon)
• Alt Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Kenar Boşluğu: -2.5vw (Masaüstü), 0.5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -17.5vw (Masaüstü), 0.5vw (Tablet ve Telefon)

Sütun 3'e Resim Modülü #6'yı ekleyin

Fotoğraf yükleniyor

3. sütundaki sonraki ve son Görüntü Modülünü ekleyin.

aralık

Ve özel kenar boşluğu değerleri ekleyerek tüm konumunu değiştirin. Duyarlılık amacıyla, bu modülü 2. sütun yerine 3. sütuna ekliyoruz.

• Üst Marj: -26.7vw (Masaüstü), 0.5vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 0,5vw (Yalnızca Tablet ve Telefon)
• Sol Kenar Boşluğu: -20,5vw (Masaüstü), 0,5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 17.3vw (Masaüstü), 0.5vw (Tablet ve Telefon)

Görüntü Modülü #1 için Işık Kutusunu Etkinleştir

Tüm görüntüleri yerleştirdikten sonra devam edebilir ve ilk Görüntü Modülü ayarlarında ışık kutusu seçeneğini etkinleştirebilirsiniz.

• Lightbox'ta Aç: Evet

Lightbox Seçeneğini Kopyala ve Bölümdeki Tüm Görüntülere Uygula

İlk Görüntü Modülü için ışık kutusu seçeneğini etkinleştirdikten sonra, bu seçeneği kopyalayabilir ve bölümdeki diğer tüm Görüntü Modüllerine yapıştırabilirsiniz.

Görüntü Modülü #1'e Kenar Yarıçapı Ekleme

İlk Görüntü Modülüne de bazı yuvarlak köşeler ekleyin.

Kenar Yarıçapını Bölümdeki Tüm Görüntülere Uzat

Ve zaman kazanmak için bu yuvarlak köşeleri bölümdeki tüm Görüntü Modüllerine uzatın.

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Divi'nin yeni 6 sütunlu satırıyla sahip olduğunuz fırsatlar sonsuzdur. Bu gönderide, 6 sütunlu satır ve görünüm birimi birimlerini kullanarak nasıl çarpıcı ve benzersiz bir kolaj oluşturabileceğinizi gösterdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!