Ana İçeriğe Geç

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

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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.

düğme divi oluşturucu modülü blog divi

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.

Divi kod modülünü takı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.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

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

Divi oluşturucu kodu

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

Animate.css snippet'ini 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.

Bir css animate sınıfı ekle

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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

Divi oluşturucu düğmesinin animasyonu

İ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.

Divi oluşturucu kod parametreleriiç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.

Seçenek tasarım modülü kod oluşturucuMaksimum 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.

Bölüm ilerletme modülü kodu divi oluşturucu

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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer