Divi ile Görüşler için Kaydırıcı Modülü Güzel Bir Şekilde Kullanma

Görüşler, şüphesiz, ürün veya hizmet satan her web sitesinin hayati bir parçasıdır. Web sitenize, insanların şirketiniz ve/veya ürününüz hakkında olumlu bir izlenim oluşturması için ihtiyaç duyduğu sosyal kanıtı ve güvenilirliği sağlarlar. Divi'de, özellikle referansları güzel bir şekilde sergilemenize yardımcı olan Referans Modülüne sahibiz. Ancak, Referans Modülünü kullanmak tek yol değildir. Örneğin, referansları sergilemek için Slider Module'ü de kullanabilirsiniz.

Bu gönderide, size referanslarla birlikte bir Slider Modülü içeren güzel bir bölümü nasıl yeniden oluşturacağınızı göstereceğiz. Bu öğreticiyi takip etmek için ihtiyacınız olan tek şey Divi'nin yerleşik seçenekleri ve markanız hakkında iyi sözler söyleyen kişilerin portre görüntüleridir.

Sonuç

Öğreticiye dalmadan önce, farklı ekran boyutlarında adım adım yeniden oluşturacağımız örneğe hızlı bir göz atalım.

Masaüstünde

Tablette

Mobilde

Örneği Yeniden Oluşturmaya Başlayın

Yeni Bir Standart Bölüm Ekle

Arka plan rengi

Yeni veya mevcut bir sayfaya standart bir bölüm ekledikten sonra yapmanız gereken ilk şey, o bölümün arka plan rengi olarak '#e7e0d6'yı seçmektir.

aralık

Ardından, Tasarım sekmesine gidin ve bölümün başlangıcı ve bitişi ile sonraki ekleyeceğimiz satır arasındaki mesafeyi artırmak için bölümünüze aşağıdaki özel dolguyu ekleyin:

• Üst: 100 piksel
• Sağ: 0 piksel
• Alt: 100 piksel
• Sol: 0 piksel

Yeni Satır Ekle

Sütun Yapısı

Bölümünüzü düzenlemeyi bitirdikten sonra, aşağıdaki sütun yapısına sahip yeni bir satır ekleyin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve arka plan rengi olarak '#fcfaf2' ekleyin.

Sütun 2 Arka Plan Rengi

Aynı sekmeyi aşağı kaydırın ve ikinci sütununuza '#a2eaf2' arka plan rengini verin.

boyutlandırma

Ardından, Tasarım sekmesine gidin, Boyutlandırma alt kategorisini açın ve satırınızın genişliğini artırmak ve her iki sütun arasındaki boşluğu kaldırmak için aşağıdaki ayarları kullanın:

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

aralık

Ardından, Tasarım sekmesindeki Aralık alt kategorisini açın ve aşağıdaki özel dolguyu kullanın:

• Üst, Sağ, Alt ve Sol: 0px
• 1. Sütun Alt: 50 piksel
• 2. Sütun Alt: 50 piksel

Kutu Gölge

Son olarak, ilk hazır Kutu Gölgesini seçin ve üzerinde aşağıdaki değişiklikleri yapın:

• Kutu Gölge Yayılma Gücü: -3px
• Gölge Rengi: rgba(0,0,0,0.3)

Birinci Sütuna Metin Modülü #1 Ekle

Metin Ayarları

Artık satırı değiştirdiğimize göre, sütunlara modüller eklemeye başlayabiliriz. İlk sütuna eklemeniz gereken ilk modül bir Metin Modülüdür. İçeriği ekledikten sonra Tasarım sekmesindeki Metin alt kategorisine gidin ve bunun için aşağıdaki ayarları kullanın:

• Metin Yazı Tipi: Allerta
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 22px
• Metin Rengi: #ffd870
• Metin Yönü: Sol

aralık

Tasarım sekmesini aşağı kaydırın, Aralık alt kategorisini açın ve ardından aşağıdaki özel dolguyu uygulayın:

• Üst Dolgu: 200 piksel
• Sol Dolgu: %15.7

Birinci Sütuna Metin Modülü #2 ekleyin

Metin Ayarları

İlk sütuna ikinci bir Metin Modülü ekledikten sonra, Metin alt kategorisine aşağıdaki ayarları uygulayın:

• Metin Yazı Tipi: Allerta
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 93px (Masaüstü), 70px (Tablet), 60px (Telefon)
• Metin Rengi: #433b7f
• Metin Satırı Yüksekliği: 1.2em
• Metin Yönü: Sol

aralık

Bu Metin Modülünün sol dolgusuna da '%15' ekleyin.

İlk Sütuna Metin Modülü #3 Ekle

Metin Ayarları

İlk sütunun son Metin Modülü, Metin alt kategorisinde bir merkez Metin Yönlendirmesi gerektirir.

