Loncat ke Konten Utama

Cara menggunakan modul kode di Divi Builder

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

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. Setelah tema Divi dipasang di situs web Anda, Anda akan melihat sebuah 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 ketika Anda menjelajahi situs web hulu Anda 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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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

Kode pembangun Divi

Di kotak teks konten, 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

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]

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 konten, Anda akan menemukan semua elemen konten dari modul, seperti teks, gambar, dan ikon. Semua itu mengontrol apa? muncul di modul Anda akan selalu ada di tab ini.

Parameter kode pembangun DiviIsi

Anda dapat menempatkan kode HTML, CSS, atau JavaScript apa pun di sana yang ingin Anda tampilkan pada halaman di lokasi saat ini. Hanya editor dan admin yang diperbolehkan untuk memposting HTML tanpa filter, yang berarti kode dapat dihapus dari modul jika digunakan oleh penulis atau kontributor. Anda juga dapat menempatkan kode pendek di modul. Kode kursus ini (kode pendek) 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.

Buat Toko Online Anda dengan mudah

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

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 dalam CSS khusus yang Anda tambahkan ke halaman atau situs web Anda 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.

Artikel ini berisi komentar 0

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.

Kembali ke atas
2 saham
saham2
menciak
Register