Membuat Dasbor Navigasi yang Mencolok dengan Struktur Kolom Baru Divi

Diterbitkan: 2018-09-10

Mencari cara baru dan unik untuk menyusun beranda Anda? Membuat dasbor navigasi mungkin merupakan cara yang harus dilakukan. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana tepatnya Anda dapat mencapai halaman dasbor yang menakjubkan yang dapat Anda gunakan untuk berbagai tujuan.

Apakah Anda ingin mengubah cara orang menavigasi di halaman Anda, atau Anda ingin menyoroti layanan yang ditawarkan perusahaan Anda, membuat dasbor akan membantu Anda mencapai apa yang Anda pikirkan. Kami hanya menggunakan opsi bawaan Divi dan di atas itu, kami juga menyediakan Anda dengan palet warna terang dan gelap yang dapat Anda gunakan. Tutorial ini terinspirasi oleh salah satu desain Edoardo Mercati.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil akhirnya pada ukuran layar yang berbeda:

dasbor divi

Palet Warna

Sebelum memulai, Anda dapat memilih apakah Anda ingin membuat dasbor terang atau gelap. Warna yang Anda perlukan untuk setiap palet warna tercantum di bawah ini. Pastikan Anda menjaga kode warna ini tetap dekat sehingga Anda dapat menggunakannya setelah Anda melalui tutorial. Saat menggunakan warna khusus untuk palet warna, kita akan mengacu pada nomor warna.

Lampu

Warna #1: #f6f6f6 (latar belakang bagian)
Warna #2: #ffffff (latar belakang kolom)
Warna #3: #333333 (warna teks judul)
Warna #4: #000000 (warna pembagi)
Warna #5: #6F6B68 (blurb warna teks isi)
Warna #6: #e5e5e5 (latar belakang kolom 2)
Warna #7: #ffffff (warna latar blurb)

Gelap

Warna #1: #141414
Warna #2: #22121
Warna #3: #ffffff
Warna #4: #ffffff
Warna #5: #dddddd
Warna #6: #2212121
Warna #7: #333333

Warna Bersama

Warna #7: #0457ff
Warna #8: #cc0432
Warna #9: #839e00
Warna #10: #c68e00

Mari Mulai Berkreasi

Tambahkan Bagian Standar Baru

Warna latar belakang

Mulailah dengan menambahkan bagian baru ke halaman Anda. Kemudian, buka pengaturan bagian dan tambahkan warna latar belakang:

Warna Latar Belakang: Warna #1 (Temukan di Palet Warna)

dasbor divi

Jarak

Untuk membuat beberapa ruang ekstra di bagian atas dan bawah, kami juga akan menerapkan beberapa bantalan khusus:

Padding Atas: 100px
Padding Bawah: 100px

dasbor divi

Tambahkan Baris #1

Struktur Kolom

Sekarang setelah kita selesai memodifikasi pengaturan bagian, kita dapat mulai menambahkan baris. Pilih struktur kolom berikut untuk baris pertama Anda:

dasbor divi

Warna Latar Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar kolom 1:

Kolom 1 Warna Latar Belakang: Warna #2 (Temukan di Palet Warna)

dasbor divi

Perekat

Buka tab Desain berikutnya dan ubah pengaturan Ukuran baris Anda:

Jadikan Baris Ini Lebar Penuh: Ya
Gunakan Lebar Talang Kustom: Ya
Lebar Talang: 2
Samakan Tinggi Kolom: Ya

dasbor divi

Jarak

Terakhir, tambahkan beberapa padding ke baris dan kolom pertama:

Padding Bawah: 100px
Kolom 1 Padding Atas: 100px
Kolom 1 Padding Bawah: 100px
Kolom 1 Padding Kiri: 50px
Kolom 1 Padding Kanan: 50px

dasbor divi

Tambahkan Modul Teks Judul ke Kolom 1

Pengaturan Teks H1

Saatnya mulai menambahkan modul! Kita akan mulai dengan menambahkan judul Modul Teks. Setelah Anda menambahkan salinan H1, ubah Pengaturan Teks Judul modul Anda:

Berat Huruf Judul: Tebal
Perataan Teks Judul: Kiri
Warna Teks Judul: Warna #3 (Temukan di Palet Warna)
Ukuran Teks Judul: 75px (Desktop), 55px (Tablet), 36px (Telepon)

dasbor divi

Tambahkan Modul Pembagi ke Kolom 1

Warna Pembagi

Tepat di bawah judul Modul Teks, lanjutkan dan tambahkan Modul Pembagi dengan warna berikut:

Warna Pembagi: Warna #4 (Temukan di Palet Warna)

dasbor divi

Perekat

Buka pengaturan Ukuran berikutnya dan sesuaikan lebar pembagi Anda:

Lebar: 27%

dasbor divi

Jarak

Tambahkan beberapa ruang di bagian atas pembagi Anda juga:

Margin Atas: 50px

dasbor divi

Tambahkan Modul Teks Deskripsi ke Kolom 1

Pengaturan Teks

Modul berikutnya dan terakhir di baris ini adalah Deskripsi Modul Teks. Setelah Anda menambahkan konten Anda, ubah orientasi teks di pengaturan teks:

Orientasi Teks: Justify

dasbor divi

Perekat

Ubah juga pengaturan Ukuran modul ini:

Lebar: 80% (Desktop), 100% (Tablet & Ponsel)

dasbor divi

Jarak

Dan tambahkan beberapa ruang di bagian atas modul Anda menggunakan margin khusus:

Margin Atas: 50px

dasbor divi

Tambahkan Modul Blurb ke Kolom 2

ikon

Sekarang kita dapat melanjutkan ke kolom kedua. Kami akan memulai dengan membuat salah satu Modul Blurb. Setelah itu, kita dapat mengkloning modul ini dan mengubahnya sesuai dengan itu. Setelah menambahkan Modul Blurb dan mengubah konten, pilih ikon pilihan Anda.

dasbor divi