Divi Sitenizin Kahraman Bölümü için 4 Hareketli Kaydırma Düğmesi (ve Nasıl Oluşturulur)
Yayınlanan: 2019-08-08Hareketli Kaydırma düğmeleri, kullanıcıların dikkatini çekmek ve onları web sayfanıza yönlendirmek gibi basit ama önemli bir işe sahiptir. Bu tür düğmeler normalde ekranın üst kısmında bulunur, böylece bir ziyaretçi web sayfasının bir sonraki önemli bölümüne gitmek zorunda kalmadan düğmeyi tıklatabilir. Aslında Divi, tam genişlikli başlık modülünde yerleşik olarak bu kaydırma düğmesi özelliğine sahiptir.
Bu eğitimde, size Divi'de tamamen özel animasyonlu kaydırma düğmelerinin nasıl oluşturulacağını göstereceğim. Bu nedenle, tam genişlikli başlık modülünde Divi'nin yerleşik kaydırma düğmesine yaratıcı bir alternatif arıyorsanız, bu hareketli kaydırma düğmesi tasarımları (tam anlamıyla) sizi doğru yöne yönlendirmeye yardımcı olacaktır.
Gizlice Bakış
İşte birlikte inşa edeceğimiz tasarımlara hızlı bir bakış.
Animasyonlu Kaydırma Düğmeleri Düzenini ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Youtube Kanalımıza Abone Olun
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak resimler
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Başlık Bölümünü Oluşturma
Animasyonlu kaydırma butonlarını tasarlamaya başlamadan önce, sahte başlık bölümümüzü kurmamız gerekiyor. Animasyonlu kaydırma düğmesi tasarımlarını almaya daha fazla odaklanacağımız için, başlık tasarımını koyu bir arka planla basit tutacağız. Tamamlandığında, her yeni kaydırma düğmesi tasarımının üstesinden gelmek için bölümü çoğaltabiliriz.
Başlamak için, bir sütun satırı olan normal bir bölüm oluşturun.
Ardından bir modül eklemeden önce bölüm ayarlarını açın ve aşağıdaki gibi koyu bir arka plan ekleyin:
Arka Plan Rengi: #222222
Herhangi bir karanlık arka plan çalışacaktır.
Başlık Metni Ekle
Sahte başlık metni oluşturmak için bir sütun satırına yeni bir metin modülü ekleyin.
Ardından gövde içeriğini, varsayılan paragraf metninin hemen üzerinde bir h1 başlığıyla güncelleyin.
<h1>scroll button animation</h1> <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>
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
Metin Yazı Tipi: Karla
Metin Metni Hizalama: Merkez
başlık Metin Boyutu: 5vw
Metin Rengi: Açık
Bu, farklı animasyonlu kaydırma butonlarımız için kullanacağımız temel bölüm tasarımı olacaktır.
Hareketli Kaydırma Düğmesi Tasarımı #1: Yavaş Dönme Animasyonlu Dikey Metin
Temel bölüm tasarımımız yerindeyken, ilk animasyonlu kaydırma butonumuzu eklemeye hazırız. Bu kaydırma düğmesi, sağ tarafında bir simgeye sahip olacak bir tanıtım modülünden oluşur. Ardından metin ve simge, ok simgesi aşağıyı gösterecek şekilde dikey olarak döndürülecektir. Bundan sonra, yavaş bir süre ile sıçrama animasyonunu ekleyeceğiz.
İşte nasıl yapılacağı.
İlk olarak, başlık metnini içeren satırımızın hemen altına yeni bir tek sütunlu satır ekleyin.
Ardından satıra bir tanıtıcı modül ekleyin.
Tanımlama ayarları altında, varsayılan gövde içeriğini silin ve aşağıdakileri ekleyin:
Başlık: kaydırma
Simgeyi Kullan: EVET
Simge: sağ ok (ekran görüntüsüne bakın)
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
Simge Rengi: #ffffff
Resim/Simge Yerleşimi: Sol
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 50px
Başlık Yazı Tipi Stili: TT
Başlık Metin Rengi: #ffffff
Başlık Metin Boyutu: 14px
Başlık Harf Aralığı: 3px
Başlık Satırı Yüksekliği: 50px (simge yazı tipi boyutuyla aynı)
Ardından, tanıtım yazımıza belirli bir genişlik vermeli ve aşağıdaki gibi dikey olarak döndürmeliyiz:
genişlik: 132 piksel
Modül Hizalaması: merkez
Dönüştür Döndür Z ekseni: 90deg
Şimdi tek yapmamız gereken, tanıtım yazısının içerik sırasını tersine çevirmek, böylece ok simgesi tanıtım yazısının solunda değil sağında olacak. Bu, okun dikey metnin altında amaçlandığı gibi görünmesini sağlayacaktır. Bunu yapmak için Ana Öğeye aşağıdaki özel CSS'yi eklememiz gerekiyor:
direction: rtl;
Yavaş Darbe Animasyonu Ekleme
Animasyonu eklemek için aşağıdakileri güncelleyin:
Animasyon Stili: Sıçrama
Animasyon Yönü: Aşağı
Animasyon Süresi: 5000ms
Animasyon Gecikmesi: 400ms
Görüntü/Simge Animasyonu: soldan sağa
Son sonuç
Şimdi tasarım #1 için nihai sonucu kontrol edelim.
Hareketli Kaydırma Düğmesi Tasarımı #2: Dikey Seçim Çerçevesi Metin Animasyonu
Bu sonraki tasarım, tanıtım modülü kullanılarak oluşturulan dikey metin kaydırma düğmesini koruyacağımız tasarım #1'den yola çıkıyor. Fark animasyon olacaktır. Bu tasarım için, kaydırma düğmesinin satır kabının üzerine gizlenmesiyle başlayan ve ardından düğmenin satırın altına gizlenmesiyle biten bir slayt animasyonu ekleyeceğiz. Döngüdeki animasyon ile bu, kullanıcının dikkatini çeken bir metin kayan yazı animasyon efekti yaratacaktır.
İşte nasıl yapılacağı.
İlk önce tasarım #1'in tüm bölümünü çoğaltın.
2. Satır Ayarlarını Güncelle
Ardından, tanıtıcı modül/kaydırma düğmesini içeren bölüm satırını aşağıdaki gibi güncelleyin:
Yatay Taşma: gizli
Dikey Taşma: gizli
Blurb Modül Ayarlarını Güncelle
Seçim çerçevesi animasyonunu oluşturmak için, önce tanıtım metnini satır kabının altına taşımak için transform translate kullanmamız gerekiyor (görünümden gizli). Bu, metnin animasyonun sonunda olacağı konum olacaktır. Aşağıdakileri güncelleyin:
Dönüştür Y eksenini çevir: 115 piksel
Ardından, aşağıdaki animasyon ayarlarını ekleyin:
Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Süresi: 4000ms
Animasyon Yoğunluğu: %195
Animasyon Opaklığı Başlatma: %100
Animasyon Hız Eğrisi: Doğrusal
Animasyon Tekrarı: Döngü
Son sonuç
Şimdi tasarım #3 için nihai sonucu kontrol edelim.
Hareketli Kaydırma Düğmesi Tasarımı #3: Gecikmeli Aşağı Kaydırma Animasyonlu Ok Sekmesi
Bu sonraki tasarım için, benzersiz bir ok sekmesi tasarımı oluşturmak için bir metin modülünü ve bir tanıtım modülünü birleştireceğiz.
Bu tasarım için temel başlık bölümü tasarımı ile başlayacağız. Böylece yinelenen tasarım #3 bölümünü çoğaltabilir ve ardından 2. satırdaki tanıtım modülünü silebilirsiniz.
Ardından, doğrudan ilk satırın altındaki bir sütun satırına bir metin modülü ekleyin.
Ardından gövde içeriğini “kaydırma” kelimesiyle güncelleyin.
Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:
Arka Plan Rengi: #ffffff
Metin Metin Rengi: #222222
Metin Hizalama: orta
Genişlik: 50 piksel
Modül Hizalaması: merkez
Kenar boşluğu: 0 piksel alt
Dolgu: 20 piksel üst, 20 piksel alt
Yuvarlatılmış Köşeler 5 piksel sol alt, 5 piksel sağ alt
Bulanıklık Simgesini Ekle
Artık metin modülü yerinde olduğuna göre, ok sekmesi tasarımını tamamlamak için hemen altında tanıtım yazısı simgesini oluşturmamız gerekiyor. Bunu yapmak için metin modülünün altına yeni bir tanıtım yazısı modülü ekleyin.
Ardından varsayılan başlığı ve gövde metnini silin. Ardından aşağıdaki güncellemeyi ekleyin:
Simgeyi Kullan: EVET
Simge: alt ok üçgeni (ekran görüntüsüne bakın)
Ardından ayarları aşağıdaki gibi güncelleyin:
Simge Rengi: #ffffff
Kenar boşluğu: -36 piksel üst, 0 piksel alt
Bu negatif kenar boşluğu, güzel bir ok sekmesi tasarımı için oku metin modülüne ekleyecektir.
Ardından, simgenin altındaki gereksiz kenar boşluklarını çıkarmak için aşağıdaki css'yi bulanık görüntüye ekleyin.
Bulanık Resim CSS'si:
margin-bottom: 0px;
Satır 2 Ayarlar ve animasyon
Kaydırma butonu tasarımını oluşturan modüllerin her ikisine de aynı animasyonu eklemek istediğimiz için animasyonu onları içeren satıra eklememiz gerekecek. Satırın ayarını aşağıdaki gibi güncelleyin:
Maksimum Genişlik: 100 piksel
Dolgu: 0 piksel üst, 0 piksel alt
Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Süresi: 1200ms
1. Sıra Arka Plan Rengi ve Kutu Gölgesi
Bu tasarımın son dokunuşu, kaydırma düğmesi satırının hemen üzerindeki ilk satıra bir arka plan rengi eklemeyi içerir. Ve o satırın Z indeksini güncelleyerek, kaydırma düğmesi animasyonunun başlıktan çıkıyormuş gibi görünmesine izin vereceğiz.
1. satır için ayarları aşağıdaki gibi açın:
Arka Plan Rengi: #222222
Z-endeksi: 10
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Dikey Konumu: 80px
Kutu Gölge Bulanıklığı Gücü: 22px
Kutu Gölge Yayılma Gücü: -70px
Gölge Rengi: #222222 (bunun arka plan rengiyle eşleştiğinden emin olun)
Son sonuç
Şimdi nihai sonucu kontrol edin.
Hareketli Kaydırma Düğmesi Tasarımı #4: Fare Kaydırma Animasyonu
Bu son animasyonlu kaydırma düğmesi için, bir metin modülünü ve bir tanıtım modülünü birleştirerek bir fare kaydırma animasyonu oluşturacağız.
İşte nasıl yapılacağı.
Başlamak için temel başlık bölümünü kullanabilirsiniz. Ardından 1. satırın altına yeni bir satır ekleyin.
Blurb Modülünü ekleyin
Ardından, satıra bir tanıtıcı modül ekleyin. Ardından varsayılan başlığı ve gövde metnini silin.
Bundan sonra simgeyi aşağıdaki gibi güncelleyin:
Simgeyi Kullan: EVET
Simge: daire (ekran görüntüsüne bakın)
Ardından, tanıtıcı tasarım ayarlarını aşağıdaki gibi güncelleyin:
Simge Rengi: #ffffff
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 15px
Animasyon Stili: Slayt
Animasyon Yönü: Aşağı
Animasyon Süresi: 1200ms
Animasyon Tekrarı: Döngü
Resim/Simge Animasyonu: Animasyon Yok
Ardından, Blurb Image'a aşağıdaki özel CSS'yi ekleyin:
margin-bottom: 0px;
Metin Modülünü Ekleyin
Ardından, doğrudan tanıtım modülünün altına yeni bir metin modülü ekleyin. Ardından gövde metnini "kaydır" kelimesiyle güncelleyin.
Ardından aşağıdaki metin ayarlarını güncelleyin:
Metin Metin Rengi: #ffffff
Metin Hizalama: orta
Genişlik: 90 piksel
Kenar boşluğu: 10 piksel üst, -30 piksel sol
2. Satır Ayarlarını Güncelle
Şimdi satır ayarlarını aşağıdaki gibi güncelleyin:
Genişlik: 30 piksel
Yükseklik: 60 piksel
Yuvarlatılmış Köşeler: 16px
Kenar Genişliği: 1px
Kenar Rengi: #ffffff
Kenar Stili: Katı
Yatay Taşma: görünür
Dikey Taşma: görünür
nihai sonuç
Şimdi nihai sonucu kontrol edelim:
Anchor Link İşlevselliği Ekleme
Bağlantı bağlantıları, bir sayfanın farklı bölümlerine atlayan bağlantılardır. Genellikle tek sayfa web sitelerinde kullanılırlar. Aynı konsepti kaydırma butonlarımıza bir bağlantı bağlantısı eklemek için kullanabiliriz, böylece onlar sayfanın altından istenilen bölüme atlayabilirler. Hareketli kaydırma düğmelerinize bağlantı bağlantısı işlevini eklemek için yapmanız gereken iki ana şey vardır.
- Atlamak istediğiniz Bölüme veya Satıra bir CSS Kimliği Eklemeniz Gerekir
- Kaydırma düğmenize aynı CSS kimliğine sahip bağlantı bağlantısı eklemeniz gerekiyor
İşte bunun nasıl çalışacağı. İlk olarak, başlık bölümünün altında kaydırma düğmesini içeren yeni bir bölüm oluşturun. Ardından, gelişmiş sekmenin altındaki yeni bölüme bir CSS kimliği verin.
Ardından, bağlantı bağlantınıza dönüştürmek istediğiniz öğe/kaydırma düğmesini bulun ve bir hashtag (veya pound sembolü) ile başlayan ve hemen ardından atladığınız öğenin CSS kimliği tarafından takip edilen bir url ekleyin.
Örneğin, bölümün CSS kimliği "bölüm-2" ise, bağlantı URL'si olarak "#bölüm-2" eklersiniz.
Unutmayın, Divi, Divi'deki her öğeye bağlantı URL'leri eklemenize izin verir, bu nedenle hareketli kaydırma düğmesini içeren satırın tamamına bağlantılar eklemekten çekinmeyin.
Daha fazla bilgi için, bağlantı bağlantılarıyla yapabileceğiniz bazı harika şeylere göz atın.
Yaratıcı ol!
Farklı modülleri bir araya getirmekten ve onları farklı şekillerde canlandırmaktan korkmayın. Aslında, Divi ile kaydırma düğmeleri tasarlamanın yeni yollarını keşfederken, mobil için kullanılabilecek eğlenceli bir başparmak kaydırma animasyonu oluşturdum. Kontrol etmek isterseniz diye yukarıdaki ücretsiz indirmeye ekledim.
Son düşünceler
Bunun gibi hareketli kaydırma düğmeleri Divi ile kolayca oluşturulabilir. Ve bunlara bağlantı bağlantıları gibi davranırsanız, başlıktan daha fazla yerde kullanılabilirler. Umarım bu tasarımlar, bir sonraki projeniz için yepyeni bir kaydırma düğmesi oluşturmanız için size ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!