Kuasai dalam 3 hari! Cara menggunakan Elementor dan 7 teknik profesional

Terakhir diperbarui: 2024 Oktober 11

ウIngin tahu cara membuat website dengan mudah dan indah? Dan itu tanpa mengetahui kode apa pun! Saya sendiri memiliki masalah yang sama, dan setelah banyak trial and error, saya akhirnya menemukan Elementor. Alat luar biasa ini memudahkan siapa saja untuk membuat situs web yang terlihat profesional.

Menemukan Elementor: Ini seperti menemukan kode cheat desain web!

Pertama kali saya menggunakan Elementor, rasanya seperti ajaib. Ubah desain hanya dengan satu klik dan buat halaman menakjubkan dalam hitungan menit. Artikel ini mencakup semuanya mulai dari penggunaan dasar Elementor hingga metode penyesuaian tingkat lanjut, serta contoh proyek sebenarnya. Kami akan menjelaskan langkah demi langkah sehingga pemula pun dapat menggunakannya dengan percaya diri, jadi harap baca sampai akhir.

Setelah membaca panduan ini, Anda akan kagum betapa mudahnya melakukannya. Coba gunakan Elementor dan rasakan pesonanya. Dunia desain web akan menjadi lebih familiar bagi Anda!

Sudahkah kamu membaca ini? Bahkan pemula pun bisa mengerti! Panduan lengkap cara menggunakan WooCommerce

Panduan lengkap menggunakan Elementor: dari pemula hingga profesional

Apa itu Elemen?

Ikhtisar Elemen Elementor adalah pembuat halaman seret dan lepas untuk WordPress. Anda dapat mendesain halaman web dengan operasi intuitif tanpa menulis kode apa pun.

Mengapa menggunakan Elemen? Elementor memudahkan pembuatan situs web profesional. Buat halaman secara efisien dengan beragam pilihan desain dan pratinjau waktu nyata.

Fitur utama dan manfaat Elementor

• seret dan lepas editor: Desain tanpa coding
• pengeditan waktu nyata: Anda dapat memeriksa hasil edit secara instan
• Widget yang kaya: Menyediakan berbagai elemen konten
• perpustakaan templat: Banyak template yang mudah digunakan
• desain responsif: Membuat desain ramah seluler dengan mudah

Menginstal dan mengatur Elementor

Cara menginstal Elementor

1. Masuk ke dasbor WordPress Anda
2. Klik Plugin > Tambahkan baru
3. Cari "Elementor" dan instal
4. Setelah instalasi, klik "Aktifkan"

Aktivasi plugin Mengaktifkan Elementor akan menambahkan menu “Elementor” ke dashboard WordPress Anda.

Pengaturan dasar elemen

1. Menu elemen > Buka pengaturan
2. Sesuaikan pengaturan editor default dan opsi gaya
3. Klik "Simpan Perubahan" untuk menyimpan pengaturan Anda

Penggunaan dasar

Pengenalan antarmuka elemen Editor Elementor memiliki panel widget di sebelah kiri dan pratinjau langsung di sebelah kanan. Anda dapat menambahkan widget dengan menyeret dan melepas.

Cara menggunakan bagian, kolom, dan widget

• bagian: Blok penyusun utama suatu halaman
• kolom: Pembagian vertikal dalam suatu bagian
• Widget: Elemen seperti teks, gambar, tombol, dll.

Panduan langkah demi langkah untuk pembuatan halaman dasar

1. Buat halaman baru dan klik "Edit dengan Elementor"
2. Tambahkan bagian dan atur kolom
3. Tempatkan widget dengan cara drag and drop
4. Sesuaikan pengaturan untuk setiap widget
5. Klik Publikasikan dan simpan halaman

Penggunaan dan tip tingkat lanjut

Buat desain khusus Anda dapat membuat desain Anda sendiri menggunakan CSS khusus di Elementor. Anda dapat menyesuaikan margin dan padding di pengaturan lanjutan.

Cara menggunakan template Selesaikan desain Anda dengan cepat dengan mengimpor dan menyesuaikan templat dari perpustakaan templat kami.