boyutlandırma

Metin alt kategorisinde Metin Yönünü sola koyduktan sonra, Boyutlandırma alt kategorisini açın ve Genişlik için '%74' kullanın.

aralık

Son olarak, bu Metin Modülünün Aralık alt kategorisine aşağıdaki değerleri ekleyin:

• Üst Kenar Boşluğu: 50px
• Sol Dolgu: %15,7

İlk Sütuna Bir Düğme Modülü Ekleyin

Düğme Ayarları

İlk sütundaki son modül bir Düğme Modülüdür. Kopyayı ve bağlantıyı ekledikten sonra Tasarım sekmesine gidin ve Düğme alt kategorisi için aşağıdaki ayarları kullanın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 15px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #a2eaf2
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Allerta
• Yazı Tipi Ağırlığı: Normal

aralık

Ardından, Aralık alt kategorisini açın ve aşağıdaki değerleri ekleyin:

• Üst: 30 piksel
• Alt: 70 piksel
• Sol: %15,7

İkinci Sütuna Kaydırıcı Modül Ekleyin

Başlık Metni Ayarları

Artık ilk sütuna modül eklemeyi (ve düzenlemeyi) bitirdiğimize göre, ikincisine geçelim. İkinci sütuna eklemeniz gereken ilk şey Slider Module. Bu modülü, referansları yaratıcı bir şekilde sergilemek için kullanacağız. Herhangi bir kaydırıcı eklemeden önce, kaydırıcı Modülünü toplamında değiştireceğiz. Bu değişiklikler, bu modüle eklenecek tüm slaytlar için geçerli olacaktır. Tasarım sekmesine gidin, Başlık Metni alt kategorisini açın ve aşağıdaki ayarları H2 sekmesine uygulayın:

• Başlık Yazı Tipi: Allerta
• Başlık Yazı Tipi Ağırlığı: Normal
• Başlık Yazı Tipi Stili: İtalik
• Başlık Metni Hizalama: Sol

Gövde Metni Ayarları

Ardından, Gövde Metni Alt Kategorisini açın ve aşağıdaki ayarları uygulayın:

• Gövde Yazı Tipi: Allerta
• Gövde Yazı Tipi Ağırlığı: Normal
• Gövde Metni Hizalama: Sol
• Gövde Metni Rengi: #ffd870

aralık

Son olarak, Aralık alt kategorisindeki üst ve alt dolguya '180px' ekleyin.

Kaydırıcı İçeriği

Artık genel değişiklikleri yaptığınıza göre, devam edin ve modüle farklı referans kaydırıcılarını ekleyin. Bunların her biri için, referansın kendisi için Başlık alanını ve tanıklık yapan kişinin adı için İçerik kutusunu kullanın.

Kaydırıcı Arka Plan Rengi Yerleşimi

Kaydırıcıların her biri için arka plan rengi olarak '#605550' ekleyin.

Kaydırıcı Arka Plan Resmi

Arka plan rengiyle birlikte bir arka plan görüntüsü ekleyin ve Arka Plan Görüntüsü Karışımı için 'Çarp'ı uygulayın.

İkinci Sütuna Bir Metin Modülü Ekleyin

Metin Ayarları

Şimdi, aşağıdaki Metin ayarlarıyla birlikte oluşturduğunuz Slider Modülünün hemen altına bir Metin Modülü ekleyin:

• Metin Yazı Tipi: Allerta
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Boyutu: 24px
• Metin Rengi: #3f3f3f
• Metin Satırı Yüksekliği: 1.3em
• Metin Yönü: Sol

aralık

Son olarak, bu Metin Modülüne aşağıdaki özel dolguyu da ekleyin:

• Üst: %30 (Masaüstü), %20 (Tablet ve Telefon)
• Alt: %10
• Sol: %10

İkinci Sütuna Bir Düğme Modülü Ekleyin

Düğme Ayarları

İkinci sütuna eklemeniz gereken son şey bir Düğme Modülüdür. Kopyayı ve bağlantıyı ekledikten sonra, Düğme alt kategorisini aşağıdaki ayarlara göre değiştirin:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 15px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffd870
• Düğme Kenar Genişliği: 0px

aralık

Düğme Modülünü diğer Modüllerle uyumlu hale getirmek için aşağıdaki özel kenar boşluğunu kullanın:

• Alt: 70 piksel
• Sol: %10

Sonuç

Artık, Slider Modülünün referanslar için yaratıcı bir şekilde nasıl kullanılacağına dair tüm adımların üzerinden geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Masaüstünde

Tablette

Mobilde

Son düşünceler

Bu gönderide, bölümlerinizden birine referansları eklemek için Slider Modülünü yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Bu tasarım, seçtiğiniz renk paleti ile birlikte herhangi bir web sitesi için kullanılabilir. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!