Özel kodu olan divi sayfalarının düzenini nasıl dışa aktarılır
Divi sayfasının düzenini ihraç edebildiğim ve içe aktarabildiğim için mutluyum.Sadece birkaç tıklamada, bir JSON dosyasında, diğer projeler için kaydedilebilen kolayca paketlenmiş tüm tasarım öğelerini alabilirim.Peki ya sayfanızın düzeni özel harici koda (CSS veya JavaScript) bağlıysa?Tabii ki, sabit sayfa öğelerinin stilini ve işlevselliğini korumak için kodu sayfa düzeninizi dışa aktarmaya dahil etmek istersiniz.Bu öğreticide, düzeni farklı sitelerde dışa aktarırken ve içe aktarırken düzen tasarımı ve işlevselliği hala mevcut olacak şekilde sayfanızın düzenine nasıl özel (harici) bir kod gireceğinizi göstereceğim.
Başlayalım! Temel fikirler açıklanırsa, belirli divi sayfalarının düzenini düzenlemek için kullanılan özel bir CSS (temanın veya sayfa ayarlarının ayarlanmasında) eklediyseniz, CSS harici olarak farklı dosyalarda saklanır. Aynı şey, tema seçeneği altında başlığınıza eklenmiş olabilecek herhangi bir JavaScript için de geçerlidir. Bu kod harici olarak depolandığından, bu kod Divi sayfanızın düzeni ile otomatik olarak dışa aktarılmayacaktır. Özel kodu Divi sayfa düzeninizle birlikte dışa aktarmak için, sayfa içeriğinize kodu kaydetmek için Divi Kod modülünü kullanabiliriz. Bu şekilde kod modülündeki kod sayfa düzeni ile dışa aktarılacaktır. Bu, özel düzeninizi kendi bilgisayarınıza saklamak için kullanışlıdır. Bu şekilde, düzeni diğer projelerde her içe aktardığınızda, özel işlevselliğe ve sayfa stilinize sahip olacaksınız. Bu tekniği, özel kodları da kullanan bölümleri, satırları veya ayrı modülleri depolamak ve dışa aktarmak için de kullanabilirsiniz.
Bu yöntem, gelecekte kullanmak için kaydetmek istediğiniz her sayfa veya sayfa öğesi için gerçekten mantıklıdır. Bu, tüm siteler için düzen depolamanın en iyi yolu değildir. Tema ayar ayarlarını ve/veya tema seçeneklerini dışa aktarmanızı sağlayan Divi Taşınabilirlik seçeneğinden yararlanmak daha makul olacaktır. YouTube kanalımıza abone olun Divi kodu modülünü kullanarak özel bir kodu olan Divi sayfa düzenini nasıl dışa aktaracağınız, özel CSS ve JavaScript kullanan bir Divi sayfası düzeniniz olduğunu ve özel kodu dışa aktarma dosyanıza (. JSON). İlk olarak, dışa aktarmak istediğiniz sayfayı açmanız ve bir divi üreticisi kullanmanız gerekir. Bu örnek için Landing Fırın sayfası düzenini kullanarak bir sayfam var. Düğmeyi tıklarken temas formunu etkinleştirmek için birkaç CSS ve JavaScript ekledim.
Gelişmiş sekmesinin altındaki özel CSS sayfa ayarlarına özel CSS eklenmiştir.
}
.Toggle-aktif {
Ekran: Blok! Önemli;
}
Ardından kod modülünü sayfanıza ekleyin. İstediğiniz yerde bir kod modülü ekleyebilirsiniz. Örneğin, sayfanın en üstüne eklemek istiyorsanız, daha sonra bulmak ve düzenlemek daha kolay olabilir. Veya kod modülünü hedef CSS olarak bildiğiniz öğelerin yanına yerleştirebilirsiniz. Bu durumda, CSS kontak form modülümü gizlemek ve görüntülemek için kullanılır. Bu nedenle, Kontak formu modülünün altına bir doğrudan kod modülü ekleyeceğim. Kod modülünü ayarlarken, kopyaladığınız harici özel CSS’yi yapıştırın ve ardından kod modülü içeriğine yapıştırın. Sayfa içeriğine CSS eklediğiniz için, CSS’yi stil etiketine sarmanız gerekir. Kod modülündeki CSS kodu ekranı:
#Toggle-Container { Görüntü yok;
}
.Toggle-aktif {
Ekran: Blok! Önemli;
}
Bittiğinde, daha sonraki referanslar için Yönetici etiketini kod modülüne eklemelisiniz. Örneğin, ona “CSS kodu” adını verebilirsiniz, böylece çerçeve görüntü ekranındaki düzeni gördüğünüzde ne olduğunu bilirsiniz.
Bundan sonra, kod modülü ayarlarını kaydedin ve tamamlayın.
Bir sonraki kod modülünü kullanarak sayfaya JavaScript ekleyin, aynı şeyi tema seçeneğinin altındaki bir başlık olan özel JavaScript için yapmak isteyeceksiniz. Kodu panonuza kopyalayın ve ardından etkin bir Divi oluşturucu ile sayfanıza geri dönün. Ardından sayfada herhangi bir yere başka bir kod modülü ekleyin. Benimkini doğrudan iletişim formu modülünün altına koydum çünkü JavaScript’in yalnızca bu öğe için geçerli olduğunu biliyorum, ancak her yere ekleyebilirsiniz. Kod modülünü ekledikten sonra, kopyaladığınız JavaScript’i içerik kutusuna yapıştırın. Kodun komut dosyası etiketine sarıldığından emin olun çünkü bu JavaScript.
JQuery (belge) .Ready (function () {jQuery (“. Toggle-tetik”). Click (function () {
JQuery (“#Toggle-Container”). Toggleclass (“Toggle-aktif”);
});
});
Kolay referanslar için Yönetici Etiket Kodu Modülünü (“JS Kodu” gibi) sağlayın.
Bu iki kod modülünün sayfaya gerçek içerik ekleyecek herhangi bir kodu olmadığından, modül sayfa tasarımına zarar vermez, bu nedenle orada endişelenmenize gerek yoktur. Sayfa Düzeni Nasıl Dışa Aktarılır Şimdi sayfa düzenini dışa aktarmaya hazırsınız. Divi Builder’ı kullanarak 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 penceresine, adını (“Özel Sayfalar Düzeni”) girin ve Divi üreticisinin düzeninin dışa aktar düğmesini tıklayın.
Bu, JSON dosyalarını bilgisayarınıza dışa aktarır. Artık JSON dosyanız, tam işlevli özel bir koda sahip diğer projeler için hazır. JSON dosyalarını yeni bir sayfaya yüklemek için sayfa düzeni nasıl içe aktarılır, düzeni içe aktarmak istediğiniz sayfayı açın. Divi Builder’ın etkin olduğundan emin olun. Tek yapmanız gereken JSON dosyasını sayfaya sürükleyip bırakmak. Taşınabilirlik sermayesi görünür, otomatik olarak mevcut içeriği değiştirme veya önceki rezervler yapma seçeneğini seçmenize olanak tanır. Herhangi bir içeriği değiştirmenize gerek olmadığından, tek yapmanız gereken İçe Aktar düğmesine tıklamaktır ve içerik doğrudan sayfaya yüklenir. Sayfa düzenini sayfanıza başarıyla aktardıktan sonra kodu yerine geri koyun. CSS ve JS’yi yerine iade etmeniz gerekebilir. CSS’nin yalnızca geçerli sayfaya bir stil vermesini istiyorsanız, başlamadan önce CSS özel sayfa ayarlarına CSS ekleyebilirsiniz. Ve, sitenizin her yerinde tüm sayfalarda CSS’nin mevcut olmasını istiyorsanız, tema ayar ayarlarında ek CSS’ye CSS ekleyebilirsiniz. Ayrıca, JavaScript kodunuzu tema seçeneği> orijinal yerin entegrasyonu altında tema başlığınıza geri eklemek isteyebilirsiniz. Veya kodun yalnızca o sayfa için geçerli olması için kodu kod modülünde bırakmayı düşünebilirsiniz.