Membuat desain responsif Sesuaikan tampilan desktop, tablet, dan seluler secara mandiri. Klik ikon perangkat untuk melihat dan mengedit desain setiap perangkat.

Cara mengatasi permasalahan umum

• Jika halaman tidak ditampilkan: Kosongkan cache Anda dan periksa konflik plugin
• Jika desainnya rusak: Periksa pengaturan widget dan CSS khusus

contoh praktis

Contoh pembuatan beranda

1. Menambahkan gambar layar penuh dan tagline ke bagian pahlawan
2. Tempatkan kotak ikon di bagian layanan
3. Gunakan widget peringatan tes untuk bagian testimonial

Contoh pembuatan formulir kontak

1. Seret widget formulir ke bagian baru
2. Tambahkan bidang yang wajib diisi (nama, email, pesan)
3. Sesuaikan pengaturan tombol kirim dan sesuaikan gaya

Contoh membuat halaman blog

1. Tampilkan postingan blog terbaru Anda menggunakan widget grid postingan
2. Atur pemfilteran berdasarkan kategori
3. Sesuaikan gaya setiap postingan untuk membuat desain terpadu

Pertanyaan yang sering diajukan (FAQ)

T: Apakah Elementor gratis untuk digunakan? A: Ya, Elementor memiliki versi gratis, tetapi versi Pro menawarkan lebih banyak fitur.

T: Tema apa yang kompatibel dengan Elementor? J: Elementor kompatibel dengan sebagian besar tema WordPress. Sangat disarankan untuk digunakan dengan tema khusus Elementor.

Sumber Daya Tambahan dan Tautan Referensi

• Dokumentasi resmi elemen
• tutorial YouTube
• Forum Komunitas Elemen

Panduan lengkap menggunakan Elementor: Catatan tambahan

前Dalam artikel yang disebutkan di atas, kami membahas semuanya mulai dari penggunaan dasar Elementor hingga teknik lanjutan. Berikut kami berikan informasi tambahan untuk lebih meningkatkan kualitasnya. Ini akan membantu pembaca lebih memahami cara memanfaatkan Elementor dan mempraktikkannya.

Contoh proyek praktis

Kustomisasi halaman beranda

Saya akan memperkenalkan contoh nyata membuat beranda menggunakan Elementor.

Langkah 1: Buat bagian pahlawan

1. Mengatur gambar latar belakang: Tambahkan bagian dan atur gambar latar belakang ke layar penuh.
2. Tambahkan slogannya: Tambahkan widget judul dan masukkan tagline Anda.
3. tombol ajakan bertindak: Tambahkan widget tombol dan atur tombol tindakan seperti "Mulai sekarang".

Langkah 2: Bagian pengenalan layanan

1. Menggunakan kotak ikon: Buat tata letak 3 kolom dan tambahkan kotak ikon ke masing-masing kolom untuk menjelaskan layanan Anda.
2. Memanfaatkan CSS khusus: Terapkan CSS khusus ke setiap kotak ikon untuk menyatukan desain.

Langkah 3: Bagian Testimonial

1. Menggunakan widget monitor pengujian: Tambahkan widget peringatan tes dan masukkan testimoni pelanggan.
2. pengaturan korsel: Mengatur monitor pengujian ke tampilan carousel dan menampilkan beberapa ulasan secara geser.

ト ラ ブ ル シ ュ ー テ ィ ン グ

Masalah umum dan solusinya

Halaman tidak ditampilkan dengan benar

• Hapus cache: Jika pengeditan Elementor tidak diterapkan, kosongkan cache browser.
• Konflik plugin: Plugin lain mungkin mengganggu, jadi nonaktifkan sementara plugin tersebut untuk mengisolasi masalahnya.

desain runtuh

• Periksa CSS khusus: Periksa apakah CSS khusus yang diterapkan tercermin dengan benar dan perbaiki jika perlu.
• Sesuaikan pengaturan responsif: Periksa tampilan pada setiap perangkat dan lakukan penyesuaian yang sesuai untuk setiap perangkat.

Metode penyesuaian tingkat lanjut

Memanfaatkan CSS dan JavaScript khusus

Bagaimana cara menambahkan CSS khusus

