Cara Membuat Tata Letak Grid yang Menakjubkan dengan Modul Video Divi (Bagian 4)

Selamat datang di posting 4 dari 5 di miniseri kami Cara Membuat Tata Letak Grid yang Menakjubkan dengan Modul Video Divi. Dalam seri ini kami akan memandu Anda melalui cara membuat tata letak grid yang menakjubkan dari awal menggunakan Divi Visual Builder. Dan jika Anda khawatir ini terlalu rumit, pikirkan lagi! Semua tata letak ini dapat dibuat dan ditata menggunakan Visual Builder tanpa kode tambahan.

Saya harap Anda menikmati tata letak grid sejauh ini. Tata letak hari ini adalah nomor 4 dalam seri, dan ini adalah salah satu favorit saya (dan tercepat untuk diterapkan). Tidak hanya mudah (dan menyenangkan) untuk dibuat menggunakan Divi, tetapi juga dapat disesuaikan agar sesuai dengan skema warna situs Anda. Opsi gradien latar belakang adalah fitur utama dari desain ini yang telah digunakan untuk membuat dua warna nada yang dipisahkan oleh garis diagonal. Spasi juga bertujuan untuk membuat video mudah dirasakan. Diperdebatkan, desain ini mungkin berada di luar ruang lingkup dari apa yang biasanya kita sebut "grid", tapi saya pikir Anda akan melihat potensinya.

Jadi di sini kita pergi. Saya akan menunjukkan kepada Anda betapa mudahnya membuat desain kisi ini menggunakan modul video dan beberapa elemen latar belakang khusus.

Inilah Hasil Akhir Akan Terlihat Seperti

Konsep & Inspirasi

Saya mencari tata letak yang bagus dan bersih yang mengatur kumpulan kecil video untuk digunakan untuk hal-hal seperti tutorial atau kursus. Ini dikombinasikan dengan keinginan impulsif saya untuk bermain-main dengan gradien latar belakang, saya keluar dengan ini. Saya harap Anda menyukainya.

Mari kita mulai.

Menerapkan Desain Dengan Divi

Berlangganan Saluran Youtube Kami

Pertama, tambahkan bagian reguler dengan struktur lebar penuh (1 kolom).

Selanjutnya tambahkan Modul Teks ke kolom. Ini akan berfungsi sebagai judul atau headline untuk bagian halaman.

Perbarui Pengaturan Teks sebagai berikut:

Opsi Konten
Konten: [masukkan teks untuk judul]

Pilihan Desain

Warna Teks: Cahaya
Font Teks: Arimo
Ukuran Font Teks: 56px
Spasi Huruf Teks: 1px
Tinggi Baris Teks: 1em

Simpan Pengaturan

Anda belum dapat melihat apa pun karena Anda memiliki teks putih dengan latar belakang putih, tetapi tidak apa-apa. Mari kita lanjutkan dan tambahkan gradien latar belakang bagian kita. Buka Pengaturan Bagian dan, di bawah Bagian Konten, perbarui opsi berikut:

Warna Gradien Latar Belakang: #121212, #ffffff
Tipe Gradien: Linier
Arah Gradien: 198 derajat
Posisi Awal: 45%
Posisi Akhir: 45%

Selanjutnya, perbarui Pengaturan Baris untuk baris yang baru saja Anda tambahkan sebagai berikut:

Pilihan Desain

Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 4
Samakan Tinggi Kolom: YA
Padding Kustom: 1% Atas, 5% Kanan, 5% Bawah, 5% Kiri

Simpan Pengaturan

Sekarang tambahkan baris lain dengan struktur (2 kolom) langsung di bawah baris yang baru saja Anda buat.

Selanjutnya, tambahkan Modul Video ke kolom kiri.

Perbarui Pengaturan Video sebagai berikut:

Opsi Konten

Video MP4/URL: [masukkan URL video Anda]
URL Hamparan Gambar: [masukkan URL gambar hamparan]

Simpan Pengaturan

Selanjutnya, duplikat (atau salin) modul video yang baru saja Anda buat dua kali dan seret (atau tempel) dua video duplikat sehingga menumpuk di kolom kanan.

