Hareketli Kaydırma Düğmesiyle Eşsiz Tam Ekran Divi Düzeni Tasarlayın

Tam ekran başlığınızda özel bir kaydırma düğmesi oluşturmak, kullanıcı deneyimini geliştirmek için harika bir tasarım desteğidir ve kullanıcının kaydırmak zorunda kalmadan sayfanızın sonraki bölümüne geçmesine olanak tanır. Düğmenize bazı göz alıcı animasyonlar eklemek de dönüşümlerinizi iyileştirebilir. Divi, bu özelliği tam genişlikte başlıklara eklemenizi gerçekten kolaylaştırmak için yerleşik bir kaydırma düğmesine sahiptir. Ancak bugün size bazı modern tasarım özellikleriyle aynı işlevi gerçekleştirmek için düğme modülünün nasıl kullanılacağını göstereceğimi düşündüm.

Bu eğitimde, bir düğme modülünü, sayfayı yüklediğinizde ekranın altında beliren özel bir kaydırma düğmesine nasıl dönüştüreceğinizi göstereceğim. Ayrıca ilham almak için yol boyunca birkaç tasarım ipucu vereceğim.

Başlayalım.

Gizlice Bakış

İşte birlikte inşa edeceğimiz tasarıma bir göz atın.

Sayfayı yüklerken daha fazla bilgi edinin CTA'sının nasıl açıldığını ve tıklandığında sonraki bölüme nasıl kaydırıldığını görün.

Bu Eğitim İçin İhtiyacınız Olan Tek Şey Divi

Bu eğitim için ihtiyacınız olan tek şey Divi. Kaydırma düğmemize son bir dokunuş eklemek için yerleşim paketlerinden birinden bir görüntü, görsel oluşturucu ile bazı tasarım sihri ve birkaç özel css parçacığı kullanacağım.

Tam Ekran Başlığını Tasarlama

Tam ekran üstbilgisini tasarlamak için yeni bir sayfa oluşturun ve görsel oluşturucuyu dağıtın. Ardından, tam genişlikte bir başlık modülüyle tam genişlikte bir bölüm ekleyin.

Ardından, tam genişlikli başlık ayarlarını aşağıdaki gibi güncelleyin:

Başlık: [başlığı girin] Düğme #1 Metin: [metin girin] İçerik: [içeriği girin]

Arka Plan Rengi: #0a2f5e
Arka Plan Resmi: [800×500 resim girin] Arka Plan Resmi Boyutu: Gerçek Boyut

Tasarım sekmesi altında, düzeni ortalanmış yönlendirmeye değiştirin ve tam ekran yapmayı seçin.

Metin ve Logo Yönü: Orta
Tam Ekran Yap: EVET

Metninizi daha kolay okuyabilmeniz için başlığınıza bir kaplama rengi verin.

Arka Plan Yerleşimi Rengi: rgba(10,47,94,0.8)

Ardından başlık metninizi, içerik metninizi ve 1 numaralı düğmeyi aşağıdaki ayarlarla tasarlayın:

Başlık Yazı Tipi: Poppins
Başlık Yazı Tipi Ağırlığı: Yarı Kalın
Başlık Metin Boyutu: 4vw
Başlık Satırı Yüksekliği: 1.2em

İçerik Yazı Tipi: Karla
İçerik Yazı Tipi Ağırlığı: Normal
İçerik Metin Boyutu: 16px
İçerik Satırı Yüksekliği: 1.5em

Düğme Bir için Özel Stilleri Kullan: EVET
Düğme Bir Metin Boyutu: 18px
Düğme Bir Arka Plan Rengi: #4daaf2
Düğme Bir Kenar Rengi: #4daaf2
Düğme Bir Kenar Yarıçapı: 100 piksel
Düğme Bir Yazı Tipi: Karla
Düğme Bir Ağırlık: Kalın

Bu, tam genişlikli başlığımız için yapacak. Şimdi eğlenceli şeyler için!

