Cara Membuat Tata Letak Grid yang Menakjubkan dengan Modul Video Divi (Bagian 3)
Diterbitkan: 2017-06-22Selamat datang di posting 3 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.
Selamat datang di bagian 3 dari seri ini! Aku punya perasaan yang satu ini akan mengejutkanmu sedikit. Hari ini, saya akan menunjukkan kepada Anda bagaimana menggunakan warna latar belakang dan gradien semi-transparan untuk membuat beberapa variasi warna batas. Pada akhirnya saya akan menunjukkan kepada Anda bagaimana Anda dapat sepenuhnya mengubah skema warna hanya dengan beberapa klik. Tata letak ini terdiri dari kombinasi dua baris struktur kolom 1/4 1/2 1/4 dan baris struktur kolom 1/4 1/4 1/4 1/4.
Saya akan menggunakan modul video untuk menambahkan video dan modul uraian untuk berfungsi sebagai bagian judul dan deskripsi di tengah kisi. Seperti semua tata letak dalam seri ini, tata letak ini juga mudah diterapkan menggunakan Divi.
Inilah Hasil Akhir Akan Terlihat Seperti
Konsep & Inspirasi
Sebenarnya, ide tata letak asli berasal dari situs populer giphy.com dari caranya menampilkan gif berfitur lebih besar di kolom tengah yang dikelilingi oleh gif yang lebih kecil. Saya pikir ide ini akan bekerja dengan baik untuk tata letak kisi video karena ini akan memungkinkan Anda untuk menampilkan video yang lebih besar dengan video lain di sekitarnya. Namun, saya tidak peduli dengan gaya batu dari gambar giphy di sekitarnya, jadi untuk posting ini, saya menggunakan pendekatan kolom genap untuk membuat semuanya lebih simetris.
Selain tata letak, saya ingin menjelajahi kemampuan latar belakang semi-transparan Divi sedikit lebih banyak untuk menciptakan sesuatu yang unik.
Mari kita mulai.
Menerapkan Desain Dengan Divi
Pertama, tambahkan bagian biasa dengan struktur 1/4 1/2 1/4 (2 kolom). 
Selanjutnya tambahkan Video Module pada kolom pertama.
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]
Simpan Pengaturan
Kemudian tambahkan Modul Pembagi langsung di bawah Modul Video.
Di Pengaturan Pembagi, di bawah
Sekarang karena kita akan menambahkan banyak video, saya merasa lebih mudah untuk menduplikasi modul video yang baru saja dibuat dan menyeretnya ke tempat yang tepat. Kemudian saya dapat kembali dan mengubah URL video dan gambar sampul nanti.
Pertama, mari kita gandakan modul video yang baru saja Anda buat dan seret di bawah modul pembagi di kolom pertama.
Setelah itu Anda dapat melanjutkan menduplikasi elemen kolom pertama (video, pembagi, dan video) dan menyeretnya ke kolom paling kanan. Kemudian Anda dapat menduplikasi salah satu modul video dan menyeretnya ke kolom tengah. Setelah Anda memperbarui semua konten video, Anda akan memiliki sesuatu yang terlihat seperti ini…
Sebelum melanjutkan, lanjutkan dan tambahkan warna latar belakang Anda ke bagian dan kolom baris Anda. Buka pengaturan Bagian (area biru) dan perbarui yang berikut:
Opsi Konten
Warna Latar Belakang: #333333
Pilihan Desain:
Padding Kustom: 0px Atas, 0px Bawah
Simpan Pengaturan
Sekarang edit Pengaturan Baris Anda dengan pembaruan berikut:
Opsi Konten:
Warna Gradien Latar Belakang: rgba(255,255,255,0.58) dan #b684e8
Arah Gradien: 360 derajat
Kolom 1 Warna Latar Belakang: rgba(0,0,0,0.69)
Kolom 2 Warna Latar Belakang: rgba(255,255,255,0.45)
Kolom 1 Warna Latar Belakang: rgba(0,0,0,0.85)
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 Kustom: 20px Atas, 20px Kanan, 20px Bawah, 20px Kiri
Kolom 2 Padding Kustom: 20px Atas, 20px Kanan, 20px Bawah, 20px Kiri
Kolom 3 Padding Kustom: 20px Atas, 20px Kanan, 20px Bawah, 20px Kiri
Simpan Pengaturan
Sekarang saatnya menambahkan baris kedua. Lanjutkan dan tambahkan baris struktur 1/4 1/2 1/4 (3-kolom) lainnya di bawah yang pertama.
Untuk memberi diri Anda permulaan dalam menyiapkan opsi untuk Pengaturan Baris, gunakan fungsionalitas klik kanan untuk menyalin gaya baris pertama dan menempelkannya ke baris kedua.
Sekarang, untuk pengaturan baris Anda, yang perlu Anda perbarui adalah opsi Konten sebagai berikut:
Gradien Latar Belakang: tidak ada (hapus yang telah disalin)
Kolom 1 Warna Latar Belakang: rgba(0,0,0,0.69)
Kolom 2 Warna Latar Belakang: rgba(0,0,0,0.0) – ini sama dengan tidak ada atau transparan
Kolom 3 Warna Latar Belakang: rgba(0,0,0,0.35)
Sekarang setelah pengaturan baris Anda selesai, lanjutkan dan duplikat dan seret (atau salin dan tempel) modul video ke modul video pertama (paling kiri) dan juga di baris ketiga (paling kanan). Kemudian perbarui konten video.
Untuk kolom tengah, tambahkan modul uraian dan perbarui pengaturan sebagai berikut:
Opsi Konten
Judul: [masukkan judul halaman atau video]
Konten: [masukkan konten atau deskripsi video atau halaman]
Pilihan Desain
Warna Teks: Cahaya
Orientasi Teks: Tengah
Font Header: PT Sans
Ukuran Font Tajuk: 52px
Spasi Huruf Header: 1px
Font Tubuh: PT Sans
Ukuran Font Tubuh: 20px
Sekarang akhirnya waktunya untuk baris terakhir. Tentu saja, Anda dapat menambahkan lebih banyak jika perlu.
Lanjutkan dan tambahkan baris struktur 1/4 1/4 1/4 1/4 (4-kolom) di bawah baris sebelumnya.
Seperti yang Anda lakukan sebelumnya, salin desain baris sebelumnya dan tempel ke baris saat ini untuk memberi Anda sedikit permulaan pada desain.
Kemudian perbarui pengaturan baris sebagai berikut:
Opsi Konten
Kolom 1 Warna Latar Belakang: rgba(0,0,0,0.34)
Kolom 2 Warna Latar Belakang: rgba(0,0,0,0.69)
Kolom 3 Warna Latar Belakang: rgba(0,0,0,0.34)
Kolom 4 Warna Latar Belakang: rgba(0,0,0,0.69)
Pilihan Desain
Kolom 4 Padding Kustom: 20px 20px 20px 20px
Simpan Pengaturan
Selanjutnya duplikat atau salin modul video ke masing-masing dari empat kolom. Setelah Anda memperbarui semua konten video, Anda selesai!
Lihat tata letak kisi baru Anda…
Membuat Versi Ringan
Untuk mengubah desain kisi video gelap sebelumnya menjadi versi terang, yang perlu Anda lakukan hanyalah memperbarui beberapa opsi desain.
Perbarui Pengaturan Bagian sebagai berikut:
Opsi Konten:
Warna Latar Belakang: rgba(0,0,0,0.12)
Perbarui Semua Pengaturan Baris sebagai berikut:
Pada dasarnya kembali ke masing-masing dari tiga pengaturan baris dan di mana pun Anda melihat warna latar belakang digunakan, cukup klik opsi palet warna putih. Ini akan mengubah semua latar belakang gelap semi-transparan gelap menjadi latar belakang terang semi-transparan.
Perbarui Pengaturan Modul Blurb sebagai berikut:
Pilihan Desain
Warna Teks: Gelap
Itu akan berhasil! Lihat versi ringannya.
Ubah Desain dengan Mudah dengan Opsi Latar Belakang Bagian
Karena kisi dibuat dengan latar belakang semi-transparan, Anda dapat dengan mudah mengubah warna latar belakang bagian, gradien, atau gambar untuk memberi situs Anda tampilan dan nuansa segar yang sangat cocok dengan situs Anda.
Lihat perbedaan yang dapat dibuat dengan menambahkan gambar latar belakang ke pengaturan bagian.
Cara lain untuk mencocokkan situs Anda adalah dengan mencocokkan warna gradien latar belakang yang kami tambahkan di baris pertama.
Akan datang…
Posting berikutnya dalam seri ini akan menjadi nuansa yang sama sekali berbeda. Yang satu ini adalah tentang menjaga segala sesuatunya tetap bersih dan sederhana. Dan beberapa trik gradien latar belakang.
Sampai saat itu, saya berharap untuk mendengar dari Anda di komentar.
Menikmati!