Divi'nin yeni sürüklenebilir boyutlandırma seçeneklerini kullanmak, yalnızca son derece duyarlı web siteleri oluşturmamıza yardımcı olmakla kalmıyor, aynı zamanda benzersiz etkileşimler oluşturmamıza da yardımcı oluyor. Bu seçenekleri kullanarak istediğinizi özelleştirebilirsiniz. Site Web sayfalarınızın yapısını güncel tasarım trendlerine göre oluşturur ve özelleştirirsiniz.
Bu eğitimde, özellikle, Divi ile fareyle üzerine gelme bölümlerinin nasıl oluşturulacağını göstereceğiz. Yeni bir sayfa oluşturacağız ve tüm bölüm başlıklarının görüntülenmesine izin vereceğiz, ancak her bölüm yalnızca fareyle üzerine gelindiğinde (masaüstü) veya tıklandığında (mobil) açılacaktır. Başka bir bölümü açar açmaz daha önce açmış olduğunuz bölüm otomatik olarak kapatılacaktır. Genel yaklaşımı açıklayarak başlayacağız ve aşağıda sıfırdan görebileceğiniz örneği yeniden oluşturarak devam edeceğiz. Bu eğitimin sizi kendi üzerine gelme bölümü tasarımlarınızı oluşturmaya teşvik etmesini umuyoruz!
Gidelim!
anket
Öğreticiye dalmadan önce, sonuca hızla bir göz atalım.
Tasarım aşaması
Eğiticiye dalmadan önce, rollover bölümleri oluşturmak için kullanılan tekniği gözden geçireceğiz. Bu tekniği herhangi bir türe uygulayabilirsiniz. Site Web herhangi bir stille inşa edersiniz.
1. İlk bölümü sayfanıza ekleyin
Yepyeni bir sayfada yeni bir tasarıma başladığınızı varsayalım. Yapılacak ilk şey, yeni bir normal bölüm eklemektir.
2. Bölüm başlığı içeren yeni bir satır ekle
Daha sonra bölüm başlığınızı içeren bir metin modülü ile yeni bir satır ekleyerek devam edebilirsiniz. Ayrıca bir ayırıcı modül ve fareyle üzerine gelindiğinde veya dokunulduğunda çizginin genişlediğini gösteren bir şey de ekleyebilirsiniz. Bölüm başlığını geri kalanından ayırmak önemlidir. içindekiler bölümün. Bu nedenle bölüm başlığı ile takip eden her şey arasında yeterli boşluk bıraktığınızdan emin olun.
3. Geri kalanını ayarlayın içindekiler bölümün
Bölüm başlıklarını takip eden tasarım öğeleri tamamen size bağlıdır. Bir bölümü istediğiniz kadar uzun ya da kısa yapabilir ve istediğiniz tasarım stilini kullanabilirsiniz.
4. Varsayılan yükseklikleri değiştirin ve bölümün üzerine gelin
Bölümü ve tüm tasarım öğelerini iyileştirdikten sonra, rollover efektini yaratmanın zamanı geldi. Bölümünüzün varsayılan yüksekliği yalnızca bölüm başlığıyla eşleşecek şekilde tasarlanmıştır. Fareyle üzerine gelindiğinde, bölüm ilk boyutuna geri dönecektir.
5. Dikey taşmayı gizle
Bu tekniğin bir diğer önemli kısmı dikey taşmayı gizler. Bölümünüz için ilk bölüm yüksekliğinden daha az varsayılan bir maksimum yükseklik ayarladığınızda, bir taşma oluşturulur. Taşmanın görünmediğinden emin olmak için, bölümün görünürlük ayarlarında gizli olduğundan emin olmanız gerekir.
5. Sayfanın tüm bölümleri için adımları tekrarlayın.
Bariz bir kullanıcı deneyimi oluşturmak için sayfanızın tüm bölümleri için aynı adımları tekrarlayın. ziyaretçi takdir edecek.
Tasarımın başlangıcı!
Yeni bölüm ekle
Varsayılan arka plan rengi
Artık bu yazıdaki yaklaşımı takip ettiğimize göre, işleri eyleme geçirmenin zamanı geldi! Yepyeni bir sayfanıza düzenli bir ilk bölüm ekleyin Site Web WordPress'e gidin ve bölüm ayarlarını açın. Bölümünüzün varsayılan arka plan rengini istediğiniz bir renkle değiştirin.
- Arka plan rengi: # 000000
Arka plan renginin üzerinde uçun
Bu arka plan rengini değiştirerek değiştirin.
- Arka plan rengi: #ffffff
Satır ekle 1
Sütun yapısı
Aşağıdaki sütun yapısını kullanarak bölümünüze ilk satırı eklemeye devam edin:
Metin modülü ekle
H2 içeriği ekle
Bir sonraki yeni satırınıza bir metin modülü ekleyin. Bölüm açıldığında '▼' sembollü bir H2 kopyası ekleyin.
H2 metin ayarları
Modül Tasarımı sekmesine gidin ve H2 metin ayarlarını değiştirin.
- Başlık 2 Yazı Tipi: Trebuchet
- Başlık 2 Yazı tipi ağırlığı: Ultra Kalın
- Başlık 2 Metin Hizalama: Sol
- Başlık 2 Metin rengi: #ff0f3b
- Başlık 2 Metin Boyutu: 100 piksel (masaüstü), 80 piksel (tablet), 60 piksel (telefon)
- Başlık 2 Harf aralığı: -5px
Bölme modülü ekle
görünürlük
Bu satırda ihtiyacımız olan ikinci ve son modül bir bölme modülüdür. Görünürlük ayarlarında "Ayırıcıyı göster" seçeneğini etkinleştirdiğinizden emin olun.
- Bölücüyü Göster: Evet
Renk
Ardından Tasarım sekmesine gidin ve ayırıcının rengini değiştirin.
- Renk: #ff0f3b
boyutlandırma
Ayrıca modülün boyutlandırma parametrelerini de değiştirin.
- Bölücü ağırlık: 2px
- Genişlik:% 14
2 satırını ekle
Sütun yapısı
Sonraki sıra! Tüm bunları yerleştirmeniz gereken yer burasıdır. içindekiler Fareyle üzerine geldikten (masaüstü) veya tıkladıktan (tablet ve mobil) sonra görüntülemek istediğiniz Aşağıdaki sütun yapısını kullanıyoruz ancak istediğiniz kadar satır ve modül ekleyebileceğinizi ve bunları ihtiyaçlarınıza göre özelleştirebileceğinizi unutmayın:
1 sütununa bir metin modülü ekleyin
İçerik ekle
İstediğiniz içeriğe sahip ilk sütuna bir metin modülü yerleştirin.
Metin ayarları
Metin modülünün Tasarım sekmesine gidin ve metnin yönünü değiştirin.
- Metin yönü: Yasla
2 sütununa bir metin modülü ekleyin
İçerik ekle
Ayrıca, ikinci sütuna, seçtiğiniz içeriği içeren bir metin modülü ekleyin.
Metin ayarları
Yine, modülün metin ayarlarında metnin yönünü değiştirin.
- Metin yönü: Yasla
Boyutlandırma parametrelerini bölüme ekle
Varsayılan boyutlandırma
Bölümünüzü tamamladıktan sonra, fareyle üzerine gelme efekti oluşturma zamanı. Bölüm ayarlarını açın ve farklı ekran boyutları için maksimum yüksekliği değiştirin:
- Maksimum yükseklik: 300px (masaüstü), 280px (tablet), 260px (telefon)
gezinip
Ayrıca maksimum yükseklikte fareyle üzerine gelme seçeneğini açın ve ekran boyutundan bağımsız olarak tüm öğeleri kapsayacak kadar yüksek bir değer ekleyin. Bu değer, tüm öğelerinizin bölüm kabının başlangıç boyutunu aşmadan görünmesini sağlar.
- Maksimum yükseklik: 5000px
Dikey taşma
Ardından bölümün Gelişmiş sekmesine gidin ve dikey taşmayı değiştirin. Bu, bölüm kapsayıcısının ötesine geçen tüm içeriği gizleyecektir.
- Dikey taşma: gizli
Geçişler
Sorunsuz bir geçiş oluşturmak için, Gelişmiş sekmesindeki geçiş ayarlarını da değiştiriyoruz.
- Geçişin Süresi: 800ms
- Geçiş süresi: 500 ms
Tüm bölümü istediğiniz kadar klonlayın
İlk köprü bölümünü oluşturduktan sonra, istediğiniz kadar klonlayabilirsiniz.
Bölüm başlıklarını değiştir
Elbette, kopya bölüm başlıklarını değiştirmek isteyeceksiniz.
H2 metninin renklerini değiştirme
Tasarımda varyasyonlar yaratmak için, aşağıdaki baskı ekranında vurgulanan modüllerin metin renklerini de değiştireceğiz.
- Başlık 2 Metin rengi: #c4c4c4
Ayırıcının renklerini değiştirme
Metin modüllerine eşlik eden renklerle.
- Renk: #c4c4c4
anket
Şimdi tüm adımlar tamamlandığında, sonuca bir göz atalım.
Son düşünceler
Bu makalede, oluşturduğunuz herhangi bir web sitesinde fareyle üzerine gelme bölümlerini kullanarak benzersiz etkileşimler oluşturmak için Divi'nin yeni sürüklenebilir boyutlandırma seçeneklerini yaratıcı bir şekilde nasıl kullanacağınızı gösterdik. Yaklaşımı açıklayarak başladık ve tasarım örneğini sıfırdan yeniden oluşturarak devam ettik. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum bıraktığınızdan emin olun.