Özel Kaydırma Düğmesi Bölümünü Oluşturma

Bu kaydırma düğmesi için sayfanın sol tarafında aynı hizada olmasını istiyorum. Bu yüzden bölümünüze üç sütunlu bir satır ekleyin.

Ardından sol sütuna bir düğme modülü ekleyin.

Düğme modülü ayarlarını aşağıdaki gibi güncelleyin:

Düğme Metni: Daha Fazla Bilgi Edinin
Düğme URL'si: #iki

#two URL'si, eşleşen CSS kimliğini "iki" içerecek olan sonraki bölümün üst kısmına bağlantı bağlantısı görevi görecektir. Bu, özel bir kaydırma düğmesi oluşturmanın temel işlevidir.

Düğme Bir için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 24px (masaüstü), 20px (tablet)
Düğme Metin Rengi: #0a2f5e

Düğme Arka Plan Gradyanı Sol: #ffffff
Sağdaki Düğme Arka Plan Gradyanı: #dddddd
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %70
Bitiş Konumu: %0

Düğme Kenar Genişliği: 0px
Düğme Sınır Yarıçapı: 0px
Düğme Yazı Tipi: Karla
Düğme Ağırlığı: Kalın
Düğme Simgesi: [aşağı ok] Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

Özel Dolgu: 1.5em Üst, 1.5em Alt, %30 Sol

Animasyon: Slayt
Animasyon Yönü: Yukarı

Gelişmiş sekmesi altında, ana öğe giriş kutusuna aşağıdaki özel css'yi ekleyin:

display: block !important;

Bu, düğmenin sütunun tam genişliğine yayılmasını sağlar.

Ardından, girdi kutusuna aşağıdaki css'yi ekleyin:

position: absolute; right: 12%;

Bu, ok simgesini düğmenin sağına konumlandırır.

Ayarlarınızı kaydedin.

Bölüm Ayarlarını Özelleştir

Şimdi, düğmeyi yukarıdaki tam genişlik bölümünün üzerine getirmek ve aralığı doğru ayarlamak için bölüm ayarlarını özelleştirmemiz gerekiyor.

Aşağıdaki bölüm ayarlarını güncelleyin:

Arka Plan Rengi: rgba(255,255,255,0)

Özel Kenar Boşluğu: -112px Üst
Özel Dolgu: 0px Üst 0px Alt

Satır Aralığını Ayarla

Şimdi satır aralığını da ayarlamamız gerekiyor. Aşağıdaki satır ayarlarını güncelleyin.

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Özel Dolgu: 0px Üst, 0px Alt

Şimdi canlı sayfaya göz atın. Sayfa yüklendiğinde tam ekran başlığınızın sol alt kısmında bir düğme açılır penceresi göreceksiniz.

3. Bölüm Oluşturma: Menü kutusu ve öne çıkan içerik

Artık kaydırmaya hazır düğmemiz olduğuna göre, benzersiz bir kaydırma bölümü oluşturmak için başka bir bölüm ekleyelim.

Üçte bir üçte iki sütun yapısına sahip normal bir bölüm oluşturun.

Bu sütun yapısı anahtardır, çünkü butonumuzla doğrudan üstündekiyle aynı boyutta bir sol sütun oluşturmamıza izin verecektir.

Bölüm Ayarları

Modül eklemeye başlamadan önce, ilk olarak bölüm ayarlarımızı aşağıdakilerle güncelleyelim:

Arka Plan Rengi: #eaedf2

Özel Dolgu: 0px Üst, 0px Alt

Gelişmiş sekmesinde, Özel CSS Kimliğini "iki" ekleyin. Bu, düğmeyi bu bölümün en üstüne kaydırmanıza izin verecektir.

Satır Ayarları

İşleri hızlandırmak için, yukarıdaki bölümdeki düğmeyi içeren satırın satır stilini kopyalayın. Ardından, yeni satırınız için satır stilini yapıştırın.

