Divi'de Özel Gösterim Daha Fazla Geçiş Oluşturmanın 2 Yolu

Daha fazla geçiş göster, bir web sitesindeki birçok farklı uygulama için kullanışlı olabilir. Geleneksel olarak, daha fazla göster geçişi, bir daha fazla göster bağlantısına tıklandığında daha fazla metin göstermek için kullanılır (daha fazla oku geçişleri gibi). Bu, ilk tasarımı daha kompakt ve özlü tutmak için yararlıdır ve ihtiyaç duymaları halinde daha fazla bilgi için tıklamayı ziyaretçiye bırakır.

Bu eğitimde, size Divi siteniz için özel Daha Fazla Göster Geçişleri oluşturmanın iki yolunu göstereceğiz. İlk yol, bir Divi geçiş modülünü, bir modülün altında oturan ve ek metni göstermeye/gizlemeye hazır bir daha fazla göster geçişine dönüştürmeyi içerir. İkinci yöntem, tüm Divi satırlarını veya modüllerini gösterebilen/gizleyebilen bir daha fazla göster geçişi oluşturmayı içerecektir. Tahmin edebileceğiniz gibi, bu temelde istediğiniz herhangi bir içeriği göstermenin veya gizlemenin kapısını açar!

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız diğer geçişlere hızlı bir bakış.

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.

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.

1. Yol: Divi Toggle Modülü kullanarak Daha Fazla Göster Geçişi Oluşturma

İlk olarak, bölümünüze iki sütunlu bir satır ekleyin.

Sol sütuna bir tanıtıcı modül ekleyin.

Tanımlama modülünün altına bir geçiş modülü ekleyin. Geçiş modülünü daha fazla göster geçişine dönüştüreceğiz, böylece geçiş tıklandığında tanıtım modülünün altında daha fazla metin gösterecek/gizleyecek.

Bunu yapmak için geçiş modülü ayarlarını açın ve başlık metnini güncelleyin:

• Başlık: Daha Fazla Göster

Tasarım sekmesi altında, varsayılan stilleri kaldırmak için aşağıdakileri güncelleyin:

• Arka Plan Rengini Aç/Kapat: rgba(0,0,0,0);
• Kapalı Geçiş Arka Plan Rengi: rgba(0,0,0,0);

• Dolgu: 0 piksel üst, 0 piksel alt, 0 piksel sol
• Kenar Genişliği: 0px

Gelişmiş sekmesi altında, aşağıdakiler için Özel CSS'yi güncelleyin:

Ana Unsur için …

display:flex;
flex-direction: column;
align-items: flex-end;

Geçiş Başlığı için …

order:2;
padding-right:25px !important;

Geçiş İçeriği için …

order:1;
padding: 0px;

Bu geçiş başlığı ve geçiş içeriği, display:flex ile order özelliği kullanılarak farklı şekilde sıralanır. Artık tıklanabilir başlık içeriğin altında yer alıyor, böylece daha fazla geçiş göster gibi çalışacak.

Şimdi, geçiş modülüne aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-readmore-toggle

Bu, geçişe tıkladığınızda başlık metnini değiştirmek için ekleyeceğimiz JQuery kodumuzla modülü hedeflemek için gereklidir.

Geçiş modülünü temizledik ve geçişin doğrudan yukarıdaki tanıtım modülünün altına oturması için tüm dolguyu çıkardık. Bununla birlikte, üst tanıtım yazısında hala çok fazla alt kenar boşluğu var, bu nedenle geçiş içindeki metin önceki paragraftan çok uzakta olacak.

Geçişin üzerindeki tanıtıcı modül ayarlarını açın ve kenar boşluğunu güncelleyin:

• Alt kenar boşluğu: 10 piksel;

Şimdi, geçiş başlığı metnini tıklandığında “Daha Fazla Göster” veya “Daha Az Göster” olarak değiştirmek için gereken JQuery'yi eklemeye hazırız.

Kodu eklemek için geçiş modülünün altına bir kod modülü ekleyin.

Ardından, kodu gerekli komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki JQuery'yi yapıştırın.

(function($) {
    $(document).ready(function(){
        $('.et-readmore-toggle .et_pb_toggle_title').on('click', function(e) {
            if ($(e.target).closest('.et-readmore-toggle').hasClass('et_pb_toggle_open')) {
                $(this).text('Show More');
            } else {
                $(this).text('Show Less');
            }
        });
    });
})(jQuery);

İşte sonuç.

Bu tasarım açıkça temeldir. İhtiyaçlarınıza uygun yerleşik Divi seçeneklerini kullanarak geçişe daha fazla tasarım eklemekten çekinmeyin.

2. Yol: Herhangi Bir Divi Modülünü veya Satırını Göstermek/Gizlemek için Daha Fazla Göster Geçişi Oluşturma

