Divi ile Sonraki Hakkında Sayfanız için Etkileşimli Soru Kartı Izgarası Oluşturma

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, Divi ile bir sonraki sayfanız için nasıl etkileşimli bir soru kartı ızgarası oluşturacağınızı göstereceğiz. İnternet Servis Sağlayıcı Düzen Paketi'nin hakkında sayfasını kullanacağız, ancak bu yaklaşımı üzerinde çalıştığınız herhangi bir sayfada kullanabilirsiniz. Ziyaretçilere farklı bir kullanıcı deneyimi yaşatır ve paylaştığınız bilgiler üzerinden onlarla etkileşime geçmenizi sağlar. Yaklaşımı öğrendikten sonra, Divi'nin yerleşik seçenekleriyle oynayarak tercih ettiğiniz alternatif soru kartı ızgara tasarımları oluşturabilirsiniz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, sıfırdan yeniden oluşturacağımız soru kartı tablosuna hızlıca bir göz atalım.

masaüstü

Mobil

Hadi Yaratmaya Başlayalım!

ISP Düzen Paketinin Hakkında Sayfasını Kullanarak Yeni Sayfa Oluşturun

Yukarıda gösterdiğimiz tasarımı oluşturmak için İnternet Servis Sağlayıcı Düzen Paketi'nin yaklaşık sayfasını kullanacağız, bu yüzden devam edin ve bu düzeni kullanarak yeni bir sayfa oluşturun. Her zamanki gibi, önceden hazırlanmış düzenlerinizde bulabilirsiniz.

Kahraman Bölümü ve Altbilgi Arasındaki Tüm Bölümleri Sil

Mevcut tüm içeriği bir soru tablosu kartıyla değiştireceğiz. Bunu yapmak için önce kahraman bölümü ile altbilgi arasındaki tüm bölümleri kaldırmamız gerekecek.

Araya Yeni Bölüm Ekle

Oluşturacağımız soru kartı ızgarası, cevaplamak istediğiniz her türlü şirket sorusunu içerebilir. Sık sorulan soruları göstermek için ızgarayı da kullanabilirsiniz. Sayfanın kahraman bölümü ile altbilgisi arasına yeni bir normal bölüm ekleyerek devam edin.

Yeni Satır Ekle

Sütun Yapısı

Bölüm ayarlarında herhangi bir değişiklik yapmadan aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

boyutlandırma

Sütunlar arasındaki tüm varsayılan boşluğu kaldıracağız. Satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet

aralık

Güzel görünen bir tasarıma sahip olmak için sütunlar arasında hala biraz boşluğa ihtiyacımız olacak. Aralık ayarlarına gidin ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sütun 1 Sol Dolgu: 10px (Masaüstü), 5px (Tablet ve Telefon)
• Sütun 1 Sağ Dolgu: 5px
• Sütun 2 Sol Dolgu: 5px
• Sütun 2 Sağ Dolgu: 5px
• Sütun 3 Sol Dolgu: 5px
• Sütun 3 Sağ Dolgu: 10px (Masaüstü), 5px (Tablet ve Telefon)

Sütun 1'e Yeni Blurb Modülü Ekle

İçerik Ekle

Vurgulu efekti oluşturmak için ihtiyacımız olan tek modül bir Blurb Modülü. Bir tane oluşturarak başlayacağız ve daha sonra tüm sonucu oluşturmak için klonlayacağız. Birinci sütuna bir Blurb Modülü ekleyin. Cevaplamak istediğiniz soruyu başlık alanına ve cevabı içerik kutusuna ekleyin.

Simge Seç

Ardından, görüntü ve simge ayarlarında uygun bir simge seçin. Bu simge, ziyaretçilerinizin cevabı görmek için soru kartının üzerine gelmeleri gerektiğini anlamalarına yardımcı olacaktır.

Varsayılan Simge Ayarları

Tasarım sekmesindeki simge ayarlarını değiştirerek devam edin.

• Simge Rengi: #aaaaaa
• Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 40px

Fareyle Üzerine Gelme Simgesi Ayarları

