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

Selamat datang di posting 2 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.

Kami berhasil mencapai bagian 2 dari seri ini! Dan saya harus mengatakan bahwa saya sangat menikmati membangun tata letak ini. Hari ini, saya akan menunjukkan cara membuat tata letak kotak untuk video Anda yang menyerupai bagian fitur halaman produk atau halaman arahan. Tata letak ini terdiri dari urutan 1/2 1/2 baris kolom dengan setiap baris berisi video dan deskripsi yang sesuai di masing-masing dari dua kolom. Kemudian bagian berikutnya bergantian urutan video dan deskripsi dari kiri ke kanan dan kemudian dari kanan ke kiri. Karena setiap baris meregangkan lebar penuh halaman dan masing-masing kolom mempertahankan ketinggian vertikal yang sama, tata letak terlihat memukau di semua ukuran layar.

Saya akan menggunakan modul video untuk menambahkan video dan modul uraian untuk berfungsi sebagai bagian judul dan deskripsi yang berdekatan dengan video. Seperti semua tata letak dalam seri ini, yang satu ini juga sangat mudah diterapkan menggunakan Divi.

Inilah Hasil Akhir Akan Terlihat Seperti

Konsep & Inspirasi

Konsep ini bukanlah hal baru. Saya sebenarnya terinspirasi untuk membuat tata letak ini karena keakraban dengan pengguna. Banyak situs web menggunakan tata letak serupa untuk menampilkan fitur produk atau layanan mereka. Ini memungkinkan area konten yang lebih besar yang menurut saya menciptakan ruang negatif yang besar untuk teks dan citra yang mencolok untuk video.

Ini akan sempurna untuk perusahaan yang menggunakan video untuk mempromosikan fitur produk tetapi juga memiliki banyak kegunaan lain. Saya harap Anda memanfaatkan desain ini untuk proyek Anda berikutnya.

Mari kita mulai.

Menerapkan Desain Dengan Divi

Berlangganan Saluran Youtube Kami

Pertama, tambahkan bagian biasa dengan struktur 1/2 1/2 (2 kolom).

Selanjutnya tambahkan Modul Video ke kolom kiri.

Perbarui Pengaturan Video sebagai berikut:

Opsi Konten

Video MP4/URL: [masukkan URL untuk video]
URL Hamparan Gambar: [unggah gambar khusus untuk video Anda atau buat gambar secara otomatis dari video]

Pilihan Desain

Putar Warna Ikon: rgba(255,255,255,0.87)

Simpan Pengaturan

Selanjutnya tambahkan Modul Blurb di kolom kanan yang berbatasan langsung dengan Modul Video yang baru saja Anda buat.

Perbarui Pengaturan Blurb sebagai berikut:

Opsi Konten:

Judul: [masukkan judul video]
Konten: [masukkan deskripsi video]
Tautan: [Anda dapat memasukkan url tautan ke halaman lain jika mau]
Gunakan Ikon: YA
Ikon: [pilih ikon]

Pilihan Desain:

Warna Ikon: #666666
Warna Teks: Cahaya
Orientasi Teks: Tengah
Font Tajuk: Roboto
Ukuran Font Tajuk: 52px
Spasi Huruf Header: 1px
Font Tubuh: Buka Sans
Ukuran Font Tubuh: 20px
Warna Teks Tubuh: #dddddd
Padding Kustom di Desktop: 5% Top (Anda mungkin perlu menyesuaikan ini tergantung pada jumlah teks yang Anda miliki dalam deskripsi Anda)
Padding Kustom pada Tablet dan Smartphone: 20px Atas, 20px Bawah

Opsi Lanjutan

