Özel Kodu Olan Bir Divi Sayfa Düzeni Nasıl Dışa Aktarılır

Divi Sayfa Düzenini dışa ve içe aktarabilmeyi seviyorum. Sadece birkaç tıklamayla, tüm tasarım öğelerini, başka bir proje için saklanabilen, uygun şekilde paketlenmiş bir json dosyasında bulabilirim. Peki ya sayfa düzeniniz özel harici koda (CSS veya Javascript) bağlıysa? Elbette, sayfa öğelerinin stilini ve işlevselliğini yerinde tutmak için bu kodu sayfa düzeni dışa aktarma işleminize dahil etmek isteyeceksiniz.

Bu eğitimde, sayfa düzeninize özel (harici) kodu nasıl ekleyeceğinizi göstereceğim, böylece düzeni farklı bir sitede dışa ve içe aktarırken düzen tasarımı ve işlevselliği kalacak.

Başlayalım!

Temel Fikir Açıklandı

Belirli bir Divi sayfa düzenine stil vermek için kullanılan özel CSS'yi (Tema Özelleştirici'de veya Sayfa Ayarlarında) eklediyseniz, CSS harici olarak farklı bir dosyada depolanır. Aynı şey, tema seçenekleri altında başlığınıza eklenmiş olabilecek herhangi bir javascript için de geçerlidir. Bu kod harici olarak depolandığından, Divi sayfa düzeninizle otomatik olarak dışa aktarılmaz.

Divi sayfa düzeninizle birlikte özel kodu dışa aktarmak için, kodu sayfa içeriğinizde saklamak için Divi Kod Modülünü kullanabiliriz. Bu şekilde Kod modülü içindeki kod, sayfa düzeniyle birlikte dışa aktarılacaktır. Bu, özel düzenlerinizi kendi bilgisayarınızda depolamak için yararlıdır. Bu şekilde, düzeni başka bir projeye aktardığınızda, sayfanızın özel işlevselliğine ve stiline sahip olursunuz. Bu tekniği ayrıca özel kod kullanan ayrı bölümleri, satırları veya modülleri kaydetmek ve dışa aktarmak için de kullanabilirsiniz.

Bu yöntem gerçekten yalnızca, ileride kullanmak üzere kaydetmek istediğiniz tek tek sayfalar veya bir sayfanın öğeleri için anlamlıdır. Bu, tüm site için düzenleri kaydetmenin en iyi yolu olmayacaktır. Divi'nin Tema Özelleştirici ayarlarını ve/veya Tema Seçeneklerini dışa aktarmanıza izin veren taşınabilirlik seçeneklerinden yararlanmak daha mantıklı olacaktır.

Youtube Kanalımıza Abone Olun

Divi Kodu Modüllerini Kullanarak Özel Kodu Olan Bir Divi Sayfa Düzeni Nasıl Dışa Aktarılır

Özel CSS ve Javascript kullanan bir Divi sayfa düzeniniz olduğunu ve bu özel kodu dışa aktarma (.json) dosyanıza eklemek istediğinizi varsayalım. Öncelikle Divi oluşturucuyu dışa aktarmak ve dağıtmak istediğiniz sayfayı açmanız gerekir.

Bu örnek için, Fırın Açılış Sayfası Düzenini kullanan bir sayfam var. Bir düğmeyi tıklatırken bir iletişim formunu değiştirmek için bazı özel CSS ve Javascript ekledim.

Özel CSS, gelişmiş sekmesi altındaki sayfa ayarları özel CSS'sine eklendi.

Özel Javascript, Entegrasyon sekmesi altındaki Divi Tema Seçenekleri içindeki başlık etiketine eklendi.

Bir Kod Modülü kullanarak Özel CSS'yi Sayfaya Ekleme

CSS'yi sayfa düzeni ile dışa aktarabilmek için, onu sayfa içindeki bir kod modülüne eklememiz gerekiyor. Bunu yapmak için sayfa ayarlarını açın, özel CSS'yi panoya kopyalayın.

İşte bu örnek için kopyaladığım özel CSS:

#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}

Ardından sayfanıza bir Kod modülü ekleyin. Kod modülünü istediğiniz yere ekleyebilirsiniz. Örneğin, sayfanın en üstüne eklemek isterseniz, daha sonra bulmak ve düzenlemek daha kolay olabilir. Veya kod modülünü CSS'nin hedeflediğini bildiğiniz öğenin yanına yerleştirebilirsiniz. Bu durumda, iletişim formu modülümü gizlemek ve göstermek için CSS kullanılır. Bu yüzden, kod modülünü doğrudan İletişim Formu modülünün altına ekleyeceğim.

Kod modülü ayarlarında, kopyaladığınız harici özel CSS'yi yapıştırın ve ardından kod modülü içeriğine yapıştırın. CSS'yi sayfa içeriğine eklediğiniz için, CSS'yi bir stil etiketine sarmanız gerekir. Kod Modülünde css kodunun nasıl görüneceği aşağıda açıklanmıştır:

<style>
#toggle-container {
  display:none;
}
.toggle-active {
  display: block !important;
}
</style>

