Divi'de Deklanşör Hover Efekti ile İçerik Nasıl Ortaya Çıkarılır

Fareyle üzerine gelindiğinde modül içeriğinin ortaya çıkarılmasının bazı yararlı faydaları olabilir. 1) Başlangıçta web sayfanızın daha kompakt veya zarif bir tasarımına sahip olmanın harika bir yolu olabilir. 2) Yerden tasarruf sağlar. 3) Kullanıcıları sayfanızla etkileşime geçmeye ikna edebilir. 4) Harika görünüyor :). Temel fikir, modül içeriğinin yalnızca bir bölümünü (bir teaser gibi) göstermektir, bu da ziyaretçilerin daha fazlasını görmek için üzerine gelmesini cazip hale getirir. Modülün üzerine geldiklerinde, tüm içerik, bir deklanşör gibi açılıp kapanan yumuşak bir vurgulu efektle ortaya çıkar.

Bu öğreticide, Divi oluşturucuyu kullanarak deklanşör stili vurgulu efektle modül içeriğini nasıl ortaya çıkarabileceğinizi göstereceğim.

Gizlice Bakış

İşte birlikte ne inşa edeceğimize hızlı bir bakış.

Başlarken

Youtube Kanalımıza Abone Olun

Başlamak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve ardından ön uçta oluşturmak için Divi Builder'ı dağıtın. “Önceden Hazırlanmış Bir Düzen Seçin” seçeneğini seçin. Ardından Divi Kitaplığı açılır penceresinden Day Spa Düzen paketini seçin ve Açılış Sayfası Düzenini kullanmak için tıklayın.

Düzen sayfaya yüklendikten sonra başlamaya hazırsınız!

Blurb'un üstüne ve altına Bölücüler Ekleme

Sayfayı dört tanıtım yazısı ile “Lüks Spa Deneyimleri” başlıklı bölüme kaydırın. Tasarımı başlatmak için dört tanıtım yazısı içeren satırı kullanacağız.

İlk Bölücüyü Ekleme

İlk adımımız, tanıtıcı içeriğimizi arkasına gizlemek için tanıtım yazısı modülünün üstüne ve altına bölücüler eklemektir. Bu bölücüleri, üzerine gelindiğinde açılıp kapanan bir pencerenin kepenkleri gibi düşünebilirsiniz.

İlk sütundaki tanıtım yazısının üzerine bir ayırıcı modül ekleyin ve aşağıdakileri güncelleyin:

Arka plan rengi: #ffffff
Renk (bölücü): #ffffff
Bölücü Ağırlığı: 100px
Yükseklik: 100 piksel
Özel kenar boşluğu: 0 piksel alt

Beyaz arka plan, görmek istemediğimiz için bölümümüzün arka planıyla eşleşiyor. Ayırıcı ağırlığının ve yüksekliğinin aynı olduğundan emin olun.

İkinci (turuncu) Bölücüyü Ekleme

Ardından, yeni oluşturduğunuz ayırıcının hemen altında başka bir ayırıcı oluşturun ve aşağıdakileri güncelleyin:

Renk: #ff7a6b
Bölücü Ağırlığı: 2px
Yükseklik: 2 piksel
Özel kenar boşluğu: 0 piksel alt

Ardından içerik sekmesine geçin ve bölücüye bir yönetici etiketi "turuncu bölücü" verin. Bu, ayırıcıyı kopyalayıp diğer sütunlara yapıştırmak için tel kafes modunu kullandığımızda, ayırıcıyı önceki (beyaz) ayırıcıdan ayırmaya yardımcı olacaktır.

Sayfanızı kaydedin.

Bölücüleri Görüntülerin Çevresine Kopyalama ve Yapıştırma

Artık her sütundaki tanıtım yazılarının her birinin üstüne ve altına ayırıcılarımızı kopyalayıp yapıştırmaya hazırız. Bu işlemi biraz daha kolaylaştırmak için, sayfanın altındaki ayarlar menüsünü açıp tel kafes simgesine tıklayarak tel kafes modunu dağıtın. (veya üst karakter + w kullanın)

Tel kafes modunda, az önce oluşturduğumuz tanıtım yazılarını ve ayırıcıları içeren satırı bulun. Ardından, nihai sonucun böyle görünmesi için, her bir tanıtım yazısının üstüne ve altına ayırıcı ve turuncu ayırıcıyı kopyalayıp yapıştırın.

Ardından, tasarımı tamamlamak için masaüstü görünümüne (shft + w) dönün. Sayfanız böyle görünmelidir.

Blurb Modüllerini Özelleştirme

Artık tüm ayırıcılara sahip olduğunuza göre, deklanşör stili vurgulu efekti oluşturmak için özel bir kenar boşluğu da dahil olmak üzere birkaç stil ayarlaması ile tanıtım modüllerimizi düzenlemenin zamanı geldi.

İlk olarak, dört tanıtıcı modülünün tümünü seçmek için çoklu seçimi kullanın. Bunu yapmak için ctrl (veya cmd) tuşunu basılı tutun ve her bir modüle tıklayın. Ardından, öğe ayarları modunu dağıtmak için modüllerden birinin ayarlarını açın.

