Buat Situs Web Satu Halaman Dengan Navigasi Satu Halaman Di WordPress (Dengan Bonus)

Apakah Anda ingin membuat situs web untuk bisnis Anda tetapi tidak punya waktu untuk membuat yang besar? Atau belum siap berkomitmen untuk pemeliharaan situs web jangka panjang?

Maka Anda harus pergi untuk Situs Web Satu Halaman dengan Navigasi Satu Halaman. Situs web satu halaman memberikan semua informasi dengan cara yang menarik dan memberikan situs web Anda tampilan yang menakjubkan sehingga pengguna Anda dapat terlibat lebih banyak.

Di blog ini, Anda tidak hanya akan belajar Cara membuat situs web satu halaman dengan navigasi satu halaman di WordPress tetapi juga cara menambahkan formulir kontak di pop-up sebagai bonus.

Kebanyakan orang meninggalkan situs web jika mereka tidak menemukan cara yang tepat untuk menghubungi pemiliknya, jadi tip bonus ini benar-benar akan menambah nilai luar biasa pada situs web Anda.

Jangan buang waktu lagi dan mulai proses pembuatan situs web yang tampak menakjubkan dengan navigasi satu halaman Elementor . Anda dapat melihat tampilan akhir situs dari tombol di bawah ini:

Apa itu Navigasi Satu Halaman?

Navigasi satu halaman seperti namanya adalah menu navigasi yang dirancang khusus untuk menavigasi ke berbagai bagian situs web satu halaman. Navigasi satu halaman dengan efek pengguliran yang mulus membuat navigasi ke bagian yang berbeda menjadi pengalaman yang mudah dan ramah pengguna.

"Kesederhanaan adalah kecanggihan tertinggi." — Leonardo da Vinci

Dan kesederhanaan ini memberi situs web satu halaman keunggulan yang mereka butuhkan daripada yang lain. Situs web satu halaman sangat bagus untuk usaha kecil seperti perencana Pernikahan, Fotografi, Salon Kecil, Restoran, dll.

Namun, jika Anda memiliki bisnis eCommerce besar yang menjual terlalu banyak produk atau menyediakan banyak layanan dan perlu melayani audiens yang lebih besar, maka situs web satu halaman bukan untuk Anda.

Apa manfaat situs web satu halaman dengan Navigasi Satu Halaman?

Anda tidak boleh berpikir untuk mendapatkan situs web satu halaman untuk bisnis Anda hanya karena bisnis Anda kecil. Ada banyak manfaat lain untuk memiliki situs web satu halaman terutama situs web WordPress satu halaman. Mari kita lihat beberapa kelebihannya:

• Pertama, ini ramah seluler. Itu hal penting untuk dipertimbangkan ketika datang ke situs web SEO (Search Engine Optimization). Pada tahun 2021, 70% warga AS menggunakan perangkat seluler untuk mencari di internet. Data seperti inilah yang menjadi alasan mengapa Google memprioritaskan website yang mobile-friendly. Dengan desain satu halaman, situs web Anda masuk dalam buku-buku bagus Google sejak awal.

• Kebanyakan orang lebih suka situs web yang polos, indah, dan to the point daripada situs web yang terlalu panjang.
• Google menghitung Domain dan otoritas tautan tingkat halaman hingga tingkat 40%. Ini adalah area lain di mana situs satu halaman Anda akan memiliki keuntungan.
• Situs web satu halaman memuat lebih cepat daripada situs web dengan banyak halaman. Mempertimbangkan fakta bahwa orang saat ini memiliki pilihan yang tidak terbatas, memiliki situs yang memuat cepat benar-benar tidak dapat dinegosiasikan.
• Situs satu halaman mudah dirawat.
• Karena situs web satu halaman memiliki semua informasi pada satu halaman, navigasi gulir membuatnya lebih mudah untuk dinavigasi dan efek gulir yang mulus membuat pengalaman pengguna yang menenangkan.