Geçiş modülünü kullanan ilk geçiş daha fazla göster biraz fazla sınırlayıcı görünüyorsa, bu sonraki yöntem ilginizi çekecektir. Göster/gizle ve Divi modülünü veya hatta tüm satırı göstermek için kullanabileceğiniz özel bir gösteri daha fazla geçiş oluşturacağız!

Divi Modülü için Daha Fazla Göster Geçişi Oluşturma

İşte nasıl yapılacağı.

İlk olarak, ilk örnekte yaptığınız gibi başka bir iki sütunlu satır oluşturun.

Ardından sütun 1'e bir tanıtıcı modül ekleyin.

Tanımlama modülünün altına bir iletişim formu modülü ekleyeceğiz.

Bu iletişim formu, daha fazla göster düğmesine tıkladığımızda göstereceğimiz/gizleyeceğimiz modül olacaktır.

Bu modülü kodda hedeflemek için iletişim formunun ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-show-more-content

Ayrıca göstermek/gizlemek istediğimiz modülün ana kapsayıcısını da hedeflememiz gerekecek. Bu, gerekirse sayfaya birden fazla gösteri daha fazla geçiş örneği eklememize izin verecektir. Bu durumda, bu iletişim formu modülünün ana kapsayıcısı sütun 1'dir. Sütun 1 için ayarları açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-show-more-container

Daha fazla göster geçiş düğmesi oluşturmak için iletişim formu modülünün altına bir düğme modülü ekleyin.

Düğmeyi istediğiniz gibi tasarlayabilirsiniz. İşiniz bittiğinde, düğme modülü ayarlarını 0 açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-show-more-toggle

Ardından düğme metnini “Daha Fazla Göster” olarak değiştirin.

Şimdi şovumuzun daha fazla geçiş yapması için gereken kodu eklemeye hazırız.

Düğmenin altına, CSS ve JQuery'mizi bırakabilmemiz için bir kod modülü ekleyin.

Önce aşağıdaki CSS'yi kod kutusunun içine yapıştırın, kodu gerekli stil etiketlerine sardığınızdan emin olun:

  .et-show-more-content {
    display:none;
  }
  .et-fb .et-show-more-content {
    display:block;
  }
  .et-show-more-toggle {
    cursor:pointer;
  }

Ardından, CSS'nin altına, kodu komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki JQuery'yi yapıştırın:

(function($) {
    $(document).ready(function(){
        $('.et-show-more-toggle').on('click', function(e) {
            e.preventDefault();
            $(e.target).closest('.et-show-more-container').children('.et-show-more-content').slideToggle("300");
            $(this).toggleClass('et-show-more-toggle_active');
            if ($(this).hasClass('et-show-more-toggle_active')) {
                $(this).text('Show Less');
            } else {
                $(this).text('Show More');
            }
        });
    });
})(jQuery);

Tasarımımızı dengelemek için, aynı başka bir sütun oluşturmak için 1. sütunu çoğaltın. Boş üçüncü sütunu ve kopya ile taşınan ekstra kod modülünü sildiğinizden emin olun.

İşte sonuç.

Bir Bölme Satırı için Daha Fazla Göster Geçişi Oluşturma

Artık bir Divi Modülü için daha fazla gösteri geçişimiz olduğuna göre, tüm satırı değiştirmek için yeni bir gösteri daha fazla geçiş eklemek için bunu geliştirelim.

İlk olarak, yeni düğmemizi tutmak için yeni bir tek sütunlu satır oluşturun.

Ardından mevcut daha fazla göster düğmesi modüllerinden birini kopyalayın ve yeni satırın içine yapıştırın. Ardından düğme ayarlarını açın ve düğme hizalamasını değiştirin:

• Düğme Hizalama: Merkez

Satırı, göstermek/gizlemek istediğimiz içerik olarak hedeflemek istediğimizden, iletişim formu modülleri için daha fazla göster geçişlerini içeren satırın ayarlarını açın. Ardından satıra aşağıdaki CSS Sınıfını ekleyin:

• et-göster-daha fazla-içerik

Ayrıca satırın ana konteynerine (bölüm olan) özel bir CSS Sınıfı eklememiz gerekiyor. Bölüm ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• et-göster-daha fazla-konteyner

İşte sonuç.

Nihai sonuçlar

Yaptığımız üç gösteri daha fazla geçiş için nihai sonuçlar burada.

Son düşünceler

Bu öğreticinin amacı, Divi'de kendi şovunuzu daha fazla geçiş yapmak için birkaç yöntem göstermekti. Umarım bir eklenti kullanmak zorunda kalmamanız için bunlardan biri yolda kullanışlı olacaktır. Bu örneklere muhteşem tasarımlar eklememiş olsak da, yapılamayacağı anlamına gelmez. Bu işlevsellik yerindeyken, Divi oluşturucuyu kullanarak bu gösterileri daha fazla açma/kapama düğmesi tasarlarken bir patlama yaşayabilirsiniz. Veya önceden hazırlanmış düzenlerimizden bazılarını denemek için bile çekebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!