Divi: Fullwidth Header modülüne aşağı kaydırma düğmesi nasıl eklenir?

Fullwidth Header modülünüze eklemek ister misiniz? Divi aşağı kaydırma düğmesi?

Fullwidth Header modülü Divi kullanıcıya aşağı kaydırabileceklerini söyleyen bir düğme içerir. Üzerine tıkladıklarında, otomatik olarak bir sonraki bölüme yönlendirilirler. Aralarından seçim yapabileceğiniz birden fazla simgeye sahip basit bir düğmedir ve rengi ve boyutu tamamen özelleştirilebilir. 

Bu makalede, onu nasıl özelleştireceğimizi ve Fullwidth Header modülünüze ekleyebileceğiniz dört aşağı kaydırma düğmesini göreceğiz. Daha da fazla tasarım seçeneği için onu CSS ile nasıl özelleştireceğimizi de göreceğiz.

Hadi başlayalım!

Aşağı kaydırma düğmelerine genel bakış

Öncelikle bu yazımızda oluşturacağımız tasarımlara bir göz atalım.

örnek 1

Örnek 2

DIVI'yı şimdi indirin!!!

Örnek 3

Örnek 4

DIVI'yı şimdi indirin!!!

Aşağı kaydırma düğmeleri Tam genişlikte başlık tasarımı

İlk olarak, tam genişlikte başlık tasarımımızı oluşturacağız. Tasarımları kullanarak sıfırdan inşa ediyorum. Divi'de bulunan ücretsiz terapi düzeni paketi . Yeni bir sayfa oluşturun ve bir tam genişlikte başlık modülü yeni bir tam genişlikte bölüme.

Ayrıca bakınız: Divi: Blurb modülü ile bir organizasyon şeması nasıl oluşturulur

Tam genişlikte bölüm ayırıcı

Bu tam genişlikte başlık için bir Bölücü ekleyeceğiz. ayarlarını açın tam genişlik bölümü .

Ardından aşağı kaydırın bölen . sekmesine tıklayın Alt ve 8. ayırıcı stili seçin. Rengi #e5e8f0 olarak ayarlayın ve yükseklik için 10vw girin. Bölüm ayarlarını kapatın.

• Bölücüler: Düşük
• Stil: 8. stil
• Renk: #e5e8f0
• Yükseklik: 10vw

Başlık metni

Ardından Tam Genişlik Başlık modülünü açın ve başlığınızı, alt başlığınızı ve düğme metninizi ekleyin. Sahte metni kaldırın içindekiler gövdeyi boşaltın ve boş bırakın.

• Başlık: Daha İyi Hissetme Yolculuğunuza Bugün Başlayın.
• Altyazı: Leslie Saindon, lisanslı Terapist
• Düğme #1: Randevu Al
• tulum: yok

Başlık görüntüleri

Kaydırın Fotoğraflar ve bir başlık resmi seçin. ile sağlanan bir resim seçiyorum. Terapi Düzen Paketi.

Başlık arka planı

Kaydırın Olayın Arka Planı. Arka plan rengini kaldırın ve sekmeyi seçin Arka Plan Gradyanı.

• Gradyan Durakları:
  • %25: #2e5b61
  • %100: RGBA (46, 91, 97, 0,5)

etkinleştirme Gradyanı arka plan görüntüsünün üzerine yerleştirin .

• Arka Plan Resminin Üzerinde Kare Gradyan: EVET

Tam genişlikte başlık arka plan resmi

ArdındanArka Plan Resmi sekmesi ve tam ekran bir görüntü seçin. Therapy Layout Pack'ten başka bir resim kullanıyorum.

• Arka Plan Resmi Konumu: Üst Merkez

Tam genişlikte başlık düzeni

Ardındantasarım sekmesi ve etkinleştir Tam Ekran Yap .

• Tam Ekran Yap: EVET

Tam genişlikte başlık aşağı kaydırma simgesi

Sonra etkinleştir Aşağı Kaydır Düğmesini Göster. Bu düğmeyi örneklerimizde şekillendireceğiz, bu yüzden şimdilik varsayılan ayarlarda bırakacağız.

• Aşağı Kaydır Düğmesini Göster: EVET

Başlık görüntü

Ardından aşağı kaydırın Resim ve masaüstü bilgisayarlar için sol üst köşeleri 200 piksel olarak değiştirin. Yuvarlatılmış köşelerin geri kalanını 0 piksele ayarlayın. Tabletler ve telefonlar için yuvarlatılmış köşeleri 100 piksel olarak değiştirin.

