Animasyonlu ay düğmesine sahip benzersiz bir tam ekran divi düzeni tasarlayın
Tam ekran başlığınızda özel bir kaydırma düğmesi yapmak, kullanıcı deneyimini geliştirmek için iyi bir tasarım teşvikidir ve kullanıcıların kaydırmak zorunda kalmadan sayfanızın bir sonraki bölümüne kaydırmalarını sağlar. Düğmelerinize bazı ilginç animasyonlar eklemek de dönüşümünüzü artırabilir. Divi’nin zaten bu özelliği tam genişlik başlığına eklemenizi kolaylaştırmak için varsayılan bir kaydırma düğmesi var. Ama bugün bazı modern tasarım özellikleriyle aynı işlevi elde etmek için düğme modülünü nasıl kullanacağımı göstereceğim. Bu öğreticide, sayfayı yüklerken ekranın altında görünen özel bir kaydırma düğmesine nasıl değiştireceğinizi göstereceğim. Ayrıca ilham için bazı tasarım ipuçları sağlayacağım.
Başlayalım. Aşağıdaki gizlice göz atma, birlikte inşa edeceğimiz tasarıma bir bakış.
Bunu tam genişlik başlığımız için yapacak. Şimdi eğlenceli şeyler için! Bu kaydırma düğmesi için özel bir kaydırma düğmesi bölümü yapın, sayfanın sol tarafında eşit olarak oturmasını istiyorum. Bu yüzden kendi tarafınıza üç sıra sütun ekleyin. Ardından düğme modülünü sol sütuna ekleyin.
Modül Ayarlarını Güncelle düğmesi aşağıdaki gibi: Metin Düğmesi: Daha Fazlası Öğrenin URL KUTTORS: #tua URL #TWO, bir sonraki bölümün üst kısmına CSS “Two” ID’yi içerecek bir bağlantı bağlantısı olarak işlev görür. Bu, özel bir kaydırma düğmesi yapmak için temel bir işlevdir. Bir düğme için özel bir stil kullanın: evet metin boyutu düğmesi: 24px (masaüstü), 20px (tablet) Metin Renk Düğmesi: #0A2F5E Solda Gradyan Arka Plan Düğmesi: #ffffff Sağ Degrade Arka Plan Düğmesi: #DDDDDDDDDDDDDDDDDDD :% 70 Nihai Konum:% 0 Genişlik Düğmesi Sınırı: 0px Radius Sınır Sınır Anahtar Düğmesi: 0px Yazı Tipi Düğmesi: Karla Ağırlık Düğmesi: Kalın Simge Düğmesi: [Alt ok] Yalnızca düğmeye işaret ettiğinde simgeler görüntüleyin: Özel Dolgu: Top 1.5 EM, 1.5EM’in altında,% 30 soldan Animasyon: Slayt Animasyon Yönü: Gelişmiş sekmesinin altındaki üst, aşağıdaki özel CSS’yi giriş kutusuna ekleyin Ana öğeye: Ekran: Block! Önemli; Bu, düğmenin sütunun tam genişliğine ulaşmasını sağlar. Ardından aşağıdaki Giriş kutusuna aşağıdaki CSS ekleyin: Konum: Mutlak; Doğru:%12;
Bu, ok simgesini düğmenin sağına yerleştirir.
Ayarlarınızı kaydedin. Mevcut bölümün ayarlarını ayarlayın Düğmeyi yukarıdaki parçanın tam bir kısmına taşımak için parçanın ayarlarını ayarlamamız ve doğru mesafeyi elde edin.
Aşağıdaki bölümleri güncelleyin Ayarlar: Arka Plan Rengi: RGBA (255,255,255,0) Özel Kenar Adı: -112px Üstü Özel Dolgu: 0px Top 0px Aşağıda Sıra boşluklarını ayarlayın Şimdi sıra alanlarını da ayarlamamız gerekiyor. Aşağıdaki satır ayarlarını güncelleyin. Bu çizgiyi tam genişlik yapın: Evet Özel oluklar genişliği kullanın: Evet Oluk genişliği: 1 özel dolgu: 0px üst, 0px aşağıda
Şimdi sayfayı doğrudan kontrol edin. Sayfa yüklendiğinde tam ekran başlığınızın sol alt kısmındaki açılır düğmesini göreceksiniz. #3: menü kutusunu ve önde içeriği şimdi düğmemiz kaydırmaya hazır olduktan sonra, benzersiz bir kaydırma yapmak için başka parçalar ekleyelim. Üçte üçte bir sütun sütun yapısı ile normal bir bölüm oluşturun. Bu sütunun yapısı anahtardır, çünkü düğmemizle sağdaki ile aynı boyutta bir sol sütun oluşturmamıza izin verecektir. Ayarlar Modüller eklemeye başlamadan önce, önce aşağıdaki bölüm için ayarlarımızı güncelleyin: Arka Plan Rengi: #EEEDF2 Dolgu Özel: 0PX üst, Gelişmiş sekmede 0PX Alt, Özel CSS Kimliği “İki” ekleyin. Bu, bu bölümün en üstüne kaydırmanıza izin verecektir. Satır Ayarları hızlandırmak için, satır stilini yukarıdaki satırdan yukarıdaki düğmelerden kopyalayın. Ardından yeni hattınız için satır stilini yapıştırın.
İçerik sekmesinde, sütun 1’in arka plan rengini #ffffff’e güncelleyin. Bu, düğmenizin altındaki menü kutunuzun arka planı olarak işlev görecektir. Ardından, sütunun için aşağıdaki dolguyu güncelleyin: Özel Dolgu:% 10 Zahmetli Sütunu Zahmetli Sütun Özel:% 10 Üst,% 10 Sol,% 6 Sağ Şimdi kenar çubuğu modülümüzü sol sütunumuza eklemeye hazırız. Ancak bunu yapmadan önce özel bir menü yapmanız gerekir. Özel menünüzü oluşturun Zaman için, bir menünün nasıl oluşturulacağına dair kısa bir açıklama yapacağım. İşte burada:
Görünüşe gidin> Menü
Yeni bir menü oluştur’u tıklayın Menü başlığını ekleMenü düğmesini tıklayın
Sayfaları, yayınları vb. Seçin. menünüze dahil etmek istediğiniz. Veya özel bir bağlantı yapın.
Menü yapısını ayarlayın
Özel bir menü widget yapmak için kaydedin, bir navigasyon menüsü widget’ı oluşturmak için bu adımları izleyin, böylece görsel bir yapımcı aracılığıyla sayfamıza ekleyebiliriz.
Görünüşe gidin> Widget
Widget’ın adını girip oluşturma düğmesini tıklayarak yeni bir widget alanı oluşturun
Navigasyon menüsü widget’ı oluşturduğunuz yeni widget alanına sürükleyin. Widget ayarlarını açın ve yeni oluşturduğunuz menüyü seçin.
Kaydet’i tıklayın
Şimdi sayfalarımıza geri dönebilir ve görsel üreticiler uygulayabiliriz. Kenar çubuğu modülünü sol alt sütunumuza yeni bir menü ile ekleyin, yan çubuk modülünü ekleyin.
Yeni yaptığınız widget alanını içerecek şekilde yan çubuğu güncelleyin:
Kenar Çubuğu Modül Tasarımı Artık aşağıdaki tasarım ayarlarını güncelleyerek menü bağlantısı tasarımınızı düzenle eşleştirebilirsiniz: Sınır Separcı Göster: Karla Yazı Tipi Yok: Karla Yazı Tipi Kalınlığı: #0A2F5E İçindekiler Metin Boyutu: 24px (masaüstü), 20px (20px ( Tablet) Gövde Hattı Yüksekliği: 2.3EM Dolgu Özel: Üst 20 piksel,% 10 alt,% 30 sol dolgu sol% 30,% 30’luk sol dolgulara sahip yukarıdaki düğme metnine paralel olmak için yararlıdır. Gölge Kutusu: [Ekran görüntüsüne bakın] Yatay konum Gölge Kutusu: 0px Dikey Konum Gölge Kutusu: 0PX Bulanık Güç Gölge Kutusu: 0px Kare Dağıtım Kutusu: 1px Renk Renk Gölgesi: #F1F1F1 Bu kutularımızın dışına sınırlar eklemenin yaratıcı bir yoludur. Kaydırma düğmesi ile menü kutusu arasında biraz ayırma ekleyin.
İçerik ekleyin Sağ sütuna iki sağ sütunda, bu düzeni kendi web siteniz için nasıl kullandığınızın bir resmini vermek için bazı içerikler ekleyeceğiz. İlk olarak, bölücü modülünü aşağıdaki ayarlarla ekleyin: Renk: #0A2F5E Çember Konum: Dikey Merkezler Ağırlık: 2px yükseklik: 18px genişlik: Bölücü modülünün altındaki 100 piksel, aşağıdaki içeriğe sahip metin modülleri ekleyin:
01. Hakkında
Daha sonra tasarım ayarlarını aşağıdaki gibi güncelleyin: Başlık 2 Yazı Tipi: Poppins 2 Renkli Metin Başlığı: #0A2F5E Başlık 2 Metin Boyutu: 18px Özel Kenar: -17px Üstü Özel Dolgu: Sol 120px Kiat: böylece bölücü açık Gölgenin dikey olarak sol ve solunda ve ortasında, bölücünün (18px) yüksekliği başlık metninizin (18px) PX değeri ile eşleşir. Ardından, negatif bir piksel değeri (-17px) kullanarak başlığı aynı sayıda piksele (bölme çizgisinin genişliğini hesaplamak için azaltılmış) taşımak için özel bir marj kullanın. Bundan sonra, bölme çizgisinden (120px) 100 piksel uzunluğunu hesaplamak için başlığınıza yeterli sol dolgu verin.
Ardından aşağıdaki ayarlarla altına başka bir metin modülü ekleyin: İçerik:Vivamus Suscipit Tortor Eget Felis Porttitor Volutpat.
İçeriğiniz buraya gidiyor. 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 şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz. Metin Yazı Tipi: Karla Metin Boyutu: 16px Metin Satırının Yüksekliği: 1.6EM Başlık 3 Yazı Tipi: Poppins Başlık 3 Yazı Tipi Ağırlık: Yarı Kalın Başlık 3 Renk Metin: #0A2F5E Başlık 3 Metin Boyutu: 3VW (Tablet), 40px (Tablet) 3 Sıra Yüksekliği: 1.2EM Özel Dolgu:% 5 üst,% 2 daha düşük ayarları kaydedin. Son bölümü yapmak için son bölümü oluşturun, aşağıdaki adımları izleyin: Son bölümü iki katına çıkarın.Bölümün arka plan rengini #ffffff’e güncelleyin Satır sütununu üçüncü iki yapıya dönüştürün. Satır ayarlarının altında, özel dolguyu%10 olarak değiştirin.
Sütun 1 Özel Dolgu ekleyin:% 10 sol,% 6 sağ
Dolgu özel sütunu 2’yi varsayılan olarak döndürün.
Ayarları kaydedin.
Sol sütundaki yan bıçak modülünü silin.
Sağ sütundaki tüm modülleri sol sütuna taşıyın ve içeriği güncelleyin.
Ardından görüntüyü sağ sütuna ekleyin.
İşte nihai sonuçlar …
Düğmenizin konumunu değiştirmek için kaydırma düğmenizin konumunu değiştirin, satırdaki üç sütundan birine sürükleyin. Bu kadar basit!
Bu menü kutusu ile özel bir kaydırma düğmesi ile yaygın olarak dağılmış uygulamaları düşünün. Yeni başlayanlar için, kaydırma düğmesinin altındaki kutudaki menüyü herhangi bir şeyle tamamlayabilirsiniz! Bu, iletişim, optin e -posta formları veya diğer oyunculuk davetiyeleri için iyi bir yer olacaktır. İşte bir Optin e -posta ekranı örneği …
Hücreselde harika görünüyor, ayrıca bu düzen hücreselde oldukça iyi. Kaydırma düğmesi yalnızca tüm geniş ekranı tablet ve akıllı telefona dağıtacaktır.