1. CSS per bagian: Terapkan CSS khusus ke bagian tertentu untuk menyempurnakan desain Anda.
2. CSS per widget: Tambahkan CSS dan sesuaikan gaya untuk setiap widget satu per satu.

Bagaimana cara menambahkan JavaScript

1. Tambahkan animasi: Gunakan JavaScript untuk menambahkan animasi yang terjadi saat menggulir.
2. elemen interaktif: Menerapkan elemen interaktif yang berfungsi saat tombol diklik.

Maksimalkan Elementor Pro

Widget khusus dalam versi Pro

Memanfaatkan widget portofolio

1. Pameran proyek: Menampilkan thumbnail proyek dalam format galeri dan link ke halaman detail.
2. Fungsi penyaringan: Memfilter proyek berdasarkan kategori untuk memudahkan pengguna dalam melakukan pencarian.

Pengaturan judul animasi

1. berita utama yang bergerak: Tambahkan animasi ke widget judul Anda untuk menarik perhatian.
2. Sesuaikan waktu dan efek: Menyesuaikan waktu dan efek mulai animasi untuk menciptakan tampilan terpadu untuk keseluruhan halaman.

Cobalah teknik ini.

Infografis tentang cara menggunakan Elementor

Infografis ini memiliki desain yang menarik secara visual dan profesional, dengan tata letak yang bersih dan teks yang mudah dibaca, sesuai untuk ukuran halaman web standar. Kami memudahkan pengguna pemula dan berpengalaman untuk memahami manfaat dan proses penyiapan Elementor.

Tabel untuk membantu Anda menggunakan Elementor

Tabel di bawah ini memberikan perbandingan fitur Elementor Basic dan Pro, serta petunjuk instalasi dan pengaturan. Ini memungkinkan Anda memahami fitur dan penggunaan Elementor dengan mudah.

Perbandingan fitur elemen dan instruksi pengaturan

Petunjuk instalasi dan pengaturan elemen

Dengan menempelkan tabel ini ke postingan blog Anda, pembaca Anda dapat dengan mudah memahami fitur dasar dan langkah pengaturan Elementor. Desain mejanya sederhana, profesional, dan terorganisir dengan baik.

Pertanyaan yang sering diajukan (FAQ) untuk membantu Anda menggunakan Elementor

T&J tentang Elementor: Bahkan para profesional pun pada awalnya adalah pemula!

T: Apakah Elementor gratis untuk digunakan?

A: Ya, Elementor memiliki versi gratis! Tapi harap berhati-hati. ``Godaan profesional'' yang akan membuat Anda ingin meningkatkan ke versi Pro menanti Anda. Versi Pro memiliki lebih banyak fitur dan dilengkapi dengan alat untuk membawa desain Anda ke level berikutnya.

T: Tema apa yang kompatibel dengan Elementor?

A: Elementor kompatibel dengan sebagian besar tema WordPress. Namun, jika Anda mencari kompatibilitas sempurna,Halo elementorAtauAstraSebaiknya pilih tema yang kompatibel dengan Elementor seperti ``. Ini sangat cocok, seolah ramalan kompatibilitas Anda 100% akurat!

T: Hal apa yang harus saya ingat saat membuat situs dengan Elementor?

A: Saat membuat situs dengan Elementor, penting untuk menjaga konsistensi desain. Misalnya, dengan standarisasi font dan warna, keseluruhan situs dapat mempertahankan keindahan yang ``seragam''. Saat sebuah desain runtuh, rasanya seperti potongan puzzle terpecah.

T: Apa yang harus saya lakukan jika halaman yang dibuat dengan Elementor tidak ditampilkan?

A: Pertama, mari kita bersihkan cache. Perubahan terbaru mungkin tidak terlihat karena cache browser. Jika tidak berhasil, curigai terjadi "pertempuran kecil" dengan plugin lain. Nonaktifkan plugin satu per satu untuk mengetahui penyebabnya. Temukan penyebabnya seperti detektif hebat!

T: Bagaimana cara membuat desain responsif dengan Elementor?

