Divi'de Vurgulu veya Tıklamada Birden Çok Öğenin Stili Nasıl Değiştirilir

Sonunda, web tasarımı dünyasında hem kodlayıcılar hem de kodlayıcı olmayanlar Divi web sitelerine daha gelişmiş özelleştirmeler ve işlevsellik eklemeye çalışacaklar. Genellikle bu, sayfadaki öğelerin stilini farklı nedenlerle değiştirmek için Javascript/JQuery kullanmayı içerir. Bir düğmeye tıkladığınızda bir iletişim formunun görünmesini isteyebilirsiniz. Veya bir bağlantının üzerine geldiğinizde bir resmi değiştirmek isteyebilirsiniz.

Bu öğreticide, Divi'de fareyle üzerine gelindiğinde veya tıklatıldığında birden çok öğenin stilini nasıl değiştireceğinizi göstereceğiz. İlk olarak, bir bölüm düzeni tasarlamak için Divi'nin yerleşik tasarım seçeneklerinden yararlanacağız. Ardından, bir düğmeyi gezdirirken veya tıklatırken o bölümdeki herhangi bir öğenin stilini ayarlamak için özel CSS ile birlikte kullanabileceğiniz basit bir jQuery parçacığı tanıtacağız. Bu kulağa karmaşık gelebilir (özellikle yeni başlayanlar için), ancak başarmanın ne kadar basit olduğuna şaşırabilirsiniz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düğmenin üzerine gelindiğinde değiştirilen bölüm düzeni tasarımı.

Ve işte butona tıklanarak değiştirilen aynı bölüm düzeni tasarımı. Düğme metninin tıklandığında da değiştiğine dikkat edin.

Düzeni Ü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!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: Bölüm Düzenini Tasarlama

Başlamak için iki sütunlu yeni bir satır oluşturun.

Bölüm Ayarları

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

• Arka Plan Rengi: #ffffff

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Üst Bölücü Rengi: #ffffff
• Üst Bölücü Yüksekliği: 5vw

• Alt Bölücü Stili: aynı
• Alt Bölücü Rengi: #ffffff
• Alt Bölücü Yüksekliği: 5vw

• Dolgu: 6vw üst, 6vw alt

Resimden Önce

İki sütunlu satırın sol sütununa yeni bir görüntü modülü ekleyin.

Ardından sergilemek istediğiniz resmi yükleyin. Bu eğitim için, yaklaşık 800 piksele 550 piksel olan Öğrenme Yönetimi (LMS) Düzen Paketinden bir resim kullanıyoruz.

Tasarım sekmesi altında hizalamayı güncelleyin ve tam genişliğe zorla seçeneğini etkinleştirin.

• Görüntü Hizalama: merkez
• Tam Genişliği Zorla: EVET

Görüntüden Sonra

Ardından, bir düğmenin üzerine geldiğimizde/tıkladığımızda göstereceğimiz başka bir görüntü 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ğından, 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 yer kaplamadan doğrudan diğer görüntünün üzerine oturmasına neden olur.

• Pozisyon: Mutlak

Tasarım sekmesi altında, filtre seçeneklerinin altındaki opaklığı, görüntünün tamamen görünmez olması için değiştirin.

• Opaklık: %0

Metin Başlığı Ekle

Sağ sütunda yeni bir metin modülü ekleyin.

Ardından, aşağıdaki HTML'yi gövde içeriği alanına yapıştırın:

<h3><span>Design</span> Anything You Want <span>with Divi</span></h3>

Metindeki bazı kelimelerin span etiketleriyle sarıldığına dikkat edin. Bu, bu kelimeleri daha sonra bazı özel CSS ile hedefleyebilmemiz ve biçimlendirebilmemiz içindir.

Tasarım sekmesi altında H3 stili seçeneklerini aşağıdaki gibi güncelleyin:

• Başlık 3 Yazı Tipi: Montserrat
• Başlık 3 Yazı Tipi Ağırlığı: Ultra Kalın
• Başlık 3 Yazı Tipi Stili: TT
• Başlık 3 Metin Boyutu: 65px (masaüstü ve tablet), 40px (telefon)
• Başlık 3 Harf Aralığı: 0.8em
• Başlık 3 Çizgi Yüksekliği: 1.3em

Bu, bir düğmenin üzerine gelindiğinde/tıklandığında değiştireceğimiz tasarım öğelerini tutan bölüm düzeniyle ilgilenir. Bir sonraki bölümde, stil değişikliklerini başlatmak için kullanacağımız buton ekleyeceğiz.

Düğme için Bölüm Oluştur

Geçerli bölümün altında yeni bir normal bölüm oluşturun.

Ardından bölüme tek sütunlu bir satır ekleyin.

Düğme Ekle

Sütunda yeni bir düğme modülü ekleyin.

Düğme metnini “Sonrasını Gör” olarak değiştirin.

Tasarım sekmesine geçin ve düğmenin tasarımını aşağıdaki gibi güncelleyin:

• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Planı: #4b4baf
• Düğme Arka Planı (fareyle üzerine gelin): #67ddc1
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 4px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: TT

Bölüm 2: Öğelere CSS Sınıfları Ekleme

Artık tasarımımız yerinde olduğuna göre, özel Kod (CSS ve JQuery) kullanarak tasarım değişikliklerinin geri kalanını gerçekleştireceğiz. Ancak özel kodumuzu eklemeye başlamadan önce, düğmeyi gezdirirken/tıklarken değiştirmek istediğimiz tüm öğelere CSS Sınıfları eklememiz gerekiyor.

Bölüme CSS Sınıfı Ekle

Bölüme bir CSS Sınıfı eklemek için bölüm ayarlarını açın ve gelişmiş sekmesine tıklayın. Ardından aşağıdaki CSS Sınıfını girin:

• CSS Sınıfı: et-change-style_section

Görsellere CSS Sınıfı Ekle

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 gelindiğinde/tıklandığında "önce" gösterilen resim olacaktır.

Katmanlar modunu kullanarak, ikinci görüntünün (opaklık filtresiyle gizlenen) ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: görüntüden sonra et

Bu, düğmenin üzerine gelindiğinde/tıklandığında "sonra" gösterilen resim olacaktır.

Metne CSS Sınıfı Ekle

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

Düğmeye CSS Sınıfı Ekle

Son olarak, alt bölümdeki düğmeyi aşağıdaki gibi özel bir CSS Sınıfı ekleyin:

• CSS Sınıfı: et-geçiş düğmesi

Daha sonra koddaki fareyle üzerine gelme/tıklama işlevi düğmesini hedeflemek için bu sınıfa ihtiyacımız var.

Bölüm 3: Üzerine Geldiğinde veya Tıklandığında Stilleri Değiştirmek için Özel Kod Ekleme

Artık tüm CSS Sınıflarımız yerinde olduğuna göre, düğmeyi gezdirirken/tıklarken tüm bu öğelerin stilini değiştirmek için gerekli kodu ekleyebiliriz.

Kod Modülü Ekle

Kodu eklemek için alt kısımdaki buton altına bir kod modülü ekleyin.

jQuery Kodunu Yapıştır

Ardından aşağıdaki JQuery'yi yapıştırın. Kodu bir HTML belgesine (JS dosyasına değil) eklediğimiz için 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 );

Kodu incelerseniz butona ve bölüme eklediğimiz CSS Sınıflarını tanımalısınız.

Düğme Sınıfı (“.et-toggle-button”), üzerine gelindiğinde bir işlevi başlatacak öğeyi hedeflemek için kullanılıyor.

Fareyle üzerine gelindiğinde, işlev ".et-change-style_section" bölüm sınıfına sahip öğeyi bulur ve imleç düğmenin üzerine geldiğinde yeni bir sınıf (".et-change-style-active") değiştirir/ekler.

