Divi ile referanslar için kaydırıcı modüllerini kullanmanın güzel yolları
Referanslar, şüphesiz, ürün veya hizmet satan her web sitesinin önemli bir parçasıdır. Web sitenize, şirketinizin ve/veya ürününüzün olumlu bir izlenimini oluşturmaları için ihtiyaç duyulan sosyal kanıtlar ve güvenilirlik sağlar. Divi’de, özellikle referansları güzel bir şekilde göstermenize yardımcı olan bir referans modülümüz var. Ancak, tanıklık modülünü kullanmak tek yol değildir. Örneğin, referansları görüntülemek için bir kaydırıcı modülü kullanabilirsiniz. Bu yazıda, referanslı bir kaydırıcı modülü içeren güzel bir parçayı nasıl yeniden yaratacağınızı göstereceğiz. Bu öğreticiyi takip etmek için, ihtiyacınız olan tek şey varsayılan Divi seçeneği ve orada markanız hakkında iyi haber veren insanların portresinin resmidir.
Sonuçlar Eğiticiye girmeden önce, adım adım farklı bir ekran boyutunda yeniden yapacağımız örneğe bakalım. Masaüstünde
Yukarıda: 100 piksel
Doğru: 0px
Aşağıda: 100 piksel
Sol: 0px Parçayı düzenlemeyi bitirdikten sonra yeni bir sütun yapısının satırını ekleyin, aşağıdaki sütun yapısıyla yeni bir satır ekleyin: Arka plan rengi herhangi bir modül eklemeden, satır ayarlarını açın ve arka plan rengi olarak ‘#fcfaf2’ ekleyin. Aynı sekmenin altındaki 2 kaydırma sütununun arka plan rengi ve ikinci sütuna arka plan rengini ‘#a2eaf2’ verin. Bir sonraki yapıştırıcı, tasarım sekmesine devam edin, boyut alt kategorisini açın ve satır genişliğinizi artırmak ve iki sütun arasındaki alanı silmek için aşağıdaki ayarları kullanın: Özel genişlik kullanın: evet
Özel genişlik: 1200 piksel
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Yüksek sütunu eşitleyin: evet
Mesafe O zaman, tasarım sekmesindeki boşluk alanını açın ve aşağıdaki özel dolguyu kullanın: Üst, sağ, alt ve sol: 0px
Sütun 1 Aşağıda: 50px
Aşağıdaki sütun 2: 50px
Son Kutu Gölgesi, ilk önceden hazırlanmış kutu gölge kutusunu seçin ve aşağıdaki değişikliği oluşturun: Kutunun gölgesinin dağılımının gücü: -3px
Gölge Rengi: RGBA (0.0,0,0,3)
1 numaralı metin modülünü ekleyin Metin ayarlarının ilk sütununa şimdi satır değiştirdik, modülü sütuna eklemeye başlayabiliriz. İlk sütuna eklemeniz gereken ilk modül metin modülüdür. İçerik ekledikten sonra, tasarım sekmesindeki metnin alt kategorisine devam edin ve bunun için aşağıdaki ayarları kullanın: Metin Yazı Tipi: Altter
Metin yazı tipi ağırlığı: normal
Metin Boyutu: 22px
Metin rengi: #ffd870
Metin Oryantasyonu: Sol
Tasarım sekmesini aşağı kaydırın, boşluk alt kategorisini açın ve aşağıdaki özel dolguyu uygulayın: Üst dolgu: 200px
Sol dolgu:% 15.7
Metin Modülü #2 ekleyin Metin ayarlarının ilk sütununa ikinci metin modülünü ilk sütuna ekledikten sonra, aşağıdaki ayarları metin alt kategorisine uygulayın: Metin Yazı Tipi: Altter
Metin yazı tipi ağırlığı: normal
Metin Boyutu: 93px (masaüstü), 70px (tablet), 60px (Telefon) Metin Rengi: #433B7F
Yüksek çizgi metin: 1.2em
Metin Oryantasyonu: Sol
Mesafe Bu metin modülünün sol dolgusuna ‘%15’ ekleyin.
İlk sütundaki son metin modülünün metin ayarlarının ilk sütununa #3 metin modülünü ekleyin, metnin alt kategorisinde orta metin yönünü gerektirir. Yapıştırıcılar Metin yönünü metin alt kategorisine sola koyduktan sonra, boyut alt kategorisini açın ve genişlik için ’74’ kullanın. Son mesafe, bu metin modülünden alanın boşluğuna aşağıdaki değerleri ekleyin: Üst kenar boşluğu: 50 piksel
Sol dolgu:% 15.7
Düğme modülünü ilk sütuna ekleyin İlk sütundaki son modül düğmesini düğme düğmesi modülüdür. Kopyalar ve bağlantılar ekledikten sonra Tasarım sekmesine devam edin ve düğmelerin alt kategorisi için aşağıdaki ayarları kullanın:
Düğmeler için özel bir stil kullanın: evet
Metin Renk Düğmesi: #000000
Arka Plan Renk Düğmesi: #A2AF2
Düğmenin sınır genişliği: 0px
Yazı tipi düğmesi: Almight
Yazı tipi ağırlığı: normal
Mesafe O zaman, alan için alanı açın ve aşağıdaki değerleri ekleyin:
Üst: 30 piksel Aşağıda: 70px
Sol:% 15.7
Kaydırıcı modülünü, modülü ilk sütuna eklemeyi bitirdikten (ve düzenlemeyi) bitirdikten sonra geçerli başlık metin ayarlarının ikinci sütununa ekleyin, ikinciye geçelim. İkinci sütuna eklemeniz gereken ilk şey kaydırıcı modülüdür. Bu modülü referansları yaratıcı bir şekilde görüntülemek için kullanacağız. Herhangi bir kaydırıcı eklemeden önce, kaydırıcı modülünü toplam olarak değiştireceğiz. Bu değişiklik, bu modüle eklenecek tüm slaytlar için geçerli olacaktır. Tasarım sekmesini açın, başlık metninin alt kategorisini açın ve aşağıdaki ayarları H2 sekmesine uygulayın:
Yazı Tip Başlığı: Allamter Ağır Yazı Tipi Başlık: Normal Başlık Yazı Tip Stili: Italic
Tesisat Metin Başlığı: Sol
Vücut metnini ayarlayın Ardından, gövde metni alt kategorisini açın ve aşağıdaki ayarları uygulayın:
Body Font: Allanerta
Vücut ağırlığı: normal Vücut metninin hizalanması: sol
Gövde metni rengi: #ffd870
Son mesafe, aralık alt kategorisindeki üst ve alt dolguya ‘180px’ ekleyin.
Genel değişiklikler yaptıktan sonra geçerli slayt içeriği, devam edin ve modüle farklı referans kaydırıcılar ekleyin. Her biri için, referansın kendisi için başlık sütununu ve ifade veren kişinin adı için içerik kutusunu kullanın.
Her vardiya için kaydırıcı arka plan renkleri, arka plan rengi olarak ‘#605550’ ekleyin. Arka plan renkleri ile birlikte arka plan görüntüleri, arka plan görüntüleri ekleyin ve arka plan görüntü karışımına ‘çarpma’ uygulayın. Metin modülünü geçerli metin ayarlarının ikinci sütununa ekleyin, metin modülünü aşağıdaki metin ayarlarıyla birlikte oluşturduğunuz kaydırıcı modülünün hemen altına ekleyin: Metin Yazı Tipi: Altter Metin yazı tipi ağırlığı: kalınlık Metin Boyutu: 24 piksel
Metin rengi: #3F3F3F
Yüksek çizgi metin: 1.3em
Metin Oryantasyonu: Sol
Son mesafe, bu metin modülüne de aşağıdaki özel dolguyu ekleyin:
Yukarıda:% 30 (masaüstü),% 20 (tablet ve cep telefonu)
Aşağıda:% 10 Sol:% 10
Düğme modülünü ikinci sütuna ekleyin Son şeyi ayarlayın, ancak ikinci sütuna eklemeniz gereken son şey düğme modülüdür. Bir kopya ve bağlantı ekledikten sonra, düğme alt kategorisini aşağıdaki ayarlara göre değiştirin:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 15px Metin Renk Düğmesi: #000000
Arka Plan Renk Düğmesi: #FFD870
Düğmenin sınır genişliği: 0px
Bir Düğme Modülü Yapmak İçin Uzak Diğer modüllere göre, aşağıdaki özel marjı kullanın: Aşağıda: 70px
Sol:% 10
Testimonyaller için yaratıcı bir kaydırıcı modülünün nasıl kullanılacağına dair tüm adımlardan geçtik, sonuçlara farklı ekran boyutlarında bakalım. Masaüstünde
Tablette
Hücresel olarak Bu yazıdaki son zihin, kaydırıcı modülünü parçalarınızdan birine referans içerecek şekilde kullanmanın yaratıcı bir yolunu gösterdik.Bu tasarım, istediğiniz renk paleti ile birlikte herhangi bir web sitesi için kullanılabilir.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
