Divi ile SSS Tasarımınıza Değişen Yapışkan Sorular Nasıl Eklenir

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, SSS tasarımınız için gezinirken nasıl birbirinin yerine geçen yapışkan soruların nasıl oluşturulacağını göstereceğiz. Bu, insanların aradıkları bilgileri bulmalarına izin verirken tasarımınıza etkileşim eklemenin harika bir yoludur. 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

Yapışkan Sorular SSS Tasarımını ÜCRETSİZ İndirin

Ellerinizi ücretsiz yapışkan sorular SSS tasarımına 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.

1. Kitaplık İletişim Sayfası Düzenini Kullanarak Yeni Sayfa Oluşturun

Yeni Sayfa Ekle

Yeni bir sayfa ekleyerek başlayın. Bir sayfa başlığı girin, sayfayı yayınlayın ve Divi Builder'ı etkinleştirin.

Kütüphane İletişim Sayfası Düzenini Yükle

Önceden hazırlanmış düzenlere gidin ve Kitaplık Düzen Paketinde iletişim sayfası düzenini seçin.

2. Mevcut SSS Bölümünü Sil

SSS Bölümünü Bul ve Kaldır

Sayfada zaten bir SSS tasarımı içeren aşağıdaki bölümü bulun ve kaldırın:

3. Yeni SSS Bölüm Tasarımı Ekle

Yeni Normal Bölüm Ekle

Artık birbirinin yerine geçen yapışkan soruları içeren yeni tasarımımızı oluşturmaya başlayabiliriz! Bunu yapmak için yeni bir normal bölüm ekleyin.

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 satırın ekranın tüm genişliğini kaplamasına izin verin. Bu adımın çok önemli bir parçası da 'Sütun Yüksekliklerini Eşitle' seçeneğinin etkinleştirilmesidir. Bu, 2. sütuna yerleştirilen içeriğe bağlı olarak 1. sütunda otomatik olarak bir miktar boşluk oluşturacaktır. Bu alan, sayfada yukarı ve aşağı kaydırılırken yapışkan soruların serbestçe hareket etmesine izin vermek için kullanılacaktır.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

aralık

Sonraki tüm varsayılan üst ve alt sıra dolgusunu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1

Sütun 1 ayarlarını açarak devam edin.

Varsayılan Arka Plan Rengi

Varsayılan bir arka plan rengi ekleyin.

• Arka Plan Rengi: rgba(224,216,200,0.15)

Vurgulu Arka Plan Rengi

Ve fareyle üzerine gelindiğinde bu arka plan rengini değiştirin.

• Arka Plan Rengi: #FFFFFF

2. sütun

Sonraki ikinci sütunun ayarlarını açın.

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri uygulayın.

• Üst Dolgu: 100px (Masaüstü), 50px (Tablet ve Telefon)
• Alt Dolgu: 100px (Masaüstü), 50px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 50px (Tablet), 30px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 50px (Tablet), 30px (Telefon)

Sütun 1'e Metin Modülü Ekle

H3 İçeriği Ekle

Modül eklemeye başlama zamanı! Sütun 1'de ihtiyacımız olan ilk ve tek modül, sık sorulan sorulardan birini içeren bir Metin Modülüdür. Bunun için H3 kullanıyoruz.

Arka plan rengi

Sonraki Metin Modülüne bir arka plan rengi ekleyin.

• Arka Plan Rengi: #FFFFFF

H3 Metin Ayarları

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

• Başlık 3 Yazı Tipi: Açık Sans
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Yazı Tipi Stili: Büyük Harf
• Başlık 3 Metin Hizalama: Merkez
• Başlık 3 Metin Boyutu: 20px
• Başlık 3 Harf Aralığı: 1px
• Başlık 3 Çizgi Yüksekliği: 1.5em

aralık

Bazı özel dolgu değerleri de ekleyin.

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 20px
• Sağ Dolgu: 20px

CSS Sınıfı

Modüle bir CSS sınıfı atayarak ayarları tamamlayın. Bu öğreticinin sonunda, modülü yapışkan hale getirmek için bu CSS sınıfını kullanacağız.

• CSS Sınıfı: yapışkan

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

İkinci sütuna geçin. Orada, seçtiğimiz bazı içeriklere sahip bir Metin Modülü ekleyeceğiz.

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Satırı Yüksekliği: 2em (Masaüstü ve Tablet), 1,6em (Telefon)

aralık

Ve modülün boşluk ayarlarına da bir miktar alt kenar boşluğu.

• Alt Kenar Boşluğu: 50px

2. Sütundaki Metin Modülünü Klonla ve İçeriği Değiştir

2. sütundaki Metin Modülünün tamamını klonlayın ve içeriği değiştirin.

Alt Kenar Boşluğunu Kaldır

Alt kenar boşluğunu da kaldırın.

Tüm Satırı İstediğiniz Kadar Kez Klonlayın

İlk satırı ve tüm modüllerini tamamladıktan sonra, tüm satırı istediğiniz kadar çoğaltabilirsiniz; sayfanızda kaç tane sık sorulan soru görmek istediğinize bağlı olarak.

Soruları ve Cevapları Değiştir

Tabii ki, tüm kopyayı değiştirmeniz gerekecek.

Sütun 1 Varsayılan Arka Plan Renklerini Değiştir

Yinelenen her satırın sütun 1 varsayılan arka plan renklerini de değiştirin. Kitaplık Düzen Paketi ile eşleşmesini istiyorsanız aşağıdaki renk kodlarını kullanın:

• Renk 1: #f2ece1
• Renk 2: rgba(0,0,0,0.2)
• Renk 3: rgba(0,0,0,0.64)
• Renk 4: #000000

Yeni Satır Ekle

Sütun Yapısı

Bu öğreticinin son kısmı, yapışkan efektin çalışmasını sağlamaya odaklanır. Bunun için birkaç satırlık CSS koduna ihtiyacımız olacak. Bölümünüzün altına yeni bir satır ekleyin.

Sütuna Kod Modülü Ekle

Yapışkan Soru CSS Kodu Ekle

Yapışkan efektin her soru için çalışmasını sağlayacak aşağıdaki CSS kodu satırlarına sahip bir Kod Modülü ekleyin Metin Modülü:

<style>
.sticky {
position: sticky;
position: -webkit-sticky;
top: 200px !important;
}
</style>

Ö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

Son düşünceler

Bu gönderide, Divi's Library Layout Pack'i kullanarak bir sonraki SSS tasarımınız için birbirinin yerine geçen yapışkan soruları nasıl oluşturacağınızı gösterdik. Library Layout Pack'in görünüşünü ve verdiği hissi kullanmış olsak da, bu tasarımı istediğiniz gibi şekillendirebilir ve yaklaşan Divi projeniz için kullanabilirsiniz. Bu eğitim, her hafta tasarım araç kutunuza fazladan bir şey koymaya çalıştığımız Divi tasarım girişimimizin bir parçasıdır. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.