Hover.css Kullanarak Divi'nin Blurb Modülüne Gelişmiş Hover Efektleri Nasıl Eklenir

Bugünün Divi eğitiminde, Hover.css kullanarak Divi'nin Blurb Modüllerine bazı gelişmiş vurgulu efektlerin nasıl ekleneceğini göstereceğiz. Elbette Divi, aklınıza gelebilecek her tür sayfa için çarpıcı tanıtım yazıları oluşturmak için ihtiyacınız olan her şeye sahiptir. Ancak topluluğumuzda, bir müşteri sitesini rekabetten çok daha farklı hale getirmek için Divi'yi her zaman sınırlarını zorlamak (ve bazen de ötesine geçmek) isteyen birçok tasarımcı olduğunu biliyoruz. Dolayısıyla bu eğitim, Divi'nin gelişmiş özelliklerinden yararlanmaktan zevk alan, son teknoloji kullanan herkese yöneliktir.

Bugün ne yaratacağımıza bir göz atalım.

Önizleme: Nihai Sonuç

Bu gönderinin sonunda (ve size hover.css üzerinden rehberlik ettikten sonra), aşağıdaki sonucu nasıl elde edeceğinizi göstereceğiz:

Tabii ki, hover.css ile neler yapılabileceği açısından bu sadece buzdağının görünen kısmı, ancak başlamanıza yardımcı olacak.

İlham

Web sitelerinde farklı tanıtım yazıları için hover.css efektlerini kullanan XD Web Design'dan ilham aldık. Önceki gönderilerde, belirli Blurb Modüllerinin nasıl yeniden oluşturulacağına ilgi gösteren yorum istekleri vardı. Bunları tam olarak yeniden oluşturmayacak olsak da, daha sonra kolayca deneyebilmeniz için size bu efektleri eklemenin temellerini göstereceğiz.

Hover.css Kullanarak Divi'nin Blurb Modülüne Gelişmiş Hover Efektleri Nasıl Eklenir

Youtube Kanalımıza Abone Olun

Hover.css'i Web Sitenize Alın

Başka bir konuya girmeden önce, sizi ilk olarak hover.css ile tanıştıracağız. Hover.css, web sitenizdeki her tür öğe üzerinde kullanabileceğiniz birçok efekt içerir. Hover.css efektlerini web sitenize eklemenin iki ana yolu vardır; CSS dosyasını ekleyerek veya sahip olmak istediğiniz efektleri seçerek ve bu CSS'yi Divi Builder'da kullanarak.

Modüllerdeki öğeler için CSS kod satırlarında bazı küçük ayarlamalar yapmamız gerekeceğinden, nihai sonucu oluşturmak için ihtiyaç duyacağınız birkaç CSS kod satırını manuel olarak nasıl ekleyeceğinizi göstereceğiz. Bununla birlikte, web sitenizde tüm efektlere sahip olmayı tercih ediyorsanız, bunu CSS dosyasını WordPress dizininize ekleyerek de yapabilirsiniz.

Hover.css'yi indirin

Şimdi, başlamak için, Ian Lunn'in web sitesine giderek bulabileceğiniz hover.css dosyasına ihtiyacınız olacak. Alternatif olarak, doğrudan Github'daki dosyalara gönderilmek için burayı da tıklayabilirsiniz. Dosyayı indirdikten sonra sıkıştırmasını açın.

Satın alma lisansı

Dikkate almanız gereken bir sonraki şey, hover.css'nin ücretsiz olmadığı gerçeğidir. Web sitenizi ticari amaçlarla kullanıyorsanız, lisans satın almanız şarttır. İki tür satın alma olanağınız vardır:

• Geliştirici Lisansı (14 $ ve 1 proje için uygundur)
• Takım Lisansı (18$ ve sınırsız projeler için uygundur)

İhtiyacınıza bağlı olarak, lisansınızı satın alabilir ve web site(leri)nizdeki efektleri kullanabilirsiniz.

Hover Listesi

Devam edelim, hover.css ile emrinizde olan farklı vurgulu efektlerine bir göz atalım. Çeşitli kategorilere ait bir demetiniz var. Toplamda yedi kategori vardır:

• 2B Geçişler
• Arka Plan Geçişleri
• Simgeler
• Sınır Geçişleri
• Gölge ve Parıltı Geçişleri
• konuşma balonları
• bukleler

Bu efektlerin her biri, Blurb Modüllerinize veya web sitenizdeki diğer herhangi bir modül türüne bu ekstra ince ayarı verebilecek bir dizi efekt içerir.

