Divi Sütunu ve Dönüştürme Seçenekleriyle Örtüşen Sütunlar Nasıl Oluşturulur

En son Divi güncellemelerinden birinde, oluşturucudaki sütunlara oldukça şaşırtıcı kontroller ekledik. Sütun çakışmaları oluşturmak artık hiç olmadığı kadar kolay. Bu öğreticide, Divi'nin sütun ve dönüştürme ayarlarını kullanarak çakışan üç sütunlu bir referans bölümünün nasıl oluşturulacağını göstereceğiz.

Bu tasarım için üç renk, zengin bir turuncu #ff8300, sıcak sarı #ffd400 ve göze çarpan mavi degrade #0c99c1 kullanacağız. Bu örtüşen sütun tasarımını hemen bir web sitesi projesine uygulayabilirsiniz.

Başlayalım.

Ön izleme

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

masaüstü

Mobil

1. Yeni Normal Bölüm + Üç Sütunlu Satır Oluştur

Yapmanız gereken ilk şey, üç sütunlu bir satıra sahip normal bir bölüm oluşturmaktır.

Bölüm Aralığını Ayarla

Bölümün üst ve alt dolgusunu artırın.

• Üst Dolgu: 4vw
• Alt Dolgu: 16vw

Satırın Boyutlandırmasını ve Aralığını Ayarlayın

Satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Bir Oluk Genişliği Kullanın: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

Bundan sonra, boşluk ayarlarını değiştirin:

• Alt Dolgu: 0px
• Sol Dolgu: 11vw
• Sağ Dolgu: 8vw

Gradyan Arka Planı Ekle

Ardından bir degrade arka planı ekleyin:

• Arka Plan Stili: Gradyan
• İlk Renk: beyaz #ffffff
• İkinci Renk: Turuncu #ff8300
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 180 derece
• Başlangıç ​​Konumu: %35
• Bitiş Konumu: %35

2. Stil Sütunları

Sütunlara modül eklemeden önce, her sütunun stilini, aralığını ve dönüştürme ayarlarını ayrı ayrı değiştireceğiz.

Sütun 1

Sütun stilinin ilk adımları yuvarlatılmış köşeler ve kutu gölgesidir:

• Kenarlık: Tüm yuvarlak köşelerde 20 piksel
• Kutu Gölgesi: İlk kutu gölge seçeneği
• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)
• Kutu Gölge Konumu: Dış

* Herhangi bir dönüştürme ayarı eklemeden önce, bu öğe stillerini kopyalayıp ikinci ve üçüncü sütuna yapıştıracağız.

Sütun 1 ayarlarını tekrar açın ve tasarım sekmesine gidin. İlk sütunun ikinciyle örtüşmesi için dönüştürme ayarlarını kullanacağız. Unutmuş olmanız durumunda, x ekseni yatay, y ekseni dikeydir.

• Dönüştür Çevirisi:
  • Masaüstü: x ekseni = 3vw. y ekseni = 14.2vw
  • Tablet ve Telefon: x ekseni = -14vw. y ekseni = 16vw
• Görünürlük: Z Endeksi 10

2. sütun

İkinci sütuna geç! Kutu gölgesine (önceki adımlardan birinde eklediğiniz) gidin ve kutu gölgesi bulanıklaştırma gücünü artırın.

• Kutu Gölge Bulanıklığı Gücü: 50px

2. sütuna bazı özel boşluk değerleri ekleyerek devam edin.

• Üst Dolgu:
  • Masaüstü = 3vw
  • Tablet + Telefon = 5vw
• Alt Dolgu:
  • Masaüstü = 5vw
  • Tablet + Telefon = 7vw
• Sol Dolgu:
  • Masaüstü = 2vw
  • Tablet + Telefon = 4vw
• Sağ Dolgu:
  • Masaüstü = 2vw
  • Tablet + Telefon = 4vw

