Nasıl açığa çıkarılacağını bilmek ister misin? içindekiler bölüm ayırıcının üzerine geldiğinizde Divi ?
Bölüm bölücüler bir tasarım öğesi olmaya devam ediyor Divi popüler. Sayfanıza benzersiz geçişler ve arka planlar eklemeyi kolaylaştıran kullanışlı seçeneklerle seçebileceğiniz birçok ayırıcı stili vardır.
Bu eğitimde, bölüm ayırıcıları 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ı belirli alanların veya içindekiler bölümün.
Ayırıcı yüksekliği için vurgulu seçeneğini kullanarak, bir görünümü ortaya çıkaran benzersiz vurgulu efektler ekleyebiliriz. içindekiler kısmen gizlenmiştir. Bu, insanların tıklamasını istediğiniz belirli bir harekete geçirici mesaja veya düğmeye dikkat çekmek için harika çalışıyor. ziyaretçi Tıklayın.
anket
DIVI'yı Şimdi İndirin !!!
Divi Builder ile yeni bir sayfa oluşturun
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Bölüm Bölücü Hover Efektini Tasarlama
Kesit ve çizgi oluşturma
İki sütunlu bir satır içeren normal bir bölüm oluşturun.
Modül eklemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
Arka Plan Gradyanı (Sol): #73ba57
Arka Plan Gradyanı (Sağ): #2a4c23
Genişlik: %80
Maksimum Genişlik: 1 piksel
Bölüm Hizalama: Merkez
Bölüm başlığı ekle
Bölüm başlığını eklemek için bir Metin modülü oluşturun ve aşağıdaki metni ekleyin:
<h2>The Juice</h2>
Ardından, tasarımı aşağıdaki gibi güncelleyin:
Yazı Tipi: Lato
Metin Boyutu: 80px
Harf Aralığı: -5px
Kenar Boşluğu: -50px (Üst), -40px (Alt)
Z İndeksi: -1
Özel kenar boşluğu ve z-endeksi, metnin bir sonraki adımda ekleyeceğimiz görüntünün arkasında kalmasını sağlar.
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. Düzen paketinden bir resim kullanıyoruz Meyve suyu dükkanı 240 piksele 300 piksel.
Ortadaki görüntünün hizalamasının ayarlanması.
2. sütuna "Harekete Geçirici Mesaj" modülü ekleyin
2. sütunda, bir Eylem Çağrısı modülü 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 metni stili
Ardından, aşağıdaki tasarım ayarlarını güncelleyin:
Arkaplan: #ffffff
Metin Rengi: koyu
Başlık Yazı Tipi : Lato
Başlık Yazı Tipi Ağırlığı : Ağır
Yazı Tipi Stili: TT
Başlık Metin Boyutu: 18px
CTA düğmesini özelleştirin
Düğme tasarımını aşağıdaki gibi güncelleyin:
- Düğme İçin Özel Stilleri Kullan: EVET
- Düğme Metin Rengi: #ffffff
- Düğme Arka Plan Rengi: #73ba57
- Kenar Genişliği: 0px
CTA Modülü kenarlığını özelleştir
Ardından modülü aşağıdaki gibi çerçevelemek için bir kenarlık ekleyin:
Kenar Genişliği: 10px
Kenar Rengi: rgba(115,186,87,0.15)
"Harekete Geçirici Mesaj" modülünü ortaya çıkarmak için ayırıcıya vurgulu efekti eklendi
Şimdi "Harekete Geçirici Mesaj" modülünü ortaya çıkarmak için bölüm ayırıcıya vurgulu efekti ekleme zamanı. Bunu yapmak için önce bölüm ayırıcılarımızı oluşturmamız gerekiyor.
Ayrıca Oku: Divi: Sekmelerin üzerine gelindiğinde içerik nasıl ortaya çıkar?
Ü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
Bölücü Yüksekliği: %70 (varsayılan), %0 (vurgulu)
Üst Bölücü Çevirme: yatay
Ayırıcının yüksekliğinin varsayılan olarak %70'lik bir yükseklikle başladığını ve ardından üzerine gelindiğinde %0 yüksekliğe dönüştüğünü unutmayın.
Alt bölücü eklendi
Ardından, aşağıdaki parametrelere sahip bölüme benzer bir alt ayırıcı ekleyin.
- Alt Bölücü Stili: ekran görüntüsüne bakın
- Alt Bölücü Rengi: #73ba57
- Bölücü Yüksekliği: %70 (varsayılan), %0 (vurgulu)
- Bölücü Çevirme: Yatay
- Düzenleme: Bölüm İçeriğinin Üstünde
Bu alt bölücü ayrıca, %70'lik bir yükseklikle başlar ve bu, üzerine gelindiğinde %0'a düşer. Ancak, ayırıcı düzenleme seçeneği içeriğin üzerinde ayarlandığından, bölüm ayırıcı sütun 1'deki "Harekete Geçirici Mesaj" modülünün alt kısmını gizler. Ardından, üzerine gelindiğinde modülün geri kalanı ortaya çıkar.
Şimdiye kadar sonucu kontrol edin.
DIVI'yı Şimdi İndirin !!!
Eşsiz geçiş ve tasarım için kutu gölgesi vurgulu efekti eklendi
Vurgulu üzerinde benzersiz bir geçiş ve tasarım için, ayırıcı vurgulu efekti ile aynı anda gerçekleşecek bir kutu gölge vurgusu efekti ekleyebiliriz. Bunu yapmak için bölüme aşağıdaki kutu gölgesini ekleyin.
- Kutu Gölgesi: ekran görüntüsüne bakın
- Yatay Konum: 0px
- Dikey Konum: 0px
- Kutu Gölge Yayılma Gücü: 0px (varsayılan), 150px (vurgulu)
- 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ş Süresi: 700ms
Nihai sonuç
Tüm aşamaları tamamladığımıza göre şimdi sonuca bakalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu makalenin, içeriği ortaya çıkarmak için benzersiz bölüm ayırıcı vurgulu efektleri oluşturma konusunda size biraz ilham verdiğini umuyoruz.
Aslında, vurgulu ayırıcıyı ayarlamak kendi başına harika bir tasarım özelliği olabilir. Ek olarak, örnek tasarımlar kendi keşif ve tasarımlarınızı başlatmanıza yardımcı olmalıdır.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
