Divi Eklentisi Vurgusu: Divi Modül Oluşturucu

Divi Builder, mizanpajlarınıza pratik olarak herhangi bir tasarım öğesi eklemenize yardımcı olacak birçok modül içerir, ancak ya kendi modüllerinizi oluşturmak istiyorsanız? Divi Module Builder adlı bir üçüncü taraf eklentisi size bu yeteneği sağlar.

Bu yazıda eklentiye bir göz atacağım ve neler yapabileceğini ve kullanımının ne kadar kolay olduğunu göreceğim. Divi 3.0.50 veya üstü gerektirir ve hem Divi hem de Extra ile çalışır. Geliştiricinin web sitesinden edinilebilir: DiviPlugins.com.

Divi Module Builder'ı Yükleme

Eklentiyi etkinleştirdikten sonra DMB Aktivasyon Sayfası'na tıklayın. Alternatif olarak, gösterge panelindeki Özel Modüller'e gidip Lisans'ı tıklayarak bu ekranı görebilirsiniz.

Lisans anahtarınızı girin ve Lisansı Etkinleştir'i tıklayın. Kontrol paneline Özel Modüller adlı yeni bir menü eklendi. Bu menüde modüllerinizi oluşturmak için ihtiyacınız olan her şeyi bulacaksınız.

Modül Ekle

Modüller, Kontrol Paneli menüsünde Özel Modüller , Modül Ekle altında oluşturulur. Modülü oluşturmak için kullanacağınız iki alan vardır. Soldaki alan, alanları oluşturacağınız yerdir. Sağdaki alan, alanların kullanacağı kodu ekleyeceğiniz yerdir. Modülü standart veya tam genişlikte yapabilirsiniz. Hazır olduğunuzda taslağı kaydedebilir veya yayınlayabilirsiniz. Modül yayınlandıktan sonra Divi Builder'da görünecektir.

Alanlar

Modülünüzde istediğiniz kadar alan olabilir. Her alanın içinde alan özellikleri vardır. İşte alanın özelliklerinin her birine daha yakından bir bakış:

Alan Etiketi – modülün içerik sekmesinde alanın başlığı olarak görüntülenecek etiket.

Alan Tanımlayıcı – HTML'de alana referans vermek için kullanacağınız benzersiz bir değer. Alan tanımlayıcıları için yalnızca küçük harf, sayı ve alt çizgi kullanın.

Alan Açıklaması – alanın amacını açıklamak için kendi açıklamanızı ekleyin. Bu, modülün içerik sekmesindeki girişin altında görüntülenecektir. Bu alan isteğe bağlıdır ancak kullanıcılara yardımcı olmak için bilgi veya örnekler eklemenizi öneririm.

Alan Türü – kullanıcının gördüğü giriş türünü belirler. Bir metin, metin alanı, renk, resim, Evet/Hayır geçişi ve simge dahil olmak üzere açılır kutudan birkaç alan türü seçin.

Tasarım Sekmesi – modülün Tasarımında bu alan için yazı tipi kontrolleri ekler. Metin veya metin alanı seçerseniz bu seçeneği görürsünüz. HTML'ye bir sınıf ekleyerek yazı tipi denetimlerini hangi öğeye uygulayacağınızı belirlemeniz gerekir.

Alanı Gizle – kullanıcılara, bu öğenin içeriğini kontrol etmelerine izin vermeden HTML Çıktısındaki bir öğenin yazı tipi üzerinde kontrol sağlar. Bu seçenek yalnızca bir metin veya metin alanı Alan Türü seçildiğinde kullanılabilir hale gelir.

Alan etiketinizi, tanımlayıcınızı, açıklamanızı ekleyin, alan türünü seçin, tasarım sekmesini etkinleştirin veya alanı gizlemeyi seçin. Her alandaki yukarı/aşağı oklara tıklayarak alanları yeniden düzenleyin. Her bölüm ve alan bir açıklama ve örnek sağlar.

kod

