Sorotan Plugin Divi: Pembuat Modul Divi

Divi Builder menyertakan banyak modul untuk membantu Anda menambahkan hampir semua elemen desain ke tata letak Anda, tetapi bagaimana jika Anda ingin membuat modul sendiri? Plugin pihak ketiga bernama Divi Module Builder memberi Anda kemampuan ini.

Pada artikel ini saya akan melihat plugin dan melihat apa yang dapat dilakukan dan betapa mudahnya menggunakannya. Ini membutuhkan Divi 3.0.50 atau lebih tinggi dan bekerja dengan Divi dan Extra. Ini tersedia dari situs web pengembang: DiviPlugins.com.

Memasang Pembuat Modul Divi

Setelah Anda mengaktifkan plugin, klik Halaman Aktivasi DMB . Sebagai alternatif, Anda dapat melihat layar ini dengan membuka Modul Kustom di dasbor dan klik Lisensi .

Masukkan kunci lisensi Anda dan klik Aktifkan Lisensi . Menu baru ditambahkan ke dasbor yang disebut Modul Kustom . Dalam menu ini Anda akan menemukan semua yang Anda butuhkan untuk membangun modul Anda.

Tambahkan Modul

Modul dibuat di menu dasbor di bawah Modul Kustom , Tambah Modul . Ada dua area yang akan Anda gunakan untuk membuat modul. Area di sebelah kiri adalah tempat Anda akan membuat bidang. Area di sebelah kanan adalah tempat Anda akan menambahkan kode yang akan digunakan bidang tersebut. Anda dapat membuat modul standar atau lebar penuh. Anda dapat menyimpan draf atau memublikasikannya jika sudah siap. Setelah modul diterbitkan, itu akan muncul di Divi Builder.

bidang

Modul Anda dapat memiliki bidang sebanyak yang Anda inginkan. Setiap bidang memiliki properti bidang di dalamnya. Berikut adalah tampilan lebih dekat pada masing-masing properti bidang:

Label Bidang – label yang akan ditampilkan sebagai judul bidang di tab konten modul.

Pengidentifikasi Bidang – nilai unik yang akan Anda gunakan untuk mereferensikan bidang dalam HTML. Gunakan hanya huruf kecil, angka, dan garis bawah untuk pengidentifikasi bidang.

Deskripsi Bidang – tambahkan deskripsi Anda sendiri untuk menjelaskan tujuan bidang. Ini akan ditampilkan di bawah input di tab konten modul. Bidang ini opsional tetapi saya sarankan menambahkan informasi atau contoh untuk membantu pengguna.

Field Type – menentukan jenis input yang dilihat pengguna. Pilih beberapa jenis bidang dari kotak dropdown termasuk teks, area teks, warna, gambar, sakelar Ya/Tidak, dan ikon.

Tab Desain – menambahkan kontrol font untuk bidang ini dalam Desain modul. Anda akan melihat opsi ini jika Anda memilih teks atau area teks. Anda harus mengidentifikasi elemen mana yang akan menerapkan kontrol font dengan menambahkan kelas di HTML.

Sembunyikan Bidang – memberi pengguna kontrol atas font elemen di Output HTML tanpa membiarkan mereka mengontrol konten elemen ini. Opsi ini hanya akan tersedia jika jenis bidang teks atau area teks dipilih.

Tambahkan label bidang, pengenal, deskripsi, pilih jenis bidang, aktifkan tab desain, atau pilih untuk menyembunyikan bidang. Atur ulang bidang dengan mengklik panah atas/bawah pada setiap bidang. Setiap bagian dan bidang memberikan deskripsi dan contoh.

Kode

Tambahkan HTML kustom, PHP, CSS, dan JavaScript untuk mengontrol output. Bidang HTML dapat mengambil kueri khusus dan PHP. Anda harus mengaktifkan PHP sebelum mengenali kodenya. Jika tidak, itu akan mencetak kode di layar. Baik HTML dan PHP menggunakan pengidentifikasi bidang untuk mereferensikan bidang.

Pintasan kode disediakan sebagai tombol di bawah bidang kode. Ini termasuk tag dan pengidentifikasi bidang. Tambahkan pengidentifikasi bidang Anda dan kemudian tersedia di bagian bawah area kode tempat Anda dapat mengklik untuk menambahkannya ke kode Anda. Pengidentifikasi HTML terlihat sebagai tombol oranye dan PHP terlihat hijau. Anda dapat menggunakan lebih dari yang tersedia sebagai pintasan, tetapi ini ada di sini untuk membantu mempercepat waktu pengembangan.

Membuat Modul

Berikut adalah contoh cepat membuat modul. Judul akan menjadi nama yang muncul pada modul di Divi Builder. Saya telah menambahkan label bidang, deskripsi, memilih Teks sebagai jenis bidang, dan membuat pengenal bidang.

Saya menyimpan sebagai draf sehingga pengidentifikasi akan muncul di pintasan HTML. Selanjutnya, saya memilih tag H1 dari pintasan, menempatkan kursor saya di antara tag, dan memilih label dari pintasan HTML. Setelah saya selesai saya tekan publish. Hasilnya harus berupa modul dengan bidang tempat pengguna dapat memasukkan teks. Output akan menampilkan teks sebagai header 1.

Modul sekarang muncul di Divi Builder. Saya dapat menambahkan ke halaman seperti modul Divi lainnya.

Tab Konten mencakup bidang yang saya tambahkan dengan label saya.

Modul menampilkan teks yang saya masukkan ke dalam bidang. Karena saya menambahkan HTML untuk menampilkannya sebagai H1, teks secara otomatis memiliki properti H1. Saya dapat menambahkan tab Desain untuk menyertakan lebih banyak fitur penyesuaian. Ini akan memerlukan beberapa kode untuk menargetkan bidang dengan benar.

Modul

Anda dapat melihat daftar modul di menu dasbor. Pergi ke Modul Kustom , Modul . Di sini Anda dapat mengedit atau menghapus modul Anda. Ini menunjukkan jika PHP dihidupkan atau dimatikan untuk setiap modul. Jika Anda ingin mengkloning modul, Anda harus melihatnya di Settings .

Pengaturan Modul Kustom

Menu Pengaturan menyediakan lokasi di mana Anda dapat mengelola modul Anda. Anda dapat melihat modul yang diterbitkan dan draf.

Anda dapat mengkloningnya, yang memberi Anda tempat yang baik untuk memulai pada modul yang membutuhkan banyak kode yang telah Anda gunakan di modul lain. Anda juga dapat mengedit, menonaktifkan, atau mengaktifkan PHP (yang berguna jika Anda terkunci dari editor karena kesalahan kode – saya melakukan ini dan menggunakan fitur ini untuk mengedit modul), dan mengimpor dan mengekspor modul Anda.

Tambahkan Ketergantungan

Di sini Anda dapat menambahkan dependensi CSS dan Javascript pihak ketiga. Tambahkan mereka sebagai URL eksternal atau internal. Pilih CSS atau Javascript dari kotak dropdown, tambahkan nama, dan tambahkan URL. Mereka kemudian dapat digunakan di halaman mana pun. Ini memberikan contoh penggunaan Font Awesome. Ini adalah cara terbaik untuk membuat ketergantungan di satu lokasi dan kemudian menggunakannya di mana saja.

Contoh Pembuat Modul Divi – Kisi Blog Khusus

Daripada membuat modul 'oke' sebagai contoh, saya menunjukkan contoh mengagumkan yang dibuat oleh pengembang – Kotak Blog Kustom (tersedia untuk diunduh di situs web pengembang secara gratis). Ini mencakup 3 bidang, HTML, PHP, dan CSS. Berikut adalah melihat masing-masing.

Modul Kisi Blog Khusus

Bidang 1 diberi label Kategori, menggunakan kategori sebagai pengenal, dan jenis bidang diatur ke Teks.

Bidang 2 diberi label B&W Image Effect. Pengidentifikasi adalah filter dan jenis yang diajukan adalah Ya/Tidak Toggle. Filter dibuat dalam CSS.

Bidang 3 diberi label Judul Postingan dan menggunakan post_title sebagai pengenal. Jenis bidang diatur ke Teks dan tab Desain diaktifkan. Kita akan melihat penyesuaian untuk bidang ini di modul. Bidang ini diberikan kelas H2 dalam HTML.

PHP dipilih agar dapat digunakan pada kotak kode Output HTML.

CSS khusus ditambahkan ke kotak keluaran CSS.

Berikut Javascriptnya. Anda harus memiliki pemahaman yang baik tentang HTML, PHP, CSS, dan Javascript untuk mendapatkan hasil maksimal dari plugin ini. Dengan kata lain, ini adalah plugin untuk pengembang.

Modul Kisi Blog Khusus di Divi Builder

Setelah modul diterbitkan, Anda akan menemukannya di Divi Builder.

Pengaturan yang muncul di dalam modul dan labelnya akan berbeda tergantung pada pilihan yang Anda buat. Modul ini memungkinkan Anda untuk menambahkan kategori, mengaktifkan efek hitam putih, dan menambahkan judul posting di tab Konten. Ini juga termasuk pengaturan latar belakang (yang merupakan default untuk modul).

Tab Desain diaktifkan untuk modul ini. Ini termasuk pengaturan untuk teks, teks judul posting, batas, spasi, dan animasi.

Hasil Kisi Blog Kustom

Hasilnya adalah grid blog dengan animasi hover. Saya telah mengaktifkan mode hitam dan putih sehingga gambar ditampilkan dalam warna hitam dan putih kecuali saya mengarahkan kursor ke atasnya. Saya lebih suka bentuk hover ini – untuk mengungkapkan gambar saat hover daripada mengaburkannya.

Dalam hal ini saya telah menonaktifkan mode hitam dan putih, mengubah font judul, dan menambahkan gradien latar belakang. Lebih banyak penyesuaian dapat ditambahkan dalam kode untuk mengubah tombol, menambahkan overlay, dll. Jika Anda dapat mengkodekannya, Anda dapat membuatnya melakukan hampir semua hal yang dapat Anda bayangkan.

Lisensi dan Dokumentasi

Ada tiga lisensi untuk dipilih: tunggal, tidak terbatas, dan seumur hidup. Lisensi Unlimited mencakup situs web tanpa batas dan mencakup pembaruan dan dukungan selama 1 tahun. Lisensi Situs Seumur Hidup Tidak Terbatas mencakup pembaruan dan dukungan seumur hidup.

Dokumentasi disediakan di situs web pengembang. Contoh kode disertakan bersama dengan petunjuk langkah demi langkah.

Pikiran Akhir

Divi Module Builder adalah plugin yang kuat dengan banyak potensi di tangan yang tepat. Karena itu memang membutuhkan pengetahuan kode yang baik, itu bukan untuk semua orang. Ini memberi pengembang alat yang sangat baik untuk membuat dan berbagi modul. Saya suka Anda dapat mengimpor dan mengekspor dari satu situs ke situs lainnya. Setiap situs yang menggunakan modul akan membutuhkan plugin yang diinstal. Jika Anda memiliki pengetahuan yang baik tentang kode dan tertarik untuk membuat modul Divi Anda sendiri, Divi Module Builder layak untuk dilihat.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Divi Module Builder? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui aliaksei kruhlenia / shutterstock.com