Tamamlandığında, daha sonra başvurmak üzere kod modülüne bir yönetici etiketi eklemek iyi bir fikirdir. Örneğin, tel kafes görünümünde yerleşime bakarken ne olduğunu bilmeniz için ona “CSS kodu” adını verebilirsiniz.

Bundan sonra, kod modülü ayarlarını kaydedin ve bitirdiniz.

Javascript'i Kod Modülü Kullanarak Sayfaya Ekleme

Ardından, Tema Seçenekleri altındaki başlık olan özel Javascript için aynı şeyi yapmak isteyeceksiniz. Kodu panonuza kopyalayın ve ardından Divi Builder etkinken sayfanıza geri dönün. Ardından sayfanın herhangi bir yerine başka bir kod modülü ekleyin. Benimkini doğrudan İletişim formu modülünün altına koydum çünkü bu javascript'in yalnızca o öğe için geçerli olduğunu biliyorum ama istediğiniz yere ekleyebilirsiniz.

Kod Modülünü ekledikten sonra, kopyaladığınız Javascript'i içerik kutusuna yapıştırın. Javascript olduğundan kodun bir komut dosyası etiketinin içine sarıldığından emin olun.

<script>
jQuery(document).ready(function(){
 jQuery(".toggle-trigger").click(function(){
 jQuery("#toggle-container").toggleClass("toggle-active");
 });
});
</script>

Kolay başvuru için Kod Modülüne bir yönetici etiketi ("JS Kodu" gibi) verin.

Bu iki Kod modülünde sayfaya gerçek içerik ekleyecek herhangi bir kod bulunmadığından modüller sayfanın tasarımını bozmaz, dolayısıyla orada endişelenmenize gerek yoktur.

Sayfa Düzeni Nasıl Dışa Aktarılır

Artık sayfa düzenini dışa aktarmaya hazırsınız. Divi Builder'ı kullanarak bir sayfa düzenini dışa aktarmak için ayarlar menüsünü açın ve taşınabilirlik simgesini tıklayın. Taşınabilirlik açılır penceresinde bir ad (“Özel Sayfa Düzeni”) girin ve Divi Builder Düzenini Dışa Aktar düğmesini tıklayın.

Bu, json dosyasını bilgisayarınıza aktaracaktır.

Artık json dosyanız, tamamen işlevsel özel Kod ile başka bir proje için hazır.

Sayfa Düzeni Nasıl İçe Aktarılır

json dosyasını yeni bir sayfaya yüklemek için düzeni içe aktarmak istediğiniz sayfayı açın. Divi Builder'ın etkin olduğundan emin olun. Ardından tek yapmanız gereken json dosyasını sayfaya sürükleyip bırakmak. Taşınabilirlik modu otomatik olarak açılır ve mevcut içeriği değiştirme veya önceden bir yedekleme oluşturma seçeneğini belirlemenize olanak tanır. Herhangi bir içeriği değiştirmeniz gerekmediğinden, tek yapmanız gereken içe aktar düğmesine tıklamak ve anında sayfaya yüklenir.

Kodu Ait Olduğu Yere Geri Koy

Sayfa düzenini başarılı bir şekilde sayfanıza aktardıktan sonra, CSS ve JS'yi ait olduğu yere geri koymanız gerekebilir. CSS'nin yalnızca geçerli sayfayı biçimlendirmesini istiyorsanız, CSS'yi, başlamadan önceki sayfa ayarları Özel CSS'ye ekleyebilirsiniz. Ayrıca, CSS'nin sitenizdeki tüm sayfalarda bulunmasını istiyorsanız, CSS'yi Tema Özelleştirici ayarlarında Ek CSS'ye ekleyebilirsiniz.

Ayrıca Javascript Kodunuzu Tema Seçenekleri > Entegrasyon altındaki temanızın başlığına orijinal olduğu yere geri eklemek isteyebilirsiniz. Veya kodun yalnızca o sayfa için geçerli olması için kodu kod modülünün içinde bırakmayı düşünebilirsiniz.

Son düşünceler

Sayfa düzenlerini daha sonra kullanmak üzere saklarken, sayfa için gereken herhangi bir özel kodu da saklamak önemlidir. İşin püf noktası, kodu sayfanın kendisinde saklamak için Divi Kodu modülünü kullanmaktır. Ardından kod, dışa aktarılan json dosyasında kalacaktır. Ayrıca, daha sonra düzeni içe aktardığınızda bulmayı kolaylaştırmak için bu kod modüllerini etiketlemeye yardımcı olur.

Ayrıca, kendin için daha iyi iş bulmanın başka yolları olduğunun da farkındayım. Örneğin, kodunuzu ayrı dosyalar olarak kaydetmeye karar verebilirsiniz. Bir kod düzenleyici kullanarak özel kodu yapıştırabilir ve bir .css dosyası ve bir .js dosyası kaydedebilirsiniz. Daha sonra bunları json dosya(lar)ınızla birlikte bir klasörde saklayabilirsiniz.

Her neyse, umarım bu işe yarar ve düşüncelerinizi aşağıdaki yorumlarda duymayı dört gözle bekliyorum.

Şerefe!