4 Divi Site Kahramanlarınız İçin Animasyonlu Kaydırma Düğmesi (ve Nasıl Yapılır)
Animasyonlu kaydırma düğmesinin basit bir işi vardır, ancak kullanıcının dikkatini çekmek ve bunları web sayfanıza yönlendirmek önemlidir. Bu tür düğme genellikle en üst paro’da bulunur, böylece ziyaretçiler web sayfasının bir sonraki önemli kısmına kaydırmak zorunda kalmadan düğmeyi kolayca tıklayabilir. Aslında, Divi tam genişlik başlık modülünde bu kaydırma düğmesi özelliğine sahiptir. Bu öğreticide, Divi’de tamamen özel bir animasyon kaydırma düğmesini nasıl yapacağınızı göstereceğim. Bu nedenle, Divi’nin tam geniş bir başlık modülündeki varsayılan kaydırma düğmesi için yaratıcı bir alternatif arıyorsanız, bu animasyonlu kaydırma düğmesinin tasarımı sizi doğru yöne yönlendirmenize yardımcı olacaktır (kelimenin tam anlamıyla).
Aşağıdaki gizlice göz attığımız tasarıma bir bakış.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Başlık bölümünü oluşturun Animasyonlu kaydırma düğmesini tasarlamaya başlamadan önce yapay başlığımızı ayarlamamız gerekir. Animasyonlu kaydırma düğmesinin tasarımını elde etmek için daha fazla konsantre olacağımız için, başlık tasarımını koyu bir arka planla basit tutacağız. Bittiğinde, her yeni kaydırma düğmesi tasarımını işlemek için bölümü çoğaltabiliriz.
Başlamak için, bir satır sütun içeren düzenli bir bölüm oluşturun.
Daha sonra modülü eklemeden önce, parçanın ayarlarını açın ve koyu arka planı aşağıdaki gibi ekleyin: Renk arka planı: #222222 Koyu Arka Plan herhangi bir işlev görür. Yapay bir başlık metni oluşturmak için başlık metnini ekleyin, One sütun satırına yeni bir metin modülü ekleyin. Ardından içerik içeriğini varsayılan paragraf metninin hemen üzerindeki H1 başlığı ile güncelleyin. & lt; h1 & amp; kaydırma düğmesi animasyonu & lt;/h1 & gt; & amp; p & amp; gt; içeriğiniz buraya gider. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Karla Metin Leling Metin: Orta Metin Başlık Boyutu: 5VW Renk Metin: Işık
Bu, farklı bir animasyon kaydırma düğmesi için kullanacağımız temel parçanın tasarımı olacaktır. Animasyonlu kaydırma düğmesinin tasarımı #1: Yavaş yansıma animasyonuna sahip dikey metin, temel bölüm tasarımımızla, ilk animasyon kaydırma düğmemizi eklemeye hazırız. Bu kaydırma düğmesi, sağ tarafta bir simge olacak bir açıklama modülünden oluşur. Daha sonra metin ve simgeler dikey olarak döndürülür, böylece ok simgesi alttan geçer. Bundan sonra yavaş süreli animasyonlu bir kabin 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 sütun satırı ekleyin. Ardından, açıklama modülünü satıra ekleyin.
Açıklama ayarları altında, varsayılan içeriği silin ve aşağıdakileri ekleyin: Başlık: SCROLE Simons kullanın: Evet simgesi: sağ ok (ekran görüntüsüne bakın) Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #ffffff görüntü/simge yerleşimi: sol yazı tipi boyutu simgesi kullanın: evet yazı tipi boyutu simgesi: 50px yazı tipi başlık stili: tt renk metin başlığı: #fffff metin boyutu başlık: 14px. 3px satır yüksekliği başlığı: 50px (simge yazı tipinin boyutuna eşit) Sonraki, genişlik açıklamamızı vermemiz ve aşağıdaki gibi dikey olarak döndürmemiz gerekir: 132px modül hizalama: z: 90 derece dönüşüm açıklamasının orta dönüşümü, böylece Ok simgesi açıklamanın sağında, bırakılmamış. Bu, ok görüntüsünü dikey metnin altında istendiği gibi yapar. Bunu yapmak için, ana öğelere aşağıdaki özel CSS eklememiz gerekir: yön: rtl; Animasyon eklemek için yavaş kredi animasyonu ekleyin, aşağıdakileri güncelleyin: Animasyon Stili: Boşluk Animasyon Yönü: Animasyon Altında: 5000ms Animasyon Gecikmesi: 400ms Resim/Animasyon simgesi: Soldan sağa Son sonuç şimdi #1 tasarımının nihai sonucuna bakalım. Animasyonlu rulo düğmesinin tasarımı #2: Dikey Marquee Metin Animasyonu Bir sonraki tasarım, Tasarım #1’den oluşturulmuştur ve burada açıklama modülü kullanılarak yapılan dikey metin kaydırma düğmesini kaydedeceğiz. Fark bir animasyon olacak. Bu tasarım için, satır kabı üzerinde gizlenmiş bir kaydırma düğmesi ile başlayan ve daha sonra satırın altında gizli bir düğme ile biten bir animasyonlu slayt ekleyeceğiz. Döngüdeki animasyonla, bu, kullanıcının dikkatini çeken bir metin seçim çerçevesi animasyon efekti oluşturur. İşte nasıl yapılacağı. İlk olarak tüm tasarım parçalarını #1 kopyalayın. Bir sonraki satır 2 ayarlarını güncelleyin, bulanıklık/kaydırma modülünü içeren parçanın satırlarını şu şekilde güncelleyin: Yatay taşma: Gizli Dikey Taşma: Bir çadır animasyonu oluşturmak için bulanık modülün yeni ayarlarını gizleyin, önce çeviriyi kullanmalıyız Açıklama metnini konteyner çizgisinin altına taşımak için (ekrandan gizlenir). Bu, animasyonun sonundaki metin konumu olacaktır. Aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: 115px Ardından, aşağıdaki animasyon ayarlarını ekleyin: Animasyon Stili: Slayt Animasyon Yönü: Animasyon Altında: 4000ms Animasyon Yoğunluk:% 195 Animasyon Başlangıç Opaklığı:% 100 Animasyon Hız Eğrisi: Doğrusal Tekrar Animasyon: Döngü
Nihai sonuç şimdi tasarım #3 için nihai sonucuna bakalım. Animasyonlu Kaydırma düğmesinin tasarımı #3: Sekme Arrow, bir sonraki tasarım için gecikmeli kayan animasyon aşağı ile, benzersiz bir ok sekmesi tasarımı oluşturmak için metin modülünü ve bulanık modülünü birleştireceğiz. Bu tasarım için temel başlığın tasarımı ile başlayacağız. Böylece, yinelenen tasarım bölümünü #3 kopyalayabilir ve ardından 2. satır 2’deki açıklama modülünü silebilirsiniz. Ardından metin modülünü ilk satırın hemen altındaki bir sütunun satırına ekleyin. Ardından, vücut 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 Düzenleme: Orta Genişlik: 50 Piksel Modül Hizalama: Orta Kenar: 0px Alt Dolgu: 20px üst, 20px Alt Yuvarlak Sol, 5px Alt Sağa 5px Blurb Icon’u ekleyin Şimdi metin modülü yüklü, Ok sekmesi tasarımını tamamlamak için açıklama simgesini hemen aşağıda yapmamız gerekiyor. Bunu yapmak için metin modülünün altına yeni bir açıklama modülü ekleyin. Ardından varsayılan başlığı ve içerik metnini silin. Ardından aşağıdaki güncellemeyi ekleyin: simgeyi kullanın: evet simgesi: Alt Ok Üçgeni (ekran görüntüsüne bakın) Ardından ayarları aşağıdaki gibi güncelleyin: Renk simgesi: #ffffff marjı: -36px üst, bu negatif kenarın altındaki 0 piksel, oku iyi bir ok sekmesi tasarımı için metin modülüne takacaktır. Ardından, simgenin altındaki gereksiz kenar boşluklarını ortadan kaldırmak için açıklama resmine aşağıdaki CSS ekleyin. CSS Görüntü Koşu: Marj-Alt: 0px; Satır 2 Ayarları ve Animasyon Bir kaydırma düğmesi tasarımı oluşturan iki modüle aynı animasyonu eklemek istediğimiz için, onu içeren satıra animasyon eklememiz gerekir. Aşağıdaki satırlar için ayarları güncelleyin: Maks: 100 piksel dolgu: 0px üst, 0px daha düşük animasyon stili: Slayt animasyon yönü: Animasyon süresi altında: 1200ms satır 1 arka plan rengi ve bu tasarımdan son dokunmatik kutunun gölgesi eklenir Önce arka plan renkleri, kaydırma düğmesi satırının hemen üstünde. Ve satırın z index’ini güncelleyerek, kaydırma düğmesi animasyonunun başlıktan geçmiş gibi görünmesine izin vereceğiz. Satır 1 için ayarları aşağıdaki gibi açın: Arka Plan Rengi: #222222 Z-index: 10 Gölge Kutusu: Bkz. Dikey ScABle Dikey Konum Kutusu Örnekleri: 80px Bulanık Güç Gölge Kutusu: Kare Dağıtımın 22 Piksel Gücü: -70px Gölge Renk: #222222 (Bunun arka plan rengiyle eşleştiğinden emin olun) Nihai sonuç şimdi sonucu görüyor. Animasyonlu rulo düğmesinin tasarımı #4: Bu son animasyon kaydırma düğmesi için fare kaydırma animasyonu, metin modülünü ve açıklama 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 satır 1’in altına yeni bir satır ekleyin. Bir sonraki bulanıklık modülünü ekleyin, açıklama modülünü satıra ekleyin. Ardından varsayılan başlığı ve içerik metnini silin. Bundan sonra simgeyi aşağıdaki gibi güncelleyin: simgeyi kullanın: evet simgesi: Circle (bkz. Ekran görüntüleri) Ardından Açıklama Tasarım Ayarlarını şu şekilde güncelleyin: Renk simgesi: #ffffff Icon yazı tipi boyutunu kullanın: Evet Yazı tipi simgesinin boyutu: 15px animasyon stili: Slayt Animasyon Yönü: Animasyon Altında: 1200ms Animasyon Tekrar: Döngü Görüntü/Animasyon simgesi: Animasyon olmadan CSS’yi özellikle bulanık görüntüye aşağıdakileri ekleyin: Marj-Alt: 0px; Bir sonraki metin modülünü ekleyin, doğrudan açıklama modülünün altına yeni bir metin modülü ekleyin. Ardından içerik metnini “kaydırma” kelimesiyle güncelleyin. Ardından aşağıdaki metin ayarlarını güncelleyin: Metin Renk Metni: #FFFFFFF Metin Hizalama: Orta Genişlik: 90px Marj: 10px Top, -30px Sol Satır Ayarlarını Güncelle 2 Şimdi satır ayarlarını aşağıdaki gibi güncelleyin: Genişlik: 30px yükseklik: 60px Yuvarlak açı: 16px Sınır Genişliği: 1px Sınır Renk: #FFFFF Sınır Kuvvetleri: Yatay Taşma: Dikey Taşma Görünür: Görünür Nihai sonuç şimdi sonucuna bakalım: Çapa bağlantısı ankrajının işlevini eklemek, sayfanın çeşitli kısımlarına atlayan bir bağlantıdır. Genellikle bir sayfa web sitesinde kullanılırlar. Aynı kavramı, kaydırma düğmemize bir çapa bağlantısı eklemek için kullanabiliriz, böylece sayfanın altına istenen bölüme atlar. Animasyonlu kaydırma düğmenize bir çapa bağlantısı işlevselliği eklemek için yapmanız gereken iki ana şey vardır. Atlamak istediğiniz bölüme veya satıra CSS kimliği eklemeniz gerekir Kaydırma düğmenize aynı CSS kimliğine sahip bir çapa bağlantısı eklemeniz gerekiyor Bu nasıl çalışır. İlk olarak, kaydırma düğmesini içeren başlığın altında yeni bir parça oluşturun. Ardından CSS kimliğinin yeni bölümünü gelişmiş sekmenin altına verin. Ardından, çapa bağlantınıza değiştirmek istediğiniz öğeleri/parşömenleri bulun ve hashtag (veya pound sembolü) ile başlayan bir URL ekleyin ve hemen ardından gideceğiniz öğelerin CSS kimliği. Örneğin, CSS kimliği “Bölüm-2” ise, bağlantının URL’si olarak “#Part-2” ekleyeceksiniz. Unutmayın, Divi, Divi’deki her öğeye bir bağlantı eklemenize izin verir, bu nedenle animasyonlu kaydırma düğmesini içeren tüm satırlara bağlantılar eklemekten çekinmeyin. Daha fazla bilgi için, bir çapa bağlantısı ile yapabileceğiniz bazı harika şeylere bakın. Yaratıcı ol! Farklı modülleri birleştirmekten ve farklı şekillerde belirtmekten korkmayın. Aslında, Divi ile bir kaydırma düğmesi tasarlamanın yeni bir yolunu keşfederken, hücresel için kullanılabilecek hoş bir rulo animasyonu yaptım. Kontrol etmek istiyorsanız yukarıdaki ücretsiz indirmeye koydum. Ve bir çapa bağlantısı gibi davranırsanız başlıklardan daha fazla yerde kullanılabilirler. Umarım bu tasarım size bir sonraki projeniz için birkaç yeni parşömen oluşturmanız için ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
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. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Başlık bölümünü oluşturun Animasyonlu kaydırma düğmesini tasarlamaya başlamadan önce yapay başlığımızı ayarlamamız gerekir. Animasyonlu kaydırma düğmesinin tasarımını elde etmek için daha fazla konsantre olacağımız için, başlık tasarımını koyu bir arka planla basit tutacağız. Bittiğinde, her yeni kaydırma düğmesi tasarımını işlemek için bölümü çoğaltabiliriz.
Başlamak için, bir satır sütun içeren düzenli bir bölüm oluşturun.
Daha sonra modülü eklemeden önce, parçanın ayarlarını açın ve koyu arka planı aşağıdaki gibi ekleyin: Renk arka planı: #222222 Koyu Arka Plan herhangi bir işlev görür. Yapay bir başlık metni oluşturmak için başlık metnini ekleyin, One sütun satırına yeni bir metin modülü ekleyin. Ardından içerik içeriğini varsayılan paragraf metninin hemen üzerindeki H1 başlığı ile güncelleyin. & lt; h1 & amp; kaydırma düğmesi animasyonu & lt;/h1 & gt; & amp; p & amp; gt; içeriğiniz buraya gider. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında stilize edebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Yazı Tipi: Karla Metin Leling Metin: Orta Metin Başlık Boyutu: 5VW Renk Metin: Işık
Bu, farklı bir animasyon kaydırma düğmesi için kullanacağımız temel parçanın tasarımı olacaktır. Animasyonlu kaydırma düğmesinin tasarımı #1: Yavaş yansıma animasyonuna sahip dikey metin, temel bölüm tasarımımızla, ilk animasyon kaydırma düğmemizi eklemeye hazırız. Bu kaydırma düğmesi, sağ tarafta bir simge olacak bir açıklama modülünden oluşur. Daha sonra metin ve simgeler dikey olarak döndürülür, böylece ok simgesi alttan geçer. Bundan sonra yavaş süreli animasyonlu bir kabin 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 sütun satırı ekleyin. Ardından, açıklama modülünü satıra ekleyin.
Açıklama ayarları altında, varsayılan içeriği silin ve aşağıdakileri ekleyin: Başlık: SCROLE Simons kullanın: Evet simgesi: sağ ok (ekran görüntüsüne bakın) Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Renk simgesi: #ffffff görüntü/simge yerleşimi: sol yazı tipi boyutu simgesi kullanın: evet yazı tipi boyutu simgesi: 50px yazı tipi başlık stili: tt renk metin başlığı: #fffff metin boyutu başlık: 14px. 3px satır yüksekliği başlığı: 50px (simge yazı tipinin boyutuna eşit) Sonraki, genişlik açıklamamızı vermemiz ve aşağıdaki gibi dikey olarak döndürmemiz gerekir: 132px modül hizalama: z: 90 derece dönüşüm açıklamasının orta dönüşümü, böylece Ok simgesi açıklamanın sağında, bırakılmamış. Bu, ok görüntüsünü dikey metnin altında istendiği gibi yapar. Bunu yapmak için, ana öğelere aşağıdaki özel CSS eklememiz gerekir: yön: rtl; Animasyon eklemek için yavaş kredi animasyonu ekleyin, aşağıdakileri güncelleyin: Animasyon Stili: Boşluk Animasyon Yönü: Animasyon Altında: 5000ms Animasyon Gecikmesi: 400ms Resim/Animasyon simgesi: Soldan sağa Son sonuç şimdi #1 tasarımının nihai sonucuna bakalım. Animasyonlu rulo düğmesinin tasarımı #2: Dikey Marquee Metin Animasyonu Bir sonraki tasarım, Tasarım #1’den oluşturulmuştur ve burada açıklama modülü kullanılarak yapılan dikey metin kaydırma düğmesini kaydedeceğiz. Fark bir animasyon olacak. Bu tasarım için, satır kabı üzerinde gizlenmiş bir kaydırma düğmesi ile başlayan ve daha sonra satırın altında gizli bir düğme ile biten bir animasyonlu slayt ekleyeceğiz. Döngüdeki animasyonla, bu, kullanıcının dikkatini çeken bir metin seçim çerçevesi animasyon efekti oluşturur. İşte nasıl yapılacağı. İlk olarak tüm tasarım parçalarını #1 kopyalayın. Bir sonraki satır 2 ayarlarını güncelleyin, bulanıklık/kaydırma modülünü içeren parçanın satırlarını şu şekilde güncelleyin: Yatay taşma: Gizli Dikey Taşma: Bir çadır animasyonu oluşturmak için bulanık modülün yeni ayarlarını gizleyin, önce çeviriyi kullanmalıyız Açıklama metnini konteyner çizgisinin altına taşımak için (ekrandan gizlenir). Bu, animasyonun sonundaki metin konumu olacaktır. Aşağıdakileri güncelleyin: Dönüşüm Y eksenini çevirin: 115px Ardından, aşağıdaki animasyon ayarlarını ekleyin: Animasyon Stili: Slayt Animasyon Yönü: Animasyon Altında: 4000ms Animasyon Yoğunluk:% 195 Animasyon Başlangıç Opaklığı:% 100 Animasyon Hız Eğrisi: Doğrusal Tekrar Animasyon: Döngü
Nihai sonuç şimdi tasarım #3 için nihai sonucuna bakalım. Animasyonlu Kaydırma düğmesinin tasarımı #3: Sekme Arrow, bir sonraki tasarım için gecikmeli kayan animasyon aşağı ile, benzersiz bir ok sekmesi tasarımı oluşturmak için metin modülünü ve bulanık modülünü birleştireceğiz. Bu tasarım için temel başlığın tasarımı ile başlayacağız. Böylece, yinelenen tasarım bölümünü #3 kopyalayabilir ve ardından 2. satır 2’deki açıklama modülünü silebilirsiniz. Ardından metin modülünü ilk satırın hemen altındaki bir sütunun satırına ekleyin. Ardından, vücut 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 Düzenleme: Orta Genişlik: 50 Piksel Modül Hizalama: Orta Kenar: 0px Alt Dolgu: 20px üst, 20px Alt Yuvarlak Sol, 5px Alt Sağa 5px Blurb Icon’u ekleyin Şimdi metin modülü yüklü, Ok sekmesi tasarımını tamamlamak için açıklama simgesini hemen aşağıda yapmamız gerekiyor. Bunu yapmak için metin modülünün altına yeni bir açıklama modülü ekleyin. Ardından varsayılan başlığı ve içerik metnini silin. Ardından aşağıdaki güncellemeyi ekleyin: simgeyi kullanın: evet simgesi: Alt Ok Üçgeni (ekran görüntüsüne bakın) Ardından ayarları aşağıdaki gibi güncelleyin: Renk simgesi: #ffffff marjı: -36px üst, bu negatif kenarın altındaki 0 piksel, oku iyi bir ok sekmesi tasarımı için metin modülüne takacaktır. Ardından, simgenin altındaki gereksiz kenar boşluklarını ortadan kaldırmak için açıklama resmine aşağıdaki CSS ekleyin. CSS Görüntü Koşu: Marj-Alt: 0px; Satır 2 Ayarları ve Animasyon Bir kaydırma düğmesi tasarımı oluşturan iki modüle aynı animasyonu eklemek istediğimiz için, onu içeren satıra animasyon eklememiz gerekir. Aşağıdaki satırlar için ayarları güncelleyin: Maks: 100 piksel dolgu: 0px üst, 0px daha düşük animasyon stili: Slayt animasyon yönü: Animasyon süresi altında: 1200ms satır 1 arka plan rengi ve bu tasarımdan son dokunmatik kutunun gölgesi eklenir Önce arka plan renkleri, kaydırma düğmesi satırının hemen üstünde. Ve satırın z index’ini güncelleyerek, kaydırma düğmesi animasyonunun başlıktan geçmiş gibi görünmesine izin vereceğiz. Satır 1 için ayarları aşağıdaki gibi açın: Arka Plan Rengi: #222222 Z-index: 10 Gölge Kutusu: Bkz. Dikey ScABle Dikey Konum Kutusu Örnekleri: 80px Bulanık Güç Gölge Kutusu: Kare Dağıtımın 22 Piksel Gücü: -70px Gölge Renk: #222222 (Bunun arka plan rengiyle eşleştiğinden emin olun) Nihai sonuç şimdi sonucu görüyor. Animasyonlu rulo düğmesinin tasarımı #4: Bu son animasyon kaydırma düğmesi için fare kaydırma animasyonu, metin modülünü ve açıklama 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 satır 1’in altına yeni bir satır ekleyin. Bir sonraki bulanıklık modülünü ekleyin, açıklama modülünü satıra ekleyin. Ardından varsayılan başlığı ve içerik metnini silin. Bundan sonra simgeyi aşağıdaki gibi güncelleyin: simgeyi kullanın: evet simgesi: Circle (bkz. Ekran görüntüleri) Ardından Açıklama Tasarım Ayarlarını şu şekilde güncelleyin: Renk simgesi: #ffffff Icon yazı tipi boyutunu kullanın: Evet Yazı tipi simgesinin boyutu: 15px animasyon stili: Slayt Animasyon Yönü: Animasyon Altında: 1200ms Animasyon Tekrar: Döngü Görüntü/Animasyon simgesi: Animasyon olmadan CSS’yi özellikle bulanık görüntüye aşağıdakileri ekleyin: Marj-Alt: 0px; Bir sonraki metin modülünü ekleyin, doğrudan açıklama modülünün altına yeni bir metin modülü ekleyin. Ardından içerik metnini “kaydırma” kelimesiyle güncelleyin. Ardından aşağıdaki metin ayarlarını güncelleyin: Metin Renk Metni: #FFFFFFF Metin Hizalama: Orta Genişlik: 90px Marj: 10px Top, -30px Sol Satır Ayarlarını Güncelle 2 Şimdi satır ayarlarını aşağıdaki gibi güncelleyin: Genişlik: 30px yükseklik: 60px Yuvarlak açı: 16px Sınır Genişliği: 1px Sınır Renk: #FFFFF Sınır Kuvvetleri: Yatay Taşma: Dikey Taşma Görünür: Görünür Nihai sonuç şimdi sonucuna bakalım: Çapa bağlantısı ankrajının işlevini eklemek, sayfanın çeşitli kısımlarına atlayan bir bağlantıdır. Genellikle bir sayfa web sitesinde kullanılırlar. Aynı kavramı, kaydırma düğmemize bir çapa bağlantısı eklemek için kullanabiliriz, böylece sayfanın altına istenen bölüme atlar. Animasyonlu kaydırma düğmenize bir çapa bağlantısı işlevselliği eklemek için yapmanız gereken iki ana şey vardır. Atlamak istediğiniz bölüme veya satıra CSS kimliği eklemeniz gerekir Kaydırma düğmenize aynı CSS kimliğine sahip bir çapa bağlantısı eklemeniz gerekiyor Bu nasıl çalışır. İlk olarak, kaydırma düğmesini içeren başlığın altında yeni bir parça oluşturun. Ardından CSS kimliğinin yeni bölümünü gelişmiş sekmenin altına verin. Ardından, çapa bağlantınıza değiştirmek istediğiniz öğeleri/parşömenleri bulun ve hashtag (veya pound sembolü) ile başlayan bir URL ekleyin ve hemen ardından gideceğiniz öğelerin CSS kimliği. Örneğin, CSS kimliği “Bölüm-2” ise, bağlantının URL’si olarak “#Part-2” ekleyeceksiniz. Unutmayın, Divi, Divi’deki her öğeye bir bağlantı eklemenize izin verir, bu nedenle animasyonlu kaydırma düğmesini içeren tüm satırlara bağlantılar eklemekten çekinmeyin. Daha fazla bilgi için, bir çapa bağlantısı ile yapabileceğiniz bazı harika şeylere bakın. Yaratıcı ol! Farklı modülleri birleştirmekten ve farklı şekillerde belirtmekten korkmayın. Aslında, Divi ile bir kaydırma düğmesi tasarlamanın yeni bir yolunu keşfederken, hücresel için kullanılabilecek hoş bir rulo animasyonu yaptım. Kontrol etmek istiyorsanız yukarıdaki ücretsiz indirmeye koydum. Ve bir çapa bağlantısı gibi davranırsanız başlıklardan daha fazla yerde kullanılabilirler. Umarım bu tasarım size bir sonraki projeniz için birkaç yeni parşömen oluşturmanız için ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