Ve fareyle üzerine gelindiğinde simge rengini değiştirin. Simgenin üzerine gelindiğinde kaybolmasını sağlamak için üzerine gelindiğinde tamamen şeffaf bir renk kullanıyoruz.

• Simge Rengi: rgba(255,255,255,0)

Metin Ayarları

Ardından, metin ayarlarında metin yönünü değiştirin.

• Metin Yönü: Merkez

Varsayılan Başlık Metni Ayarları

Başlık metni ayarlarında da bazı değişiklikler yapın.

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #333333
• Başlık Metin Boyutu: 40px
• Başlık Harf Aralığı: -3px

Fareyle Üzerine Gelme Başlık Metni Ayarları

Ve fareyle üzerine gelindiğinde başlık metni rengini değiştirin. Birisi Blurb Modülü'nün üzerine geldiğinde sorunun görünmediğinden emin olmak için yine tamamen şeffaf bir renk kullanıyoruz.

• Başlık Metin Rengi: rgba(255,255,255,0)

Varsayılan Gövde Metni Ayarları

Gövde metni ayarlarını değiştirerek devam edin.

• Gövde Yazı Tipi: Açık Sans
• Gövde Yazı Tipi Ağırlığı: Hafif
• Gövde Metni Rengi: rgba(255,255,255,0)
• Gövde Metin Boyutu: 25px
• Gövde Harf Aralığı: -2px
• Gövde Çizgisi Yüksekliği: 1,6em

Vurgulu Gövde Metni Ayarları

Ve fareyle üzerine gelindiğinde gövde metni rengini değiştirin.

• Gövde Metni Rengi: #000000

aralık

Modülümüzü bir kareye dönüştürmek için bazı özel dolgu değerleri ekleyeceğiz.

• Üst Dolgu: 9vw
• Alt Dolgu: 9vw
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Varsayılan Yuvarlatılmış Köşeler

Ayrıca modülümüze '30px' yuvarlatılmış köşeler veriyoruz.

Yuvarlatılmış Köşeler Üzerine Gelin

Fareyle üzerine gelindiğinde bu yuvarlak köşeleri kaldırıyoruz.

Varsayılan Kenarlık

Ve bir alt kenarlık ekleyeceğiz.

• Alt Kenar Genişliği: 0px
• Alt Kenarlık Rengi: #0fffeb

fareyle üzerine gelin

Görünmesi için fareyle üzerine gelindiğinde alt kenarlık genişliğini değiştirin.

• Alt Kenar Genişliği: 10px

Kutu Gölge

Biraz derinlik eklemek için bir kutu gölgesi de kullanacağız.

• Gölge Rengi: rgba(0,0,0,0.05)

geçişler

Son olarak, gelişmiş sekmesinde geçiş süresini kısaltacağız.

• Geçiş Süresi: 250ms

Blurb Modülünü İki Kez Klonla ve Kalan Sütunlara Yerleştir

Artık ilk Blurb Modülünüz bittiğinde, onu klonlayarak ve kopyaları kalan iki sütuna yerleştirerek zaman kazanabilirsiniz.

İçeriği Değiştir

Yinelenenlerin her birinin içeriğini değiştirdiğinizden emin olun.

Alt Kenarlık Renklerini Değiştir

Alt kenarlık rengiyle birlikte.

Tüm Satırı İki Kez Klonla

Satırı istediğiniz kadar klonlayarak soru kartı ızgarasını oluşturabilirsiniz.

Her Öğe İçin İçeriği ve Alt Renkleri Ayrı Ayrı Değiştirin

Ancak soru kartlarının her birini benzersiz kılmak için içeriği ve alt renkleri değiştirmeyi unutmayın!

Ö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'nin İnternet Servis Sağlayıcı Düzen Paketini kullanarak etkileşimli bir soru kartı ızgarasının nasıl oluşturulacağını gösterdik. Tasarımın mizanpaj paketinin stiliyle eşleştiğinden emin olmamıza rağmen, bu yöntemi, herhangi bir ilgili sayfayı etkileşimli bir sayfaya dönüştürmek için de kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!