Divi hakkında bir sonraki sayfa için etkileşimli bir soru kartı kutusu oluşturun
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, size Divi ile bir sonraki sayfa hakkında etkileşimli bir soru kartı ızgarasının nasıl oluşturulacağını göstereceğiz. İnternet servis sağlayıcısı düzeni paketi hakkında bir sayfa kullanacağız, ancak yaklaşımı üzerinde çalıştığınız herhangi bir sayfada kullanabilirsiniz. Bu, ziyaretçilere farklı bir kullanıcı deneyimi sağlar ve paylaştığınız bilgiler hakkında onlarla etkileşim kurmanıza olanak tanır. Yaklaşımı aldıktan sonra, varsayılan Divi seçeneğiyle oynayarak seçtiğiniz alternatif bir soru kartı tasarımları oluşturabilirsiniz.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, baştan tekrar yapacağımız soru kartına bir göz atalım. Masaüstü
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafemiz, iyi bir tasarıma sahip olmak için sütunlar arasında hala biraz alana ihtiyaç duyuyor. Alan ayarlarını açın ve bazı özel dolgu değerleri ekleyin. Üst dolgu: 10 piksel
Dolgu Alt: 10 piksel
Sütun 1 Sol dolgu: 10 piksel (masaüstü), 5px (tablet ve cep telefonu)
Sütun 1 Dolgu Sağ: 5px
Sütun 2 Dolgu Sol: 5 Piksel
Sütun 2 Doğru: 5 piksel
Sütun 3 Solda Sol: 5 Piksel
Sütun 3 Dolgu Sağ: 10 piksel (masaüstü), 5px (tablet ve cep telefonu)
Sütun 1’e yeni bir Blurb Modülü ekleyin Bir havada kalma efekti oluşturmak için içerik ekleyin, ihtiyacımız olan tek modül bulanıklık modülü. Tüm sonuçları yapmak için bir tane yaparak ve bundan sonra klonlayarak başlayacağız. Blurb modülünü birinci sütuna ekleyin. Alanlara cevap vermek istediğiniz soruları ve içerik kutusuna cevapları ekleyin. Ardından simgeyi seçin, görüntü ayarları ve simgelerindeki sağ simgeyi seçin. Bu simge, ziyaretçilerinizin cevabı görmek için soru kartını yönlendirmeleri gerektiğini anlamalarına yardımcı olacaktır. Tasarım sekmesindeki simge ayarlarını değiştirerek varsayılan simge ayarları devam ediyor. Icon Rengi: #AAAAAA Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Simge yazı tipi boyutu: 40px
Simge ayarlarına gidin ve Hover’daki simgenin rengini değiştirin. İmleçi yönlendirirken simgeyi ortadan kaldırmak için imleci yönlendirirken tamamen şeffaf bir renk kullanıyoruz.
Ikon Renk: RGBA (255,255,255.0) Sonraki metin ayarları, metin ayarlarında metin yönünü değiştirin.
Metin Oryantasyonu: Orta Varsayılan başlık metin ayarları Başlık metin ayarlarında da bazı değişiklikler oluşturur.
Yazı Tip Başlığı: Poppins
Ağır yazı tipi başlığı: kalın
Başlık Metin Rengi: #333333
Başlık Metin Boyutu: 40 PX
Başlık mektubu aralığı: -3px
Başlık metni ayarlarına gidin ve yüzerken başlık metni rengini değiştirin. Birisi bulanıklık modülünü yönlendirdikten sonra sorunun görünmediğinden emin olmak için bir kez daha tamamen şeffaf bir renk kullanıyoruz.
Başlık Metin Rengi: RGBA (255,255,255.0)
Gövde yazı tipi: açık sans Vücut ağırlığı: ışık
Gövde metni rengi: RGBA (255,255,255.0)
Vücut Metin Boyutu: 25px
İçindeklik aralığı: -2px
Vücut Hattı Yüksekliği: 1.6EM
Vücut metin ayarlarına gidin ve yüzerken vücut metninin rengini değiştirin.
Gövde metni rengi: #000000 Modülümüzü bir kareye dönüştürmek için mesafe, bazı özel dolgu değerleri ekleyeceğiz.
Üst Dolgu: 9VW Dolgu Alt: 9VW
Sol dolgu: 50 piksel
Sağ dolgu: 50px
Varsayılan yuvarlak açımız ayrıca modülümüzü ’30px’ yuvarlak açıyla verir.
Yuvarlak açımızı yüzerken bu yuvarlak açıyı silmeye yönlendirin. Varsayılan sınır ve alt sınırı ekleyeceğiz. Alt sınır genişliği: 0px Alt Sınır Rengi: #0fffinat Sınır, imleci görünmeye yönlendirilirken alt sınırın genişliğini değiştirir.
Alt sınır genişliği: 10 piksel
Biraz derinlik katmak için kutunun gölgesi, kutunun gölgesini de kullanacağız. Gölge Rengi: RGBA (0.0,0,0.05)
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini azaltacağız. Geçiş süresi: 250ms
Blurb Klon modülü iki kez iki kez yerleştirin ve ilk bulanıklık modülünüz bittikten sonra kalan sütuna yerleştirin, klonlayarak ve kalan iki sütuna kopya yerleştirerek zamandan tasarruf edebilirsiniz. İçeriği Değiştirin Her bir kopyanın içeriğini değiştirdiğinizden emin olun.
Alt sınır rengini alt sınır rengi ile değiştirin. Tüm sıralar iki kez klonlar, istediğiniz kadar satır klonlayarak bir soru kartı ızgarası yapabilirsiniz. Her öğe için aşağıdaki içeriği ve rengi tek tek değiştirin, ancak her soru kartını benzersiz kılmak için alt kısmın içeriğini ve rengini değiştirmeyi unutmayın! Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım. Masaüstü Hücresel Bu yazıdaki son zihin, size Divi Internet Service Sağlayıcı Düzeni paketini kullanarak nasıl etkileşimli bir soru kartı ızgarası oluşturacağınızı gösterdik. Tasarımın düzen paketi stiliyle eşleştiğinden emin olmanıza rağmen, bu yöntemi her şey hakkındaki sayfayı da etkileşimli bir sayfaya değiştirmek için kullanabilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
