Yeni boyutlandırma seçeneklerinden bu yana Divi yayınlandıktan sonra, fareyle üzerine gelme görünümlerini nasıl oluşturacağınızı gösteren birkaç eğitim var. Bu eğitimlerde, içindekiler maskeli dikey olarak yerleştirildi. Ancak bazı durumlarda yatay bir görünüm oluşturmak isteyebilirsiniz. Bu eğitimde, fareyle üzerine gelme ızgaralarını ve taşma seçeneklerini kullanarak görüntüleri nasıl ortaya çıkaracağınızı göstereceğiz. Divi. Bu işi yapmak biraz farklı bir yaklaşım gerektirir. Bir sütundan oluşan bir satır kullanacağız ve tüm modülleri alt alta yerleştireceğiz. Fareyle üzerine gelindiğinde, sütunu yatay bir ızgaraya dönüştüreceğiz. Ayrıca JSON dosyasını ücretsiz olarak indirebilirsiniz!
Gidelim.
anket
Eğiticiye girmeden önce, farklı ekran boyutlarına nasıl baktığımıza hızlıca göz atalım.
Rekreasyona başlayalım!
Yeni bölüm ekle
Üzerinde çalıştığınız sayfaya düzenli bir bölüm ekleyerek başlayın.
Yeni bir satır ekle
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır eklemeye devam edin:
Varsayılan degrade arka plan
Daha fazla modül eklemeden satır parametrelerini açın ve aşağıdaki gradyan arka planını ekleyin:
- 1 renk: #b1ffc4
- 2 renk: #ffffff
- Gradyan türü: Radyal
- Radyal Yön: Merkez
- Başlama Konumu:% 28
- Bitiş Pozisyonu:% 28
Degrade arka plan üzerinde uçan
Gezinerek degrade arka planını değiştirin.
- 1 renk: #b1ffc4
- 2 renk: #ffffff
- Gradyan türü: Radyal
- Radyal yön: sol
- Başlama Konumu:% 5
- Bitiş Pozisyonu:% 5
aralık
Aralık ayarlarına gidin ve ardından dolgu ve kenar boşluğu değerlerini değiştirin.
- Üst Dolgu: 0px
- Alt doldurma: 0px
- Üst kenar boşluğu: 50px
- Alt kenar boşluğu: 50px
Varsayılan kenarlık
Sağ üst ve sağ alt köşelere 50 piksel sınır yarıçapı ekleyin.
Vurgulu Sınır
Köşeleri "0px" üzerine getirin.
Varsayılan gölge
Sonra aşağıdaki parametreleri kullanarak ince bir kutu gölge ekleyin:
- Kutu Gölge Bulanıklığı Gücü: 50px
- Gölge rengi: rgba (0,0,0,0.09)
Vurgulu Kutusu Gölge
Üzerine uçarken gölgeyi kutudan çıkarın, gölgenin rengini tamamen saydam bir renkle değiştirin.
- Gölge rengi: rgba (0,0,0,0)
Bir sütuna bir metin modülü ekleme
H2 içeriği ekle
Bir metin modülünden başlayarak modül eklemeye başlamanın zamanı geldi. Giriş içindekiler H2 sizin seçiminiz.
H2 metin ayarları
Tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:
- Başlık 2 Yazı Tipi: Acme
- Başlık 2 Yazı Tipi Stili: Altı Çizili
- Başlık 2 Alt çizgi rengi: #00ff3f
- Başlık 2 Metin rengi: #000000
- Başlık 2 Metin Boyutu: 3vw
aralık
Ardından özel dolgu değerleri ekleyin.
- En iyi dolgu malzemesi: 6vw
- Alt doldurma: 7vw
- Sol Dolgu: 2vw
Sütuna resim modülü ekle
Fotoğraf yükleniyor
Bu sütunda ihtiyacımız olan ikinci modül bir görüntü modülüdür. Seçtiğiniz bir yatay resim yükleyin.
Işık kutusu
Bağlantı ayarlarında ışık kutusu seçeneğini etkinleştirin.
- Görüntüleyicide aç: evet
boyutlandırma
Ve boyutlandırma ayarlarında görüntünün tam genişliğini zorlayın. Bu, görüntünün tüm ekran boyutlarında hassas kalmasını sağlayacaktır.
- Tam Genişliği Zorla: Evet
Görüntü Modülünü iki kez klonla
İlk görüntü modülünü tamamladıktan sonra, iki kez kopyalayabilirsiniz.
Görüntüleri Değiştir
İki kopyadaki görüntüleri değiştirin. Yüklediğiniz görsellerin ilk görsel ile aynı boyutta olduğundan emin olun.
Rollover efektini satıra ekleyin
boyutlandırma
Artık temel satır ve kapsül ayarlarını tamamladığımıza göre, fareyle üzerine gelme efekti oluşturma zamanı! Satırın yüksekliğini ve genişliğini değiştirerek başlayacağız ve taşmaları gizleyeceğiz. Satır boyutlandırma ayarlarını açın ve aşağıdaki değişiklikleri yapın:
- Özel bir oluk genişliği kullanın: Evet
- Oluk genişliği: 1
- Genişlik:% 20
- Maksimum genişlik:% 100
- Yükseklik: 15.9vw
gezinip
Gezinirken genişliği "% 100" olacak şekilde azaltın. Bu, çizgi üzerine gelindiğinde görüntülerin görüntülenmesine izin verecektir.
- Genişlik:% 100
görünürlük
Bir sonraki gelişmiş sekmeye geçin ve taşmaları gizleyin. Bu, görüntülerin işlemden önce maskelenmesini sağlayacaktır. ziyaretçi metin modülünün üzerine gelin (masaüstü) veya tıklayın (tablet/cep telefonu).
- Yatay taşma: gizli
- Dikey taşma: gizli
Geçişler
Ayrıca geçiş parametrelerindeki geçiş süresini de değiştiriyoruz.
- Geçişin Süresi: 0ms
Ana sütun rollover öğesi
Bir vurgulu ızgara oluşturmak için sütun ayarlarını açacağız, Gelişmiş seçenekler sekmesine gidip aşağıdaki CSS kodu satırlarını ana vurgulu öğeye yerleştireceğiz:
ekran: ızgara; ızgara-şablon sütunları:% 20% 25% 25% 25%; ızgara aralığı: 10px;
Satırı iki kez klonla
İlk satırı tamamladıktan sonra, onu istediğiniz kadar çoğaltabilirsiniz. Bu özel tasarım örneği için satırı iki kez klonladık.
1 hattının degrade arka planını değiştirin
İkinci çizginin degrade arka planındaki ilk degradenin rengini değiştirin.
- 1 renk: # ffdc96
2 hattının degrade arka planını değiştirme
Üçüncü satır için de aynısını yapın.
- 1 renk: # b7c7ff
Metin modülünün kopyasını ve iki kopyadaki altı çizili rengi değiştirin
Metin modülünün kopyalarının altı çizili rengini kopya ile değiştirerek devam edin!
- Altı çizili renk # 1: # ffaa00
- Altı çizili renk # 2: # 0037ff
Son düşünceler
Bu eğitimde, taşma seçeneklerini kullanarak görüntüleri yatay vurgulu ızgaralarda nasıl görüntüleyeceğinizi gösterdik. Divi. Görseller masaüstüne gelindiğinde ve tablet/telefonda tıklandığında ortaya çıktı. Görüntüleri ortaya çıkarmış olsak da, siz de ortaya çıkarabilirsiniz. içindekiler jeneratördeki parametreleri değiştirerek seçiminize göre. Bu eğitimin size kendi alternatif vurgulu ızgara tasarımlarınızı yaratmanız için ilham vereceğini umuyoruz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum bırakmayı unutmayın!
