Cara Membuat Beranda Navigasi dengan Divi

Ada banyak sekali pendekatan yang dapat Anda terapkan di beranda Anda, tetapi jika Anda ingin menambahkan sedikit sentuhan ekstra ke situs web Anda, memilih laman navigasi sebagai beranda Anda mungkin merupakan cara yang tepat. Anda tidak akan sering melihatnya dan itu memberi pengunjung Anda pandangan yang jelas tentang apa yang dapat mereka harapkan dari situs web Anda. Selain itu, ini juga akan membantu pengunjung Anda menavigasi secara visual melalui halaman berbeda yang penuh dengan konten luar biasa yang Anda sediakan.

Untuk menunjukkan kepada Anda bagaimana Anda bisa menyelesaikannya dengan Divi, dengan gaya dan elegan, kami telah membuat desain yang akan kami tunjukkan cara membuatnya kembali di posting ini. Akan ada dua versi; versi desktop dan yang cocok untuk tablet dan ponsel. Sebelum kita masuk ke tutorial, mari kita lihat hasil akhirnya.

Hasil di Desktop

Hasil yang akan kita buat ulang terlihat seperti ini di desktop:

Hasil di Seluler

Hasilnya di ponsel sedikit berbeda dan terlihat seperti ini:

Cara Membuat Beranda Navigasi dengan Divi

Berlangganan Saluran Youtube Kami

Buat Ulang Versi Desktop

Kami akan membuat dua versi halaman navigasi; versi desktop dan versi untuk tablet dan ponsel. Dengan begitu, kami akan memastikan bahwa halaman navigasi terlihat bagus di semua perangkat. Seperti biasa, kita akan memulai dengan membuat versi desktop.

Tambahkan Bagian Baru

Mulailah dengan membuat halaman baru dan menambahkan bagian reguler ke dalamnya. Untuk tutorial ini, kita hanya akan menggunakan satu bagian yang akan menyertakan semua baris dengan konten yang kita perlukan (baik untuk versi desktop dan seluler). Namun, Anda juga dapat memilih untuk memisahkan versi desktop dan seluler menjadi dua bagian.

Buat Ulang Baris Navigasi Pertama

Seperti yang dapat Anda perhatikan dalam pratinjau hasil di atas, masing-masing item navigasi memiliki desain yang kurang lebih sama dengan beberapa detail berbeda. Sebagian besar pengaturan untuk setiap item navigasi yang ingin Anda buat adalah sama. Itulah mengapa kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat baris pertama secara mendetail, dan kemudian menunjukkan kepada Anda bagaimana Anda dapat membuat modifikasi untuk item navigasi lain yang juga ingin Anda tambahkan ke halaman.

Struktur Kolom

Pertama-tama, pilih kolom lebar penuh untuk baris yang baru saja Anda tambahkan. Sebelum kita menambahkan modul apa pun ke dalamnya, kita akan memastikan pengaturan baris sudah ada, jadi lanjutkan dan buka pengaturan baris.

Gambar latar belakang

Saat berada di tab Konten, hal pertama yang akan kita lakukan adalah menambahkan gambar latar belakang ke baris Anda. Sebaiknya gunakan gambar yang memiliki lebar '1400px' dan tinggi '934px' karena akan memberikan hasil terbaik. Juga, pastikan Anda menempatkan gambar pada 'tidak ada pengulangan'.

Penyelarasan

Kemudian, lanjutkan ke tab Desain dan tambahkan perataan kanan ke baris Anda. Dengan melakukan ini, Anda akan membuat ruang yang cukup di sisi kiri layar Anda untuk menambahkan deskripsi dan tautan.

Perekat

Selanjutnya, buka subkategori Sizing, aktifkan opsi 'Use Custom Width' dan gunakan persentase lebar '100%'.

Jarak

Selanjutnya, kami ingin menambahkan sedikit ruang putih di antara setiap item navigasi, itu sebabnya kami akan menambahkan margin atas dan bawah '5px' ke baris.

Visibilitas

Last but not least, kami ingin menonaktifkan baris ini di ponsel dan tablet karena kami akan membuat baris lain yang akan cocok dengan tablet dan ponsel nanti di postingan ini.

Modul Teks untuk Deskripsi Halaman

Pengaturan Teks

Setelah pengaturan baris selesai, Anda dapat menambahkan Modul Teks pertama ke kolom baris dan menggunakan pengaturan berikut untuk subkategori Teks di tab Desain:

• Font Teks: Andika
• Berat Font Teks: Reguler
• Ukuran Teks: 13px
• Warna Teks: #000000
• Tinggi Baris Teks: 1.1em
• Orientasi Teks: Kiri

Perekat

