Cara Membuat Beranda Navigasi Ikon Responsif dengan Divi

Saat Anda membangun situs web dengan WordPress, Anda selalu dapat memilih halaman mana yang muncul lebih dulu ketika orang mengunjungi situs web Anda secara langsung. Sebagian besar pembuat situs web mengirim pengunjung segera ke beranda mereka. Tetapi Anda juga dapat memilih pendekatan lain yang memungkinkan pengunjung untuk memilih halaman mana di situs web Anda yang pertama kali mereka kunjungi dengan menambahkan halaman navigasi ikon sebagai beranda Anda. Setelah orang mengklik ke halaman pilihan mereka, mereka akan memiliki pengalaman situs web normal lagi dengan bilah menu di bagian atas halaman yang memungkinkan mereka menavigasi ke halaman lain. Ini berarti bahwa mereka tidak perlu kembali ke halaman navigasi ikon ini setelah mereka melewatinya setelah interaksi pertama.

Dalam tutorial ini, kami akan menunjukkan cara membuat beranda navigasi ikon modern dan 100% responsif yang akan terlihat bagus di semua ukuran layar. Kami juga akan membantu Anda menjadikan ini sebagai beranda situs web Anda dan menghapus bilah menu utama dan footer pada interaksi pertama.

Mari kita lakukan!

Pratinjau

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

Buat Halaman Baru

Berlangganan Saluran Youtube Kami

Tambahkan Halaman Baru

Mulailah dengan menambahkan halaman baru ke situs WordPress Anda.

Beri Halaman Anda Judul & Publikasikan

Berikan judul pada halaman Anda dan segera publikasikan halaman tersebut.

Setel Halaman sebagai Beranda

Buka Pengaturan Membaca Situs Web

Kemudian, buka pengaturan membaca situs web Anda.

Tetapkan Halaman Baru sebagai Beranda

Di sini, kita akan memilih halaman navigasi ikon baru sebagai beranda situs web kita.

Sembunyikan Bilah & Footer Menu Utama di Halaman Navigasi Ikon

Kembali ke Halaman Navigasi Ikon & Aktifkan Pembuat Visual Divi

Sekarang kita telah memilih beranda, kita dapat mulai membangun halaman navigasi ikon kita. Kembali ke halaman yang Anda buat dan beralih ke Divi's Visual Builder.

Setelah Anda melakukannya, Anda akan mendapatkan tiga kemungkinan. Anda dapat mulai membangun dari awal, memilih tata letak yang dibuat sebelumnya atau mengkloning halaman yang sudah ada. Pilih opsi pertama.

Tambahkan CSS Khusus untuk Menyembunyikan Bilah & Footer Menu Utama di Halaman Ini Saja

Karena ini adalah halaman navigasi, kami ingin fokus berada pada item menu yang kami buat secara manual. Itu sebabnya kami akan menyembunyikan bilah menu utama dan footer di halaman ini. Setelah orang melanjutkan ke situs web, mereka akan mendapatkan bilah menu utama dan footer kembali.

#main-header, #main-footer {
display: none;}

Mari Mulai Mendesain!

Tambahkan Bagian #1

Mari mulai membuat desain responsif dengan Divi! Tambahkan bagian reguler pertama.

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan aktifkan opsi 'Make This Row Fullwidth' di pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya

Tambahkan Modul Gambar

Unggah Logo Perusahaan

Modul pertama yang kita butuhkan di baris ini adalah Modul Gambar. Unggah logo perusahaan Anda sehingga orang tahu bahwa mereka telah membuka situs web yang benar.

Penyelarasan

Kemudian, ubah perataan gambar di tab desain. Pastikan Anda menonaktifkan opsi 'Selalu Pusatkan Gambar Di Seluler'.

• Perataan Gambar: Kiri

Jarak

Tambahkan beberapa margin bawah kustom berikutnya.

• Bawah: 10vw (Desktop), 20vw (Tablet & Ponsel)

Tambahkan Modul Teks

Tambahkan Konten H1

Modul selanjutnya yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Lanjutkan dengan memodifikasi pengaturan teks H1 di tab desain.

• Font Judul: Didact Gothic
• Berat Huruf Judul: Tebal
• Perataan Teks Judul: Kiri
• Warna Teks Judul: #333333
• Ukuran Teks Judul: 5vw (Desktop), 6vw (Tablet), 7vw (Telepon)
• Judul Garis Tinggi: 0.8em

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 68% (Desktop), 80% (Tablet), 88% (Ponsel)
• Penyelarasan Modul: Kiri

Tambahkan Modul Pembagi

Visibilitas

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Kemudian, buka tab desain dan ubah warna ikon.

• Warna: #333333

Perekat

Ubah juga pengaturan ukuran modul.

• Berat Pembagi: 10px
• Lebar: 8% (Desktop), 20% (Tablet), 25% (Ponsel)
• Penyelarasan Modul: Kiri

Tambahkan Bagian #1

Ke bagian berikutnya! Tambahkan bagian reguler di bawah yang sebelumnya.

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian tersebut.

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

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

