Divi ile Benzersiz Sütun SSS Tasarımları Oluşturma

Müşterilerle düzenli olarak iletişim kuran her web sitesi bir SSS bölümünden yararlanabilir. Divi ile web sitenizi oluştururken, SSS bölümünüzü tasarlamanın birçok yolu vardır. Şimdi, bu gönderide, güzel bir tasarım oluşturmak için sütun ve modül kapsayıcısını birleştirmeye odaklanan eğlenceli bir SSS bölümü oluşturacağız. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

Sütun SSS Tasarımını ÜCRETSİZ İndirin

Ücretsiz sütun SSS tasarımına el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

Arka plan

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın. Bir satır eklemeden önce bölüm arka planını ayarlayın.

• Arka plan: Gradyan
• Birinci Renk: Koyu Aqua #50aebf
• İkinci Renk: Açık Su #6bf2ff
• Yön: 180 derece
• Başlangıç ​​Konumu: %21

aralık

Bölümün dolgu değerlerini de değiştirin.

• Üst Dolgu:
  • Masaüstü: 4vw
  • Tablet: 15vw
  • Telefon: 24vw
• Alt Dolgu: 2vw

Yeni Satır Ekle

Sütun Yapısı

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

Sütun Ayarları

aralık

Sütun 1 ayarlarını açın ve biraz sol ve sağ dolgu ekleyin.

• Sol ve Sağ Dolgu:
  • Masaüstü: 1vw
  • Tablet + Telefon: 3vw

Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Seçtiğiniz bazı H2 ve paragraf içeriğine sahip yeni bir metin modülü ekleyin.

Metin

Tasarım sekmesine geçin ve paragraf metnine stil verin.

• Metin Yazı Tipi: Oyuncu
• Metin Rengi: Kapalı Beyaz ##f6f6f6
• Yazı Boyutu:
  • Masaüstü + Tablet: 1.5vw
  • Telefon: 3.8vw
• Metin Harf Aralığı: 1px
• Metin Hizalama: Merkez

Başlık Metni

Ardından, başlık metnine stil verin.

• Başlık Metni Düzeyi: H2
• H2 Yazı Tipi: Verdana
• H2 Yazı Tipi Ağırlığı: Yarı Kalın
• H2 Yazı Tipi Rengi: Kapalı Beyaz: #f6f6f6
• H2 Yazı Tipi Boyutu:
  • Masaüstü: 3vw
  • tablet: 5vw
  • Telefon: 6vw
• H2 Harf Aralığı: 7px
• H2 Çizgi Yüksekliği:
  • Masaüstü: 1.8em
  • Tablet: 1.6em
  • Telefon: 1.5 em

boyutlandırma

Ayrıca, boyutlandırmayı ayarlayın.

• Genişlik: %100

aralık

Son olarak, aralığı ayarlayın.

• Üst boşluk:
  • Masaüstü + Tablet: 1.5vw
• Alt Kenar Boşluğu:
  • Telefon: -5vw
• Alt Dolgu: 0vw
• Sol + Sağ Dolgu: 7vw

Bölücü Modülü Ekle

Hat

Metnin altına bir ayırıcı modül ekleyin ve sarı yapın.

• Çizgi Rengi: Sarı #ffe100

boyutlandırma

Ardından, ağırlığı ve genişliği ayarlayın.

• Bölücü Ağırlığı: 4px
• Genişlik: %12
• Modül Hizalaması: Merkez

aralık

Son olarak, aralığı ayarlayın.

• Üst boşluk:
  • Masaüstü + Tablet: -1vw
  • Telefon: 10vw

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Her şeyden önce, boyutu ayarlayın.

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Ardından aralığı ayarlayın.

• Üst Marj: 3vw
• Alt Marj: 11vw
• Sol ve Sağ Kenar Boşluğu: otomatik
• Üst Dolgu: 0vw
• Alt Dolgu: 11vw
• Sol ve Sağ Dolgu: 5vw

Sütun 1 Ayarları

Hover'da Arka Plan

Diğer sütunları eklemeden önce, sütun 1 arka planını aşağıdaki gibi biçimlendirin:

• Vurgulu Arka Plan: Gradyan
• Birinci Renk: Sarı #ffe100
• İkinci Renk: Şeffaf
• Gradyan Türü: Radyal
• Radyal Yön: Sol Üst
• Başlangıç ​​ve Bitiş Konumu: %19

aralık

Sonraki sütuna bazı boşluk değerleri ekleyin.

• Alt Dolgu:
  • Masaüstü + Tablet: 0vw
  • Telefon: 4vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 1vw
  • Tablet + Telefon: 3vw

Sınır

Sütuna bazı yuvarlak köşeler de ekleyin.

• Yuvarlatılmış Köşeler: Dört köşenin tümü 1vw

dönüştürmek

Son olarak, sütuna özel bir dönüştürme çevirme değeri uygulayın.

• Dönüştür Çevirisi: 4vw y ekseni (Masaüstü), 0vw (Vurgulu, Tablet ve Telefon)

Sütun 1'i Dört Kez Çoğalt

Şimdi, ilk sütunu dört kez çoğaltın.

Sütun 2 Ayarları

dönüştürmek

Ardından, dönüşüm değerlerini ayarlayın. İlk olarak, sütun 2.

