Birkaç öğenin stilini değiştirmek istiyor musunuz? Divi fareyle üzerine gelindiğinde mi yoksa tıkladıktan sonra mı?
Bu öğreticide, fareyle üzerine gelindiğinde veya tıklatıldığında birden çok öğenin stilini nasıl değiştireceğinizi göstereceğiz. Divi.
Öncelikle yerleşik tasarım seçeneklerinden yararlanacağız. Divi Bir bölüm düzeni tasarlamak için.
Ardından, fareyle üzerine geldiğinizde veya bir düğmeyi tıklattığınızda bu bölümdeki herhangi bir öğenin stilini ayarlamak için özel CSS ile birlikte kullanabileceğiniz basit bir jQuery parçacığı sunacağız.
Bu kulağa karmaşık gelebilir (özellikle yeni başlayanlar için), ancak yapmanın ne kadar basit olduğuna şaşırabilirsiniz.
Başlayalım!
anket
İşte bu eğitimde elde edeceğimiz tasarıma kısa bir genel bakış.
Düğmeyle üzerine gelindiğinde öğeleri değiştirme
Düğmeye tıkladıktan sonra öğelerin değiştirilmesi
Divi Builder ile bir sayfa oluşturarak başlayalım
Ayrıca bakınız: Divi: Fareyle üzerine gelindiğinde çıkrık menüsü nasıl oluşturulur
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Bölüm Düzen Tasarımı
Başlamak için iki sütunlu yeni bir satır oluşturun.
Bölüm ayarları
Modül eklemeden önce bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Arkaplan: #ffffff
Bir bölüm ayırıcı ekleyelim
- Bölücü (Üst)
- Stil: ekran görüntüsüne bakın
- Renk: #ffffff
- Yükseklik: 5vw
- Bölücü (Alt)
- Tarz: bkz. yakalama
- Renk: #ffffff
- Yükseklik: 5vw
- Dolgu (Üst ve Alt): 6vw
Resim (fareyle üzerine gelmeden önce)
İki sütunlu satırın sol sütununa yeni bir görüntü modülü ekleyin.
Ardından, vurgulamak istediğiniz resmi yükleyin.
Sekmenin altında Dizayn, hizalamayı güncelleyin ve seçeneği etkinleştirin Mukavemet Tam Genişlik.
- Görüntü hizalama: ortalanmış
- Mukavemet Tam Genişlik: EVET
Resim (fareyle üzerine gelindiğinde veya tıkladıktan sonra)
Ardından, bir düğmenin üzerine geldiğimizde/tıkladığımızda göstereceğimiz başka bir resim oluşturacağız.
Görüntüyü oluşturmak için önceki görüntü modülünü çoğaltın.
Ardından yeni bir resim yükleyin. Fareyle üzerine gelindiğinde/tıklandığında diğer resmin yerini alacağı için resim diğer resimle aynı boyutta olmalıdır.
Bu görüntü için ona mutlak bir konum vereceğiz. Bu, görüntünün sayfada gerçek bir yer kaplamadan doğrudan diğer görüntünün üzerine oturmasına neden olur.
- Pozisyon: Mutlak
Sekmenin altında Dizayn, görüntünün tamamen görünmez olması için filtre seçeneklerinin altındaki opaklığı değiştirin.
- Opaklık: %0
Metin modülü ekleyin
Sağ sütunda yeni bir Metin modülü ekleyin.
Daha sonra aşağıdaki HTML kodunu kutuya yapıştırın içindekiler vücuttan:
<h3><span>Créer</span> Votre Blog <span>avec BlogPasCher</span></h3>
Metindeki bazı kelimelerin etiketlerle çevrelendiğine dikkat edin. karış. Bu kelimeleri daha sonra özel CSS ile bu şekilde hedefleyebilir ve özelleştirebiliriz.
Sekmenin altında Dizayn, H3 stil seçeneklerini aşağıdaki gibi güncelleyin:
- Başlık 3:
- Yazı Tipi: Montserrat
- Yazı Tipi Ağırlığı Yazı Ağırlığı: Ultra Kalın
- stil: TT
- Metin Boyutu: 60 piksel (bilgisayar ve tablet), 40 piksel (telefon)
- Harf Aralığı: 0,06em
- Satır Yüksekliği: 2 em
Bir sonraki bölümde, stil değişikliklerini başlatmak için kullanacağımız düğmeyi ekleyeceğiz.
Düğme için bir bölüm oluşturun
Öncelikle mevcut bölümün altında yeni bir normal bölüm oluşturmamız gerekiyor.
Ardından, bölüme bir sütuna bir satır ekleyin.
Bir düğme ekleyin
Sütunda yeni bir modül ekleyin düğme.
Düğme metnini "Devam ediyor..." şeklinde değiştirin.
Sekmeye geç Dizayn ve düğme tasarımını aşağıdaki gibi güncelleyin:
- Düğme İçin Özel Stilleri Kullan: EVET
- Metin Boyutu: 16px
- Metin Rengi: #ffffff
- Düğme Arka Planı (Masaüstü): #4b4baf
- Düğme Arka Planı (Vurgulu): #67ddc1
- Kenarlık Genişliği: 0 piksel
Ayrıca Oku: Divi: Menü modülüne hamburger simgesi nasıl eklenir
- Düğme Harf Aralığı: 4px
- Yazı Tipi: Montserrat
- Yazı Ağırlığı: Yarı Kalın
- Düğme Yazı Tipi Stili: TT
- Kenar Boşluğu (Alt): 0px
- Dolgu (Üst ve Alt): 1.5em
- Dolgu (Sol ve Sağ): 4em
Bölüm 2: Öğelere CSS Sınıfları Ekleme
Artık tasarımımız yerinde olduğuna göre, tasarım değişikliklerinin geri kalanını özel kod (CSS ve JQuery) kullanarak yapacağız.
Ancak özel kodumuzu eklemeye başlamadan önce, butonun üzerine geldiğimizde/tıkladığımızda değiştirmek istediğimiz tüm elementlere CSS sınıfları eklememiz gerekiyor.
Bölüme bir CSS sınıfı ekleyin
Bölüme bir CSS sınıfı eklemek için bölüm ayarlarını açın ve sekmeye tıklayın gelişmiş. Ardından aşağıdaki CSS sınıfını girin:
- CSS Sınıfı: et-change-style_section
Görüntü modüllerine bir CSS sınıfı ekleyin
Ardından, sol sütundaki ilk görüntünün ayarlarını açın ve aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: et-before-image
Bu, düğmenin üzerine gelinmesi/tıklanmasından "önce" görüntülenecek resim olacaktır.
Katman modunu kullanarak, ikinci görüntünün (opaklık filtresiyle gizlenmiş olan) ayarlarını açın ve aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: et-after-image
Bu, düğmenin üzerine gelindiğinde/tıklatıldığında "sonra" görüntülenecek resim olacaktır.
Metin modülüne bir CSS sınıfı ekleyin
Ardından, sağ sütundaki metin modülüne aşağıdaki CSS sınıfını ekleyin:
- CSS sınıfı: et-style-text
Button modülüne bir CSS sınıfı ekleyin
Son olarak aşağıdaki gibi alt kısımdaki butona özel bir CSS sınıfı ekleyin:
- CSS sınıfı: et-geçiş düğmesi
Daha sonra kodda fareyle üzerine gelme/tıklama işlevi düğmesini hedeflemek için bu sınıfa ihtiyacımız var.
Bölüm 3: Fareyle üzerine gelindiğinde veya tıklatıldığında stilleri değiştirmek için özel kod ekleyin
Artık tüm CSS sınıflarımız yerinde olduğuna göre, düğmeyi üzerine getirdiğinizde/tıkladığınızda tüm bu öğelerin stilini değiştirmek için gerekli kodu ekleyebiliriz.
Kod modülü ekleyin
Kodu eklemek için alt bölümdeki düğmenin altına bir Kod modülü ekleyin.
jQuery kodunu yapıştırın
Ardından aşağıdaki JQuery'yi yapıştırın. Kodu bir HTML belgesine (JS dosyasına değil) eklerken kodu komut dosyası etiketlerine sardığınızdan emin olun.
(function($) {
$(document).ready(function(){
$('.et-toggle-button').hover(function(){
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
});
});
})( jQuery );
Özel CSS ile öğelerin stilini değiştirin
Kod modülünü açın ve aşağıdaki özel CSS'yi JQuery komut dosyasının üzerine yapıştırın, onu gerekli stil etiketlerine sardığınızdan emin olun.
.et_pb_section.et-change-style_section.et-change-style_active {
background-color:#484db0 !important;
}
Ardından aşağıdaki ek CSS'yi stil etiketlerine yapıştırın.
.et-change-style_active .et-after-image {
filter: opacity(100%);
}
.et-change-style_active .et-before-image {
filter: opacity(0%);
}
Ardından CSS'nin geri kalanını stil etiketlerinin içine yapıştırın:
.et-change-style_active .et-style-text h3, .et-change-style_active .et-style-text p {
color: #ffffff;
}
.et-change-style_active .et-style-text h3 span {
color: #67ddc1;
}
.et-toggle-button_active {
transform: scale(1.1);
background-color: #67ddc1 !important;
}
.et-change-style_active, .et-before-image, .et-after-image, .et-style-text h3 {
transition: all 0.3s;
}
Bu CSS parçacıkları, bölüm (veya düğme) yeni sınıfa sahip olduğunda öğenin stilini değiştirmek için aynı kavramı kullanır.
Nihai sonuç (genel bakış)
Kod eklendikten sonra değişiklikleri kaydedin ve sonucu görüntülemek için sayfayı açın. Düğmenin üzerine geldiğinizde hedeflediğimiz öğelerin nasıl değiştiğine dikkat edin.
Tıklamada stilleri değiştirin
Tıklama işlevi eklemek için mevcut JQuery'yi aşağıdakiyle değiştirin (yine, komut dosyası etiketlerine sarıldığından emin olun):
(function($) {
$(document).ready(function(){
$('.et-toggle-button').click(function(e){
e.preventDefault();
$('.et-change-style_section').toggleClass('et-change-style_active');
var $this = $(this);
$this.toggleClass('et-toggle-button_active');
if ($this.hasClass('et-toggle-button_active')){
$this.text('Précédent...');
} else {
$this.text('Suite...');
}
});
});
})( jQuery );
İşte son sonuç.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bir şeyin üzerine geldiğinizde veya bir şeye tıkladığınızda bir sayfada birden çok öğeyi hedefleyebilmek ve stil verebilmek, web tasarımında faydalı bir beceridir.
Bu tekniği çeşitli kullanım durumları için kullanabilirsiniz (öncesi ve sonrası, CTA vb.)
Elbette biraz CSS ve JS/JQuery bilmek yardımcı olur. Ancak, bu eğitimde gördüğünüz gibi, harika sonuçlar elde etmek için derin kodlama bilgisine ihtiyacınız yok!
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...