Saya dapat melanjutkan untuk beberapa waktu lagi, tetapi saya pikir informasi di atas menyampaikan pesan bahwa jika bisnis Anda kecil, maka Anda bisa mendapatkan keuntungan besar yang sebenarnya sangat besar menggunakan situs web kecil dengan navigasi satu halaman. Jadi, mari kita lompat ke proses utama tanpa membuang waktu.

Cara Membuat Situs Web Tunggal dengan Navigasi Satu Halaman Di WordPress

Di blog ini, saya akan menunjukkan kepada Anda tidak hanya bagaimana membangun situs web tetapi juga navigasi satu halaman yang tampak modern di WordPress yang akan mengesankan klien potensial Anda. Untuk tutorial ini, saya akan menggunakan WordPress pembuat Situs Web Populer (saya tahu itu tertulis di judul!)

Jadi, mari kita mulai…

Langkah #1: Instal Plugin WordPress yang diperlukan

Setelah Anda menginstal WordPress di sistem Anda. Anda perlu menginstal plugin WordPress berikut:

• Elementor (Versi gratis)
• ElementsKit (Versi gratis dan Pro keduanya)
• MetForm (Versi gratis)

Setelah Anda selesai menginstal dan mengaktifkan plugin WordPress yang diperlukan, saatnya untuk membangun situs.

Langkah #2: Buat situs web menggunakan halaman premade ElementsKit

ElementsKit menyediakan banyak halaman dan templat serta bagian yang telah dibuat sebelumnya sehingga orang dapat membangun situs web dengan desain, tata letak, dan gaya apa pun yang mereka inginkan juga tanpa pengkodean. Untuk blog ini, saya akan menggunakan halaman arahan Wedding planner oleh ElementsKit.

Untuk membuat situs web Anda, Dari Dasbor WordPress, Buka Halaman Tambah Baru

• Beri judul seperti Home, pilih Elementor Full Width dari opsi Template
• Klik untuk Terbitkan dan setelah menerbitkan klik Edit dengan Elementor

• Klik Tombol ElementsKit (EK) setelah Jendela Pembuat Elemen terbuka

• Buka tab Halaman , Cari Halaman Pernikahan dan klik sisipkan

Sekarang klik perbarui untuk menyimpan

Langkah #3: Cara menambahkan Elementor satu halaman navigasi menggunakan ElementsKit

Sekarang setelah kita memiliki situs web, saatnya untuk bagian yang menyenangkan yaitu menambahkan navigasi gulir satu halaman.ElementsKit Navigasi gulir satu halaman lebih mudah digunakan dan memberikan tampilan yang menakjubkan pada situs Anda. Anda sangat tidak mungkin menemukan addon Elementor navigasi satu halaman lain sebaik ElementsKit.

Sekarang, mari kita lihat proses langkah demi langkah menambahkan tautan navigasi gulir satu halaman ke situs WordPress Anda:

3.1 Aktifkan Modul Gulir Satu Halaman

Untuk menambahkan navigasi gulir ke situs WordPress Anda, pertama-tama, kita perlu mengaktifkan Modul Gulir Satu Halaman.

• Buka: Dasbor WordPress ElementsKit Modul
• Nyalakan Gulir Satu Halaman
• Klik Simpan Perubahan untuk memperbarui

3.2 Aktifkan Gulir Satu Halaman dari pengaturan halaman

• Klik ikon Pengaturan di sudut kiri bawah Panel Elemen
• Buka tab Pengaturan ElementsKit
• Aktifkan opsi Gulir Satu Halaman

Catatan: Jika Anda tidak dapat menemukan opsi Pengaturan Gulir Satu Halaman, maka Anda mungkin belum mengaktifkan ElementsKit Pro Anda

3.3 Pilih Gaya Navigasi

Sekarang, saatnya memilih gaya navigasi. ElementsKit memberi Anda banyak opsi untuk navigasi. Misalnya, di bawah lingkaran, Anda mendapatkan Scale-up, fill in, fill out, dll. Untuk pola persegi, Anda akan memiliki opsi seperti scale-up dan sebagai bagian dari Line Anda akan mendapatkan opsi seperti garis untuk tumbuh, isi garis , penyusutan garis, dll.

