Loncat ke Konten Utama

Cara menggunakan modul kode di Divi Builder

Divi: tema WordPress termudah untuk digunakan

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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

Cara menambahkan modul kode ke halaman Anda

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

Mengklik tombol ini 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 tombolnya Gunakan Visual Builder saat Anda menjelajahi situs web hulu jika Anda masuk ke dasbor WordPress Anda.

tombol divi builder divi modul blog

Setelah masuk dalam 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, jangan lupa untuk menambahkan baris ke halaman Anda terlebih dahulu.

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

Gunakan huruf besar dengan menambahkan lembar gaya membosankan untuk menganimasikan konten pada setiap halaman

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

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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

Di kotak teks konten, tambahkan cuplikan kode.

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

Dalam pengaturan modul Tombol, pada tab Lanjut, masukkan dua kelas "animasi" dan "pentalan" di kotak teks Kelas CSS.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Sekarang tombol memantul ketika halaman dimuat.

Kiat: Terkadang menambahkan kode dengan jeda baris akan mencegah kode berfungsi. Yang terbaik adalah membuat kode Anda di editor teks dan tempelkan ke modul kode.

Opsi konten kode

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

Isi

Anda dapat menempatkan kode HTML, CSS, atau JavaScript apa pun yang ingin Anda tampilkan pada halaman di lokasi saat ini. Hanya editor dan administrator yang diizinkan untuk mempublikasikan HTML tanpa filter, yang berarti kode tersebut dapat dihapus dari modul jika digunakan oleh penulis atau kolaborator. Anda juga dapat menempatkan kode pendek di modul. Shortcode ini akan ditampilkan di dalam kolom induk tanpa pembungkus modul Divi tambahan.

Label Administrasi

Ini akan mengubah tag 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 jarak. Tab ini memungkinkan Anda mengubah tampilan modul Anda. Setiap modul Divi memiliki daftar panjang parameter desain yang dapat Anda gunakan untuk mengubah apa saja.

Lebar 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 isi modul kode ke 50% dari kolom yang memuatnya.

Kode Opsi Lanjutan Lanjutan

Di tab Lanjutan, Anda akan menemukan opsi yang dapat dimanfaatkan oleh perancang web yang lebih berpengalaman, seperti atribut CSS khusus dan HTML. Di sini Anda dapat menerapkan CSS kustom ke salah satu dari banyak elemen modul. Anda juga dapat menerapkan kelas khusus dan ID CSS ke modul, yang dapat digunakan untuk menyesuaikan modul dalam file style.css dari tema anak Anda.

ID CSS

Masukkan ID CSS yang mudah digunakan untuk modul ini. Pengidentifikasi dapat digunakan untuk membuat gaya CSS khusus atau untuk membuat tautan ke bagian tertentu dari 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 dalam tema Divi Child Anda atau di CSS kustom yang Anda tambahkan ke halaman atau situs web Anda dengan menggunakan opsi tema Divi atau pengaturan halaman Divi Builder.

CSS Khusus

CSS khusus juga dapat diterapkan ke modul dan ke 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 tertanam dalam tag gaya. 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 di tablet, ponsel pintar atau desktop secara individual. Ini berguna jika Anda ingin menggunakan modul yang berbeda pada perangkat yang berbeda atau jika Anda ingin menyederhanakan desain ponsel dengan menghilangkan elemen-elemen tertentu dari halaman.

Itu saja untuk tutorial ini.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
2 saham
saham2
menciak
Register
Ada apa