Divi ile SSS tasarımınıza yapışkan bir soru nasıl eklenir
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, SSS tasarımınızı kaydırdığınızda nasıl değiş tokuş yapan yapışkan sorular yapacağınızı göstereceğiz. Bu, insanların aradıkları bilgileri bulmalarına izin verirken tasarımınıza etkileşimler eklemenin iyi bir yoludur. JSON dosyalarını ücretsiz olarak da indirebilirsiniz!
Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Dosyayı indir
1. Kütüphane İletişim Sayfası Düzenini kullanarak yeni bir sayfa oluşturun Yeni bir sayfa ekleyerek yeni bir sayfa ekleyin. Sayfa başlığını girin, sayfayı yayınlayın ve Divi Builder’ı etkinleştirin.
Kütüphane İletişim Sayfasının Düzenini Yükle Daha önce oluşturulmuş olan düzene gidin ve Kütüphane Düzeni Paketindeki Kişilik sayfasının düzenini seçin. 2. SSS bölümünü silin Şimdi SSS bölümünü bulun ve silin, sayfadaki SSS tasarımını zaten içeren aşağıdaki bölümleri bulun ve silin: 3. Yeni SSS bölümünün tasarımını ekleyin Yeni normal bölümümüzü ekleyin Artık değişim sorularını içeren yeni tasarımımızı yapmaya başlayabilir! Bunu yapmak için yeni düzenli bölüme girin. Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Bu adımın çok önemli kısmı ‘Sütun Yüksekliklerini Eşitle’ seçeneğini de etkinleştirmektir. Bu, sütun 2’ye yerleştirilen içeriğe dayanarak, sütun 1’de otomatik olarak birkaç boşluk üretecektir. Bu alan, sayfada yukarı ve aşağı kaydırırken yapışkan soruların serbestçe hareket etmesine izin vermek için kullanılacaktır. Özel Gapules kullanın: Evet Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Genişlik:% 100
Maksimum genişlik:% 100
Mesafe Tüm dolgu satırlarını bir sonraki varsayılan olarak yukarı ve aşağı silin.
Üst dolgu: 0px Aşağıda dolgu: 0px
Sütun 1 Sütun ayarını açarak devam edin 1.
Varsayılan arka plan rengi, varsayılanın arka plan rengini ekler. Arka plan rengi: RGBA (224,216,200,0.15) Arka plan rengini yönlendirin ve yüzerken bu arka plan rengini değiştirin.
Arka plan rengi: #ffffff Sütun 2 Bir sonraki ikinci sütun ayarlarını açın.
Mesafe ve çeşitli ekran boyutlarında bazı özel dolgu değerleri uygulayın. Üst Pilding: 100 piksel (masaüstü), 50px (tablet ve cep telefonu)
Aşağıda dolgu: 100px (masaüstü), 50px (tablet ve cep telefonu)
Sol dolgu: 100px (masaüstü), 50px (tablet), 30px (cep telefonu)
Sağ dolgu: 100 piksel (masaüstü), 50px (tablet), 30px (cep telefonu)
Metin modülünü Sütun 1’e ekleyin H3 içeriği ekleyin, modül eklemeye başlama zamanı! Sütun 1’de ihtiyacımız olan ilk ve tek modül, sık sık sorulan sorulardan birini içeren bir metin modülüdür. Bunun için H3 kullanıyoruz.
Arka plan rengi Arka plan rengini bir sonraki metin modülüne ekleyin.
Başlık 3 Yazı Tipi: SANS’ı Aç 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 Seviyeleri: Orta
Başlık 3 Metin Boyutu: 20px
Başlık alanı 3 harf: 1px
POS 3 Sıra Yükseklik: 1.5EM
Bazı özel dolgu değerleri de reklamı mesafesi.
Üst dolgu: 20px Dolgu Alt: 20 piksel
Sol dolgu: 20px
Doğru dolgu: 20 piksel
CSS sınıfı, CSS sınıfını modüle ayarlayarak ayarları doldurun. 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 Metin modülünü sütun 2’ye ekleyin, içeriği ikinci sütuna ekleyin. Orada, içerik seçimimizi içeren bir metin modülü ekleyeceğiz.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin yazı tipi: SANS’ı aç Hat yüksekliği metni: 2EM (masaüstü ve tablet), 1.6em (telefon)
Mesafe ve bazı alt kenar boşlukları da mesafe ayarları.
Alt kenar boşluğu: 50 piksel Sütun 2’deki klon metin modülü ve sütun 2’deki tüm metin modülünün klonlama içeriğini değiştirir ve içeriği değiştirir.
Alt kenar boşluğunu çıkarın, ayrıca alt kenar boşluğunu silin. İlk satırı ve tüm modülleri bitirdikten sonra istediğiniz gibi tüm satırların klonları, istediğiniz kadar çok satır klonlayabilirsiniz; Sayfanızda kaç tane yaygın soruyu görüntülemek istediğinize bağlı olarak. Soruları ve Cevapları Değiştirin Tabii ki, tüm kopyaları değiştirmelisiniz. Varsayılan sütun 1’in arka plan rengini değiştirin, her bir yinelenen satırın varsayılan sütunu 1’in arka plan rengini de değiştirin. Düzen paketi kitaplığını eşleştirmek istiyorsanız, aşağıdaki renk kodunu kullanın: Renk 1: #F2ECE1 Renk 2: RGBA (0.0,0,0.2)
Renk 3: RGBA (0.0,0,0.64)
Renk 4: #000000
Yapışkan bir efekt oluşturmaya odaklanan bu öğreticinin son sütun yapısının yeni bir satırını ekleyin. Bunun için birkaç sıra CSS koduna ihtiyacımız var. Parçanızın altına yeni bir satır ekleyin. Kod modülünü sütuna ekle CSS Kodu Yapışkan Soru Her metin modülü sorusu için yapışkan efekti çalışmasını sağlayacak aşağıdaki CSS koduyla kod modülünü ekleyin: .yapışkan { Pozisyon: yapışkan;
Pozisyon: -Webkit -sticky;
Üst: 200px! Önemli;
}
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel
Bu yazıdaki son zihin, Divi Kütüphane Düzeni paketini kullanarak bir sonraki SSS tasarımınız için nasıl değiştirilen yapışkan sorular yapacağınızı gösterdik. Düzen paketi kütüphanesinin görünümünü ve hissini kullanmış olsak da, bu tasarımı istediğiniz gibi ayarlayabilir ve yaklaşan Divi projeniz için kullanabilirsiniz. Bu öğretici, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız Divi Tasarım Girişimimizin bir parçasıdır. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin!