• Dönüştür Çeviri: 2vw y ekseni (Masaüstü), 0vw (Vurgulu, Tablet ve Telefon)

Sütun 3 Ayarları

dönüştürmek

Ardından, sütun 3'teki dönüştürme değerini sıfırlayın.

• Dönüştür Çevirisi: Sıfırla

Sütun 4 Ayarları

dönüştürmek

Ayrıca, 4. sütundaki dönüştürme değerini ayarlayın.

• Dönüştür Çeviri: 2vw y ekseni (Masaüstü), 0vw (Vurgulu, Tablet ve Telefon)

Sütun 5 Ayarları

dönüştürmek

Son olarak, 5. sütundaki dönüştürme değerlerini gözden geçirin.

• Dönüştür Çevirisi: 4vw y ekseni (Masaüstü), 0vw (Vurgulu, Tablet ve Telefon)

Sütun 1'e Geçiş Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! Seçtiğiniz bazı içerikle ilk sütuna bir geçiş modülü ekleyin.

• Başlık
• Vücut

Durum

Ardından, modülün durumu olarak 'Kapat'ı seçin.

• Durum: Kapalı

Arka plan

Ve arka plan olarak şeffaf bir soru işareti görüntüsü ekleyin.

• Arka plan görüntüsü
• Arka Plan Resmi Karışımı: Yumuşak Işık

Simge

Tasarım sekmesinde simgeye stil verin.

• Simge Rengi: Sarı #ffe100
• İkon boyutu:
  • Masaüstü: 34 piksel
  • Tablet + Telefon: 20px

Aç/Kapat

Ardından, geçiş arka planlarını statik ve fareyle üzerine gelme için stillendirin.

• Arka Plan Rengini Aç/Kapat: Deniz mavisi #0092af
• Kapalı Geçiş Arkaplan Rengi: Kapalı Beyaz: #f7f7f7
  • Fareyle üzerine gelin: Deniz mavisi #0092af

Başlık Metni

Başlık metnini şekillendirerek devam edin.

• Açık Başlık Metni Renk: Kapalı Beyaz: #f7f7f7
• Başlık Metin Rengi: Çok Koyu Gri #3a3a3a
  • Fareyle üzerine gelin: Kapalı Beyaz: #f7f7f7
• Başlık Başlık Düzeyi: H5
• H5 Yazı Tipi: Oyuncu
• H5 Hizalama: Sol
• H5 Metin Boyutu:
  • Masaüstü: 1.5 vw
  • Tablet: 3 vw
  • Telefon: 4.5 vw

Kapalı Başlık Metni

Kapalı metni de stillendirin.

• Kapalı Başlık Metin Rengi: Çok Koyu Gri #3a3a3a
• Kapalı Başlık Yazı Tipi: Aktör
• Hizalama: Sol
• Kapalı Metin Boyutu:
  • Masaüstü: 1.5vw
  • Tablet: 3vw
  • Telefon: 4.5vw

Gövde metni

Gövde metnini unutmayın.

• Gövde Yazı Tipi: Oyuncu
• Gövde Metni Hizalama: Sol
• Gövde Metni Rengi: Kapalı Beyaz: #f7f7f7
• Gövde Metni Boyutu:
  • Masaüstü: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw
• Gövde Çizgisi Yüksekliği: 1.8em

aralık

Metin stilinden sonra, bazı boşluk değerleri ekleyin.

• Üst boşluk:
  • Masaüstü + Tablet: 1vw
• Üst + Alt Dolgu:
  • Masaüstü: 2vw
  • Tablet: 3vw
  • Telefon: 5vw
• Sol Dolgu:
  • Masaüstü: 2vw
  • tablet: 4vw
  • Telefon: 5vw
• Sağ Dolgu:
  • Masaüstü: 2vw
  • Tablet: 3vw
  • Telefon: 4vw

Sınır

Bazı yuvarlatılmış köşeler ekleyin ve varsayılan 1 piksel kenarlığını kaldırın.

• Yuvarlatılmış Köşeler: Dört köşenin tümü 1vw
• Kenarlık: 0 piksel

Kutu Gölge

Son olarak, bir iç kutu gölgesi ekleyin.

• Kutu Gölgesi: 6. Seçenek
• Kutu Gölge Bulanıklığı Gücü:
  • Masaüstü + Tablet: 18 piksel
  • Telefon: 9px
• Kutu Gölge Yayılma Gücü: -4px
• Gölge Rengi: rgba(0,0,0,0.21)

Geçiş Modülünü 4 Kez Çoğalt

Tarz geçiş modülünü dört kez çoğaltın ve yenilerini boş sütunlara sürükleyin.

İçeriği Düzenle

Yinelenen geçiş modüllerindeki soruları ve cevapları düzenleyin ve işiniz bitti!

Ö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

Çözüm

Bu gönderide, size benzersiz bir sütun SSS tasarımının nasıl oluşturulacağını gösterdik. Tasarıma ilginç bir sarı köşe efekti vermek için bazı fareyle üzerine gelme seçenekleri ekledik. Bu tasarımın, Divi projelerinizin bir parçası olarak ilginç SSS tasarımları oluşturmanız için size ilham vereceğini umuyoruz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!