İkinci sütunu dönüştürme zamanı! İkinci sütun masaüstü için yerinde kalıyor ancak daha küçük ekranlara bazı özel dönüştürme ayarları uygulamamız gerekiyor. Devam edin ve dönüştürme çevirme sekmesini ayarlayın. Ek olarak, Z indeksini 9'a çıkaracağız.

• Dönüştür Çevirisi:
  • Tablet ve Telefon: x ekseni = 9vw. y ekseni = 13vw
• Görünürlük: Z Endeksi 9

Sütun 3

Üçüncü sütuna! Halihazırda var olan kutu gölgesinin kutu gölgesi bulanıklık gücünü artırın.

• Kutu Gölge Bulanıklığı Gücü: 50px

Ardından arka plan ayarlarını açın ve mavi bir degrade arka planı ekleyin.

• Arka plan: Gradyan
• Degrade Renk Bir: #0c99c1
• Gradyan Rengi İki: rgba(5,0,78,0.72)
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 220 derece
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %100

Şimdi boşlukları ekleyelim.

• Üst Dolgu:
  • Masaüstü = 3vw
  • Tablet + Telefon = 10vw
• Alt Dolgu:
  • Masaüstü = 3vw
  • Tablet + Telefon = 7vw
• Sol Dolgu:
  • Masaüstü = 1.5vw
  • Tablet + Telefon = 10vw
• Sağ Dolgu:
  • Masaüstü = 1.5vw
  • Tablet + Telefon = 10vw

Son olarak, dönüştürme çevirme ayarlarını değiştirerek üçüncü sütunun ikinci sütunla örtüşmesini sağlayacağız.

• Dönüştür Çevirisi:
  • Masaüstü: x ekseni = -10vw. y ekseni = 14.2vw
  • Tablet: x ekseni = -14vw. y ekseni = 9vw
  • Telefon: x ekseni = -14vw. y ekseni = 11vw
• Görünürlük: Z Endeksi 9

Modülleri eklemeden önce sütunlarımızın bir önizlemesini burada bulabilirsiniz.

3. Sütunlara Modüller Ekleyin ve Bunları Stillendirin

Şimdi modülleri her sütuna ekleyelim!

Sütun 1

Birinci sütunda, bir resim modülü ve bir metin modülü ekleyeceğiz. Önce görüntü modülünü ekleyin.

1. Görüntü Modülünü Ekleyin

Müşterinizin bir fotoğrafını ekleyin ve aşağıdaki gibi biçimlendirin:

• Hizalama: Sol
• Tam Genişliği Zorla: Evet

Görüntüye de bir alt kenarlık ekleyin.

• Alt Kenar Rengi: Sarı #ffd400
• Alt Kenar Genişliği: 9px
• Kenar Stili: Katı

2. Metin Modülünü Ekleyin

Görüntü modülünün hemen altına yeni bir metin modülü ekleyin ve müşterinin adını ve konumunu girin.

• İsim: Başlık 4
• pozisyon: paragraf

İçeriği ekledikten sonra, metin ayarlarına stil vereceğiz:

• Metin Yazı Tipi: Nunito Sans
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Hizalama: Merkez
• Metin Rengi: Siyah #000000
• Yazı Boyutu:
  • Masaüstü = 0.8vw
  • Tablet = 1.8vw
  • Telefon = 2.8vw

Başlık metni ayarlarına gidin ve aşağıdaki değişiklikleri uygulayın:

• Başlık Metni: H4
• Başlık 4 Yazı Tipi: Poppins
• Başlık 4 Yazı Ağırlığı: Kalın
• Başlık 4 Metin Rengi: Siyah #000000
• Başlık 4 Metin Boyutu:
  • Masaüstü = 1vw
  • tablet = 3vw
  • Telefon = 4vw

Boşluk ayarlarını da değiştireceğiz:

• Üst boşluk:
  • Masaüstü = 1.5vw
  • tablet = 3vw
  • Telefon = 7vw
