Cara mengkonfigurasi garis di Divi Builder
Garis-garis adalah tata letak kolom yang berbeda yang dapat ditempatkan di dalam bagian. Seperti halnya modul, garis memiliki berbagai parameter yang dapat diakses dengan mengklik ikon pengaturan di bagian kiri atas garis. Dalam tutorial ini, kami akan meninjau beberapa fitur dan bagaimana mereka dapat digunakan untuk membuat tata letak yang sangat unik. Pengaturan garis khususnya dapat digunakan untuk sangat meningkatkan keragaman tata letak yang dibuat dengan Divi Builder karena membuat struktur di mana modul Anda di-host.
Pengaturan konten
Warna latar belakang
Gambar latar belakang dapat diterapkan ke seluruh baris. Secara default, garis memiliki warna latar belakang transparan.
Gambar latar belakang
Gambar latar belakang dapat diterapkan ke seluruh baris.
Video latar belakang MP4
Video latar belakang dapat diterapkan pada garis. Jika Anda ingin menerapkan video latar belakang, Anda perlu mengunduh video MP4 dan WEBM dan mengambil video di sini.
Video latar belakang web
Video latar belakang dapat diterapkan pada garis. Jika Anda ingin menerapkan video latar belakang, Anda perlu mengunduh video MP4 dan WEBM dan mengambil video di sini.
Lebar video latar belakang
Setelah video Anda diunggah, Anda perlu memasukkan lebar video Anda di sini. Itu harus sama dengan lebar sebenarnya dari video, jika tidak, posisi latar belakang akan salah.
Ketinggian video latar belakang
Setelah video Anda diunggah, Anda perlu memasukkan tinggi video Anda di sini. Itu harus sama dengan tinggi sebenarnya dari video, jika tidak, posisi latar belakang akan salah.
Jeda video
Jika Anda ingin video dijeda saat diklik, aktifkan opsi ini.
Warna latar belakang kolom
Untuk setiap kolom berturut-turut, Anda dapat menetapkan satu warna latar belakang.
Gambar latar belakang kolom
Untuk setiap kolom berturut-turut, Anda dapat menetapkan satu gambar latar belakang.
Label Admin
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.
Parameter desain
Gunakan efek paralaks
Jika Anda ingin menggunakan efek paralaks untuk gambar latar belakang garis Anda, Anda dapat mengaktifkan di sini dan kemudian memilih metode paralaks yang diinginkan.
Kolom efek paralaks
Di sini Anda dapat memilih apakah atau tidak untuk menggunakan efek paralaks untuk gambar latar belakang kolom tertentu di baris Anda.
Buat garis lebar penuh ini
Jika opsi ini diaktifkan, garis akan menjangkau lebar penuh dari jendela browser (mirip dengan bagian lebar penuh). Ini adalah cara yang bagus untuk membuat tata letak kolom penuh yang bagus.
Gunakan lebar khusus
Anda juga dapat menetapkan lebar khusus ke suatu garis. Misalnya, jika Anda ingin menambahkan variasi ke umpan halaman dan memperbesar garis ke yang lain, Anda dapat memasukkan nilai lebar khusus di sini
Gunakan lebar selokan khusus
Lebar selokan menyesuaikan jarak antar kolom. Ada ukuran selokan 4, mulai dari 0. Mengatur lebar selokan di 1 tidak akan menghasilkan ruang di antara kolom. Ketika dikombinasikan dengan opsi Width Penuh, ini dapat menciptakan efek yang mirip dengan modul Portfolio Full Screen.
Padukan ketinggian kolom
Ini adalah opsi yang bagus, sangat berguna saat Anda menerapkan warna latar ke kolom individual. Mengaktifkan opsi ini memaksa semua kolom di baris memiliki nilai ketinggian yang sama.
Padding Kustom
Jika Anda ingin menyesuaikan isi baris, Anda dapat melakukannya di sini.
Margin Kustom
Jika Anda ingin mengatur margin garis, Anda dapat melakukannya di sini.
Kolom kolom khusus
Jika Anda ingin menyesuaikan isi kolom tertentu di saluran Anda, Anda dapat melakukannya di sini.
Margin kolom khusus
Jika Anda ingin menyesuaikan margin kolom tertentu di saluran Anda, Anda dapat melakukannya di sini.
Pengaturan lanjutan
ID CSS
Anda dapat menetapkan ID CSS ke baris jika Anda ingin menargetkannya di style sheet Anda atau dengan tautan anchor.
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 style sheet Anda atau dengan tautan anchor.
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 jalur utama.
Elemen utama
Entri CSS di sini untuk diterapkan ke div baris utama.
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 menerapkan: 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 di tablet, ponsel cerdas 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.
Menempatkan tutorial ke dalam praktik
Sekarang kita telah meninjau semua parameter, mari kita coba beberapa dari mereka untuk menunjukkan kepada Anda apa yang mungkin ketika setiap parameter digunakan secara kreatif. Dalam contoh ini, saya akan mendekati pengaturan Garis Layar Penuh sebagai pengantar. Opsi untuk membuat garis "Layar Penuh" adalah salah satu opsi paling serbaguna di set. Ini akan memperluas lebar garis ke tepi browser, seperti untuk bagian layar penuh (atau FullWidth). Tidak seperti bagian Fullwidth, bagaimanapun, baris FullWidth dapat memiliki struktur kolom dan dapat berisi modul apa pun! Dalam contoh di bawah ini, saya membuat baris di kolom 4 dan menambahkan gambar persegi ke setiap kolom. Kemudian, saya mengaktifkan "Abaikan baris ini dalam mode lebar penuh" untuk memperpanjang garis ke tepi jendela browser.
Kemudian, saya mengurangi ukuran "Talang" menjadi "1" untuk menghapus jarak antar kolom garis.
Akhirnya, saya menghapus isi di atas dan di bawah garis dengan mengubah nilai atas dan bawah dengan opsi "Isi Kustom" pada "0".
Hasilnya adalah transformasi lengkap dari baris, mengubah baris normal kolom gambar 4 menjadi galeri gambar full-bleed full-bleed yang tampak luar biasa dibandingkan dengan bagian hijau di bawah ini. Efek yang sama ini juga dapat dibuat menggunakan warna latar belakang kolom khusus dan modul berbasis teks. Kemungkinannya tidak terbatas!