Düğme ayrıca, fareyle üzerine gelme durumunda yeni bir sınıf (".et-toggle-button_active") arasında geçiş yapmak için ("$this" aracılığıyla) hedefleniyor.

Fareyle üzerine gelindiğinde bu öğelerin stillerini değiştirmenin anahtarı, bölüme ve düğmeye bu ek yeni CSS Sınıflarını eklemek/değiştirmektir.

Örneğin, “.et-change-style_section” sınıfına sahip bölüme bu ek sınıf (“.et-change-style_active”) verildiğinde, ona orijinal olarak verilen bölümün stilini değiştirmek için Özel CSS kullanabiliriz. yerleşik Divi seçenekleri.

Özel CSS ile Öğelerin Stilini Değiştirme

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;
 }

İlk bölüm sınıfının seçici olarak yeni sınıfla birleştirildiğine dikkat edin. Aşağıdaki CSS, yalnızca o yeni sınıf eklendiğinde bölüme uygulanacaktır. Eklenmediğinde orijinal tasarım görüntülenecektir. Bu örnekte, düğmenin üzerine gelindiğinde bölümün arka plan rengi değişecektir.

Ardından, aşağıdaki ek CSS'yi stil etiketlerinin içine yapıştırın.

  .et-change-style_active .et-after-image {
    filter: opacity(100%);
  }
  .et-change-style_active .et-before-image {
    filter: opacity(0%);
  }  

Üst bölüme fareyle üzerine gelindiğinde bir sınıf verildiğinden, aynı CSS sınıfını kullanarak bölümün alt öğelerini (görüntüler gibi) hedefleyebilirsiniz. Ancak, bir üst kap/bölümdeki bir sınıf olduğu için, CSS Sınıfı, değiştirmek istediğiniz öğenin sınıfından önce gelmelidir. Bu örnekte, üst bölüme verilen CSS Sınıfı (“.et-change-style_active”), alt görüntülerin verildiği sınıftan (“.et-after-image” ve “.et-before-image”) önce gelir.

Sonraki görüntünün CSS'si, düğmenin üzerine gelindiğinde görüntüyü gösterecektir. Ve önceki görüntünün CSS'si, düğmenin üzerine gelindiğinde görüntüyü gizleyecektir. Sonuç, düğme üzerine gelindiğinde ilk görüntünün yenisiyle değiştirilmesidir.

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ç (Vurgulu)

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.

Hover Yerine Tıklamada Stilleri Değiştirme

Düğmeye tıkladığınızda (gezmek yerine) aynı öğelerin stilini değiştirmek istiyorsanız, tek yapmanız gereken JQuery'de birkaç değişiklik yapmak. Kodun çoğu aynı kalacak. Temel fark, “vurgulu” yönteminin “tıklama” ile değiştirilmesidir. Ve tıklandığında düğmenin metnini değiştiren yararlı bir kod parçası ekledik.

Tıklama işlevini eklemek için mevcut JQuery'yi aşağıdakiyle değiştirin (tekrar, 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('See Before');
            } else {
                $this.text('See After');
            }
        });
    });
})( jQuery );

İşte nihai sonuç.

Son düşünceler

Bir şeyin üzerine gelindiğinde veya üzerine tıklandığında bir sayfadaki birden çok öğenin stilini hedefleyebilmek ve değiştirebilmek, web tasarımında yararlı bir beceridir. Bu tekniği çeşitli kullanım durumları için kullanabilirsiniz (öncesi ve sonrası, CTA'lar, vb...) Elbette, biraz CSS ve JS/JQuery bilmek yardımcı olur. Ancak, bu eğitimde gördüğünüz gibi, bazı şaşırtıcı sonuçlar elde etmek için bir ton kod bilmenize gerek yok!

Yorumlarda sizden haber bekliyorum.

Şerefe!