Diğer Divi Modüllerinin İçine Divi Modülleri veya Satırları Nasıl Eklenir (Eklentisiz)

Bir süredir Divi kullanıcısıysanız, başka bir Modülün içine bir Divi Modülü (veya Satırı) yerleştirme fikri aklınızdan geçmiş olabilir. Çoğu durumda, Divi'yi nasıl ustaca kullanacağınızı biliyorsanız, bu tür şeyler gerçekten gerekli değildir. Divi Modülleri, özellikler ve yerleşik tasarım ayarlarıyla dolu güçlü öğelerdir. Ancak bazen Divi kullanarak iki modül tasarlayarak ve ardından birini diğerine ekleyerek bu özellikleri geliştirmek güzel olabilir. Bunun iyi bir örneği, geçiş düğmesine tıklandığında formun görünmesi için bir geçiş modülüne bir modül (bir iletişim formu gibi) eklemek olabilir.

Bu eğitimde, Divi Modüllerinin veya Satırlarının başka bir Divi Modülüne nasıl ekleneceğini paylaşacağız. Bunu yapmak için birkaç küçük JQuery parçacığı eklemeniz gerekir. Kod yerleştirildikten sonra, eklemek/taşımak istediğimiz öğeleri ve bunları yerleştirmek istediğimiz modülü hedeflemek için uygun CSS sınıflarını eklemek için Divi Builder'ı kullanabiliriz.

Başlayalım!

Gizlice Bakış

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

Geçiş Modülü İçinde Bir İletişim Formu

Blurb Modülü İçinde Geçiş Modülü ve Düğme Modülü (sağ sütun)

Geçiş Modülü İçinde Bir Divi Satırı

Düzeni ÜCRETSİZ İndirin

Ellerinizi bu eğitimdeki düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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!

Youtube Kanalımıza Abone Olun

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.

Akılda Tutulması Gerekenler

Bu eğitim için, bu süreçte kullanmak istediğiniz tüm modülleri şekillendirme işlemi yine de Divi Builder yerleşik ayarları kullanılarak görsel olarak yapılabilir, bu yüzden bu kısmı size bırakacağız. Modülleri/satırları başka bir modülün içine eklemek için her Divi öğesine doğru CSS Sınıflarını ve HTML'yi nasıl uygulayacağımıza daha fazla odaklanacağız.

Görsel Divi Builder'dan düzenleme yaparken değil, yalnızca canlı bir sayfada nihai sonucu görebileceğimizi unutmayın. Başka bir deyişle, modülleri Divi ile tasarlayabiliriz, ancak siz sayfanın canlı sürümünü görüntüleyene kadar oluşturucuda ayrı kalacaklar.

Yalnızca metin/html ekleme yeteneği olan bir modülün içine modüller veya satırlar ekleyebilirsiniz.

Ayrıca, daha sonra açıklayacağımız gibi, bir sütun veya bölüm içinde sahip olabileceğiniz örnek sayısı (başka bir modüle eklenen modüller veya satırlar) için belirli sınırlar vardır. Modülleri başka bir modüle eklerken, sütun başına bir "hedef" modül (eklemek istediğiniz modülleri tutacak modül) ile sınırlandırılırsınız. Ve başka bir modüle satır eklerken, bölüm başına bir "hedef" modülle sınırlandırılırsınız. Bu bir anlamda bir sınırlama olsa da, gerektiğinde sayfanızda birden çok örneğe sahip olma seçeneği sunar.

Bölüm 1: Divi Modülleri Başka Bir Modüle Nasıl Eklenir

Bu öğreticinin ilk bölümünde, Divi Modüllerini başka bir modüle nasıl ekleyeceğinizi göstereceğiz. İlk olarak, bir Geçiş Modülünün içine nasıl İletişim Modülü ekleyeceğinizi göstereceğiz. Ardından, Blurb Modülünün içine Geçiş Modülü ve Düğme Modülünün nasıl ekleneceğini göstereceğiz.