• Resim Yuvarlak Köşeler:
  • Masaüstü: 200 piksel sol üst, 0 piksel diğerleri
  • Tablet ve Telefon: 100 piksel sol üst, 0 piksel diğerleri

Başlık başlık metni

Ardından aşağı kaydırın Başlık Metni. Başlık seviyesi için H1'i kullanın. Başlık yazı tipi için Karabatak Garamond'u seçin, ağırlığı Kalın ve rengi #e1ecea olarak ayarlayın.

• Başlık:
  • Başlık Seviyesi: H1
  • Yazı Tipi: Karabatak Garamond
  • Yazı Ağırlığı: Kalın
  • Metin Rengi: #e1ecea

Ardından boyut her üç ekran boyutu için. Masaüstü bilgisayarlar için 90 piksel, tabletler için 40 piksel ve telefonlar için 24 piksel kullanın. Satır yüksekliğini 1.1em olarak değiştirin.

• Başlık Metin Boyutu: 90px, 40px, 24px
• Başlık Satır Yüksekliği: 1,1 em

Tam genişlikte başlık altyazı metni

Ardından aşağı kaydırın Altyazı Metni. Yazı tipini Inter olarak, ağırlığı kalın olarak ve rengi #e1ecea olarak değiştirin.

• Alt yazı :
  • Yazı Tipi: Inter
  • Yazı Ağırlığı: Kalın
  • Metin Rengi: #e1ecea

Yı kur boyut masaüstü bilgisayarlar için 22 piksel, tabletler için 20 piksel ve telefonlar için 16 piksel. Değiştir satır yüksekliği 1,6 em.

• Altyazı Metin Boyutu: 22px, 20px, 16px
• Altyazı Satır Yüksekliği: 1,6 em

başlık düğmesi

Ayarlar'a aşağı kaydırın Düğme Bir ve etkinleştir Düğme Bir için Özel Stiller Kullanın . Boyutu 14 piksel, metin rengini #2e5b61 ve arka plan rengini #e1ecea olarak değiştirin.

• Düğme Bir İçin Özel Stilleri Kullan: EVET
• Düğme Bir
  • Metin Boyutu: 14px
  • Metin Rengi: #2e5b61
  • Arka plan: #e1ecea

genişliğini değiştir sınır 0px ve yarıçapında sınır 50px'de. Yazı tipi için Inter'i kullanın ve ağırlığı yarı kalın olarak değiştirin.

• Düğme Bir:
  • Kenar Genişliği: 0px
  • Sınır Yarıçapı: 50px
  • Yazı Tipi: Inter
  • Ağırlık: Kalın

için düğme dolgusu , Üst ve Alt için 20 piksel ve Sol ve Sağ için 40 piksel kullanın.

• Düğme Bir Dolgu: 20 piksel üst ve alt, 40 piksel sol ve sağ

Ayrıca Oku: Divi: Bir Akışkan Kahraman bölümü nasıl oluşturulur

Aşağı kaydırma düğmeleri örnekleri

Artık tam genişlikte başlığımız olduğuna göre, aşağı kaydırma düğmelerini nasıl özelleştireceğimizi görelim. Çeşitli simge, renk ve boyut kombinasyonlarına sahip dört örneğe bakacağız.

Aşağı kaydırma düğmeleri üç parametre içerir. Her ayar, her ekran boyutu için bağımsız olarak ayarlanabilir. Parametreler şunları içerir:

• Simge seçimi – 11 simge arasından seçim yapın. Dairelenmemiş, daire içine alınmış ve düz dahil olmak üzere arka planı olan veya olmayan çeşitli ok tasarımları içerirler.
• Renk – renk seçici Divi standardı.
• boyut – standart Divi boyut ayarı.

Ayrıca Gelişmiş sekmesinde bir CSS alanı içerir. 

Tüm bu parametreleri kullanacağız.

Ayrıca bakınız: Divi: Bir arka plan görüntüsüne uygulanabilen 5 maske ve desen katmanı

Örnek 1

İlk örneğimiz için, arka planı olmayan, daire içine alınmamış bir simge kullanacağız. İlk simgeyi seçin, rengi #e1ecea olarak değiştirin ve boyutu masaüstü bilgisayarlar için 66 piksel, tabletler için 60 piksel ve telefonlar için 50 piksel olarak değiştirin.

