Cara Menjadi Kreatif dengan Baris 6 Kolom & Unit Viewport Divi

Variasi struktur kolom Divi memungkinkan Anda untuk membuat desain apa pun yang ada dalam pikiran Anda. Dan meskipun menggunakan struktur kolom dalam bentuk aslinya adalah hal yang paling mudah untuk dilakukan, Anda juga dapat melangkah lebih jauh dengan menggabungkan elemen desain dalam baris 6 kolom dengan unit viewport.

Salah satu hal yang bisa Anda buat, misalnya, adalah kolase. Anda tidak perlu menggunakan perangkat lunak pengedit gambar sama sekali! Selain itu, Anda juga dapat mengizinkan setiap gambar dibuka di lightbox terpisah. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana melakukan semua hal di atas hanya menggunakan opsi bawaan Divi.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Mendekati

• Kami menghapus semua lebar talang antara bagian, baris, dan kolom sehingga kami dapat menambahkan margin dan bantalan khusus ke setiap modul secara manual (menggunakan unit viewport)
• Unit viewport memastikan posisi elemen desain tetap sama di semua ukuran layar desktop
• Kami akan menyesuaikan pengaturan jarak setiap elemen desain satu per satu agar sesuai dengan desain kolase keseluruhan
• Berkat opsi responsif di Divi, kami dapat memastikan pengaturan yang disebutkan di atas tidak berlaku untuk tablet dan ponsel

Mari Mulai Berkreasi

Pratinjau Latar Belakang

Ini hasil akhir dari perspektif backend:

Tambahkan Bagian Baru

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru atau membuka halaman yang sudah ada dan menambahkan bagian reguler ke dalamnya.

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran. Ini adalah langkah penting dalam tutorial ini. Dengan menghapus semua nilai margin dan padding default antara bagian, baris, dan modul, kami dapat menambahkan spasi secara manual ke setiap elemen desain menggunakan unit viewport.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Tambahkan beberapa bantalan kiri dan kanan khusus ke baris juga.

• Padding Kiri: 6.5vw
• Padding Kanan: 6.5vw

Tambahkan Modul Teks Judul ke Kolom 6

Tambah isi

Saatnya mulai menambahkan modul! Kita akan mulai dengan menambahkan judul Modul Teks ke kolom 6. Sertakan beberapa judul 2 salinan pilihan.

Pengaturan Teks Judul

Kemudian, buka tab desain dan ubah pengaturan teks judul modul.

• Judul 2 Font: Battambang
• Judul 2 Berat Font: Tebal
• Judul 2 Ukuran Teks: 4.2vw (Desktop), 10vw (Tablet), 8vw (Telepon)
• Spasi Judul 2 Huruf: -1px

Jarak

Tambahkan beberapa nilai spasi khusus di sebelahnya untuk membuat baris ini tumpang tindih dengan kolom ke-6 dan ke-5 dari baris tersebut.

• Margin Atas: 10vw
• Margin Kiri: -8vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kanan: -50vw (Tablet & Ponsel)

Tambahkan Modul Teks Deskripsi ke Kolom 6

Tambah isi

Modul berikutnya yang kita perlukan di kolom 6 adalah Modul Teks deskripsi. Tambahkan beberapa konten pilihan.

Jarak

Kemudian, buka pengaturan spasi dan dorong modul ini ke kiri juga.

• Margin Atas: 2vw
• Margin Kiri: -8vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kanan: -50vw (Tablet), -3vw (Telepon)

Tambahkan Modul Tombol ke Kolom 6

Tambahkan Salinan

Modul selanjutnya dan terakhir yang dibutuhkan pada kolom 6 adalah Modul Tombol. Tambahkan beberapa salinan pilihan.

Pengaturan Tombol

Kemudian, buka tab desain dan ubah pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Warna Teks Tombol: #ffffff
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #000000
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: -2px

Jarak

Dan lagi, kita perlu membuat modul ini tumpang tindih dengan kolom 5 dan 6 dengan menggunakan nilai margin khusus dalam pengaturan spasi.

• Margin Atas: 2vw (Desktop), 5vw (Tablet), 10vw (Telepon)
• Margin Kiri: -8vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Kanan: -50vw (Tablet & Ponsel)
• Padding Kiri: 30px
• Padding Kanan: 30px

Tambahkan Modul Gambar #1 ke Kolom 1

Dimensi Gambar

Saatnya mulai menambahkan semua modul gambar yang berbeda! Contoh yang kami buat ulang adalah 100% responsif jika Anda hanya menggunakan gambar dengan lebar 880 piksel dan tinggi 1320 . Jadi, jika Anda ingin membuat contoh yang sama persis dari awal, Anda harus menggunakan gambar dengan kumpulan dimensi tertentu. Namun, jika Anda ingin membuat ini berfungsi untuk semua jenis set dimensi gambar, Anda harus menyesuaikan unit viewport dari setiap Modul Gambar secara manual agar sesuai dengan desain keseluruhan.

Unggah Gambar

