Ana İçeriğe Geç

Divi'deki içeriği ortaya çıkarmak için rollover efektleri nasıl kullanılır?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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 eğitimde, bölüm ayırıcıları biraz farklı şekilde kullanacağız. Divi, her bir bölücünün yüksekliğini ve düzenini ayarlamanıza izin verir. Bu, ayırıcıları belirli alanların veya bölümün belirli içeriklerinin üzerine konumlandırmamızı sağlar. Bölücü yüksekliği için fareyle üzerine gelme seçeneğini kullanarak, kısmen gizli içeriği ortaya çıkaran benzersiz vurgulu efektler ekleyebiliriz. Ziyaretçilerin tıklamasını istediğiniz bir harekete geçirme ifadesine veya belirli bir düğmeye dikkat çekmek için harikadır.

Başlayalım.

Örnek sonuç

Divi içerik animasyonunu ortaya çıkardıBaşlamak için neye ihtiyacınız var?

Başlamak için aşağıdakilere ihtiyacınız var:

  1. Divi teması yüklü ve etkin
  2. Ön uçta sıfırdan oluşturmak için oluşturulmuş yeni bir sayfa (görsel kurucu)
  3. 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 divi düzeni seçinBir 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.

Bozulmuş bir divi arka planı ekleyin

Bölüm başlığı ekle

Bölüm başlığını eklemek için bir metin modülü oluşturun ve gövde içeriğini aşağıdaki h2 başlığıyla güncelleyin:

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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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.

Divi meyve suyuGörüntünün hizalamasını merkeze ayarlayın.

Divi merkez hizalaması

2. sütuna harekete geçirici mesaj ekleme

2 sütununda, eylem modülüne bir çağrı ekleyin.

2. sütuna ilişkin eylem çağrısı

Düğmenin görüntülendiğinden emin olmak için bir düğme bağlantı URL'si ekleyin.

Divi eylem çağrısı bağlantısı 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

Divi harekete geçirici mesajı özelleştirin

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

İamge divi arka planını özelleştirme

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)

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Özel sınır divi

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ü Eğilimi: İçerik Bölümünün Başında

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.

Divi sınırlarını özelleştirin

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

Divi sınır animasyonu

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

Divi geçişlerini yapılandırınNihai sonuç

İşte masaüstündeki son sonuç.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Divi nihai sonucu

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!

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
6 hisseleri
hisse6
cıvıltı
Enregistrer