Örnek 1: Bir Geçiş Modülünün İçine İletişim Formu Modülü Ekleme

Yeni Satır Ekle

Başlamak için bölüme yeni bir tek sütunlu satır ekleyin.

Geçiş Modülü Ekle (Hedef Modül)

Sütunun içine bir geçiş modülü ekleyin.

Bu örnek için, bu Geçiş Modülünün içine hedef modülümüz olarak adlandırabileceğimiz bir modül eklemek istiyoruz. Teknik olarak, asıl hedef Geçiş Modülünün gövde içeriğinin içinde olacaktır (metin/HTML ekleyebileceğiniz yer). Hedef konumu belirlemek için, taşınabilir modülümüz (eklemek istediğimiz modül) için hedef konum olarak hizmet edecek gerekli bir CSS sınıfına sahip yeni bir div eklememiz gerekiyor.

Geçiş ayarlarının içerik sekmesi altında, gövdeye aşağıdaki HTML'yi ekleyin. HTML eklemeden önce Metin sekmesini tıkladığınızdan emin olun.

<div class="divi-module-destination"></div>

İletişim Formu Modülünü (Taşınabilir Modül) ekleyin

Ardından Toggle Modülüne eklemek istediğimiz modülü eklememiz gerekiyor. Bu örnekte, Geçiş Modülünün gövdesine bir Sözleşme Formu Modülü ekleyeceğiz. Yeni "taşınabilir" modülün hedef modülle aynı sütuna eklenmesi önemlidir.

Bunu yapmak için, doğrudan geçiş modülünün altına yeni bir iletişim formu modülü ekleyin.

İletişim Formunun (eklemek istediğiniz herhangi bir modülün) ayarları altındaki Gelişmiş sekmesine tıklayın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: bölünebilir-taşınabilir modül

Sütun Sınıfı Ekle

Ardından, her iki modülü de içeren sütuna özel bir sınıf eklememiz gerekiyor. Sütun ayarlarını açın ve aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: üst sütun

Kodu Ekle

Bu işi yapmak için gereken kod oldukça kısa ve basittir. Temel olarak, ana sütunu ("üst-sütun" sınıfına sahip olan) ile "divi-portable-module" sınıfına sahip her modülü bulmak ve bu modüllerin her birini div'in içine "sınıfı ile eklemek için JQuery kullanmak istiyoruz. divi-modül-hedef”.

Kod ayrıca bir düğme modülünü başka bir modüle eklemek için bir pasaj ve bir modüle Divi satırları eklemek için bir pasaj içerir.

Kodu eklemek için iletişim formu modülünün altına yeni bir kod modülü ekleyin.

Gerekli kodu yapıştırmadan önce, Kod kutusunun içine JS'yi HTML'ye gömmek için gereken komut dosyası etiketlerini ekleyin:

Ardından aşağıdaki kodu komut dosyası etiketleri arasına yapıştırın:

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

İşlevselliği Anlamak

Arka uçtaki Divi Builder'ın içinde modüller ayrı kalacaktır. Ancak, sonuçları ön uçtaki canlı sayfada görüntülerseniz, iletişim formunun Toggle modülüne eklendiğini göreceksiniz.

Canlı sayfadaki kodu incelerseniz, İletişim Formu Modülünün “divi-module-destination” sınıfı ile div içerisine başarıyla yerleştirildiğini görebilirsiniz.

Modüllerin Şekillendirilmesi

Daha önce de belirttiğimiz gibi, modüller Divi Builder'ın arka ucunda ayrı kalacaktır. Ancak, her birine eklediğiniz stiller yine de geçerli olacaktır. Divi Builder'ı kullanarak hem hedef modülün hem de taşınabilir modülün stillerini güncellemekten çekinmeyin.

NOT: Bazı durumlarda, hedef modülün (artık bir üst modül) stilleri takılan modüle uygulanabilir. Bu durumda, takılı modülün ayarlarını güncelleyerek bu stili geçersiz kılabilmelisiniz.