yükleme

Hover.css'i doğrudan alt temanıza dahil ederek yükleyebilmenize rağmen, bunun bitlerini ve parçalarını da kullanabilirsiniz. Bu eğitimde yapacağımız şey bu. Belirli bir efektin CSS kodunu alıp doğrudan Divi Builder'ımıza ekleyeceğiz. Bunu yapmamızın nedeni, bazı durumlarda (sadece bir modülün bir elemanına bir efekt uygulamak istediğimizde), sağlanan kodu biraz değiştirmeniz gerekecek olmasıdır.

Sıkıştırılmamış indirilen klasörünüze gidin ve hover.css dosyasını bulun.

Bu dosyayı Notepad ++ gibi bir kod düzenleyici ile açın ve tüm efektlerin birbiri ardına sıralandığını göreceksiniz. CSS dosyasında kullanılan isimler web sitesindeki ile aynıdır. Web sitesine gidebilir ve hangi animasyonu beğendiğinizi görebilirsiniz. Daha sonra, CSS dosyasına geri dönebilir ve sadece adı arayabilirsiniz.

Etkileşimli Blurb Modülünüzü Oluşturma

Şimdi size hover.css'den nasıl kolayca yararlanabileceğinizi gösterdiğimize göre, sağlanan efektleri kullanırken etkileşimli bir Blurb Modülünü nasıl yeniden oluşturacağınızı göstermenin zamanı geldi. Bir hatırlatma olarak, sonuca bir göz atalım:

Üç Sütunlu Satır Ekle

Yapmanız gereken ilk şey, yeni bir sayfada veya mevcut sayfada yeni bir bölüme üç sütunlu bir satır eklemektir. Size ilk Blurb Modülünü nasıl ekleyeceğinizi göstereceğiz ve daha sonra aynı adımları tekrarlayarak Blurb Modüllerini diğer sütunlara da ekleyebilirsiniz.

Satırı Tam Genişlik Yap

Yapmanız gereken bir sonraki şey, satırı tam genişlikte yapmaktır. Bunu yapmak için satır ayarlarınızı açın ve Tasarım sekmesine gidin. Tasarım sekmesinde; Boyutlandırma alt kategorisinde 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Sütun Dolgusu Uygula

Yapmanız gereken bir sonraki şey, hala satır ayarlarının Tasarım sekmesindeyken biraz sütun dolgusu eklemek. Aşağı kaydırın ve 1. sütunun alt dolgusuna %5 ekleyin.

Sütuna Kutu Gölgesi ve Kenar Yarıçapı Uygula

Ve satır ayarlarında yapmanız gereken son şey, Gelişmiş sekmesine gitmek. Gelişmiş sekmesinde, Sütun 1 Ana Öğesine gidin ve aşağıdaki CSS kod satırlarını kopyalayıp yapıştırın:

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

Bunu yaptıktan sonra, satır ayarlarını kapatabilirsiniz.

Resim Modülü Ekle

Bir sonraki yapacağımız şey, ilk sütuna bir Görüntü Modülü eklemek. Teknik olarak bu, Blurb Module'ün bir parçası değil, ancak nihai sonucu olarak birbirlerine ait gibi görünüyorlar. Bunun temel nedeni, sütunu tüm modülleri toplayan ve onları birbirine uygun hale getiren bir tür kutu olarak kullanmamızdır.

Bir resim yükleyin ve Resim Modülünü şimdilik olduğu gibi bırakın.

Bulanıklık Modülü Ekle

Sıraya eklememiz gereken bir sonraki şey Blurb Module. Bulanıklık Modülünü ekledikten sonra, üzerinde birkaç değişiklik yapmanız gerekecektir. Başlık metnini, içerik metnini ekleyerek ve simgeyi seçerek başlayın ve Tasarım sekmesine geçin.

Simgeyi Özelleştir

Tasarım sekmesinde ilk karşılaşacağınız şey Görüntü ve Simge alt kategorisidir. Bu alt kategori içinde aşağıdaki değişikliklerin geçerli olduğundan emin olun:

• Simge Rengi: #FFFFFF
• Daire Simgesi: EVET
• Daire Rengi: #004370
• Resim/Simge Yerleşimi: Üst
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 45px (masaüstü), 40px (tablet), 37 (telefon)

Başlık Metnini Özelleştir

