Bölüm bölücüler, Divi'de popüler bir tasarım öğesi olmaya devam ediyor. Sayfanıza benzersiz geçişler ve arka planlar eklemeyi kolaylaştıran bazı yararlı seçenekler de dahil olmak üzere birçok ayırıcı stili vardır.
Bu derste bölüm bölücüleri biraz farklı kullanacağız. Divi, her bölücünün yüksekliğini ve düzenini ayarlamanıza olanak tanır. Bu, ayırıcıları bölümdeki belirli alanların veya içeriğin üzerine yerleştirmemize olanak tanır. Ayırıcı yüksekliği için fareyle üzerine gelme seçeneğini kullanarak, bir görünümü ortaya çıkaran benzersiz fareyle üzerine gelme efektleri ekleyebiliriz. içindekiler kısmen gizlenmiştir. Bu, bir harekete geçirici mesaja veya insanların tıklamasını istediğiniz belirli bir düğmeye dikkat çekmek için harika çalışıyor. ziyaretçi Tıklayın.
Başlayalım.
Örnek sonuç
Başlamak için neye ihtiyacınız var?
Başlamak için aşağıdakilere ihtiyacınız var:
- Le Divi teması yüklü ve aktif
- Ön uçta sıfırdan oluşturmak için oluşturulmuş yeni bir sayfa (görsel kurucu)
- Tasarımda kullanılacak bazı sahte görüntüler. Şuradan şeffaf arka plana sahip bazı resimler kullanacağım. Suyu Dükkanı Düzeni Paketi .
Ondan sonra, başlamak için hazırsınız!
Divi'de bölüm bölücü yükseklik vurgulu efekt tasarımının uygulanması
Kesit ve çizgi oluşturma
İki sütunlu bir satırdan oluşan düzenli bir bölüm oluşturarak başlayalım.
Bir modül eklemeden önce, bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Sol arka plan gradyanı: #73ba57
Sağ arka plan gradyanı: #2a4c23
Genişlik:% 80
Maksimum genişlik: 1080px
Bölüm Hizalama: Merkez
Ancak resminize göre beğendiğiniz renk şemasını da seçebilirsiniz. renk düzenim: # fff200 - # e09900 gradyan.
Bölüm başlığı ekle
Bölüm başlığını eklemek için bir metin modülü oluşturun ve içindekiler aşağıdaki h2 başlığına sahip gövdenin:
Meyve suyu
Ardından çizimi şu şekilde güncelleyin:
Başlık 2 Yazı Tipi: Lato
Başlık 2 Metin Boyutu: 80px
Başlık 2 Harf aralığı: -5px
Marj: Üstte -50px, altta -40px
Z Dizini: -1
Özel kenar boşluğu ve z dizini, metnin bir sonraki adımda ekleyeceğimiz görüntünün arkasına oturmasına izin verecektir.
Resim eklemek
1. sütunda başlığı olan metin modülünün altına bir görüntü modülü ekleyin. Ardından şeffaf bir arka plana sahip bir resim yükleyin. Meyve Suyu Mağazası Düzen Paketinden 240 x 300 piksel boyutunda bir resim kullanıyorum.
Görüntünün hizalamasını merkeze ayarlayın.
2. sütuna harekete geçirici mesaj ekleme
2 sütununda, eylem modülüne bir çağrı ekleyin.
Düğmenin görüntülendiğinden emin olmak için bir düğme bağlantı URL'si ekleyin.
CTA arka planı ve başlık stili
Ardından, aşağıdaki tasarım parametrelerini güncelleyin:
Arka plan rengi: #ffffff
Metin rengi:
başlık Yazı tipi: Lato
Başlık Ağırlık Politikası: Ağır
Başlık Yazı Tipi Stili: TT
başlık Metin Boyutu: 18px
CTA düğmesini stilize et
Düğme tasarımını aşağıdaki gibi güncelleyin:
Düğme metni rengi: #ffffff
Düğme Arka Plan Rengi: # e09900
Düğme Sınır Genişliği: 0 px
CTA sınırını şekillendirme
Ardından, modülü aşağıdaki gibi çerçevelemek için bir sınır ekleyin:
Kenarlığın genişliği: 10px
Kenarlığın rengi: rgba (224,145,0,0.25)
Harekete geçirici mesajı ortaya çıkarmak için bölücü yüksekliği üzerine gelme efekti eklendi
Şimdi, harekete geçirici mesajı ortaya çıkarmak için bölüm bölme yüksekliği üzerine gelme efektini eklemenin zamanı geldi. Bunu yapmak için önce bölüm bölücülerimizi oluşturmamız gerekiyor.
Üst ayırıcı ekleme
Bölüm parametrelerini ve üst ayırıcıyı aşağıdaki parametrelerle açın.
Üst bölücü stili: ekran görüntüsüne bakın Üst bölücü rengi: # 73ba57 Üst bölücü yüksekliği:% 70 (varsayılan),% 0 (üzerine getirilmiş)
Üst bölücüyü çevir: yatay
Ayırıcının yüksekliğinin varsayılan olarak% 70% yüksekliğiyle başladığına ve ardından rollover'da% 0% yüksekliğine geçtiğine dikkat edin.
Alt bölücünün eklenmesi
Ardından, aşağıdaki parametrelere sahip bölüme benzer bir alt ayırıcı ekleyin.
Üst bölücü stili: ekran görüntüsüne bakın Üst bölücü rengi: # 73ba57 Üst bölücü yüksekliği:% 70 (varsayılan),% 0 (üzerine getirilmiş)
Üst bölücüyü çevir: yatay
Bölücü Düzeni: Bölümün üst kısmında içindekiler
Bu arka plan ayırıcısı, fareyle üzerine gelindiğinde% 70'a değişen% 0'lik bir yükseklik ile başlar. Bununla birlikte, ayırıcı düzen seçeneği içeriğin en üstünde ayarlandığından, bölüm ayırıcı, 1. sütundaki harekete geçirici mesajın alt kısmını gizler. Ardından, fareyle üzerine gelindiğinde, l'nin geri kalanını harekete geçirici mesaj ortaya çıkar.
Şimdiye kadar sonucu kontrol edin.
Eşsiz bir geçiş ve tasarım için kutu gölgesi üzerine gelme efekti eklendi
Benzersiz bir gezinme geçişi ve tasarımı için, bölücü yükseklik vurgulu efektle eşzamanlı olarak gerçekleşecek bir kutu gölgesi vurgulu efekti ekleyebiliriz. Bunu yapmak için aşağıdaki kutunun gölgesini bölüme ekleyin.
Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Yatay Konum: 0px
Kutu Gölge Dikey Konum: 0px
Kutu Gölge Yayılma Kuvveti: 0px (varsayılan), 150px (hover)
Kutu Gölge Rengi: #73ba57
Geçiş süresini yavaşlat
Son bir adım için, geçiş süresini yavaşlatalım.
Geçişin Süresi: 700ms
Nihai sonuç
İşte masaüstündeki son sonuç.
Yukarıda yaptığımıza bağlı olarak, ekranı mobil cihazda ve tablette özelleştirebileceksiniz.
Son düşünceler
Umarım bu eğitim, içeriği ortaya çıkarmak için benzersiz bölüm bölücü yükseklik vurgulu efektler oluşturmak için size biraz ilham vermiştir. Aslında, gezinen bölücünün yüksekliğini ayarlamak dikkat çekici bir tasarım öğesi olabilir. Ve tasarım örnekleri, kendi keşiflerinize ve kendi tasarımlarınıza başlamanıza yardımcı olmalıdır.
Yorumlarda sizden haber almayı umuyoruz.
Sağlığınıza!
