Elegant Theme her hafta yeni düzen paketleri sunar Divi Bir sonraki projeniz için kullanabileceğiniz ücretsiz. Sunum paketlerinden biri için, aynı zamanda, işinizi almanıza yardımcı olacak bir kullanım senaryosunu da paylaşıyorlar. Site Web en üst düzeyde. Tasarım girişiminin bir parçası olarak bu hafta Divi Sınıfta size fareyle üzerine gelme seçeneklerini yaratıcı bir şekilde nasıl kullanacağınızı göstereceğiz. Divi Sayfalarınızdaki CTA'ları vurgulamak için. Divi'nin Çamaşırhane Hizmetleri Paketini kullanıyoruz ve harekete geçirici mesajınızı vurgulayan üç farklı örneği ele alacağız.
anket
Öğreticiye dalmadan önce, bir fikir edinmek için ne yaratacağımızı hızla inceleyelim.
Çamaşırhane veya Çamaşırhane hizmeti düzenini kullanarak yeni bir sayfa ekleyin
Sayfanıza yeni bir sayfa ekleyerek başlayın. Site Web ve çamaşırhane hizmeti ana sayfasını indirin. Oluşturacağımız üç örnek bu düzene dayalı olacaktır. Yaklaşıma sahip olduğunuzda, bu örnekleri üzerinde çalıştığınız düzene uygulayabilirsiniz.
Metin modülünü klonla
İlk örnekle başlayalım! Mevcut bir metin modunu bir hover teşvikine dönüştürüyoruz. Bu yaklaşım yalnızca masaüstünde görünecektir. Bu nedenle, ilk modülü, daha küçük ekranlarda gezinme efektleri olmadan görünmesini sağlamak için klonladık.
görünürlük
Metin modülü # 1
Tablet ve telefondaki ilk modülü gizleyerek devam edin.
Metin modülü # 2
Ve ikinci modülü masaüstüne gizleyin.
Masaüstü metin modülüne rollover efekti ekleme
Bir içerik başlığı ekle 3
Yalnızca masaüstünde görünecek olan ilk metin modülünü düzenliyoruz. Modülü açın ve ekleyin içindekiler 3. başlıktan bölgeye içindekiler.
Metin ayarlarının üzerine gelin
Ardından metin ayarlarına gidin ve modüllerinizin paragraf metnini fareyle üzerine gelindiğinde metin boyutuna 0px ekleyerek "gizleyin".
- Metin boyutu: 0px
2 metin ayarlarının üzerine gelin
Fareyle üzerine gelindiğinde Başlık 2 için metin ayarları için de aynısını yapın.
- Başlık 2 Metin Boyutu: 0px
3 varsayılan metin başlığı
Ardından, 3 konusunun metin parametrelerine erişin ve değişiklikleri yapın.
- Başlık 3 Yazı Tipi: Josefin Sans
- Başlık 3 Yazı Tipleri: Yarı Kalın
- Başlık 3 Metin Boyutu: 0px
3 Metin Ayarları başlığının üzerine gelin
Gezinerek metnin boyutunu değiştirin.
- Başlık 3 Metin Boyutu: 40px
Varsayılan aralık ayarları
Ardından aralık ayarlarına gidin ve aşağıdaki özel dolgu değerlerinin uygulandığından emin olun:
- En iyi dolgu malzemesi: 80px
- Alt doldurma: 50px
- Sol doldurma: 40px
- Döşeme Sağ: 40px
Rollover aralığı ayarları
Ayrıca özel bir rollover marjı ekleyin.
- Üst kenar boşluğu: 50px
- Sol kenar boşluğu: -53.5vw
Varsayılan kenarlık ayarları
Ayrıca kenarlıksız bir alt kenarlık ekleriz.
- Alt kenarlığın genişliği: 0px
- Alt kenarlık rengi: # ff947f
- Alt kenarlık stili: noktalı
Köprü sınırı ayarları
Vurgulu kenarlığın genişliğini değiştirin.
- Alt kenarlığın genişliği: 5px
Varsayılan kutu gölge ayarları
Sonra bir kutu gölge ekleyin.
- Kutu Gölge Dikey Konum: 50px
- Kutu Gölge Bulanıklığı Gücü: 54px
- Kutu gölge yayılma kuvveti: -32px
- Gölge rengi: rgba (255,255,255,0)
Rollover kutusu gölge ayarları
Ve gezinen kutunun gölge rengini değiştirin.
- Gölge rengi: rgba (0,0,0,0,2)
geçişler
Düzgün bir geçiş oluşturmak için geçiş ayarlarında geçiş süresini artırın.
- Geçişin Süresi: 750ms
Yönetici Özeti
Son olarak, bu eğitimde, Divi sayfamızda bir bölümü vurgulayan bir animasyon oluşturmamızla ilgiliydi. Divi ile olasılıklar neredeyse sonsuzdur, farklı seçenekleri kullanarak (birkaç farklı seçeneğin kombinasyonları) dinamik ve çekici animasyonlarla arayüzler oluşturabileceksiniz. Bitmedi, bu eğitimin ikinci bölümünü daha sonra ele alacağız. O zamana kadar, herhangi bir sorunuz varsa, bunları yorumlar bölümünde sormaktan çekinmeyin.