Sonuç

İşte canlı sayfayı görüntülerken nihai sonuç.

Örnek 2: Bir Blurb Modülünün İçine Geçiş Modülü Ekleme

Bir sonraki örneğimiz için, bir Blurb Modülünün içine bir Geçiş Modülü ekleyeceğiz. İşlem öncekiyle aynıdır. Kod parçacığı, sütun başına bir hedef modülün kullanımını sınırlar. Başka bir deyişle, hedef modüle eklenebilecek “divi-portable-module” sınıfına sahip birden fazla taşınabilir modüle sahip olabilirsiniz, ancak “divi-module-destination” sınıfına sahip div'in yalnızca bir örneğine sahip olabilirsiniz. kolon.

Bunu göstermek için, aynı işlemi aynı satırın başka bir sütununda başka bir modül grubuyla tekrarlayalım.

Satıra Yeni Sütun Ekle

İlk olarak, mevcut satıra yeni bir sütun ekleyin.

Sütun Sınıfı Ekle

Yeni sütuna, ilk sütunda yaptığımız gibi aşağıdaki CSS Sınıfını verin:

• CSS Sınıfı: üst sütun

Blurb Modülü Ekle (Hedef Modül)

Yeni sütunun içine, hedef modülümüz olarak hizmet edecek bir tanıtım modülü ekleyin.

Tanıtım yazısının gövdesinin içine, taşınabilir modülün/modüllerin eklenmesini istediğiniz yere (bu durumda sahte gövde metninin altına) "divi-module-destination" sınıfıyla aynı div'i içeren aşağıdaki HTML'yi yapıştırın:

<div class="divi-module-destination"></div>

Geçiş Modülü Ekle (Taşınabilir Modül)

Tanıtım yazısına bir geçiş modülü eklemek istediğimiz için tanıtım yazısı ile aynı sütunda yeni bir geçiş modülü oluşturun.

Ardından, tanıtım yazısına taşımak/eklemek istediğimiz modül olarak belirlemek için Toggle modülüne aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: bölünebilir-taşınabilir modül

Sonuç

Şimdi sonucu görmek için canlı sayfayı kontrol edin. Geçiş, artık tanıtıcı modül içinde yer alacaktır.

Örnek 3: Blurb Modülünün İçine Düğme Modülü Yerleştirme

Bu sonraki örnek için, önceki örneğimizdeki aynı tanıtım modülüne bir düğme modülü ekleyeceğiz. Normalde, diğer herhangi bir modül için, tanıtım yazısına yeni bir taşınabilir modül eklemek için aynı işlemi tekrarlarız. Ancak button modülü arka uçta biraz farklı oluşturulduğu için buton modülüne farklı bir sınıf eklememiz gerekiyor.