Anda dapat memilih gaya apa pun yang Anda suka, untuk blog ini saya akan memilih ikon khusus. Setelah Anda memilih ikon Kustom, Anda akan mendapatkan opsi untuk memilih ikon untuk opsi Gaya Navigasi Gulir Satu Halaman. Anda dapat memilih ikon baik dari pustaka ikon atau mengunggah ikon SVG khusus .

Untuk memilih ikon khusus

• Pilih opsi Ikon Kustom dari tarik-turun gaya navigasi
• Arahkan kursor ke ikon navigasi dan klik pustaka Ikon
• Cari dan Sisipkan Ikon yang Anda suka

3.4 Atur pengaturan Navigasi lainnya

Setelah Anda memilih gaya navigasi, Anda akan mendapatkan akses ke pengaturan berikut:

• Posisi Navigasi: Anda dapat mengatur posisi navigasi sebagai atas, kanan, bawah, atau kiri.
• Offset Posisi Navigasi: Di ​​sini Anda dapat memilih nilai offset posisi navigasi.
• Jarak Navigasi: Pilih ruang yang Anda inginkan di antara setiap ikon navigasi.
• Warna Navigasi: Pilih warna untuk ikon navigasi.
• Tipografi Tooltip: Di sini Anda dapat memilih keluarga, ukuran font, transformasi berat, gaya, dekorasi, dan tinggi garis untuk tooltip.

3.5 Tambahkan bagian halaman ke tautan navigasi

Sekarang setelah semua pengaturan selesai, saatnya menambahkan bagian yang ingin Anda tampilkan di navigasi. Untuk melakukannya

• Arahkan kursor ke bagian dan klik ikon Edit Bagian
• Buka tab Lanjut
• Perluas opsi ElementsKit Onpage Scroll
• Aktifkan aktifkan bagian untuk membuat bagian terlihat
• Aktifkan opsi aktifkan do t untuk menambahkan bagian ini sebagai salah satu tautan navigasi
• Berikan nama untuk teks tooltip . Teks tooltip akan muncul ketika seseorang mengarahkan kursor ke tautan
• Terakhir, klik perbarui untuk menyimpan

Anda dapat mengulangi proses yang sama yang disebutkan di atas untuk menambahkan semua bagian yang Anda inginkan ke navigasi.

Catatan: Anda dapat menambahkan bagian ke navigasi, bukan bagian dalam. Jadi, Anda tidak akan menemukan opsi ElementsKit Onpage Scroll di bawah tab lanjutan untuk bagian dalam atau widget lainnya.

Setelah Anda melakukan semua navigasi, perbarui dan klik untuk melihat pratinjau navigasi satu halaman di WordPress dan juga untuk memeriksa tautan menu navigasi.

Langkah #4: Tambahkan Header Footer menggunakan bagian header footer ElementsKit yang sudah dibuat sebelumnya

Nah, Anda memiliki navigasi satu halaman situs web di WordPress sekarang tetapi Anda masih memerlukan header footer untuk melengkapi situs web Anda. Bagian Header dan Footer dari sebuah situs web sangat penting untuk menampilkan logo dan informasi penting Anda sehingga pelanggan Anda dapat dengan mudah melihatnya.

ElementsKit memberi Anda banyak bagian Header dan Footer premade untuk dipilih. Untuk menggunakan Footer Header ElementsKit:

• Pergi ke ElementsKit Header Footer Klik Tambah Baru

• Pilih Type as Header , Conditions as Entire Site , Aktifkan opsi Activate/Deactivate dan terakhir klik Save changes .

• Sekarang untuk menambahkan bagian header, klik Edit pada menu yang Anda buat
• Klik Edit Konten
• Klik tombol EK dan buka tab Bagian
• Pilih desain tajuk yang Anda suka dan klik sisipkan

Anda dapat mengikuti video di bawah ini untuk membuat header footer yang indah untuk situs web Anda.

Catatan: Anda dapat mengikuti langkah yang sama seperti Header untuk membuat bagian Footer untuk situs web Anda menggunakan bagian Premade oleh ElementsKit.

