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.

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!