• Alt Kenar Boşluğu:
  • Masaüstü = 1.5vw
  • tablet = 3vw
  • Telefon = 7vw

Her iki modülü de tamamladıktan sonra sütununuz şöyle görünmelidir:

2. sütun

2. sütunda bir metne, bir tanıtım yazısına ve bir ayırıcı modüle ihtiyacımız var. İlk metin modülü, sütunun sağ üst köşesinde açılı bir afiş gibi görünen modüldür. Bu etkiyi elde etmek için dönüştürme seçeneklerini kullanacağız.

1. Metin Modülü ekleyin.

Yeni bir metin modülü ekleyin ve içerik kutusuna 'Görüş' kelimesini ekleyin.

Modüle sarı bir arka plan ekleyin.

• Arka Plan Rengi: Sarı #ffd400

Tasarım sekmesine gidin ve metin ve boşluk ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Hizalama: Merkez
• Metin Rengi: Beyaz #ffffff
• Metin Boyutu: 23px
• Sağ Kenar Boşluğu: -50px
• Sol Kenar Boşluğu: -50px
• Üst Dolgu: 15px
• Alt Dolgu: 15px

Son olarak, dönüştürme ayarlarını aşağıdaki gibi ayarlayacağız:

• Dönüştür Çevirisi:
  • Masaüstü = x ekseninde 17vw
  • Tablet = x ekseninde 24vw, y ekseninde 1vw
  • Telefon = x ekseninde 20vw, y ekseninde 1vw
• Dönüştür Döndür: İlk eksende 32 derece

2. Blurb Modülünü ekleyin.

İlk modülü tamamladıktan sonra, bir tanıtım modülü ekleme zamanı.

Tanımlama modülü, müşterinin referansının görüntülendiği yerdir. İlk olarak, bir modül eklemek için + simgesine tıklayın ve tanıtım yazısı seçin.

Ardından içeriği ekleyin, bir simge seçin ve simgeye aşağıdaki gibi stil verin:

• Simgeyi Kullan: Evet, bir Yıldız
• Simge Rengi: Sarı #ffd400
• Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet, 48 piksel

Başlık metnini H4 düzeyinde şekillendirerek devam edin

• Başlık Metni: H4
• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Rengi: Siyah #ffffff

• Başlık Metin Boyutu:
  • Masaüstü = 1.2vw
  • Tablet = 2.3vw
  • Telefon = 3.3vw
• Başlık Satırı Yüksekliği:
  • Masaüstü = 2vw
  • Tablet = 3.4vw
  • Telefon = 4.6vw

Gövde metni ayarlarını buna göre şekillendirin:

• Gövde Metni Yazı Tipi: Nunito Sans
• Gövde Metni Ağırlığı: Yarı Kalın
• Gövde Metni Rengi: Siyah #000000
• Gövde Metni Boyutu:
  • Masaüstü = 0.7vw
  • Tablet = 1.6vw
  • Telefon = 2.4vw
• Gövde Çizgisi Yüksekliği:
  • Masaüstü = 1,6vw
  • tablet = 4vw
  • Telefon = 5vw

Tanıtım yazısının sütunundan daha az geniş olmasını istiyoruz, bunu başarmak için genişliği, kenar boşluklarını ve dolgu değerlerini ayarlayacağız.

İlk olarak, tanıtım yazısının genişliğini ayarlayacağız:

• İçerik Genişliği: %100
• Genişlik:
  • Masaüstü = %58,4
  • Tablet + Telefon = %90

Ardından, boşluk ayarları:

• Üst Marj: 3vw
• Alt Marj: 3vw
• Sağ Kenar Boşluğu: -24vw
• Sol Dolgu: 0px
• Sağ Dolgu: 4px

3. Bölücü Ekle

Bu sütunda ihtiyacımız olan son modül bir bölücü modüldür. Ayırıcıya aşağıdaki değişiklikleri uygulayın:

• Bölücüye Bakın: Evet
• Bölücü Rengi: Siyah #oooooo
• Bölücü Ağırlığı: 1px