Aynı sekmeyi aşağı kaydırın ve Başlık Metni alt kategorisinde aşağıdaki değişiklikleri yapın:

• Başlık Yazı Tipi Boyutu: 16 (masaüstü ve tablet), 14 (telefon)
• Başlık Metni Rengi: #004370
• Başlık Çizgisi Yüksekliği: 2.2em

Özel Kenar Boşluğu Ekle

Ardından, Özel Kenar Boşluğunu Bulanıklık Modülüne eklemeniz gerekecek:

• Üst: %25
• Sağ: %5
• Sol: %5
• Alt: %5

Blurb Başlığına Alt Kenar Boşluğu Ekle

Son olarak, Gelişmiş sekmesine gidin ve Blurb Title'ın alt kenarına '3px' ekleyin:

Modüllere Hover.css Efektleri Ekleme

Bu yazının son kısmı, hover.css efektlerinin eklenmesini içerir. Önce Görüntü Modülü'ne ve Bulanıklık Modülüne vurgulu efektleri ekleyeceğiz ve bu yazının sonraki bölümünde Blurb Modülünün yalnızca bir öğesine vurgulu efekti ekleyeceğiz.

Görüntü Modülüne CSS Sınıfını ekleyin

Resminizin ayarlarını açın ve Gelişmiş sekmesine gidin. Gelişmiş sekmesinde, kullanmak istediğiniz vurgulu efekti CSS sınıfını yazın. Bu durumda, CSS sınıf adı olarak 'hvr-ripple-out' olan dalgalanma efektini uyguluyoruz. Tekrar; bu sınıf adlarını sıkıştırılmış klasörünüzdeki hover.css dosyasında bulabilirsiniz.

Blurb Modülüne CSS Sınıfını Ekleyin

Aynı şekilde, Blurb ayarlarını açın ve Gelişmiş sekmesine gidin. Bu durumda, küçültme vurgulu efektini tüm modüle uygulayacağız. Bu nedenle, CSS Sınıfı alanına 'hvr-shrink' yazın.

CSS Kodunu Ekle

Devam ederek, aşağıdaki butona tıklayarak aşağıdaki CSS kod satırlarını sayfanızın ayarlarına ekleyin:

Aşağıdaki CSS kod satırlarını Özel CSS alanına yerleştirerek devam edin:

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

@-webkit-keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
100% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: '';
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

Bunlar, hover.css dosyasında bulabileceğiniz CSS kod satırlarının neredeyse aynısıdır. Farklı olan tek şey, dalgalanma efekti için kullanılan kenarlık rengidir. Daire simgesinde kullanılanla aynı renk.

Blurb Modülündeki Ayrı Öğeler İçin Hover.css Efektlerini Kullanın

Bu tanıtım yazısına eklediğimiz üçüncü efekt, Blurb Title'ın üzerine gelindikten sonra görünen çizgidir. Blurb Modülü farklı öğeler içerir. Bu nedenle, listede sadece hover.css sınıfını kullanamayız. Bunun yerine modüle bir CSS ID atamalı ve Blurb Title'a özel olarak atanmış CSS sınıfını kullanmalıyız.

Blurb Modülüne CSS Kimliğini Ekleyin

Blurb Modülüne CSS kimliğini ekleyerek başlayın. Bu durumda, 'merkez' kullanıyoruz.

CSS Kodunu Ekle

Aşağıdaki kod satırlarını kopyalayıp önceki CSS kodunu yerleştirdiğiniz yere yapıştırarak devam edin:

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

Kod içinde kullandığınız sınıf adı modülden modüle farklılık gösterir. Bunu yalnızca bir modüle uygulamak istiyorsanız, o modülün Blurb Title'ına atanan sınıfı kullanmanız gerekir:

Ancak, bunun yerine kodun tüm tanıtım yazılarına uygulanmasını istiyorsanız, aşağıdaki CSS kod satırlarını kullanın:

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: "";
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

Bu kadar! Artık aynı sonucu elde etmek için aynı adımları kullanabilirsiniz. Modülleri klonlayarak ve diğer satırlarda da kullanarak devam edin.

Son düşünceler

Bu Divi eğitiminde, öncelikle hover.css tarafından sağlanan birçok efektin nasıl kullanılacağını gösterdik. Bunun yanı sıra, web sitenizde etkileşimli Blurb Modülleri oluşturmak için farklı efektleri nasıl kullanabileceğinizi de gösterdik. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

Sanat eseri / Shutterstock.com tarafından Öne Çıkan Görsel