Animasi Gambar/Ikon: Kanan Ke Kiri (animasi ini dikombinasikan dengan ikon panah akan menarik perhatian lebih jauh ke video di sebelah kiri.

Simpan Pengaturan

Sebelum kita melanjutkan, lanjutkan dan tambahkan gambar latar belakang Anda ke bagian Anda. Buka pengaturan Bagian (area biru) dan perbarui yang berikut:

Opsi Konten:

Gambar Latar Belakang: [masukkan gambar latar belakang (saya adalah 2000 x 2200)]

Gunakan Efek Paralaks: YA
Metode Paralaks: Paralaks Sejati

Pilihan Desain:

Padding Kustom: 0px Atas, 0px Bawah

Simpan Pengaturan
Selanjutnya edit pengaturan baris dengan pembaruan berikut:

Opsi Konten

Kolom 2 Warna Latar Belakang: rgba(0,0,0,0.69)

Pilihan Desain

Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Samakan Tinggi Kolom: YA
Padding Kustom: 0px Atas, 0px Bawah
Marging Kustom: 0px Atas, 0px Bawah
Kolom 1 Padding Khusus: 0px Atas, 0px Bawah
Kolom 2 Padding Kustom: 0px Atas, 0px Bawah

Hal-hal mulai terjadi sekarang. Anda memiliki gambar latar belakang Anda dan Anda telah membuat baris pertama Anda. Sekarang Anda siap untuk menduplikasi baris itu. Klik ikon duplikat pada bilah menu baris di dalam pembuat visual.

Di baris baru yang baru saja Anda duplikat, seret modul video ke kolom kanan dan seret modul uraian ke kolom kiri.

Sekarang Anda hanya perlu memperbarui konten modul video untuk menyertakan URL video baru dan gambar sampul baru. Untuk Modul Blurb, Anda perlu memperbarui header dan konten yang sesuai dengan video Anda. Dan Anda juga perlu menyesuaikan ikon uraian menjadi panah yang mengarah ke kanan (jika Anda menggunakan ikon yang sama seperti yang saya lakukan) dan alihkan Gambar/Ikon Animasi ke "Kiri Ke Kanan".

Selanjutnya kita perlu memperbarui pengaturan baris duplikat untuk mengatur latar belakang kolom pertama. Buka pengaturan baris dan perbarui yang berikut di bawah tab Konten :

Kolom 1 Warna Latar Belakang: rgba(0,0,0,0.69)
Kolom 2 Warna Latar Belakang: tidak ada

Kami membuat beberapa kemajuan. Sekarang mari kita lihat seperti apa dua baris pertama kita…

Untuk dua baris berikutnya ulangi proses duplikasi dan perbarui konten. Ingatlah bahwa semakin banyak baris yang Anda miliki, semakin lama gambar latar bagian Anda harus meregang untuk mengakomodasi panjang konten.

Untuk contoh ini saya menambahkan dua baris lagi sehingga total menjadi empat baris. Lihat hasil akhirnya.

Membuat Versi Ringan

Untuk mengubah desain kisi video gelap sebelumnya menjadi versi terang, yang perlu Anda lakukan hanyalah memperbarui beberapa opsi desain.

Untuk pengeditan ini, mungkin sedikit lebih mudah menggunakan tampilan gambar rangka.

Perbarui Pengaturan Bagian sebagai berikut:

Opsi Konten

Gambar Latar Belakang: [masukkan gambar latar yang terang]

Perbarui Pengaturan Baris Pertama sebagai berikut:

Opsi Konten

Kolom 2 Warna Latar Belakang: rgba(255,255,255,0.68)

Perbarui Pengaturan Modul Blurb baris pertama sebagai berikut:

Pilihan Desain

Warna Ikon: #333333
Warna Teks: Gelap
Warna Teks Tajuk: #444444
Font Tubuh: Roboto
Warna Teks Tubuh: #666666

Perbarui Pengaturan Baris Kedua sebagai berikut:

Opsi Konten

Kolom 1 Warna Latar Belakang: rgba(255,255,255,0.45)

Gunakan opsi klik kanan untuk menyalin desain modul blurb di baris pertama dan menempelkannya ke modul blurb di baris kedua.

Itu dia! Lihat hasil akhirnya.

Responsif?

Yang ini sedikit rumit dalam hal perilakunya pada ukuran layar yang lebih kecil. Karena urutan susun default menempatkan kolom kiri di atas kolom kanan, hasil dari tata letak ini agak membingungkan. Anda dapat mempelajari cara memperbaiki masalah ini pada posting saya sebelumnya tentang cara mengubah urutan penumpukan kolom Divi.

Akan datang…

Grid berikutnya akan mengejutkan Anda. Warna dan gradien latar belakang semi-transparan membuat desainnya sangat mudah untuk dicocokkan dengan situs Anda sendiri. Simak previewnya…

Saya harap Anda menikmati seri sejauh ini. Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!