A: "Mode responsif" Elementor memungkinkan Anda menyesuaikan tampilan secara mandiri di desktop, tablet, dan ponsel cerdas. Setiap kali Anda mengklik ikon perangkat, tampilannya berubah, sehingga Anda seolah-olah sedang menikmati "pertunjukan transformasi" desain. Buat desain sempurna untuk setiap perangkat!

T: Bagaimana cara menambahkan CSS khusus di Elementor?

A: Elementor memungkinkan Anda menambahkan CSS khusus untuk setiap widget atau bagian. Cukup buka "Pengaturan Lanjutan" widget, buka tab CSS, dan masukkan kode. Sekarang desain Anda akan berubah seolah-olah Anda melambaikan "tongkat ajaib"!

Kami berharap FAQ ini akan membuat pengalaman Elementor Anda lebih menyenangkan dan efisien. Selamat belajar desain web!

Pemecahan masalah umum

1. Halaman tidak ditampilkan dengan benar

Gejala: Halaman yang diedit di Elementor tidak ditampilkan dengan benar setelah dipublikasikan, atau beberapa perubahan tidak diterapkan.

larutan:

• Hapus cache peramban: Tampilan halaman mungkin terpengaruh oleh cache yang sudah ketinggalan zaman. Silakan bersihkan cache dan muat ulang menggunakan Ctrl+F5 (Windows) atau Command+Shift+R (Mac).
• Hapus cache Elementor: Buka pengaturan Elementor dan jalankan "Hapus Cache" di bawah tab "Alat".
• Pemeriksaan konflik plugin: Plugin lain mungkin bertentangan dengan Elementor. Nonaktifkan sementara semua plugin dan periksa apakah masalah telah teratasi. Kemudian aktifkan plugin satu per satu untuk mengidentifikasi konflik.
• Periksa temanya: Periksa apakah tema yang Anda gunakan kompatibel dengan Elementor. Coba beralih ke tema yang kompatibel (misalnya Hello Elementor, Astra).

2. Layar pengeditan tidak dimuat

Gejala: Layar pengeditan Elementor tidak dimuat dengan benar atau menampilkan layar putih.

larutan:

• Periksa sumber daya server: Jika server Anda memiliki keterbatasan memori atau versi PHP yang rendah, hal ini dapat mengganggu pengoperasian Elementor. Harap tetapkan setidaknya PHP 7.0 atau lebih tinggi dan batas memori hingga 256MB atau lebih tinggi.
• Mengaktifkan mode aman: Dengan mengaktifkan "mode keamanan" di pengaturan Elementor, Anda dapat membuka layar pengeditan tanpa terpengaruh oleh tema atau plugin.
• Pemeriksaan konflik plugin: Plugin lain mungkin menyebabkan pemuatan lambat. Nonaktifkan sementara semua plugin dan periksa apakah masalah telah teratasi.

3. Widget tidak ditampilkan

Gejala: Widget yang ditambahkan tidak ditampilkan di halaman.

larutan:

• Periksa pengaturan widget: Periksa apakah pengaturan tampilan widget sudah diatur dengan benar. Silakan periksa apakah ini diatur untuk ditampilkan dalam kondisi tertentu.
• Periksa CSS: CSS khusus mungkin memengaruhi tampilan widget. Coba nonaktifkan CSS khusus untuk sementara dan lihat apakah masalahnya telah teratasi.
• Mengaktifkan mode debug: Aktifkan mode debug Elementor untuk melihat pesan kesalahan mendetail.

4. Desain responsif rusak

Gejala: Tampilan di ponsel dan tablet rusak.

larutan:

• Periksa mode responsif: Gunakan mode responsif Elementor untuk melihat tampilannya di setiap perangkat dan sesuaikan desain sesuai kebutuhan.
• Sesuaikan lebar kolom: Mengatur lebar kolom dengan tepat untuk perangkat seluler. Misalnya, Anda mungkin perlu mengubah apa yang tadinya dibagi menjadi 3 kolom di desktop menjadi 1 kolom di seluler.
• Penyesuaian CSS: Tambahkan CSS khusus seluler agar desain Anda tetap konsisten.

5. Pembaruan tidak tercermin

Gejala: Pengeditan tidak ditampilkan di halaman publik.

larutan:

• Hapus cache: Hapus semua cache browser, cache Elementor, dan cache server.
• Periksa pratinjau langsung: Periksa apakah perubahan tercermin dalam pratinjau langsung Elementor. Jika pratinjau terlihat baik-baik saja, coba bersihkan cache di halaman publik.

6. Widget global tidak dapat diedit

Gejala: Perubahan widget global tidak tercermin.

larutan:

• Mengonfigurasi ulang widget global: Reset widget yang sesuai sebagai widget global dan lakukan perubahan lagi.
• Hapus cache: Jika perubahan pada widget global tidak diterapkan, hapus cache browser dan cache Elementor.

Gunakan metode pemecahan masalah ini sebagai panduan untuk membuat situs Anda dengan Elementor dengan lancar. Jika Anda mempunyai masalah, cobalah metode ini dan Anda mungkin menemukan petunjuk solusinya.

Teknik Elementor Pro yang perlu Anda ketahui: Bawa situs Anda ke level berikutnya!

Elementor adalah pembuat halaman yang multifungsi dan mudah digunakan, tetapi dengan beberapa penyesuaian Anda dapat membuatnya lebih menarik. Di sini Anda akan menemukan informasi dan teknik unik yang tidak sering disebutkan di situs lain. Kami akan menyampaikannya dengan humor agar pembaca dapat menikmati pembelajarannya.

1. Cara menggunakan preset

Elementor hadir dengan banyak preset desain, tetapi tahukah Anda cara menyesuaikan dan menggunakannya kembali sesuai keinginan Anda?

Misalnya, jika Anda menyimpan desain tombol atau tata letak bagian yang sering digunakan sebagai preset, Anda dapat langsung menggunakannya di lain waktu. Ini seperti memiliki "lemari desain" Anda sendiri.

prosedur:

1. Rancang widget atau bagian apa pun.
2. Pilih Simpan sebagai Preset dari widget atau bagian menu klik kanan.
3. Cukup panggil desain yang sama di lain waktu, dan Anda dapat langsung membuat situs web yang terlihat profesional.

2. Desain responsif dengan pandangan ke masa depan

Menyesuaikan desain untuk setiap perangkat menggunakan mode responsif Elementor adalah hal yang mendasar, tetapi bagaimana jika mendesain dengan mempertimbangkan perangkat masa depan? Misalnya, bayangkan tampilannya pada ponsel cerdas yang dapat dilipat atau kacamata AR, dan sertakan beberapa elemen desain futuristik. Sekarang situs Anda akan dirancang untuk menjadi “terdepan”!

Ilustrasi:

• Gabungkan latar belakang video layar penuh untuk menciptakan gambar futuristik.
• Ditambahkan menu yang mendukung navigasi suara. Bertujuan untuk pengoperasian yang menyaingi Alexa dan Siri!

3. Membuat ikon khusus

Elementor memiliki banyak ikon, tetapi pernahkah Anda ingin menggunakan ikon asli Anda sendiri?

Jika demikian, buat dan tambahkan ikon khusus. Misalnya, jika Anda menggunakan logo merek Anda sendiri sebagai ikon, keseluruhan situs akan terasa lebih menyatu. Ini terasa seperti mengenakan ``setelan yang dibuat khusus.''

prosedur:

1. Buat ikon asli dalam format SVG.
2. Aktifkan unggahan SVG dari pengaturan Elementor.
3. Pilih ikon di dalam widget dan unggah file SVG Anda sendiri.

4. Permata tersembunyi yang berfungsi dengan Elementor

Berikut beberapa plugin yang berguna jika digunakan bersama Elementor. Ini adalah "permata tersembunyi" yang mungkin tidak banyak disebutkan di situs lain, namun akan menyempurnakan desain Anda.

• Konten Dinamis untuk Elementor: Sebuah plugin yang memungkinkan Anda menampilkan bidang khusus dan konten dinamis dengan mudah. Ini secara ajaib akan membuat pembaruan situs Anda menjadi mudah.
• Selamat Addon: Kumpulan add-on untuk meningkatkan fungsionalitas Elementor. Ini meningkatkan kegunaan dan memperluas jangkauan desain.

