Loncat ke Konten Utama

Cara mengkonfigurasi garis di Divi Builder

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]

Garis adalah ketentuan yang berbeda kolom yang dapat ditempatkan di dalam bagian. Seperti modul, garis memiliki berbagai parameter yang dapat diakses dengan mengklik ikon pengaturan di kiri atas garis. Di sini Tutorielkami akan meninjau beberapa fitur dan bagaimana mereka dapat digunakan untuk membuat tata letak yang sangat unik. Pengaturan garis khususnya dapat digunakan untuk meningkatkan keragaman tata letak yang dibuat dengan sangat besar Divi Builder karena mereka membuat struktur di mana modul Anda di-host.

modul garis divi builder.png

pengaturan parameter garis divi.png

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.

desain rahasia divi builder.png

Divi: Tema WordPress terbaik sepanjang masa!

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

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.

kolom opsi lanjutan divi.png

Buat Toko Online Anda dengan mudah

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

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.

contoh desain divi.jpg

Buat blog Anda dengan mudah dengan SiteGround

SiteGround memungkinkan Anda membuat blog WordPress hanya dengan beberapa klik. Nama domain gratis, hosting aman, SSL, transfer, dan banyak lagi ... [Direkomendasikan]

Kemudian, saya mengurangi ukuran "Talang" menjadi "1" untuk menghapus jarak antar kolom garis.

menghapus spasi antar kolom divi.jpg

Akhirnya, saya menghapus isi di atas dan di bawah garis dengan mengubah nilai atas dan bawah dengan opsi "Isi Kustom" pada "0".
modifikasi dari filling.jpg

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!

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
6 saham
saham2
menciak1
Register3
Ada apa