Gulir ke bawah, buka subkategori Ukuran dan tambahkan lebar '18%'. Lebar ini akan memastikan bahwa Modul Teks kita tidak akan melewati gambar latar belakang baris kita setelah kita menambahkan margin kiri negatif ke dalamnya.

Jarak

Seperti disebutkan pada langkah sebelumnya, kami ingin Modul Teks berada di sisi kiri baris kami tanpa tumpang tindih dengan latar belakang baris. Kami juga ingin memiliki beberapa ruang antara bagian atas gambar baris dan awal Modul Teks, itu sebabnya kami menggunakan beberapa margin atas juga.

• Margin Atas: 150px
• Margin Kiri: -20px
• Padding Atas: 10px
• Padding Bawah: 10px

Modul Pembagi

Visibilitas

Selanjutnya, lanjutkan dan tambahkan modul Divider tepat di bawah Modul Teks. Dalam subkategori Visibilitas, aktifkan opsi 'Tampilkan Pembagi'.

Warna

Kemudian, pindah ke tab Design dan tambahkan '#FFFFFF' sebagai warna pembagi.

Gaya

Selanjutnya, pilih 'Solid' sebagai Divider Style dan 'Top' sebagai Divider Position.

Perekat

Terakhir, buat pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 5px
• Tinggi: 23px
• Lebar: 47%
• Penyelarasan Modul: Kiri

Modul Teks untuk Item Menu

Teks Tautan di Kotak Konten

Setelah Anda selesai dengan Modul Pembagi, lanjutkan dan tambahkan Modul Teks lain tepat di bawahnya. Modul Teks ini akan menjadi item navigasi kita. Buka pengaturan, masukkan teks dan tambahkan tautan ke sana.

Warna Latar Belakang Gradien

Saat masih berada di tab Konten, gunakan pengaturan latar belakang gradien berikut:

• Warna Pertama: #FFFFFF
• Warna Kedua: rgba (12.113.195.0.62)
• Tipe Gradien: Linier
• Arah Gradien: 108 derajat
• Posisi Awal: 31%
• Posisi Akhir: 21%

Pengaturan Teks Tautan

Lalu, buka tab Desain dan buat pengaturan berikut berlaku untuk tab tautan Subkategori Teks:

• Font Tautan: Andika
• Berat Font Tautan: Tebal
• Gaya Font Tautan: Huruf Besar & Garis Bawah
• Gaya Garis Bawah Tautan: Padat
• Ukuran Teks Tautan: 100px
• Warna Teks Tautan: #000000
• Tinggi Garis Tautan: 1em

Jarak

Modul Teks ini juga perlu muncul di sisi kiri layar, itu sebabnya kami menambahkan margin kiri. Kami juga ingin jarak antara Modul Pembagi dan Modul Teks ini menjadi lebih kecil, di situlah margin atas negatif masuk. Untuk membuat perataan horizontal tengah itu, kita juga akan menambahkan margin bawah. Dan terakhir, kami ingin latar belakang gradien menjadi lebih besar, itu sebabnya kami menggunakan padding atas dan bawah.

• Margin Atas: -33px
• Margin Bawah: 250px
• Margin Kiri: -20px
• Padding Atas: 80px
• Padding Bawah: 80px

Kloning Baris Navigasi Pertama Sesering yang Dibutuhkan

Item navigasi yang berbeda pada halaman navigasi Anda akan memiliki, kurang lebih, pengaturan yang sama. Itu sebabnya kami menyarankan untuk mengkloning baris sebanyak yang Anda butuhkan dan membuat modifikasi detail setelahnya. Ada tiga hal yang perlu Anda ubah, mari kita lihat.

Ubah Latar Belakang Baris

Hal pertama yang perlu Anda lakukan adalah mengubah gambar latar belakang duplikat baris Anda. Sekali lagi, pastikan Anda menggunakan gambar dengan lebar '1400px' dan tinggi '943px' untuk mendapatkan hasil terbaik.

Ubah Modul Teks untuk Item Menu

Ubah Tautan

Kemudian, buka item navigasi Modul Teks dan ubah teks beserta tautannya.

Ubah Latar Belakang Gradien Menurut Panjang Teks

Terakhir, Anda juga perlu mengubah latar belakang gradien Modul Teks ini. Ubah warna gradien kedua menjadi 'rgba(224,43,32,0.62)' dan ubah nilai Posisi Awal sesuai dengan panjang item navigasi baru Anda. Jika Anda memiliki item navigasi yang cukup panjang, Anda ingin mengubah persentase Posisi Awal ke nilai yang lebih tinggi hingga Anda melihatnya masuk ke tempatnya.

Buat Ulang Versi Seluler