• Simge: 1. simge
• Renk: #e1ecea
• Boyut: 66px(Masaüstü ve Tablet), 50px(Telefon)

Bu, tasarımın geri kalanıyla iyi çalışan ve kullanıcıyı bilgilendirmek için yeterince öne çıkan açık yeşil bir aşağı ok oluşturur.

Örnek 2

İkinci örneğimiz için daire içine alınmış bir simge kullanacağız. Yedinci simgeyi seçin ve rengi #e8c553 olarak değiştirin. Bunun için simgeyi büyüteceğiz. Boyutu masaüstü bilgisayarlar için 78 piksel, tabletler için 70 piksel ve telefonlar için 60 piksel olarak değiştirin.

• Simge: 7. simge
• Renk: #e8c553
• Boyut: 78px(Masaüstü), 70px(Tablet), 60px(Telefon)

Bu renk, yerleşim paketindeki sarının bir varyasyonudur, ancak daha açıktır ve en iyi şekilde yeşil arka planda çalışır. Simgenin keskin köşeleri vardır, ancak daire, yerleşimin yuvarlak tasarımıyla eşleşir.

Örnek 3

Üçüncü örneğimiz için, çevresinde daire ve arka planı olan bir simge kullanacağız. Bu, arka planı renklendirir ve görüntünün arka plan görüntüsünü ortaya çıkaran bir açıklığa sahip simgeyi oluşturur. Site Web. 

En iyi sonuçlar için, simge boyutuna ve düğme arka plan rengine çok dikkat etmemiz gerekecek.

Sekizinci simgeyi seçin ve rengini #0e4951 olarak değiştirin. Boyutu masaüstü bilgisayarlar için 60 piksel, tabletler için 56 piksel ve telefonlar için 50 piksel olarak ayarlayın.

• Simge: 8. simge
• Renk: #0e4951
• Boyut: 60px(Masaüstü), 56px(Tablet), 50px(Telefon)

Yeşil, arka planda yeşilin daha koyu bir tonudur. Daha koyu olan gölge, yeşile karşı öne çıkıyor ve yine de düzenin geri kalanıyla eşleşiyor.

Örnek 4

Kesme simgesinin arkasında bir arka plan rengine sahip olmak için renkleri birleştirmek isterseniz ne olur? Bunu CSS ile yapabiliriz. 

Bu örnekte, simgenin arkasında, kesme simgesi aracılığıyla gösterilecek bir arka plan şekli oluşturmak için CSS kullanacağız. Simgenin kendisi standart ayarları kullanacaktır.

On birinci simgeyi seçin ve rengi #e1ecea olarak değiştirin. Bunun için simgeyi küçülteceğiz ve büyük bir arka plan şekli oluşturacağız. Boyutu masaüstü bilgisayarlar için 50 piksel, tabletler için 40 piksel ve telefonlar için 30 piksel olarak değiştirin.

• Simge: 11^th
• Renk: #e1ecea
• Boyut: 50px(Masaüstü), 40px(Tablet), 30px(Telefon)

Ardından sekmeye gidin gelişmiş ve alana ilerleyin Aşağı Kaydır Düğmesi ve bu CSS'yi girin:

border-radius: 45%;
padding:12px 40px 14px 40px;
background-color:#2e5b61

Bu CSS formatı, üst, sağ, alt ve sola dolgu ekler. Bu dolguyu, mizanpaj tasarım kılavuzlarını kullanarak başlık tasarımıyla uyumlu bir arka plan ovali oluşturmak için kullandım.

Çeşitli örneklerin sonuçları

Örnek 1

Örnek 2

DIVI'yı şimdi indirin!!!

Örnek 3

Örnek 4

DIVI'yı şimdi indirin!!!

Sonuç

Bu, Fullwidth Header Divi modülünüze ekleyebileceğiniz dört aşağı kaydırma düğmesine genel bakışımızdır. Kaydırma düğmesi, aralarından seçim yapabileceğiniz birkaç simge içerir ve rengini ve boyutunu ayarlayabilirsiniz. 

CSS alanını kullanarak düğmeyi daha da özelleştirebilirsiniz. Düğme stili seçenekleri ve CSS kombinasyonları, aşağı kaydırma düğmelerinizle size birçok tasarım olanağı sunar.

Umarım bu bir sonraki blog siteniz için faydalı olur. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.

Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.

Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.

Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.

...