Düğme Modülü Ekle (Taşınabilir Modül #2)

Bunu yapmak için, tanıtım yazısına zaten eklenmiş olan geçiş modülünün altına yeni bir düğme modülü ekleyin.

Ardından, düğme modülüne aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: bölünebilir-taşınabilir düğme

Sonuç

Şimdi canlı sayfadaki sonucu kontrol edin. Blurb Modülü artık geçiş modülünü ve düğme modülünü içerir.

Ve işte, "hedef" div ile modülün içine düğme modülünü eklemek için kullanılan ilgili kod parçacığı. Bu kod parçacığıyla arasındaki temel fark, “divi-portable-button” düğme sınıfının ana öğesini (sahne arkasındaki düğme sarmalayıcı div ) hedeflememizdir.

Bölüm 2: Bir Modüle Divi Satırları Nasıl Eklenir

Bir modülün içine tüm satırı (veya satırları) eklemek istiyorsanız, işlem bir modülü başka bir modüle eklemeye çok benzer. Hedef modülü ve eklemek istediğimiz taşınabilir satırları içeren bölüme “parent-section” sınıfını eklememiz gerekiyor. Biz hedef modülüne sınıf “divi-satır-hedef” ile div eklemeniz gerekir. Ve hedef modüle eklemek istediğimiz satır(lar)a “divi-portable-row” sınıfını eklememiz gerekiyor.

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

Bölüm Ekle

İlk olarak, sayfaya yeni bir normal bölüm ekleyin.

Bölüm ayarlarının gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: üst bölüm

Hedef Modül için Satır Ekle

Hedef modülü tutmak için yeni bir tek sütunlu satır ekleyin.

Geçiş Modülü Ekle (Satır Hedef Modülü)

Bu örnek için, bir Toggle modülünün içine bir satır ekleyeceğiz. Bu nedenle, satıra yeni bir Geçiş Modülü ekleyin.

Geçiş Modülü hedef modülümüz olduğundan, geçiş için ayarları açın ve gövde içeriğine aşağıdaki HTML'yi ekleyin:

<div class="divi-row-destination"></div>

Taşınabilir Satır Oluştur

Artık hedef modül yerinde olduğuna göre, önceki satırın altına yeni bir satır ekleyin. Bu, Geçiş Modülüne ekleyeceğimiz taşınabilir satır görevi görecek.

Satırı İçerikle Doldur

Bu noktada Divi Builder'ı kullanarak satırı istediğiniz içerik/modül ile doldurabilirsiniz. Satır içindeki her şeyin, satırın içinde bulunduğu için sonunda geçiş modülüne ekleneceğini unutmayın.

Satıra Sınıf Ekle

Ardından satırın ayarlarını açın ve aşağıdaki CSS Sınıfını vererek Geçiş Modülüne eklemek istediğiniz satır olarak belirleyin:

• CSS Sınıfı: bölünebilir-taşınabilir satır

Nasıl çalışır

Bir hatırlatma olarak, arka uçta Divi Builder kullanılarak yerleşim düzenlenirken satır modülden ayrı kalacaktır. Ancak, Geçiş Modülünün içine satırı eklemek için işlevsellik mevcuttur.

Sonuç

Sonucu görmek için canlı sayfaya bakın ve geçiş modülünü açın. Şimdi tüm satırı içeriyor.

Ve işte bunu mümkün kılan ilgili kod parçacığı. Kullanılan ilgili sınıflara dikkat edin.

Modül İçine Birden Çok Satır Ekleme

Bölüm başına hedef modülün bir örneğini (yani, "divi-row-destination" sınıfına sahip div ) tuttuğunuz sürece, aynı "divi-portable-row" sınıfını vererek bu hedefe birden çok satır ekleyebilirsiniz. ”.

Örneğin, daha önce oluşturulmuş menü öğelerinin bulunduğu satırın üzerine galeri modülü olan başka bir satır ekleyebilirsiniz. Ardından satıra aynı sınıfı “divi-portable-row” verin

“divi-portable-row” sınıfına sahip her iki satır da Geçiş Modülüne eklenecektir.

Eklenti/Kısa Kod Kullanma

Benzer bir şey yapan ve daha fazla esneklik veya seçenek sağlayan bir eklenti arıyorsanız, herhangi bir Divi düzenini sayfanıza bir kısa kod kullanarak yerleştirmenize olanak tanıyan pazarımızdan Divi için Kısa Kodlar eklentisine göz atabilirsiniz. Eklenti yüklendikten sonra Divi Kitaplığınıza kaydettiğiniz her düzen için gömülebilir bir kısa kod üretecektir.

Son düşünceler

Çoğu durumda, özel bir ihtiyaç olmadıkça, diğer modüllere modül veya satır eklemeye gerek yoktur. Genellikle, bu tür bir şey yapmak zorunda kalmadan ihtiyacınız olan düzeni/tasarımı elde edebilirsiniz. Ancak, bir eklentiye başvurmak zorunda kalmadan bunu yapmanın basit bir yolunu arayanlarınız için, umarım bu çözüm işe yarayacaktır.

Ayrıca, olası tüm uygulamaları düşünün!

Yorumlarda sizden haber bekliyorum.

Şerefe!