Satır ve Sütun Arka Planlarını Divi'nin Yeni Seçenekleriyle Yaratıcı Bir Şekilde Birleştirme

Yayınlanan: 2017-10-02

Bu Divi eğitiminde, çarpıcı sonuçlar elde etmek için satır ve sütun arka plan seçeneklerini nasıl birleştirebileceğinizi göstereceğiz. Doğru kombinasyonları ve ayarları seçerek, web sitenizin genel görünümünü ve verdiği hissi geliştiren tasarımlar elde edebilirsiniz. Ne hakkında konuştuğumuzu göstermek için adım adım oluşturmanıza yardımcı olacağımız bir örnek yaptık. Bu sonucu yalnızca Divi'nin yerleşik seçeneklerini kullanarak oluşturduk, bu nedenle herhangi bir ek CSS eklemeniz gerekmeyecek.

Sonuç

Bu öğreticiyi adım adım takip ederseniz, aşağıdaki sonucu elde edebilirsiniz:

gradyan

Bu sonucu elde etmek için üç farklı satır kullanmamıza rağmen, hepsi daha büyük bir resmin parçası gibi görünüyor. Başlayalım!

Visual Builder'a Geç

Yeni bir sayfa oluşturun ve Divi Builder'ı etkinleştirin ve Visual Builder'a geçin.

gradyan

Bölüm Oluştur

Yapmamız gereken ilk şey, yeni bir standart bölüm oluşturmak. Oluşturacağımız ve birbirimizle birleştireceğimiz tüm satırlar bu bölümün bir parçası olacak. Satırlarda bir kutu gölge efekti oluşturmak için aşağıdaki bölüm gradyan arka planını ekleyeceğiz:

İlk Renk: rgba(61,65,86,0.59)
İkinci Renk: #f7f7f7
Gradyan Türü: Radyal
Radyal Yön: Alt
Başlangıç Konumu: %31
Bitiş Konumu: %76

gradyan

Tek Sütunlu Satır Ekle

Bir sonraki yapmamız gereken şey, bölüme tek sütunlu bir satır eklemek. Bu satır, nihai sonucumuzun aşağıdaki bölümünü temsil edecektir:

gradyan

Satır ve Sütun Ayarları

Satırı Tam Genişlikte Yap

Devam edin ve Tasarım sekmesinde satırı tam genişlikte yapın.

Satır Arka Planı Ayarları

Ardından, İçerik sekmesine geri dönebilir ve aşağıdaki gradyan arka planını ekleyebilirsiniz:

İlk Renk: #3d4156
İkinci Renk: rgba(114,81,114,0.91)
Gradyan Türü: Doğrusal
Gradyan Yönü: 180deg
Başlangıç Konumu: %0
Bitiş Konumu: %65

Bir arka plan resmi yükleyin (bu durumda bir desen) ve Arka Plan Resmi Karışımınız olarak 'Çarp'ı seçin.

Sütun Arka Plan Ayarları

Ardından, aşağı kaydırın ve aşağıdaki gradyan arka plan ayarlarını satırınızın sütununa atayın:

İlk Renk: rgba(255,255,255,0.15)
İkinci Renk: rgba(214,44,104,0)
Sütun Gradyan Türü: Doğrusal
Sütun Gradyan Yönü: 161deg
Sütun Başlangıç Konumu: %43
Sütun Bitiş Konumu: %43

aralık

Satırınıza aşağıdaki dolguyu ekleyerek devam edin:

Üst: 20 piksel
Sağ: 30 piksel
Sol: 30 piksel

Ve sütununuza bazı dolgular da:

Üst: 200 piksel
Alt: 200 piksel

Metin Modülü Ekle

Sonraki yapacağımız şey, satıra bir Metin Modülü eklemek ve o Metin Modülünün Metin alt kategorisinde aşağıdaki değişiklikleri yapmaktır:

Metin Yazı Tipi: Playfair Ekranı
Metin Yazı Tipi Boyutu: 77px (Masaüstü), 64 (Tablet), 51 (Telefon)
Metin Rengi: #f7f7f7
Metin Satırı Yüksekliği: 1.7 (Masaüstü), 1em (Tablet ve Telefon)

Bölücü Modülü Ekle

Yeni oluşturduğunuz Metin Modülünün altına bir Bölücü Modül ekleyerek devam edin ve Görünürlük alt kategorisinde 'Bölücüyü Göster' seçeneğini etkinleştirin.

gradyan

Aynı sekmeyi aşağı kaydırın ve arka plan rengi olarak 'rgba(114,57,114,0.91)' kullanın.

gradyan

Tasarım sekmesine gidin ve ayırıcı renginiz olarak '#3d4156'yı seçin.

gradyan

Stiller alt kategorisini açın ve Bölücü Stiliniz olarak 'Solid' ve Bölücü Pozisyonunuz olarak 'Üst'ü kullanın.

gradyan

Ardından, Boyutlandırma alt kategorisine aşağıdaki ayarları atayın:

Bölücü Ağırlığı: 11px
Yükseklik: 23 piksel
Genişlik: %0
Modül Hizalama: Sol

gradyan

Son olarak, Özel Dolgu seçeneğine '%48'lik bir sol dolgu ekleyin. gradyan