Masing-masing dari tiga kolom pertama akan menghitung dua Modul Gambar. Tambahkan Modul Gambar pertama ke kolom 1.

Jarak

Kemudian, buka pengaturan spasi dan tingkatkan ukuran gambar menggunakan unit viewport.

• Margin Atas: 0.5vw (Hanya Tablet & Ponsel)
• Margin Bawah: 0.5vw (Hanya Tablet & Ponsel)
• Margin Kiri: -5vw (Desktop), 0,5vw (Tablet & Telepon)
• Margin Kanan: -2vw (Desktop), 0,5vw (Tablet & Telepon)

Tambahkan Modul Gambar #2 ke Kolom 1

Unggah Gambar

Unggah juga Modul Gambar kedua di kolom 1.

Jarak

Dan ubah juga pengaturan spasi modul ini.

• Margin Atas: 0.4vw (Desktop), 0.5vw (Tablet & Telepon)
• Margin Bawah: 0.5vw (Hanya Tablet & Ponsel)
• Margin Kiri: -8.1vw (Desktop), 0.5vw (Tablet & Telepon)
• Margin Kanan: 3.7vw (Desktop), 0.5vw (Tablet & Telepon)
• Padding Kiri: 3vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Kanan: 3vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan Modul Gambar #3 ke Kolom 2

Unggah Gambar

Ke kolom kedua! Tambahkan Modul Gambar baru dan unggah gambar.

Jarak

Lanjutkan dengan menggunakan nilai margin dan padding kustom dalam pengaturan spasi untuk mengurangi ukuran gambar.

• Margin Atas: 0.5vw (Hanya Tablet & Ponsel)
• Margin Bawah: 0.5vw (Hanya Tablet & Ponsel)
• Margin Kiri: -0.5vw (Desktop), 0.5vw (Tablet & Telepon)
• Margin Kanan: 0.5vw (Hanya Tablet & Ponsel)
• Padding Kiri: 3vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Kanan: 3vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan Modul Gambar #4 ke Kolom 2

Unggah Gambar

Tambahkan Modul Gambar kedua ke kolom 2 juga.

Jarak

Dan ubah pengaturan spasi di sini juga.

• Margin Atas: 0.5vw
• Margin Bawah: 0.5vw (Hanya Tablet & Ponsel)
• Margin Kiri: -0.5vw (Desktop), 0.5vw (Tablet & Telepon)
• Margin Kanan: 0.5vw (Hanya Tablet & Ponsel)
• Padding Kiri: 3vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Kanan: 3vw (Desktop), 0vw (Tablet & Ponsel)

Tambahkan Modul Gambar #5 ke Kolom 3

Unggah Gambar

Ke kolom berikutnya dan terakhir. Tambahkan Modul Gambar pertama.

Jarak

Ubah pengaturan jarak dari Modul Gambar berikutnya. Nilai-nilai ini akan membantu meningkatkan ukuran gambar seperti yang Anda lihat di layar cetak di bawah ini.

• Margin Atas: 0.5vw (Hanya Tablet & Ponsel)
• Margin Bawah: 0.5vw (Hanya Tablet & Ponsel)
• Margin Kiri: -2.5vw (Desktop), 0.5vw (Tablet & Telepon)
• Margin Kanan: -17.5vw (Desktop), 0.5vw (Tablet & Telepon)

Tambahkan Modul Gambar #6 ke Kolom 3

Unggah Gambar

Tambahkan Modul Gambar berikutnya dan terakhir di kolom 3.

Jarak

Dan ubah seluruh posisinya dengan menambahkan nilai margin khusus. Untuk tujuan responsif, kami menambahkan modul ini ke kolom 3, bukan kolom 2.

• Margin Atas: -26.7vw (Desktop), 0.5vw (Tablet & Telepon)
• Margin Bawah: 0.5vw (Hanya Tablet & Ponsel)
• Margin Kiri: -20,5vw (Desktop), 0,5vw (Tablet & Ponsel)
• Margin Kanan: 17.3vw (Desktop), 0.5vw (Tablet & Telepon)

Aktifkan Lightbox untuk Modul Gambar #1

Setelah Anda memiliki semua gambar di tempatnya, Anda dapat melanjutkan dan mengaktifkan opsi lightbox di pengaturan Modul Gambar pertama.

• Buka di Lightbox: Ya

Salin Opsi Lightbox & Terapkan ke Semua Gambar di Bagian

Setelah Anda mengaktifkan opsi lightbox untuk Modul Gambar pertama, Anda dapat menyalin opsi ini dan menempelkannya ke semua Modul Gambar lainnya di bagian tersebut.

Tambahkan Radius Batas ke Modul Gambar #1

Tambahkan beberapa sudut membulat ke Modul Gambar pertama juga.

Perluas Radius Perbatasan ke Semua Gambar di Bagian

Dan perluas sudut membulat ini ke semua Modul Gambar di bagian untuk menghemat waktu.

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Peluang yang Anda miliki dengan baris 6 kolom baru Divi tidak terbatas. Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat kolase yang menakjubkan dan unik menggunakan baris 6 kolom dan unit viewport. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!