İçerik sekmesinde, 1. sütun arka plan rengini #ffffff olarak güncelleyin. Bu, düğmenizin altındaki menü kutunuzun arka planı olarak hizmet edecektir.

Ardından sütunlarınız için aşağıdaki dolguyu güncelleyin:

Özel Dolgu: %10 alt
Sütun 2 Özel Dolgu: %10 Üst, %10 Sol, %6 Sağ

Artık sol sütunumuza kenar çubuğu modülümüzü eklemeye hazırız. Ancak bunu yapmadan önce özel bir menü oluşturmanız gerekiyor.

Özel Menünüzü Oluşturun

Vakit kaybetmeden size nasıl menü oluşturulacağının kısa bir açıklamasını vereceğim. İşte gidiyor:

1. Görünüm > Menüler'e gidin
2. Yeni Menü Oluştur'a tıklayın
3. Menü Başlığı Ekle
4. Menü Oluştur düğmesini tıklayın
5. Menünüze dahil etmek istediğiniz Sayfaları, gönderileri vb. seçin. Veya özel bağlantılar oluşturun.
6. Menü Yapısını Düzenleyin
7. Menüyü Kaydet

Özel Menü Widget'ı Oluşturun

Görsel oluşturucu aracılığıyla sayfamıza ekleyebilmemiz için bir gezinme menüsü widget'ı oluşturmak için bu adımları izleyin.

1. Görünüm > Widget'lar'a gidin
2. Widget adını girip oluştur düğmesine tıklayarak yeni bir widget alanı oluşturun
3. Navigasyon Menüsü Widget'ını oluşturduğunuz yeni widget alanına sürükleyin.
4. Widget ayarlarını açın ve az önce oluşturduğunuz menüyü seçin.
5. Kaydet'i tıklayın

Artık sayfamıza geri dönebilir ve görsel oluşturucuyu dağıtabiliriz.

Yeni Menü ile Kenar Çubuğu Modülü Ekle

Alt bölümümüzün sol sütununa bir kenar çubuğu modülü ekleyin.

Kenar çubuğunu yeni oluşturduğunuz widget alanını içerecek şekilde güncelleyin:

Tasarım Kenar Çubuğu Modülü

Artık aşağıdaki tasarım ayarlarını güncelleyerek menü bağlantılarınızın tasarımını düzen ile eşleştirebilirsiniz:

Kenarlık Ayırıcıyı Göster: HAYIR

Gövde Yazı Tipi: Karla
Gövde Yazı Tipi: Kalın
Gövde Metni Rengi: #0a2f5e
Gövde Metni Boyutu: 24px (masaüstü), 20px (tablet)
Gövde Çizgisi Yüksekliği: 2.3em

Özel Dolgu: 20px Üst, %10 Alt, %30 Sol

%30 sol dolgu, aynı zamanda %30 sol dolguya sahip olan yukarıdaki düğme metniyle hizalanmaya yardımcı olur.

Kutu Gölgesi: [ekran görüntüsüne bakın] Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge bulanıklığı Güç: 0px
Kutu Gölge Yayılma Gücü: 1px
Gölge Rengi: #f1f1f1

Bu, kutumuzun dışına bir kenarlık eklemenin ve kaydırma düğmesi ile menü kutusu arasına hafif bir ayrım eklemenin yaratıcı bir yoludur.

Sağ Sütuna İçerik Ekleme

Bölümün sağdaki üçte ikilik sütununa, bu düzeni kendi web siteniz için nasıl kullandığınıza dair bir fikir vermek için bir miktar içerik ekleyeceğiz.

İlk olarak, aşağıdaki ayarlarla bir ayırıcı modül ekleyin:

Renk: #0a2f5e
Bölücü Konumu: Dikey Ortalanmış
Bölücü Ağırlığı: 2px
Yükseklik: 18 piksel
Genişlik: 100 piksel

Bölücü Modülün altına, aşağıdaki içeriğe sahip bir metin modülü ekleyin:

