Divi'deki İçeriği Göstermek için Bölüm Bölücü Yükseklik Vurgulu Efektleri Nasıl Kullanılır

Bölüm Bölücüler, popüler bir Divi tasarım öğesi olmaya devam ediyor. Sayfanıza benzersiz geçişler ve arka planlar eklemeyi kolaylaştıran yararlı seçenekler arasından seçim yapabileceğiniz birçok ayırıcı stili vardır.

Bu derste, bölüm bölücüleri biraz farklı kullanacağız. Divi, her bölücünün yüksekliğini ve düzenini ayarlamanıza olanak tanır. Bu, bölüm içindeki belirli alanların veya içeriğin üzerine bölücüler yerleştirmemizi sağlar. Bölücü yüksekliği için vurgulu seçeneğini kullanarak, kısmen gizli içeriği ortaya çıkaran benzersiz vurgulu efektleri ekleyebiliriz. Bu, ziyaretçilerin tıklamasını istediğiniz belirli bir harekete geçirici mesaja veya düğmeye dikkat çekmek için harika çalışıyor.

Başlayalım.

Gizlice Bakış

Bölüm Bölücü Yükseklik Vurgulu Efektlerini ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.

Hadi öğreticiye geçelim mi?

Youtube Kanalımıza Abone Olun

Başlamak için Gerekenler

Başlamak için aşağıdakilere sahip olmanız gerekir:

1. Divi Teması yüklü ve etkin
2. Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
3. Tasarımda kullanılacak birkaç sahte görüntü. Juice Shop Layout Pack'ten şeffaf arka plana sahip birkaç resim kullanacağım.

Bundan sonra, başlamaya hazırsınız!

Divi'de Bölüm Bölücü Yükseklik Hover Etkisi Tasarımını Uygulama

Bölüm ve Satır Oluşturma

İlk önce iki sütunlu bir normal bölüm oluşturalım.

Modül eklemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #73ba57
Arka Plan Gradyanı Sağ Renk: #2a4c23
Genişlik: %80
Maksimum Genişlik: 1080 piksel
Bölüm Hizalama: Merkez

Bölüm Başlığı Ekleme

Bölümün 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:

<h2>The Juice</h2>

Ardından tasarımı aşağıdaki gibi güncelleyin:

Başlık 2 Yazı Tipi: Lato
Başlık 2 Metin Boyutu: 80px
Başlık 2 Harf Aralığı: -5px
Kenar boşluğu: -50 piksel üst, -40 piksel alt
Z-endeksi: -1

Özel kenar boşluğu ve z dizini, metnin bir sonraki adımda ekleyeceğimiz görüntünün arkasına oturmasını sağlayacaktır.

Resmi Ekleme

1. sütunda başlığı olan metin modülünün altına bir resim modülü ekleyin. Ardından şeffaf bir arka plana sahip bir resim yükleyin. Juice Shop Düzen Paketinden 240 piksele 300 piksel olan bir resim kullanıyorum.

Görüntü hizalamasını merkeze ayarlayın.

Sütun 2'ye Harekete Geçirici Mesaj Ekleme

Sütun 2'de, bir eylem çağrısı modülü ekleyin.

Düğmenin gösterildiğinden emin olmak için bir Düğme Bağlantı URL'si ekleyin.

CTA Arka Planının ve Başlık Metninin Şekillendirilmesi

Ardından aşağıdaki tasarım ayarlarını güncelleyin:

Arka Plan Rengi: #ffffff
Metin Rengi: koyu
Başlık Yazı Tipi: Lato
Başlık Yazı Tipi Ağırlığı: Ağır
Başlık Yazı Tipi Stili: TT
başlık Metin Boyutu: 18px

CTA Düğmesini Şekillendirme

Düğme tasarımını aşağıdaki gibi güncelleyin:

Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #73ba57
Düğme Kenar Genişliği: 0px

CTA Sınırını Şekillendirme

Ardından modülü aşağıdaki gibi çerçevelemek için bir kenarlık ekleyin:

Kenar Genişliği: 10px
Kenar Rengi: rgba(115,186,87,0.15)

Harekete Geçirici Mesajı Ortaya Çıkarmak için Bölücü Yükseklik Vurgulu Efektini Ekleme

Şimdi harekete geçirici mesajı ortaya çıkarmak için bölüm bölücü yüksekliği vurgulu efekti ekleme zamanı. Bunu yapmak için öncelikle bölüm ayırıcılarımızı oluşturmalıyız.

Üst Bölücüyü Ekleme

Aşağıdaki ayarlarla bölüm ayarlarını ve üst ayırıcıyı 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 (vurgulu)
Üst Bölücü Çevirme: yatay

Bölücü Yüksekliğinin varsayılan olarak %70'lik bir yükseklikle başladığına ve ardından üzerine gelindiğinde %0 yüksekliğe değiştiğine dikkat edin.

Alt Bölücü Ekleme

Ardından, aşağıdaki ayarlarla bölüme benzer bir alt Bölü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 (vurgulu)
Üst Bölücü Çevirme: yatay
Bölücü Düzenlemesi: Bölüm İçeriğinin Üstünde

Bu alt bölücü ayrıca, fareyle üzerine gelindiğinde %0'a değişen %70'lik bir yükseklikle başlar. Bununla birlikte, bölücü düzenleme seçeneği içeriğin üstüne ayarlandığından, bölüm bölücü sütun 1'deki harekete geçirici mesajın alt kısmını gizler. Ardından, üzerine gelindiğinde, harekete geçirici mesajın geri kalanı ortaya çıkar.

Şimdiye kadarki sonuca bakın.

Eşsiz Bir Geçiş ve Tasarım için Kutu Gölge Vurgusu Efekti Ekleme

Vurgulu üzerinde benzersiz bir geçiş ve tasarım için, bölücü yüksekliği vurgulu efekti ile aynı anda gerçekleşecek bir kutu gölge vurgusu efekti ekleyebiliriz. Bunu yapmak için bölüme aşağıdaki kutu gölgesini ekleyin.

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: 0px
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Yayılma Gücü: 0px (varsayılan), 150px (vurgulu)
Kutu Gölge Rengi: #73ba57

Geçiş Süresini Yavaşlatmak

Son bir adım olarak geçiş süresini biraz yavaşlatalım.

Geçiş Süresi: 700ms

Son sonuç

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

İçeriğin tablet ve telefon ekranında gizlenmesini istemiyorsanız, bu cihazlar için Bölücü düzenlemesini kolayca “bölüm içeriğinin altında” olarak değiştirebilirsiniz.

İşte tablet ve telefondaki son tasarım.

Saniyeler İçinde Tamamen Eşsiz Tasarımlar için Diğer Bölüm Bölücü Stilleriyle Denemeler Yapma

Bu kurulum yerindeyken, farklı bölücü stilleri ve kombinasyonlarını kolayca deneyebilirsiniz!

İşte ücretsiz indirmeye eklediğim birkaç tane daha.

Son düşünceler

Umarım bu gönderi, içeriği ortaya çıkarmak için bazı benzersiz bölüm ayırıcı yükseklik vurgulu efektlerinin nasıl oluşturulacağı konusunda size biraz ilham vermiştir. Aslında, üzerine gelindiğinde bölücü yüksekliğini ayarlamak başlı başına harika bir tasarım öğesi olabilir. Ve tasarım örnekleri, kendi keşif ve tasarımlarınızı hemen başlatmanıza yardımcı olmalıdır.

Yorumlarda sizden haber bekliyorum.

Şerefe!