Neredeyse geldik! Sonucumuz şu ana kadar böyle görünüyor:

Sütun 3

Üçüncü ve son sütuna geç! Bir harekete geçirici mesaj görüntülemek için bu sütunu kullanıyoruz. Üç modül kullanıyoruz; bir metin modülü, bir ayırıcı modül ve bir düğme modülü.

1. Metin Modülü Ekle

Bu sütuna ekleyeceğimiz ilk şey metin modülüdür.

H3'e bir başlık ve içerik kutusuna biraz paragraf metni ekleyeceğiz.

Devam edin ve metin ayarlarını buna göre şekillendirin:

• Metin Yazı Tipi: Nunito Sans
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Yazı Tipi Rengi: Beyaz #ffffff
• Metin Yazı Tipi Boyutu:
  • Masaüstü = 0.8vw
  • Tablet=- 2vw
  • Telefon = 2.6vw
• Metin satırı Yüksekliği:
  • Masaüstü = 1.5vw
  • tablet = 4vw
  • Telefon = 5vw

Başlık metni ayarlarını şekillendirerek metin modülünü tamamlayın.

• Başlık Metni: H3
• Başlık 3 Yazı Tipi: Poppins
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: Beyaz #ffffff
• Başlık 3 Metin Boyutu:
  • Masaüstü = 1.1vw
  • tablet = 3vw
  • Telefon = 4vw
• Başlık 3 Çizgi Yüksekliği:
  • Masaüstü = 1.5vw
  • tablet = 3vw
  • Telefon = 4.5vw

2. Bölücü Modülü Ekleyin

Sütun 3'e bir bölücü modül ekleyerek devam edin. Ayırıcıya stil vermek için, sütun 2'de bulabileceğiniz bölücü stillerini kopyalayıp yapıştıracağız.

Ayırıcı ayarlarını açın ve rengi siyahtan beyaza değiştirin. Biraz üst ve alt dolgu da ekleyin.

• Bölücü Rengi: Beyaz #ffffff
• Üst Dolgu: 40px
• Alt Dolgu: 20px

3. Düğme Modülü Ekle

Bir düğme modülü olan son modüle geçiyoruz. Seçtiğiniz bir kopyayı ekleyin.

Tasarım sekmesine gidin ve düğmeyi aşağıdaki gibi biçimlendirin:

• Düğme için Özel Stil Kullan: Evet
• Düğme Metin Boyutu:
  • Masaüstü = 0.8vw
  • Tablet = 2.4vw
  • Telefon = 3vw
• Düğme Metin Rengi: Beyaz #ffffff

• Düğme Arka Plan Rengi: Gradyan
• Degrade Renk Bir: Sarı #ffd400
• Degrade Renk İki: Turuncu #ff8300
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 202deg.

• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Nunito Sans
• Düğme Yazı Tipi Ağırlığı: Ağır
• Düğme Yazı Tipi Stili: TT

Düğmenin tüm ekran boyutlarında iyi görünmesini sağlamak için düğmenin dolgusunu aşağıdaki gibi ayarlayacağız:

masaüstü

• Üst Dolgu: 1vw
• Alt Dolgu: 1vw
• Sağ Dolgu: 3vw
• Sol Dolgu: 3vw

Tablet

• Üst Dolgu: 2vw
• Alt Dolgu: 2vw
• Sağ Dolgu: 6vw
• Sol Dolgu: 6vw

Telefon

• Üst Dolgu: 3vw
• Alt Dolgu: 3vw
• Sağ Dolgu: 8vw
• Sol Dolgu: 8vw

Ön izleme

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

masaüstü

Mobil

toparlamak

Bu örtüşen üç sütunlu yapı, bir referans olarak harika görünüyor, ancak bunu başka harika şeyler için uygulayabileceğinizden eminiz. Bunun, gelecekteki projeler için sütun dönüştürme ve örtüşen seçenekleri kullanmanız için size ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!