<h2>01. About</h2>

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Başlık 2 Yazı Tipi: Poppins
Başlık 2 Metin Rengi: #0a2f5e
Başlık 2 Metin Boyutu: 18px
Özel Kenar Boşluğu: -17px Üst
Özel Dolgu: 120px Sol

İpucu: Ayırıcının başlığın solunda ve dikey olarak ortalanmasını sağlamak için, ayırıcı yüksekliğini (18px) başlık metninizin px değeriyle (18px) eşleştirin. Ardından, negatif piksel değerini (-17 piksel) kullanarak başlığı aynı sayıda piksele (bölücü çizginin genişliğini hesaba katmak için eksi bir) taşımak için özel kenar boşluğunu kullanın. Bundan sonra, başlığınıza ayırıcı çizginin 100 piksel uzunluğunu (120 piksel) hesaba katacak kadar sol dolgu verin.

Ardından, aşağıdaki ayarlarla altına başka bir metin modülü ekleyin:

İçerik:

<h3>Vivamus suscipit tortor eget felis porttitor volutpat.</h3>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Metin Yazı Tipi: Karla
Metin Metin Boyutu: 16px
Metin Satırı Yüksekliği: 1,6em

Başlık 3 Yazı Tipi: Poppins
Başlık 3 Yazı Ağırlığı: Yarı Kalın
Başlık 3 Metin Rengi: #0a2f5e
Başlık 3 Metin Boyutu: 3vw (tablet), 40px (tablet)
Başlık 3 Çizgi Yüksekliği: 1.2em

Özel Dolgu: %5 Üst, %2 Alt

Ayarları kaydet.

Son Bölümü Oluştur

Son bölümü oluşturmak için şu adımları izleyin:

1. Son bölümü çoğaltın.
2. Bölüm arka plan rengini #ffffff olarak güncelleyin
3. Satır sütununu üçte iki üçte bir yapı olarak değiştirin.
4. Satır ayarları altında, özel üst dolguyu %10 olarak değiştirin.
5. Sütun 1 Ekle Özel dolgu: %10 Sol, %6 Sağ
6. Sütun 2 Özel Dolgusunu varsayılana geri yükleyin.
7. Ayarları kaydet.
8. Sol sütundaki kenar çubuğu modülünü silin.
9. Sağ sütundaki tüm modülleri sol sütuna taşıyın ve içeriği güncelleyin.
10. Ardından sağ sütuna bir resim ekleyin.

İşte nihai sonuç…

Kaydırma Düğmesi Konumunuzu Değiştirme

Düğme konumunuzu değiştirmek için, onu satırdaki üç sütundan birine sürüklemeniz yeterlidir. Bu kadar basit!

Yaygın Uygulamayı Düşünün

Menü kutusuna sahip bu özel kaydırma düğmesi, kesinlikle tüm farklı uygulamalar hakkında düşünmenizi sağlamalıdır. Yeni başlayanlar için, kaydırma düğmesinin altındaki kutudaki menüyü herhangi bir şeyle tamamlayabilirsiniz! Bu, bir iletişim formu, e-posta seçeneği veya başka bir tür harekete geçirici mesaj için harika bir yer olacaktır.

İşte bir e-posta seçeneğinin nasıl görünebileceğine dair bir örnek…

Mobilde de Harika Görünüyor

Bu düzen, mobil cihazlarda oldukça iyi ölçeklenir. Kaydırma düğmesi, tablet ve akıllı telefondaki ekranın tüm genişliğini ölçeklendirir.

Son düşünceler

Bu düzeni oluşturmaktan ve masaya getirdiği olasılıkları keşfetmekten gerçekten keyif aldım. Tek başına özel kaydırma düğmesi, tam ekran bölümlerinizi daha belirgin hale getirmenin harika bir yoludur. Umarım bu tasarım, kendi web siteniz için daha da benzersiz düğmeler ve CTA'lar oluşturmanıza ilham verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!