5. Rahasia SEO dengan Elementor

Terakhir, mari kita bahas tentang langkah-langkah SEO menggunakan Elementor. Selain desain, visibilitas di mesin pencari juga penting. Elementor memiliki banyak fitur yang berguna untuk SEO.

Poin-poin penting untuk tindakan SEO:

• kode ringan: Meningkatkan kecepatan memuat halaman dengan mengurangi kode yang tidak diperlukan. elemen"pembersihan kabel" fitur.
• Pengoptimalan metadata: Menetapkan metadata untuk setiap halaman dan memberikan informasi penting bagi mesin pencari.
• Manfaatkan tautan internal: Mengatur tautan dalam halaman dengan benar akan membuat navigasi situs lebih lancar dan meningkatkan efektivitas SEO.

Dengan menggabungkan teknik-teknik ini, situs Anda akan menonjol dari yang lain, terlihat menarik dan profesional. Silakan bersenang-senang mencobanya!

Tautan terkait:

• Situs web resmi elemen
• Situs resmi Happy Addons
• Konten Dinamis untuk situs resmi Elementor

Jalan Anda menuju penguasaan Elementor sekarang akan semakin berkembang. Manfaatkan pengetahuan ini untuk digunakan dalam proyek Anda berikutnya!

Cara Membuat Menu dengan Navigasi Suara: Panduan Pemula

Halo! Tidak masalah jika Anda baru menggunakan WordPress selama tiga hari. Kali ini saya akan menjelaskan secara mudah bagi pemula cara membuat menu yang mendukung navigasi suara menggunakan Elementor. Mari maju bersama dengan ketenangan pikiran!

1. Buat menu dengan Elementor

Pertama, buat menu dasar dengan Elementor.

Langkah 1: Masuk ke dashboard WordPress Anda dan buka halaman tempat Anda ingin menggunakan Elementor.

Langkah 2: Klik "Edit dengan Elementor" untuk membuka layar editor.

Langkah 3: Seret dan lepas widget Menu Navigasi dari panel widget kiri untuk menambahkannya ke halaman Anda.

Langkah 4: Buka pengaturan widget menu dan pilih menu yang ingin Anda gunakan. Silakan buat pengaturan menu terlebih dahulu dari Appearance → Menu di dashboard WordPress.

2. Menambahkan atribut ARIA

Selanjutnya, tambahkan atribut ARIA ke menu agar pembaca layar membacanya secara akurat.

Langkah 1: Pilih widget menu di Elementor dan buka "Pengaturan Lanjutan" → "Atribut Khusus".

Langkah 2: Masukkan yang berikut ini di bidang Atribut Khusus (mengatur label yang sesuai untuk setiap item):

role="menubar" aria-label="Main Navigation"

Tambahkan juga label ARIA ke setiap item menu. Demikian pula, atur atribut khusus untuk setiap item menu sebagai berikut:

role="menuitem" aria-label="Home"

3. Menambahkan skrip untuk pengenalan suara

Tambahkan JavaScript sederhana untuk mengoperasikan menu menggunakan pengenalan suara. Ada beberapa bagian teknisnya, namun saya akan menjelaskannya selangkah demi selangkah.

Langkah 1: Buka Penampilan → Editor File Tema di dashboard WordPress Anda.

Langkah 2: Tema darifunctions.phpBuka file dan tambahkan kode di bawah ini.

function add_custom_script() {
    echo '<script>
        document.addEventListener("DOMContentLoaded", function() {
            if (!("webkitSpeechRecognition" in window)) {
                console.log("Speech recognition not supported");
                return;
            }

            var recognition = new webkitSpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = false;

            recognition.onresult = function(event) {
                var command = event.results[0][0].transcript.toLowerCase();
                var menuItems = document.querySelectorAll("[role='menuitem']");

                menuItems.forEach(function(item) {
                    if (item.getAttribute("aria-label").toLowerCase() === command) {
                        item.querySelector("a").click();
                    }
                });
            };

            recognition.onend = function() {
                recognition.start();
            };

            recognition.start();
        });
    </script>';
}
add_action('wp_footer', 'add_custom_script');