Langkah #5: Tambahkan formulir Kontak sebagai Modal Popup (BONUS)

Saatnya menambahkan formulir kontak ke situs web Anda sehingga lebih mudah bagi calon klien Anda untuk berkomunikasi dengan Anda. Menambahkan formulir kontak menggunakan popup akan memberikan situs web satu halaman Anda tampilan yang lebih menarik bersama dengan formulir yang Anda butuhkan.

Untuk menambahkan popup modal, saya akan mengganti tombol RSVP dengan modal popup dan menambahkan formulir kontak ke dalamnya.

• Buka ElementsKit Widgets Aktifkan modal Popup Klik simpan perubahan

• Buka Semua Halaman ⇒ halaman beranda Anda (atau apa pun yang Anda beri nama halaman Anda) dan klik Edit dengan Elementor

• Pada mode edit, gulir ke bagian RSVP dan hapus tombol RSVP
• Seret dan lepas modal muncul di tempat tombol RSVP

• Untuk mengubah teks tombol modal, buka Konten Tombol Toggler Label dan ubah “Open Modal ” menjadi RSVP (atau apa pun yang Anda inginkan)

• Buka tab Gaya Tombol Toggler untuk mengubah warna latar belakang tombol, warna teks, radius batas, dan pengaturan lainnya untuk tampilan normal dan melayang.

• Sekarang buka Konten dan aktifkan mode Aktifkan Template sehingga kami dapat menambahkan formulir Kontak kami.
• Klik pada tombol pop-up. Setelah terbuka, klik ikon edit di badan untuk membuka editor Elementor

• Cari Metform, seret dan lepas widget
• Klik pada formulir Edit untuk memilih formulir Kontak
• Pilih formulir yang Anda inginkan dari daftar dan klik simpan & tutup
• Terakhir, klik perbarui untuk menyimpan

Catatan: Saya sudah membuat formulir RSVP menggunakan Metform dan juga mengubah warna dan gaya sedikit agar sesuai dengan template halaman arahan yang kami gunakan. Anda dapat melihat blog tentang cara membuat dan gaya formulir kontak menggunakan Metform .

Anda juga dapat melihat video di bawah ini untuk petunjuk tentang cara membuat formulir kontak khusus menggunakan Metform.

Langkah #6: Perbarui dan Lihat pratinjau Situs web tunggal dengan Navigasi Satu Halaman

Yah, semuanya sudah selesai. Sekarang turun ke langkah terakhir, yang paling mudah dan paling mengasyikkan. Setelah Anda menyelesaikan semua penyesuaian dan langkah-langkah yang disebutkan di atas, klik tombol Perbarui untuk menyimpan semuanya dan klik tombol Pratinjau untuk melihat situs Anda.

Asalkan Anda telah mengikuti semua langkah dengan benar, Anda akan mendapatkan situs web satu halaman dengan navigasi satu halaman di WordPress seperti di bawah ini:

Bungkus

Beri diri Anda tepukan di punggung! Karena Anda telah berhasil membuat situs web cantik berpenampilan modern dengan navigasi satu halaman menggunakan Elementor dan ElementsKit. Menggunakan situs web satu halaman, pelanggan dapat dengan mudah menavigasi ke berbagai bagian situs web Anda untuk mempelajari bisnis Anda. Dan popup modal sekali klik dengan formulir kontak membuat komunikasi benar-benar hanya dengan satu klik!

Jika Anda terkesan dengan apa yang telah Anda buat, bersiaplah untuk lebih terkejut lagi karena ElementsKit membuka kemungkinan tak terbatas bagi pengguna WordPress dan Elementor untuk bereksperimen dan membangun situs web yang tampak mengagumkan. Jadi, luangkan waktu untuk melihat widget dan modul lanjutan lainnya dari ElementsKit.

Untuk mempelajari lebih lanjut tentang pembuatan situs web menggunakan WordPress, Elementor, dan ElementsKit yang ajaib, ikuti kami di akun media sosial kami.