Tidak yakin bagaimana cara menambahkan tombol kembali ke atas di WordPress? Sayangnya, sebagian besar tema WordPress tidak menyertakan tombol ini secara bawaan. Namun, ada beberapa metode yang dapat Anda gunakan untuk menampilkan tombol tersebut di situs web Anda.
Upaya ini pun sepadan. Jika situs web Anda memiliki halaman panjang di mana pengguna menggulir jauh dari menu navigasi atau ajakan bertindak, tombol ini dapat membantu pengguna kembali ke fokus utama halaman dengan usaha minimal.
Cara paling umum untuk menambahkan tombol kembali ke atas di WordPress meliputi penggunaan plug-in, penambahan kode khusus, atau menyematkan widget tanpa kode. Plug-in dan widget yang disematkan tidak memerlukan keahlian pemrograman apa pun, sehingga menjadi metode yang disukai jika Anda tidak familier dengan HTML, CSS, atau JavaScript. Kode khusus memberi Anda kendali penuh atas tombol Anda, tetapi ini bukan solusi yang bagus untuk pemula.
Dalam panduan ini, kami akan membahas cara menambahkan tombol kembali ke atas di WordPress menggunakan metode-metode ini, beserta kelebihan dan kekurangan masing-masing.
Menambahkan tombol kembali ke atas dengan plug-in WordPress
WordPress menawarkan berbagai plug-in untuk meningkatkan fungsionalitas situs web Anda. Dalam direktorinya, Anda akan menemukan plug-in kembali ke atas WordPress dari berbagai pengembang — ini adalah cara paling umum untuk menambahkan tombol tersebut.
Opsi yang tersedia dalam plug-in kembali ke atas WordPress
Banyak dari plug-in ini menawarkan opsi penyesuaian yang memungkinkan Anda memilih penempatan tombol dan desainnya. Saat mencari plug-in tombol kembali ke atas yang tepat untuk situs web Anda, tentukan pengaturan mana yang paling penting bagi Anda. Beberapa hal yang perlu dipertimbangkan meliputi
- Posisi tombol: Ini menentukan di mana tombol muncul pada halaman Anda. Plug-in mungkin memberi Anda opsi untuk menempatkan tombol di kanan, kiri, atau tengah. Beberapa menawarkan kendali yang lebih rinci.
- Ikon atau label: Plug-in mungkin menawarkan satu ikon atau memberi Anda menu opsi untuk dipilih. Beberapa juga memungkinkan Anda menyesuaikan warna ikon.
- Visibilitas pada perangkat seluler atau desktop: Tombol mungkin ditampilkan secara berbeda pada PC dan perangkat seluler. Periksa opsi visibilitas plug-in untuk memahami bagaimana tombol akan muncul.
- Pengguliran halus: Beberapa tombol menawarkan opsi pengguliran alih-alih langsung melompat ke atas halaman. Ini bermanfaat jika Anda ingin pengguna memiliki kendali lebih atas navigasi halaman.
- Offset atau ambang gulir: Pengaturan ini menentukan seberapa banyak ruang yang disediakan antara elemen di bagian atas halaman dan posisi gulir. Idealnya, mengklik tombol kembali ke atas tidak akan menyembunyikan konten dari menu atau header.
Beberapa plug-in menawarkan lebih banyak penyesuaian dibandingkan yang lain. Meskipun Anda mungkin tidak memerlukan tombol kembali ke atas dengan banyak opsi gaya, yang Anda pilih sebaiknya tidak terasa tidak sesuai dengan situs web Anda. Anda ingin tombol tersebut menyatu dengan rapi dengan elemen lain di halaman.
Cara menambahkan tombol kembali ke atas di WordPress
Setelah Anda memilih plug-in yang sesuai dengan kebutuhan Anda, pasang plug-in tersebut menggunakan langkah-langkah berikut:
- Masuk ke dasbor administrator situs web Anda.
- Klik Plugins.
- Temukan plug-in di Direktori Plugin WordPress. Anda dapat menggunakan kotak pencarian untuk mengetik namanya.
- Klik plug-in tersebut.
- Klik Install and activate. (Jika Anda memasang plug-in berbayar, klik Purchase and activate.)
Setelah memasang program tersebut, kunjungi menu Settings untuk mengonfigurasi tampilan dan perilaku gulir tombol kembali ke atas.
Plug-in kembali ke atas WordPress yang populer
Ada ratusan plug-in yang menambahkan tombol gulir ke atas di WordPress. Beberapa opsinya meliputi
- WPFront Scroll Top: Plug-in ini menawarkan puluhan tombol gulir ke atas dengan gaya siap pakai yang dapat Anda pilih. Plug-in ini juga memungkinkan Anda mengatur ukuran, penempatan, dan perilaku gulir tombol.
- Smooth Scroll Page Up/Down Buttons: Jika halaman situs Anda memuat dokumen yang panjang, plug-in ini dapat membantu. Plug-in ini menawarkan fitur gulir halus ke atas WordPress, yang memungkinkan pengguna menggulir di antara dokumen teks individu atau ke awal halaman.
- Nicescrollr: Plug-in ini memungkinkan Anda menambahkan tombol kembali ke atas dan mengelola berbagai pengaturan, termasuk ukuran tombol dan kecepatan gulir.
Meskipun plug-in mudah dipasang, plug-in menambahkan dependensi baru yang harus Anda pelihara. Penting untuk selalu memperhatikan setiap pembaruan plug-in, karena pembaruan tersebut mungkin menghadirkan patch keamanan.
Menambahkan tombol kembali ke atas di WordPress dengan kode khusus
Tombol kembali ke atas khusus di WordPress memberi Anda kendali penuh atas tampilan dan perilakunya. Anda tidak terikat pada opsi pengaturan yang disediakan oleh plug-in, dan Anda dapat memodifikasi tombol agar benar-benar sesuai dengan kebutuhan Anda. Ini adalah alternatif yang solid bagi mereka yang menginginkan desain khusus atau lebih suka menghindari pembengkakan halaman yang dapat disebabkan oleh plug-in.
Namun, membuat tombol Anda sendiri memerlukan keahlian. Anda harus terbiasa menyunting tema WordPress dan memiliki pengalaman dengan HTML, CSS, atau JavaScript khusus.
Untuk mengembangkan tombol Anda sendiri, tambahkan kode Anda ke blok HTML khusus, area penyesuaian tema, atau alur kerja potongan kode. Setelah diterapkan ke situs Anda, uji tombol baru tersebut dengan cermat untuk memastikan bahwa tombol tersebut tidak menimbulkan bug.
Kelebihan dan kekurangan tombol khusus
Tombol kembali ke atas buatan khusus menawarkan banyak fleksibilitas. Anda dapat menyesuaikan ikon dan warna agar menyatu secara alami dengan situs web Anda, dan Anda dapat mengatur visibilitasnya. Misalnya, Anda dapat mendesain tombol sehingga hanya muncul ketika pengguna mencapai titik tertentu pada halaman. Atau, Anda dapat menambahkan tombol kembali ke atas mengambang di WordPress yang melayang saat pengguna menggulir.
Kekurangan utama dari pembuatan tombol khusus adalah penyiapan teknis dan pengujiannya. Dibutuhkan waktu untuk menulis kode yang selaras dengan situs web Anda dan tidak akan mengganggu tema WordPress-nya.
Pengujian juga merupakan kunci dalam pengembangan tombol khusus. Rencanakan untuk menguji performa tombol di berbagai perangkat, termasuk PC, tablet, dan ponsel pintar. Sebaiknya coba juga tombol tersebut di berbagai platform, seperti iOS, Windows, dan Android.
Metode tanpa kode yang lebih mudah: Gunakan Back to Top Widget dari Jotform
Ada alternatif selain plug-in dan tombol khusus: Back to Top Widget dari Jotform. Ini adalah solusi tanpa kode yang dapat Anda tambahkan ke situs web Anda dalam hitungan menit.
Tidak seperti plug-in, Back to Top Widget kami tidak akan menambah pembengkakan halaman dan tidak memerlukan pembaruan rutin. Sama sekali tidak diperlukan pemrograman, dan ini tidak akan memengaruhi fungsionalitas tema WordPress Anda.
Back to Top Widget dari Jotform juga sepenuhnya dapat disesuaikan. Anda dapat mengatur gaya ikon, warna, ukuran, dan radius sudut. Ada opsi untuk mengubah penempatan dan visibilitas tombol saat menggulir. Dan ini berfungsi di semua perangkat, termasuk layar seluler.
Cara memasang Back to Top Widget dari Jotform
Mengintegrasikan widget ke situs web Anda mudah dilakukan. Mulailah dengan membuka halaman Back to Top Widget kami, lalu ikuti langkah-langkah berikut:
- Beri nama widget Anda dengan menyunting kolom “Untitled” di bilah alat.
- Masukkan posisi dan pengaturan gulir yang Anda inginkan, lalu klik Continue.
- Button Position: Pilih Left atau Right.
- Show Label: Alihkan untuk mengaktifkan atau menonaktifkan. Masukkan teks apa pun yang ingin Anda tampilkan pada tombol.
- Show after scrolling: Gunakan penggeser untuk menunjukkan berapa banyak piksel yang harus digulir pengguna sebelum tombol muncul.
- Scroll animation: Pilih Smooth atau Instant.
- Masukkan preferensi gaya Anda untuk tombol lalu klik Continue.
- Button size: Gunakan penggeser untuk mengatur lebar dan tinggi tombol.
- Icon size: Gunakan penggeser untuk mengatur ukuran ikon panah.
- Icon: Pilih gaya ikon panah untuk tombol (Arrow up, Chevron up, atau Bold arrow up).
- Corner radius: Pilih Square Corners, Rounded Corners, atau Circular Corners.
- Button Colors: Masukkan kode warna hex yang Anda inginkan untuk warna latar belakang dan teks.
- Drop shadow: Alihkan untuk menonaktifkan atau mengaktifkan bayangan lembut di bawah tombol.
- Siapkan aturan tampilan lalu klik Try it on your website for free.
- Distance from bottom: Gunakan penggeser untuk menentukan seberapa jauh tombol dari tepi bawah.
- Distance from side: Gunakan penggeser untuk mengontrol seberapa jauh tombol dari tepi samping.
- Show on desktop: Aktifkan atau nonaktifkan.
- Show on mobile: Aktifkan atau nonaktifkan.
- Salin kode semat dan tempelkan ke editor HTML WordPress Anda.
Saat menyesuaikan tombol, Anda dapat mengklik ikon PC atau ponsel pintar di pojok kanan bawah untuk melihat bagaimana tampilannya nanti.
Manfaat menggunakan alat Jotform di situs web WordPress Anda
Baik Anda seorang desainer web ahli maupun baru belajar cara menggunakan WordPress, Jotform memiliki banyak alat praktis yang mendukung situs web Anda.
Kami menawarkan beberapa Website Widget gratis yang dapat Anda sesuaikan untuk menampilkan ulasan organisasi Anda dari situs pihak ketiga, termasuk Google, Facebook, dan Tripadvisor — sempurna untuk pemilik situs web yang ingin menampilkan testimoni tetapi ragu untuk berkomitmen pada alat plug-in berbayar yang tersedia melalui WordPress.
Anda juga dapat memanfaatkan plug-in formulir semat WordPress khusus dari Jotform. Plug-in ini memungkinkan Anda mengumpulkan pengiriman formulir dari pengguna yang mengunjungi situs Anda. Kami menawarkan lebih dari 20.000 templat formulir WordPress khusus gratis yang mencakup kasus penggunaan umum, termasuk informasi kontak, informasi pembayaran, dan pengiriman aplikasi. Anda dapat menyematkan formulir Anda di WordPress hanya dengan beberapa langkah.
Yang terbaik dari semuanya, Jotform menawarkan paket gratis yang mendukung widget WordPress tanpa batas dan hingga lima formulir. Meningkatkan ke paket berbayar menambah jumlah formulir yang dapat Anda gunakan, menghapus branding Jotform, dan menyediakan penyimpanan tambahan.
Tambahkan tombol kembali ke atas tanpa memperlambat alur kerja WordPress Anda
Tombol kembali ke atas meningkatkan pengalaman pengguna saat menggulir konten yang panjang. Tombol ini juga mendukung keterlibatan dan konversi pada halaman e-commerce dan halaman arahan. Namun, meskipun menambahkan tombol dapat dilakukan menggunakan plug-in atau kode khusus, solusi tanpa kode yang paling mudah adalah widget dari Jotform.
Untuk melihat bagaimana Back to Top Widget dari Jotform menambahkan tombol gulir ke atas yang rapi ke situs WordPress Anda, cobalah sekarang.
Pertanyaan umum tentang tombol kembali ke atas WordPress
Ada beberapa plug-in di Direktori WordPress yang mendukung tombol kembali ke atas. Alat-alat ini menawarkan opsi penyesuaian dan tidak memerlukan pemrograman. Namun, jika Anda ingin meminimalkan pembengkakan halaman dan memiliki lebih banyak kendali atas fungsionalitas tombol, membuat kode tombol kembali Anda sendiri mungkin merupakan pilihan yang lebih baik. Dan untuk alternatif yang lebih sederhana, Anda dapat menggunakan Back to Top Widget dari Jotform, yang tidak memerlukan pengalaman pemrograman atau pemeliharaan berkelanjutan.
Untuk membuat tombol kembali ke atas di WordPress Elementor, buka halaman Anda di editor Elementor. Tambahkan ID CSS di bagian atas halaman, lalu sisipkan widget Button. Tautkan ke ID CSS dari tab Content pada tombol. Anda dapat menyesuaikan tampilan tombol di tab Style.
Artikel ini ditujukan untuk pemilik situs web WordPress, manajer konten, tim bisnis kecil, desainer web, dan siapa pun yang ingin menambahkan tombol kembali ke atas yang dapat disesuaikan ke halaman WordPress yang panjang tanpa mengganggu performa atau alur kerja situs.
Kirim Komentar: