Cara mengkonfigurasi garis di Divi Builder
Baris adalah tata letak kolom berbeda yang dapat ditempatkan di dalam bagian. Sama seperti modul, baris memiliki berbagai parameter yang dapat diakses dengan mengklik ikon parameter di kiri atas baris. Dalam tutorial ini, kita akan membahas beberapa fitur dan bagaimana mereka dapat digunakan untuk membuat tata letak yang sangat unik. Pengaturan baris khususnya dapat digunakan untuk secara signifikan meningkatkan keragaman tata letak yang dibuat dengan Divi Builder, karena pengaturan tersebut membuat struktur tempat modul Anda dihosting.
Pengaturan konten
Warna latar belakang
Gambar latar belakang dapat diterapkan ke seluruh baris. Secara default, garis memiliki warna latar transparan.
Gambar latar belakang
Gambar latar belakang dapat diterapkan ke seluruh baris.
Video latar belakang MP4
Video latar belakang dapat diterapkan ke garis. Jika Anda ingin menerapkan video latar belakang, Anda perlu mengunduh video MP4 dan WEBM dan ambil videonya di sini.
Video latar belakang web
Video latar belakang dapat diterapkan ke garis. Jika Anda ingin menerapkan video latar belakang, Anda perlu mengunduh video MP4 dan WEBM dan ambil videonya di sini.
Lebar latar belakang video
Setelah video Anda diunggah, Anda harus memasukkan lebar video Anda di sini. Itu harus sama dengan lebar sebenarnya dari video, jika tidak, posisi latar belakang akan salah.
Tinggi video latar belakang
Setelah video Anda diunggah, Anda harus memasukkan tinggi video Anda di sini. Itu harus sama dengan tinggi video yang sebenarnya, jika tidak, posisi latar belakang akan salah.
Jeda video
Jika Anda ingin video dijeda saat diklik, aktifkan opsi ini.
Warna latar kolom
Untuk setiap kolom dalam satu baris, Anda dapat menetapkan warna latar belakang yang unik.
Gambar latar kolom
Untuk setiap kolom dalam satu baris, Anda dapat menetapkan gambar latar belakang yang unik.
Label Admin
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.
Parameter desain
Gunakan efek paralaks
Jika Anda ingin menggunakan efek paralaks untuk gambar latar garis Anda, Anda dapat mengaktifkan di sini kemudian memilih metode paralaks yang Anda inginkan.
Kolom efek paralaks
Di sini Anda dapat memilih apakah akan menggunakan efek paralaks atau tidak untuk gambar latar belakang kolom tertentu di baris Anda.
Buat garis lebar penuh ini
Jika opsi ini diaktifkan, garis akan menjangkau lebar penuh jendela browser (mirip dengan bagian lebar penuh). Ini adalah cara yang bagus untuk membuat beberapa tata letak kolom lebar penuh yang keren.
Gunakan lebar khusus
Anda juga dapat menetapkan lebar khusus ke garis. Misalnya, jika Anda ingin menambahkan variasi ke feed halaman dan membuat satu baris lebih besar dari yang lain, Anda dapat memasukkan nilai lebar kustom di sini
Gunakan lebar selokan khusus
Lebar talang mengatur jarak antar kolom. Ada 4 ukuran talang, dimulai dari 0. Mengatur lebar talang ke 1 tidak akan menghasilkan celah antar kolom. Jika digabungkan dengan opsi Lebar Penuh, ini dapat menciptakan efek yang mirip dengan modul Portofolio Layar Penuh.
Menyamakan ketinggian kolom
Ini adalah opsi yang bagus, terutama berguna ketika Anda telah menerapkan warna latar belakang ke kolom individual. Mengaktifkan opsi ini memaksa semua kolom di baris memiliki nilai ketinggian yang sama.
Padding Khusus
Jika Anda ingin menyesuaikan isi baris, Anda dapat melakukannya di sini.
Margin Kustom
Jika Anda ingin mengatur margin garis, Anda dapat melakukannya di sini.
Padding kolom khusus
Jika Anda ingin menyesuaikan pengisi kolom tertentu di baris Anda, Anda dapat melakukannya di sini.
Margin kolom khusus
Jika Anda ingin menyesuaikan margin kolom tertentu di baris Anda, Anda dapat melakukannya di sini.
Pengaturan lanjutan
ID CSS
Anda dapat menetapkan ID CSS ke baris jika Anda ingin menargetkannya di lembar gaya atau dengan tautan tautan.
Kelas CSS
Anda dapat menetapkan kelas CSS ke baris jika Anda ingin menargetkannya di style sheet Anda.
ID kolom CSS
Anda dapat menetapkan ID CSS ke kolom tertentu di baris Anda jika Anda ingin menargetkannya di stylesheet Anda atau dengan tautan jangkar.
Kolom kelas CSS
Anda dapat menetapkan kelas CSS ke kolom tertentu di baris Anda jika Anda ingin menargetkannya di style sheet Anda.
Sebelum
Entri CSS di sini untuk diterapkan: sebelum div baris utama.
Elemen utama
Entri CSS di sini untuk diterapkan ke baris utama div.
Setelah
Entri CSS di sini untuk diterapkan: setelah div jalur utama.
Kolom depan
Masukkan CSS di sini untuk menerapkan: sebelum div kolom yang ditentukan.
Elemen kolom utama
Masukkan CSS di sini untuk diterapkan ke kolom div yang ditentukan.
Kolom setelah
Entri CSS di sini untuk diterapkan: setelah kolom div ditentukan.
jarak penglihatan
Opsi ini memungkinkan Anda untuk mengontrol perangkat tempat modul baris 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.
Menempatkan tutorial ke dalam praktik
Sekarang setelah kita melalui semua pengaturan, mari kita uji beberapa untuk menunjukkan kepada Anda apa yang mungkin ketika setiap pengaturan digunakan secara kreatif. Dalam contoh ini, saya akan membahas pengaturan Baris Layar Penuh sebagai pengantar. Opsi untuk membuat baris "Layar Penuh" adalah salah satu opsi paling serbaguna dari kumpulan. Ini akan memperpanjang lebar garis ke tepi browser, mirip dengan bagian Full Screen (atau FullWidth). Tidak seperti bagian Lebar Penuh, baris FullWidth dapat memiliki struktur kolom dan dapat berisi modul apa pun! Pada contoh di bawah ini, saya telah membuat baris 4 kolom dan menambahkan gambar persegi ke setiap kolom. Selanjutnya, saya mengaktifkan "Jadikan garis ini lebar penuh" untuk memperluas garis ke tepi jendela browser.
Buat Toko Online Anda dengan mudah
Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]
Kemudian saya mengurangi ukuran "Talang" menjadi "1" untuk menghapus jarak antara kolom dalam baris.
Akhirnya, saya menghapus isian di atas dan di bawah garis dengan mengubah nilai atas dan bawah dengan opsi "Isi Kustom" menjadi "0".
Hasilnya adalah transformasi baris lengkap, mengubah baris normal dari 4 kolom gambar menjadi galeri gambar penuh lebar dari sisi ke sisi yang terlihat menakjubkan dibandingkan dengan bagian hijau di bawah. Efek yang sama ini juga dapat dibuat menggunakan warna latar belakang kolom kustom dan mod berbasis teks. Kemungkinannya tidak terbatas!
Artikel ini berisi komentar 0