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

fareyle üzerine gelindiğinde veya bir tıklamanın ardından birkaç Divi öğesinin stilini değiştirin

Düğmeye tıkladıktan sonra öğelerin değiştirilmesi

fareyle üzerine gelindiğinde veya bir tıklamanın ardından birkaç Divi öğesinin stilini değiştirin

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.

Sekmelere dönüştürülen bölme çizgileri

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)

Sekmelere dönüştürülen bölme çizgileri

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.

Vurgulu Divi öğeleri

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.

fareyle üzerine gelindiğinde veya bir tıklamanın ardından birkaç Divi öğesinin görünümünü değiştirme

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ç.

fareyle üzerine gelindiğinde veya bir tıklamanın ardından birkaç Divi öğesinin stilini değiştirin

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ş.

...