Skrip ini menggunakan pengenalan suara untuk mengaktifkan klik pada item menu.

4. Uji dan periksa

Terakhir, uji apakah navigasi suara berfungsi dengan baik.

Langkah 1: Publikasikan situs Anda dan lihat apakah pengenalan ucapan benar-benar berfungsi. Anda mungkin perlu mengizinkan mereka menggunakan mikrofon Anda.

Langkah 2: Klik tombol "Mulai Navigasi Suara" untuk mendiktekan item menu. Misalnya, coba ucapkan "Rumah". Item menu yang sesuai harus diklik.

Menu Anda yang mendukung navigasi suara kini sudah lengkap! Ini mungkin tampak sedikit rumit pada awalnya, tetapi setelah Anda mengaturnya, itu sangat nyaman. Cobalah dan tingkatkan aksesibilitas situs web Anda!

Namun, beberapa orang mungkin memiliki "fobia function.php". Saya pernah mengalami pengalaman traumatis ketika saya melakukan perubahan pada function.php dan layar menjadi kosong dan pikiran saya juga menjadi kosong. Terakhir, saya ingin memperkenalkan beberapa plugin yang berguna untuk saat-saat seperti itu.

Cara membuat menu yang mendukung navigasi suara menggunakan plugin

Saya akan menunjukkan cara mudah membuat menu yang mendukung navigasi suara menggunakan plugin tanpa menyentuh function.php. Silakan ikuti langkah-langkah di bawah ini.

1. Menginstal plugin

Pertama, mari tambahkan atribut ARIA ke menu dan instal plugin untuk meningkatkan aksesibilitas.

Langkah 1: Masuk ke dashboard WordPress Anda dan klik "Plugin" → "Tambah baru" dari menu sebelah kiri.

Langkah 2: Ketik "Menu WP yang Dapat Diakses" di bilah pencarian, instal dan aktifkan plugin yang sesuai. Di bawah ini adalah tautan resminya.

• Menu WP yang dapat diakses

2. Pengaturan menu

Selanjutnya, gunakan plugin untuk menambahkan atribut ARIA ke menu untuk mengaktifkan navigasi suara.

Langkah 1: Klik “Tampilan” → “Menu” dari menu sebelah kiri dashboard WordPress.

Langkah 2: Pilih menu yang ada dan perhatikan bahwa atribut ARIA yang sesuai secara otomatis ditambahkan ke setiap item menu. Edit item menu dan sesuaikan label sesuai kebutuhan.

3. Pengaturan pengenalan suara

Tambahkan fungsionalitas pengenalan suara menggunakan plugin. Ikuti langkah-langkah di bawah ini untuk menyiapkan pengenalan ucapan.

Langkah 1: Instal plugin "Kontrol Suara untuk WordPress". Plugin ini memungkinkan Anda menambahkan fungsionalitas pengenalan suara dengan mudah. Di bawah ini adalah tautan resminya.

• Kontrol Suara untuk WordPress

Langkah 2: Aktifkan plugin dan buka halaman pengaturan. Konfigurasikan perintah suara pada halaman pengaturan dan tambahkan perintah yang sesuai ke item menu.

4. Uji dan periksa

Terakhir, uji apakah navigasi suara berfungsi dengan baik.

Langkah 1: Publikasikan situs Anda dan periksa apakah pengenalan ucapan benar-benar berfungsi. Anda harus mengizinkan browser Anda menggunakan mikrofon Anda.

Langkah 2: Gunakan perintah suara untuk mengoperasikan item menu. Misalnya, coba ucapkan "Rumah". Item menu yang sesuai harus diklik.

Sekarang Anda dapat menggunakan plugin untuk membuat menu yang mendukung navigasi suara tanpa menyentuh fungsi.php. Cobalah dan tingkatkan aksesibilitas situs web Anda!

Jika Anda punya waktu, silakan baca ini juga.
Mungkinkah membangun bisnis jaringan di Internet? 6 langkah menuju sukses

Wajib dikunjungi bagi pemula! Panduan penggunaan Elementor – Cara mencapai desain web yang terlihat profesional

WPX-WordpressX-Mengungkap rahasia membangun situs apa pun