Perbarui konten video untuk menyertakan URL dan gambar sampul yang benar.

Silakan dan tambahkan Modul Blurb di bawah dua modul video di kolom kanan. Ini dapat berfungsi sebagai deskripsi video dalam kisi ini.

Perbarui Pengaturan Blurb sebagai berikut:

Opsi Konten

Judul: [masukkan judul]
Konten: [masukkan konten atau deskripsi]

Pilihan Desain

Warna Teks: Cahaya

Simpan Pengaturan

Sekarang edit Pengaturan Baris untuk baris yang menyimpan video yang baru saja Anda buat sebagai berikut:

Opsi Konten

Warna Gradien Latar Belakang: #4999c1, #121212
Tipe Gradien: Linier
Arah Gradien: 198 derajat
Posisi Awal: 45%
Posisi Akhir: 45%

Pilihan Desain

Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 4
Samakan Tinggi Kolom: YA
Padding Kustom: 5% Atas, 5% Kanan, 5% Bawah, 5% Kiri

Besar! Anda menyelesaikan bagian pertama. Kami hampir selesai. Lihat perkembangannya sejauh ini.

Untuk membuat bagian berikutnya, duplikat seluruh bagian yang baru saja Anda buat dengan mengklik tombol duplikat bagian..

Perbarui pengaturan bagian baru sebagai berikut:

Opsi Konten

Warna Gradien Latar Belakang: #ffffff, #121212 (warna-warna ini berlawanan dengan urutan bagian pertama)

Selanjutnya perbarui Pengaturan Modul Teks di bagian yang digandakan dengan yang berikut ini:

Pilihan Desain

Warna Teks Teks: #333333

Simpan Pengaturan

Untuk menyelesaikan bagian ini, perbarui Pengaturan Baris yang berisi video Anda dengan yang berikut:

Opsi Konten

Warna Gradien Latar Belakang: #121212, #4999c1 (pada dasarnya Anda mengubah urutan warna sehingga urutannya berlawanan dengan bagian pertama)

Simpan Pengaturan

Sekarang mari kita lihat hasilnya setelah menambahkan bagian kedua…

Jika Anda belum menyadarinya, Anda dapat terus menambahkan lebih banyak bagian dengan mudah karena kami telah membuat dua bagian ini. Mari buat satu bagian lagi hanya untuk ukuran yang baik. Karena warna latar belakang bagian kami adalah hitam di bagian bawah, kami ingin memulai bagian berikutnya dengan warna latar belakang hitam di bagian atas. Itu berarti kita perlu menduplikasi bagian pertama di bagian atas dan menyeretnya ke bagian bawah halaman di bawah bagian kedua. Ini menjaga kontinuitas desain di seluruh halaman.

Berikut adalah tampilannya setelah bagian ketiga ditambahkan:

Itu dia! Semua selesai.

Responsif?

Tata letak ini sebenarnya terlihat lebih baik di ponsel tanpa modifikasi apa pun. Coba lihat!

Kustomisasi Lebih Lanjut

Setelah membangun tata letak kisi ini dengan beberapa bagian, Anda mungkin sudah dapat melihat betapa mudahnya mengubah warna agar sesuai dengan tema proyek Anda berikutnya. Yang diperlukan hanyalah mengubah warna gradien latar belakang untuk bagian dan baris.

Jika Anda ingin mengubah desain lebih lanjut, saya sarankan menambahkan semi-transparansi ke warna gradien untuk mengekspos latar belakang di belakangnya. Atau coba singkirkan salah satu warna gradien sama sekali dan lihat seperti apa tampilannya. Berikut adalah beberapa contoh tentang apa yang dapat dilakukan hanya dengan satu warna gradien…

Anda juga dapat menambahkan Modul Slider Video ke kisi di kolom kiri.

Akan datang…

Berikutnya adalah tata letak kisi video terakhir kami dalam seri ini. Yang ini memberi Anda pilihan untuk menjaga segala sesuatunya tetap bagus dan bersih dengan elemen pembingkaian yang halus atau menggunakan warna dengan cara yang unik untuk membuat setiap video menonjol.

Sampai saat itu, saya berharap untuk mendengar dari Anda di komentar.

Menikmati!