Divi Builder'da kod modülü nasıl kullanılır?

Kod Modülü, sayfanıza eklenti kısa kodları veya statik HTML kodu gibi kod eklemenizi sağlayan boş bir tuvaldir. Üçüncü taraf bir eklenti, örneğin bir üçüncü taraf kaydırıcı eklentisi kullanmak istiyorsanız, eklenti kısa kodunu standart veya tam genişlikte bir kod modülüne yerleştirerek öğeyi serbest bırakabilirsiniz.

Sayfanıza kod modülü nasıl eklenir

Sayfanıza bir kod modülü eklemeden önce Divi Builder'a erişmeniz gerekir. Divi teması web sitenize yüklendikten sonra bir düğme göreceksiniz. Divi Builder'ı Kullan Her yeni sayfa oluşturduğunuzda yayıncının üstünde.

Bu düğmeye tıklayarak, tüm Divi Builder modüllerine erişmenizi sağlayan Divi Builder'ı etkinleştirirsiniz. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için.

Düğmesine de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza giriş yaptıysanız, yukarı akış web sitenize göz atarken.

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın.

 

Modül listesinde kod modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "kod" kelimesini de yazabilir ve ardından kod modülünü otomatik olarak bulup eklemek için enter tuşuna basabilirsiniz! Modül eklendiğinde, modül seçeneklerinin listesi ile karşılaşacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş .

İçeriği tek bir sayfada canlandırmak için sıkıcı bir stil sayfası ekleyerek durumu kullanın

Bu örnekte, sayfa öğelerine animasyon efektleri eklemek için Animate.css'yi içe aktarmak için bir bağlantı komut dosyası ekleyeceğim. Animate.css dosyası çok fazla kod içerdiğinden, dosyayı yalnızca ihtiyacım olan sayfaya yüklemek mantıklıdır.

Sadece normal bir bölüm ve tam genişlikte bir satır (1 sütun) ekleyin ve kod modülünü ekleyin.

İçerik metin kutusuna kod parçacığını ekleyin.

Yapmanız gereken tek şey, sayfanızda CSS sınıf sayfanızın herhangi bir öğesini canlandırmak için birkaç CSS sınıfı eklemektir. Bu örnekte, sayfa yüklendiğinde düğmeyi zıplatacağım.

Düğme modülü ayarlarında, Gelişmiş sekmesinde, CSS sınıfı metin kutusuna "animasyonlu" ve "geri dönen" iki sınıfı girin.

Şimdi, sayfa yüklendiğinde düğme zıplıyor.

İpucu: Bazen satır sonu içeren kod eklemek kodun çalışmasının durmasına neden olur. Kodunuzu bir metin düzenleyicide oluşturmak ve kod modülüne yapıştırmak daha iyidir.

Kod içeriği seçenekleri

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede olacaktır.

içindekiler

Sayfada geçerli konumda görüntülemek istediğiniz herhangi bir HTML, CSS veya JavaScript kodunu oraya koyabilirsiniz. Yalnızca editörlerin ve yöneticilerin filtrelenmemiş HTML göndermesine izin verilir, bu da kodun bir yazar veya katkıda bulunan tarafından kullanılması halinde modülden kaldırılabileceği anlamına gelir. Modüle kısa kodlar da yerleştirebilirsiniz. Bu kurs kodları (kısa kodlar), herhangi bir ek Divi modülü sarıcısı olmadan üst sütunun içinde görüntülenecektir.

Yönetim Etiketi

Bu, kolay tanımlama için jeneratördeki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullanırken, bu etiketler Divi Builder arayüzünün modül bloğunda görünecektir.

Kod tasarım seçenekleri

Tasarım sekmesinde yazı tipleri, renkler, boyut ve boşluk gibi tüm modül stil seçeneklerini bulacaksınız. Bu sekme, modülünüzün görünümünü değiştirmenize olanak tanır. Her Divi modülünde, hemen hemen her şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

Maksimum genişlik

Buraya girilen herhangi bir değer, kod modülünde işlenen herhangi bir içeriğin genişliğini ayar değeri ile sınırlar. Örneğin, giriş alanına% 50 girilmesi, kod modülünün içeriğini, onu içeren sütunun% 50'sine indirecektir.

Kod Gelişmiş Seçenekler Kodu

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

CSS Kimliği

Bu modül için kullanımı kolay bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi Alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS'de kullanılabilir.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili öğesine de uygulanabilir. Özel CSS bölümünde, her bir öğeye doğrudan CSS ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketleriyle gömülüdür. Yani CSS kurallarını noktalı virgülle ayırarak girmeniz yeterlidir.

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modüller kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Bu eğitim için bu kadar.