Sekarang setelah kita membuat versi Desktop, kita juga akan membuat versi tablet dan seluler. Gaya Modul yang berbeda hampir sama dengan versi desktop tetapi di balik layar, struktur baris kami benar-benar berbeda. Karena banyaknya modifikasi yang harus Anda buat untuk setiap modul jika ingin mengkloningnya, saya hanya akan menunjukkan cara membuatnya dari awal tanpa mengkloning modul apa pun dari versi Desktop.

Buat Ulang Baris Navigasi Pertama

Mulailah dengan menambahkan baris lain ke bagian yang telah kita buat di awal posting ini.

Struktur Kolom

Kolom ini, seperti versi desktop, juga hanya membutuhkan satu kolom.

Perekat

Ukuran baris ini adalah sebagai berikut:

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

Pengaturan ini akan memastikan baris kita memenuhi seluruh lebar layar.

Visibilitas

Dan terakhir, nonaktifkan baris ini di desktop karena kami memiliki baris lain yang akan ditampilkan di desktop.

Modul Teks untuk Deskripsi Halaman

Pengaturan Teks

Silakan dan tambahkan Modul Teks pertama ke baris. Buat pengaturan berikut berlaku untuk subkategori Teks:

• Font Teks: Andika
• Berat Font Teks: Reguler
• Ukuran Teks: 13px
• Warna Teks: #000000
• Tinggi Baris Teks: 1.1em
• Orientasi Teks: Tengah

Perekat

Kemudian, buka subkategori Sizing dan, gunakan lebar '71%' dan Alignment Modul tengah.

Jarak

Terakhir, Modul Teks ini akan membutuhkan padding atas dan bawah '10px'. Seperti yang Anda lihat, nilai margin tidak diperlukan dalam versi tablet dan seluler karena kami memilih perataan tengah.

Modul Teks untuk Item Menu

Teks Tautan di Kotak Konten

Untuk versi Seluler, kami tidak memerlukan Modul Pembagi jadi kami akan melewati langkah itu. Sebagai gantinya, kita akan segera menambahkan item navigasi Text Module tepat di bawah Text Module sebelumnya yang telah kita buat. Setelah Anda melakukannya, tambahkan teks dengan tautan ke Kotak Konten di tab Konten.

Warna Latar Belakang Gradien

Latar belakang gradien yang akan kita gunakan untuk Modul Teks ini sama dengan versi Desktop satu:

• Warna Pertama: #FFFFFF
• Warna Kedua: rgba (12.113.195.0.62)
• Tipe Gradien: Linier
• Arah Gradien: 108deg
• Posisi Awal: 31%
• Posisi Akhir: 21%

Pengaturan Teks Tautan

Manfaatkan pengaturan berikut untuk Subkategori Teks:

• Font Tautan: Andika
• Berat Font Tautan: Tebal
• Ukuran Teks: 65px
• Warna Teks: #000000
• Tinggi Baris Teks: 1em
• Orientasi Teks: Kiri

Jarak

Seperti versi desktop, modul teks item navigasi ini akan membutuhkan padding atas dan bawah '80px' untuk membuat latar belakang gradien lebih besar.

Modul Gambar

Unggah Gambar

Terakhir, tambahkan Modul Gambar sebagai modul terakhir di baris Anda dan unggah gambar pilihan.

Kloning Baris Navigasi Pertama Sesering yang Dibutuhkan

Hal yang sama berlaku untuk versi seluler; Anda dapat mengkloning baris yang baru saja Anda buat sebanyak yang diperlukan untuk menambahkan item navigasi lainnya juga. Ada tiga hal yang perlu Anda ubah setiap kali Anda menambahkan item navigasi baru, mari kita lihat.

Ubah Modul Teks untuk Item Menu

Ubah Tautan

Hal pertama yang perlu Anda ubah adalah teks dan tautan di dalam Kotak Konten pada tab Konten pada modul teks item navigasi Anda.

Ubah Latar Belakang Gradien Menurut Panjang Teks

Kemudian, Anda juga dapat mengubah warna gradien kedua menjadi 'rgba(224,43,32,0.62)' dan mengubah nilai posisi awal sesuai dengan panjang teks Anda.

Ubah Modul Gambar

Terakhir, Anda juga dapat mengubah gambar Modul Gambar di dalam baris itu.

Hasil

Setelah Anda membuat versi desktop dan seluler, Anda akan memiliki halaman navigasi menakjubkan yang terlihat bagus di desktop, tablet, dan ponsel. Mari kita lihat hasil akhir.

Hasil di Desktop

Hasil di Seluler

Pikiran Akhir

Membuat halaman navigasi sebagai beranda Anda pasti akan meninggalkan bekas pada pengunjung Anda. Tidak hanya membantu pengunjung Anda menavigasi secara lebih visual, tetapi juga memungkinkan mereka untuk melihat cuplikan yang lebih terperinci tentang apa yang ditawarkan situs web Anda. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!

Gambar Unggulan oleh LanKogal / shutterstock.com