Jarak

Kemudian, buka pengaturan spasi dan buat beberapa perubahan di berbagai ukuran layar.

• Padding Bawah: 0.2vw
• Padding Kiri: 4vw (Desktop), 2vw (Tablet), 1vw (Telepon)
• Padding Kanan: 25vw (Desktop), 2vw (Tablet), 1vw (Telepon)
• Kolom 1 Padding Kanan: 0.2vw
• Kolom 2 Padding Kiri: 0.1vw
• Kolom 2 Padding Kanan: 0.1vw
• Kolom 3 Padding Kiri: 0.2vw

CSS khusus

Kami memastikan semua kolom muncul bersebelahan, bahkan di tablet dan ponsel, dengan menambahkan satu baris kode CSS ke elemen utama di tab lanjutan.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Tambahkan judul

Sekarang kita bisa mulai menambahkan modul kita! Tambahkan Modul Blurb baru ke kolom pertama dan masukkan judul.

Pilih Ikon

Kemudian, pilih ikon pilihan Anda.

Tautan

Tambahkan tautan ke modul juga. Pastikan Anda menggunakan URL yang benar yang akan mengarahkan pengunjung ke halaman yang ingin mereka kunjungi.

• URL Tautan Modul: https://www.yourwebsite.com/homepage

Latar Belakang Gradien

Tambahkan latar belakang gradien berikutnya.

• Warna 1: #4b42ff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 60%
• Posisi Akhir: 60%

Gambar latar belakang

Bersama dengan gambar latar belakang. Simpan gambar berikut ke desktop Anda:

Dan gunakan dalam kombinasi dengan pengaturan latar belakang berikut:

• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan

Pengaturan Ikon

Lanjutkan dengan mengubah pengaturan ikon di tab desain.

• Warna Ikon: #ffffff
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ikon Ukuran Font: 4vw (Desktop), 6vw (Tablet), 8vw (Telepon)

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font: Didact Gothic
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ffffff
• Judul Teks Ukuran: 2vw (Desktop), 3vw (Tablet), 4vw (Telepon)
• Spasi Huruf Judul: -2px
• Tinggi Baris Judul: 0em

Jarak

Dan tambahkan beberapa nilai padding atas dan bawah khusus untuk ukuran layar yang berbeda.

• Padding Atas: 9vw (Desktop & Tablet), 12vw (Telepon)
• Padding Bawah: 9vw (Desktop & Tablet), 12vw (Telepon)

Clone Blurb Module Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda selesai memodifikasi Modul Blurb di kolom 1, Anda dapat melanjutkan dan mengkloning modul dua kali. Tempatkan duplikat di kolom baris yang tersisa.

Ubah Konten Blurb

Tentu saja, Anda harus mengubah judul setiap duplikat.

Ubah Ikon Blurb

Bersama dengan ikon.

Ubah Tautan Blurb

Cocokkan Modul Blurb baru dengan URL unik yang mengarah ke halaman yang benar.

• URL Tautan Modul: https://www.yourwebsite.com/about

Ubah Latar Belakang Blurb Gradien

Kemudian, ubah warna pertama dari latar belakang gradien dari kedua duplikat.

• Warna 1: #f9f9f9

• Warna 1: #ff445d

Ubah Ikon & Warna Teks Modul Blurb di Kolom 2

Dan cocokkan ikon dan warna teks Modul Blurb dengan warna latar belakang gradien baru.

• Warna Ikon: #000000
• Judul Teks warna: #000000

Klon Seluruh Baris

Setelah Anda menyelesaikan baris, Anda dapat mengkloningnya sepenuhnya.

Modul Clone Blurb di Kolom 2

Kloning Modul Blurb di kolom 2.

Tempatkan Modul Blurb Latar Belakang Cahaya di Kolom 1 & Kolom 3

Dan tempatkan Modul Blurb latar belakang terang di kolom 1 dan 3.

Tempatkan Modul Blurb Latar Belakang Warna di Kolom 2

Pindahkan salah satu Modul Blurb latar belakang warna ke kolom kedua.

Hapus Modul Blurb yang Tersisa

Dan hapus Modul Blurb yang tersisa.

Ubah Konten Blurb

Sekali lagi, Anda harus mengubah judul setiap Modul Blurb.

Ubah Ikon Blurb

Bersama dengan ikon.

Ubah Tautan Blurb

Dan link juga.

• URL Tautan Modul: https://www.yourwebsite.com/shop

Ubah Latar Belakang Gradien Modul Blurb di Kolom 2

Last but not least, ubah warna pertama dari latar belakang gradien Modul Blurb di kolom 2.

• Warna 1: #000000

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat halaman navigasi ikon dan menggunakannya sebagai beranda Anda. Pendekatan ini memungkinkan pengunjung Anda untuk memilih halaman mana yang mereka navigasikan sebelum mereka melihat konten situs web. Setelah seseorang mengklik item menu, mereka akan mengalami navigasi normal melalui bilah menu utama lagi. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!