Çıktıyı kontrol etmek için özel HTML, PHP, CSS ve JavaScript ekleyin. HTML alanları özel sorgular ve PHP alabilir. Kodu tanıması için PHP'yi etkinleştirmeniz gerekir. Aksi takdirde kodu ekrana yazdıracaktır. Hem HTML hem de PHP, alanlara başvurmak için alan tanımlayıcılarını kullanır.

Kod kısayolları, kod alanlarının altında düğmeler olarak sağlanır. Buna etiketler ve alan tanımlayıcıları dahildir. Alan tanımlayıcılarınızı ekleyin, ardından bunları kodunuza eklemek için tıklayabileceğiniz kod alanının alt kısmında bulunur. HTML tanımlayıcıları turuncu düğmeler, PHP ise yeşil olarak görülür. Kısayol olarak mevcut olandan daha fazlasını kullanabilirsiniz, ancak bunlar geliştirme süresini hızlandırmaya yardımcı olmak için buradalar.

Modül Oluşturma

İşte bir modül oluşturmanın hızlı bir örneği. Başlık, Divi Builder'daki modülde görünen ad olacaktır. Alan etiketini ve açıklamasını ekledim, alan türü olarak Metin'i seçtim ve bir alan tanımlayıcısı oluşturdum.

Tanımlayıcının HTML kısayollarında görünmesi için taslak olarak kaydettim. Daha sonra kısayollardan H1 etiketini seçtim, imleci etiketlerin arasına yerleştirdim ve HTML kısayollarından etiketi seçtim. Bitirdikten sonra yayınla'ya bastım. Sonuç, kullanıcıların metin girebileceği bir alana sahip bir modül olmalıdır. Çıktı, metni başlık 1 olarak görüntüler.

Modül şimdi Divi Builder'da görünür. Herhangi bir Divi modülü gibi sayfaya ekleme yapabilirim.

İçerik sekmesi, etiketlerimle eklediğim alanları içerir.

Modül, alana girdiğim metni görüntüler. H1 olarak görüntülemek için HTML eklediğimden, metin otomatik olarak bir H1 özelliğine sahiptir. Daha fazla özelleştirme özelliği eklemek için Tasarım sekmesini ekleyebilirim. Bu, alanı doğru şekilde hedeflemek için bazı kodlar gerektirecektir.

Modüller

Kontrol paneli menüsünde modüllerin listesini görebilirsiniz. Özel Modüller , Modüller'e gidin . Burada modüllerinizi düzenleyebilir veya silebilirsiniz. Her modül için PHP'nin açık veya kapalı olduğunu gösterir. Bir modülü klonlamak istiyorsanız, onları Ayarlar'da görüntülemeniz gerekir.

Özel Modül Ayarları

Ayarlar menüsü, modüllerinizi yönetebileceğiniz bir konum sağlar. Hem yayınlanan hem de taslak modülleri görüntüleyebilirsiniz.

Bunları klonlayabilirsiniz, bu da size başka bir modülde kullandığınız çok fazla kod gerektiren bir modülde başlamak için iyi bir yer sağlar. Ayrıca PHP'yi düzenleyebilir, devre dışı bırakabilir veya etkinleştirebilirsiniz (bir kod hatası nedeniyle düzenleyiciye erişiminiz yoksa faydalıdır – bunu yaptım ve modülü düzenlemek için bu özelliği kullandım) ve modüllerinizi içe ve dışa aktarabilirsiniz.

Bağımlılık Ekle

Burada üçüncü taraf CSS ve Javascript bağımlılıkları ekleyebilirsiniz. Bunları harici veya dahili URL'ler olarak ekleyin. Açılır kutudan CSS veya Javascript'i seçin, adı ekleyin ve URL'yi ekleyin. Daha sonra herhangi bir sayfada kullanılabilirler. Font Awesome kullanımına bir örnek verir. Bu, tek bir yerde bağımlılık oluşturmanın ve ardından bunu herhangi bir yerde kullanmanın mükemmel bir yoludur.

Divi Modül Oluşturucu Örneği – Özel Blog Izgarası

Örnek olarak bir 'tamam' modülü oluşturmak yerine, geliştiricinin oluşturduğu harika örneği gösteriyorum – Özel Blog Izgarası (geliştiricinin web sitesinden ücretsiz olarak indirilebilir). HTML, PHP ve CSS olmak üzere 3 alan içerir. İşte her birine bir bakış.

Özel Blog Izgara Modülü

Alan 1 Kategoriler olarak etiketlenir, tanımlayıcı olarak kategorileri kullanır ve alan türü Metin olarak ayarlanır.

Alan 2, S&B Görüntü Efekti olarak etiketlenmiştir. Tanımlayıcı filtredir ve dosyalanan tür Evet/Hayır Geçişidir. Filtre CSS'de oluşturulur.

Alan 3, Gönderi Başlığı olarak etiketlenir ve tanımlayıcı olarak post_title kullanır. Alan türü Metin olarak ayarlanmıştır ve Tasarım sekmesi etkindir. Modülde bu alan için özelleştirmeler göreceğiz. Bu alana HTML'de bir H2 sınıfı verilir.

PHP, HTML Çıktı kodu kutusunda kullanılabilecek şekilde seçilmiştir.

CSS çıktı kutusuna özel CSS eklenir.

İşte Javascript. Bu eklentiden en iyi şekilde yararlanmak için iyi bir HTML, PHP, CSS ve Javascript bilgisine sahip olmanız gerekir. Başka bir deyişle, bu geliştiriciler için bir eklentidir.

Divi Builder'daki Özel Blog Izgara Modülü

Modül yayınlandıktan sonra onu Divi Builder'da bulacaksınız.

Modül içinde görünen ayarlar ve etiketleri, yaptığınız seçimlere göre farklılık gösterecektir. Bu modül, kategoriler eklemenize, siyah beyaz efekti etkinleştirmenize ve İçerik sekmesinde bir yazı başlığı eklemenize olanak tanır. Ayrıca arka plan ayarlarını da içerir (modüller için varsayılandır).

Bu modül için Tasarım sekmesi etkinleştirilmiştir. Metin, yazı başlığı metni, kenarlık, boşluk ve animasyon için ayarları içerir.

Özel Blog Tablosu Sonuçları

Sonuç, vurgulu animasyonlu bir blog ızgarasıdır. Siyah beyaz modunu etkinleştirdim, böylece üzerlerine gelmediğim sürece görüntüler siyah beyaz olarak görüntülenir. Bu vurgulu biçimini tercih ederim – üzerine gelindiğinde görüntüyü gizlemek yerine ortaya çıkarmak için.

Bunda siyah beyaz modunu devre dışı bıraktım, başlık yazı tipini değiştirdim ve bir arka plan gradyanı ekledim. Düğmeyi değiştirmek, bindirmeler eklemek vb. için koda daha fazla ayar eklenebilir. Kodlayabiliyorsanız, neredeyse hayal edebileceğiniz her şeyi yapmasını sağlayabilirsiniz.

Lisans ve Belgeler

Seçilebilecek üç lisans vardır: tek, sınırsız ve ömür boyu. Sınırsız lisans, sınırsız web sitesini kapsar ve 1 yıllık güncelleme ve destek içerir. Ömür Boyu Sınırsız Site lisansı, ömür boyu güncellemeleri ve desteği içerir.

Belgeler geliştiricinin web sitesinde sağlanır. Örnek kod, adım adım talimatlarla birlikte verilmiştir.

Son düşünceler

Divi Module Builder, doğru ellerde çok fazla potansiyele sahip güçlü bir eklentidir. İyi bir kod bilgisi gerektirdiğinden herkes için değildir. Bu, geliştiricilere modüller oluşturmak ve paylaşmak için mükemmel bir araç sağlar. Bir siteden diğerine içe ve dışa aktarabilmenizi seviyorum. Modülü kullanan her sitenin kurulu eklentiye ihtiyacı olacaktır. İyi bir kod bilgisine sahipseniz ve kendi Divi modüllerinizi oluşturmakla ilgileniyorsanız, Divi Module Builder bir göz atmaya değer.

Senden duymak istiyoruz. Divi Module Builder'ı denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Aliaksei kruhlenia / Shutterstock.com aracılığıyla Öne Çıkan Görsel