Modul Kode adalah kanvas kosong yang memungkinkan Anda menambahkan kode ke halaman Anda, seperti kode pendek plugin atau kode HTML statis. Jika Anda ingin menggunakan plugin pihak ketiga, misalnya plugin slider pihak ketiga, Anda cukup menempatkan kode pendek plugin dalam modul kode standar atau lebar-penuh untuk menampilkan elemen tanpa batas.

Bagaimana cara menambahkan modul kode ke halaman Anda

Sebelum Anda dapat menambahkan modul kode ke halaman Anda, Anda harus mengakses Divi Builder terlebih dahulu. sekali Tema Divi diinstal pada Anda situs jaringan, Anda akan melihat tombol Gunakan Divi Builder di atas penerbit setiap kali Anda membuat halaman baru.

Dengan mengklik tombol ini, Anda mengaktifkan Divi Builder, yang memberi Anda akses ke semua modul Divi Builder. Kemudian klik tombolnya Gunakan Visual Builder untuk memulai generator dalam mode visual.

Anda juga dapat mengklik tombol Gunakan Visual Builder saat Anda menelusuri situs jaringan upstream jika Anda masuk ke dasbor WordPress Anda.

tombol divi builder divi modul blog

Setelah masuk ke Visual Builder, Anda dapat mengklik tombol plus abu-abu untuk menambahkan modul baru ke halaman Anda. Modul baru hanya dapat ditambahkan di dalam baris. Jika Anda memulai halaman baru, ingatlah untuk menambahkan baris ke halaman Anda terlebih dahulu.

Masukkan modul kode divi

 

Temukan modul kode dalam daftar modul dan klik di atasnya untuk menambahkannya ke halaman Anda. Daftar modul dapat dicari, yang berarti Anda juga dapat mengetik kata "kode" lalu tekan enter untuk menemukan dan menambahkan modul kode secara otomatis! Setelah modul ditambahkan, Anda akan disambut dengan daftar opsi modul. Opsi-opsi ini dipisahkan menjadi tiga kelompok utama: Isi , Pembuahan et maju .

Gunakan kasus dengan menambahkan stylesheet tumpul untuk menganimasikan konten di halaman individual

Dalam contoh ini, saya akan menambahkan skrip link untuk mengimpor Animate.css untuk menambahkan efek animasi ke elemen halaman. Karena file Animate.css berisi banyak kode, masuk akal untuk memuatnya hanya pada halaman yang saya butuhkan.

Cukup tambahkan bagian reguler dan garis lebar penuh (kolom 1) dan tambahkan modul kode.

Kode pembangun Divi

Di kotak teks isi, tambahkan cuplikan kode.

Tambahkan cuplikan animate.css

Yang harus Anda lakukan adalah menambahkan beberapa kelas CSS untuk menganimasikan elemen apa pun dari halaman kelas CSS di halaman Anda. Dalam contoh ini, saya akan memantulkan tombol saat halaman dimuat.

Dalam pengaturan modul Tombol, pada tab Lanjutan, masukkan dua kelas "animasi" dan "pantulan" di kotak teks kelas CSS.

Tambahkan kelas beranimasi css

Sekarang tombol memantul ketika halaman dimuat.

Animasi tombol pembuat divi

Tip: Terkadang menambahkan kode dengan jeda baris akan menyebabkan kode berhenti bekerja. Lebih baik membuat kode Anda di editor teks dan menempelkannya ke modul kode.

Opsi konten kode

Di tab dari isi, Anda akan menemukan semua elemen konten modul, seperti teks, gambar, dan ikon. Segala sesuatu yang mengontrol apa? muncul di modul Anda akan selalu ada di tab ini.

Parameter kode pembangun DiviIsi

Di sini Anda dapat menempatkan kode HTML, CSS, atau JavaScript apa pun yang ingin Anda tampilkan pada halaman di lokasi saat ini. Hanya editor dan admin yang diperbolehkan memposting HTML tanpa filter, yang berarti kode dapat dihapus dari kursus jika digunakan oleh penulis atau kontributor. Anda juga dapat menempatkan kode pendek dalam modul. Kode kursus (shortcode) ini akan ditampilkan di dalam kolom induk tanpa pembungkus modul Divi tambahan.

Label Administrasi

Ini akan mengubah label modul di generator untuk memudahkan identifikasi. Saat menggunakan tampilan WireFrame di Visual Builder, label ini akan muncul di blok modul antarmuka Divi Builder.

Pilihan desain kode

Di tab Desain, Anda akan menemukan semua opsi gaya modul, seperti font, warna, ukuran, dan spasi. Tab ini memungkinkan Anda untuk mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang pengaturan desain yang dapat Anda gunakan untuk menyesuaikan apa saja.

Modul desain opsi pembuat kode diviLebar maksimum

Nilai apa pun yang dimasukkan di sini membatasi lebar konten apa pun yang dirender dalam modul kode ke nilai yang ditetapkan. Misalnya, memasukkan 50% di kolom input akan mengurangi konten modul kode menjadi 50% dari kolom yang berisi itu.

Kode Opsi Tingkat Lanjut

Pada tab Advanced, Anda akan menemukan opsi yang mungkin berguna bagi desainer web yang lebih berpengalaman, seperti atribut CSS dan HTML khusus. Di sini Anda dapat menerapkan CSS khusus ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas dan ID CSS khusus ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css tema anak Anda.

Bagian muka modul kode divi builder

ID CSS

Masukkan ID CSS yang mudah digunakan untuk modul ini. ID dapat digunakan untuk membuat gaya CSS kustom atau untuk menautkan ke bagian tertentu halaman Anda.

Kelas CSS

Masukkan kelas CSS opsional yang akan digunakan untuk modul ini. Kelas CSS dapat digunakan untuk membuat gaya CSS khusus. Anda dapat menambahkan beberapa kelas, dipisahkan oleh spasi. Kelas-kelas ini dapat digunakan di Tema Divi Anak atau di CSS khusus yang Anda tambahkan ke halaman atau halaman Anda situs jaringan menggunakan opsi tema Divi atau pengaturan halaman Divi Builder.

CSS khusus

CSS khusus juga dapat diterapkan ke modul dan salah satu elemen internal modul. Di bagian CSS Khusus, Anda akan menemukan bidang teks tempat Anda dapat menambahkan CSS langsung ke setiap elemen. Entri CSS dalam pengaturan ini sudah disematkan dengan tag gaya. Jadi Anda hanya perlu memasukkan aturan CSS yang dipisahkan oleh titik koma.

jarak penglihatan

Opsi ini memungkinkan Anda untuk mengontrol perangkat tempat modul Anda muncul. Anda dapat memilih untuk menonaktifkan modul Anda pada tablet, smartphone atau desktop satu per satu. Ini berguna jika Anda ingin menggunakan mod yang berbeda pada perangkat yang berbeda atau jika Anda ingin menyederhanakan desain seluler dengan menghilangkan elemen tertentu dari halaman.

Itu saja untuk tutorial ini.