Bar Kemajuan adalah elemen yang efektif dalam desain web yang memberi informasi kepada pengunjung dengan cara yang menarik tentang kemajuan suatu proyek atau tujuan. Elementor, sebagai salah satu plugin Page Builder terpopuler untuk WordPress, memberikan kemampuan untuk dengan mudah mengintegrasikan bar kemajuan ke dalam halaman web Anda. Panduan ini akan membimbing Anda melalui langkah-langkah untuk membuat dan menyesuaikan bar kemajuan di Elementor.
Temuan Utama
- Bar kemajuan memberikan visualisasi kemajuan dan tujuan.
- Anda dapat menyesuaikan judul, nilai, dan warna secara individual.
- Teks internal bisa ditampilkan secara opsional atau disembunyikan.
- Berbagai gaya dan opsi penyesuaian tersedia untuk menyesuaikan bar dengan desain Anda.
Panduan Langkah demi Langkah
Pertama, buka halaman WordPress Anda dan arahkan ke Editor Elementor. Di sana Anda dapat menambahkan elemen baru dan memilih bar kemajuan.
Sekarang Anda siap untuk memasukkan judul bar kemajuan Anda. Tentukan judul yang sesuai, seperti "Tujuan Penjualan". Ini memberikan petunjuk awal kepada pengunjung tentang apa yang akan ditampilkan.
Pada langkah berikutnya, Anda harus menetapkan tujuan atau pesan keberhasilan. Tentukan dengan jelas apa yang ingin Anda tampilkan dan tulis di dalam bidang yang disediakan. Langkah ini membantu membuat bar kemajuan lebih mudah dimengerti oleh pengguna.
Selanjutnya, Anda dapat menentukan warna untuk bar kemajuan. Ini tidak wajib, namun merupakan kesempatan bagus untuk menyesuaikan desain. Pilihlah warna yang sesuai dengan seluruh tampilan situs web Anda.
Lanjut ke persentase. Di sini Anda bisa mengatur kemajuan Anda, misalnya menjadi 40%. Ingatlah bahwa Anda bisa menetapkan nilai maksimum ke 100% dan nilai minimum ke 0%. Feedback ini membantu pengunjung Anda untuk dengan cepat melihat kemajuan.
Persentase tersebut bisa ditampilkan atau disembunyikan. Terkadang terlihat lebih menarik jika Anda menyembunyikan teks, terutama jika Anda lebih suka desain yang bersih. Pertimbangkan opsi mana yang paling cocok untuk proyek Anda.
Jika Anda menginginkan, Anda juga bisa menambahkan teks internal yang berisi angka persentase. Fitur ini sangat berguna terutama ketika ingin menampilkan kemajuan secara instan. Jika Anda memutuskan untuk tidak menggunakan teks internal, Anda juga bisa menyembunyikan angka di sini.
Sekarang perhatikanlah gaya dari bar kemajuan. Anda bisa menyesuaikan warna bar, warna latar belakang area yang belum terisi, dan tinggi bar secara individual. Pilihlah warna hijau gelap untuk bagian yang terisi dan warna latar belakang netral untuk tampilan yang bersih.
Anda juga dapat membulatkan sudut bar kemajuan agar terlihat lebih menarik. Ingatlah bahwa sudut-sudut ini hanya dapat dibulatkan di bagian depan sampai kemajuan mencapai 100%.
Jika Anda ingin menyesuaikan teks internal, Anda juga bisa mengubah warna dan tipografi di sini. Mungkin Anda memutuskan untuk menonaktifkan jenis huruf agar fokus pada kemajuan.
Terakhir, Anda dapat mengakses pengaturan lanjutan, di mana Anda dapat menyesuaikan warna teks dan gaya teks untuk judul. Judul yang hitam, tebal dengan bayangan opsional akan membuat judul Anda menonjol.
Sekarang simpan perubahan Anda dan periksa halaman Anda untuk melihat hasilnya. Mungkin Anda memutuskan untuk menampilkan persentase. Jika tidak, bar kemajuan tetap akan ditampilkan dengan baik.
Bar kemajuan Anda sekarang menampilkan nilai yang telah ditetapkan, tanpa animasi dari 0 ke atas. Sebagai gantinya, kemajuan akan segera divisualisasikan.
Jika Anda menggunakan versi Pro dari Elementor, Anda akan diberikan atribut dinamis tambahan. Fitur ini sangat berguna untuk menyesuaikan bar kemajuan berdasarkan data eksternal atau nilai yang didukung oleh database.
Ringkasan
Dalam panduan ini, Anda telah mempelajari cara membuat dan menyesuaikan bar kemajuan di Elementor. Anda dapat menentukan judul dan kemajuan, memilih warna, dan membuat berbagai penyesuaian untuk mengintegrasikan bar kemajuan yang menarik dan efektif.
Pertanyaan Umum
Bagaimana cara membuat bar kemajuan di Elementor?Anda memilih bar kemajuan di Elementor dan menambahkan judul serta nilai kemajuan Anda.
Apakah saya bisa mengubah warna bar kemajuan?Ya, Anda bisa menyesuaikan baik warna bar kemajuan maupun warna latar belakang secara individu.
Apa keuntungan dari teks internal dalam bar kemajuan?Teks internal menampilkan kemajuan secara jelas dan membantu membuat informasi lebih mudah dipahami hanya dengan sekilas.
Bagaimana cara menyimpan perubahan yang telah saya buat?Setelah semua penyesuaian dilakukan, Anda bisa menyimpan perubahan Anda untuk ditampilkan di halaman web Anda.
Apakah ada fitur khusus di versi Pro dari Elementor?Ya, versi Pro menawarkan opsi lanjutan seperti atribut dinamis yang bisa Anda gunakan untuk lebih menyesuaikan bar kemajuan Anda.