İçerik sekmesinin altına birkaç satırlık sahte içerik ekleyin.

Ardından görüntü kutusu gölgesini tamamen devre dışı bırakın.

Deklanşör üzerine gelme efekti oluşturmak için, içeriği varsayılan olarak bölücülerin arkasına gizlemek için negatif üst ve alt kenar boşlukları eklememiz gerekir. Ardından, fareyle üzerine gelindiğinde içeriği ortaya çıkarmak için kenar boşluklarını 0 piksele ayarladık. Bunu yapmak için aşağıdaki boşluğu ekleyin.

Özel Kenar Boşluğu (varsayılan): -100 piksel üst, -65 piksel alt
Özel Kenar Boşluğu (vurgulu): 0 piksel üst, 0 piksel alt

Özel Dolgu (vurgulu): 10 piksel üst, 10 piksel alt

Ne kadar içeriğiniz olduğuna bağlı olarak negatif kenar boşluğu değerlerini ayarlamanız gerekebilir. Örneğin, daha uzun metin içeriği için daha fazla negatif kenar boşluğuna ihtiyacınız olabilir.

Şimdi şimdiye kadarki sonucu kontrol edin.

Her modülün üst ve alt kısımlarının, siz üzerlerine gelene kadar bölücülerin arkasına gizlendiğine dikkat edin.

Deklanşör Hover Etkisini Temizleme

Modülleri Dikey Olarak Merkezleme

Şu anda, deklanşör üzerine gelme efekti, her fareyle üzerine gelme ile içeriğin geri kalanını sayfanın altına iter. Bu, dikkat dağıtıcı olabilecek bazı sayfa hareketlerine neden olur. Ayrıca, fareyle üzerine gelme eylemi yalnızca gerçek bir deklanşör etkisi olmayan aşağı yönde hareket eder. İçeriğin merkezden hem yukarı hem aşağı doğru açılmasını istiyoruz. Bunu başarmak için aşağıdakileri yapmamız gerekir:

Satır ayarlarını açın ve sütun yüksekliklerini eşitleyin.

Ardından gelişmiş sekmeye gidin ve Ana Öğe altına aşağıdaki özel CSS'yi girin:

align-items: center;

Bu, modüllerin sütun içinde dikey olarak merkezde kalmasını sağlayarak bize yukarı ve aşağı deklanşör efekti verir.

Satıra Sabit Bir Yükseklik Vermek

Fareyle üzerine gelme efektinin aşağıdaki sayfa içeriğini aşağı itmesini durdurmak için, her fareyle üzerine gelindiğinde satırın yüksekliğinin büyümesini durdurmamız gerekir. Bunu yapmak için masaüstündeki satırımıza sabit bir yükseklik ayarlamalıyız. Yükseklik sabitleneceğinden, satırın yüksekliğinin, vurgulu durumundaki tanıtım metni içeriğinin yüksekliğine uyum sağlamak için yeterince yüksek olduğundan emin olmanız gerekir. Ancak modüllerin üstünde ve altında çok fazla boşluk bırakacağınız için çok yüksek yapmak istemezsiniz. Bu örnekte, satır yüksekliğini 600 piksel olarak ayarlayacağım. Ancak, yalnızca masaüstünde yalnızca sabit yükseklik ayarını istediğimiz için, bir medya sorgusu kullanarak sayfa ayarlarımıza biraz CSS eklememiz gerekiyor.

Yapman gerekenler işte burada.

Her şeyden önce, satır ayarlarında satırınıza bir CSS kimliği verin:

CSS kimliği: sabit yükseklik

Ardından sayfa ayarlarını açın (gelişmiş sekmenin altında) ve aşağıdaki Özel CSS'yi ekleyin:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Bu, satırınıza masaüstünde 600 piksellik sabit bir yükseklik verir ve fareyle üzerine gelme etkisinin sayfa içeriğinin geri kalanını aşağı doğru itmesini durdurur.

Bu kadar!

Nihai Sonuç

Son tasarımı inceleyin.

Ve işte deklanşör vurgulu efekti.

Mobil cihazlarda fareyle üzerine gelme efektini devre dışı bırakmak iyi bir fikir olabilir. Bunu yapmak için tek yapmanız gereken, her bir tanıtıcı modül için özel kenar boşluğunu aşağıdaki gibi ayarlamaktır:

Özel Kenar Boşluğu (tablet): 0 piksel üst, 0 piksel alt

Son düşünceler

Bu deklanşör üzerine gelme efekti, hedef kitlenizi farklı hizmetleriniz hakkında daha fazla bilgi aramaya teşvik etmenin yaratıcı bir yoludur. Divi'nin büyüsü ve birkaç CSS parçacığıyla, nihai sonuç oldukça zariftir. İstediğiniz herhangi bir modülü kullanabileceğiniz için bu deklanşör vurgulu efekti için daha birçok uygulama olduğundan eminim. Kendi heyecan verici yeni tasarımlarınızı keşfetmekten çekinmeyin ve bunları bizimle paylaşmaktan çekinmeyin. Yorumlarda sizden haber bekliyorum.

Şerefe!