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.
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ç
Başlamak için aşağıdakilere ihtiyacınız var:
- Divi teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulmuş yeni bir sayfa (görsel kurucu)
- 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.
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.
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 oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.
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.
2. sütuna harekete geçirici mesaj ekleme
2 sütununda, eylem modülüne bir çağrı 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 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
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
CTA sınırını şekillendirme
Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?
Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.
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)
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.
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
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
İşte masaüstündeki son sonuç.
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!