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ü ekleyebilmeniz için önce Divi Builder'a erişmeniz gerekir. Bir kere Divi teması senin üzerine kurulu Site Web, 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 göz attığınızda Site Web WordPress kontrol panelinize giriş yaptıysanız yukarı akış.
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.
Metin kutusunda içindekiler, kod pasajı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
sekmesinde içindekilermodülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Kontrol eden her şey ce qui modülünüzde beliren her zaman bu sekmede olacaktır.
içindekiler
Burada, sayfada görüntülemek istediğiniz herhangi bir HTML, CSS veya JavaScript kodunu geçerli konuma yerleştirebilirsiniz. Yalnızca editörlerin ve yöneticilerin filtrelenmemiş HTML yayınlamasına izin verilir; bu, bir yazar veya katkıda bulunan tarafından kullanıldığında kodun kurstan 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ü sarmalayıcısı olmadan üst sütunda 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 kullanılacak 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 sizin için kullanılabilir. Divi teması Alt öğenizde veya sayfanıza veya sayfanıza eklediğiniz özel CSS'de Site Web Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak.
Ö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.
