Cara Menambahkan Tab ke Postingan dan Halaman WordPress

Tab adalah fitur yang cukup umum di banyak situs web, terutama toko e-commerce. Pemilik toko e-commerce biasanya menggunakan tab di area deskripsi produk, tempat mereka membagi ulasan, deskripsi, spesifikasi teknis, dan sebagainya menjadi beberapa tab.

Namun, tab telah digunakan di banyak jenis situs web lain, tidak hanya situs web e-niaga. Bahkan situs resmi WordPress.org menggunakan tab pada halaman deskripsi plugin. Lihat gambar di bawah untuk melihat tab yang disorot di WP.org.

Banyak pemilik situs web lain menggunakan tab di berbagai jenis situs web. Namun, tab berbeda dengan akordeon, yang meluas untuk menampilkan informasi. Di bawah ini, harap amati bagaimana saya menggunakan akordeon di situs web saya.

Namun selain akordeon, kita di sini akan membahas tentang tab, jadi jangan sampai kita kehilangan fokus; Saya hanya perlu memperjelas perbedaan antara tab dan akordeon. Sekarang, saya harap kita berada di halaman yang sama ?

Intinya, pemilik web menggunakan tab untuk membagi informasi yang seharusnya menempati satu halaman atau postingan penuh. Artinya, tab membuat informasi lebih mudah dicerna, tanpa harus memaksa pengguna untuk menekan roda gulir jutaan kali.

Dengan kata lain, tab meningkatkan kegunaan situs web Anda terutama di dunia dengan rentang perhatian yang lebih pendek. Jadi, jika Anda ingin mempertahankan pengguna di situs Anda lebih lama tanpa membuat mereka bosan dengan halaman yang panjang, Anda harus mempertimbangkan untuk menggunakan tab.

Dalam postingan hari ini, kami menunjukkan dengan tepat cara menambahkan tab ke postingan dan halaman WordPress Anda. Sebelum akhir posting ini, Anda akan mendapatkan semua instruksi yang Anda perlukan untuk menggunakan tab demi keuntungan Anda. Kami harap Anda menikmatinya sampai akhir, dan jangan pergi tanpa membagikan pemikiran Anda di bagian komentar. Mari kita mulai.

Gunakan Pembuat Halaman

Jika Anda sudah memasang pembuat halaman, Anda beruntung – kemungkinan besar Anda sudah memiliki modul tab di ujung jari Anda. Sebagian besar pembuat halaman utama menawarkan tab sebagai bagian dari rangkaian inti elemen pembuat halaman mereka. Berikut sekilas dua favorit kami.

Pembuat Halaman Gratis Elementor

Pembuat halaman Elementor yang populer menyertakan tab sebagai bagian dari plugin versi gratis. Yang perlu Anda lakukan hanyalah menyisipkan elemen tab di halaman Anda, lalu mengedit judul, konten, gaya, dll. Selesai!

Pembuat Halaman Premium WPBakery

Menggunakan tema premium yang menyertakan WPBakery Page Builder (seperti tema Total kami sendiri)? Besar! Tab sudah terpasang dan mudah digunakan.

Modul tab WPBakery sedikit berbeda dari contoh sebelumnya karena tab awalnya kosong saat Anda menambahkannya. Anda harus memasukkan elemen halaman tambahan (area teks, gambar, ikon, dll) ke dalam tab untuk menambahkan konten Anda. Namun ini memberi Anda banyak kebebasan untuk membuat tab sesuai keinginan Anda (selain opsi gaya bawaan). Kami telah membahas pembuat halaman ini di blog sebelumnya, jadi jika Anda ingin instruksi lebih detail, lihat panduan WPBakery kami (catatan – plugin ini sebelumnya disebut Visual Composer, jadi maaf sebelumnya jika ada kebingungan).

Instal Plugin Tab WordPress

Jika Anda tidak menggunakan pembuat halaman, Anda tidak perlu menggunakannya hanya untuk tab. Ada banyak alternatif bagus, seperti plugin WordPress gratis yang dikenal sebagai Tabs oleh WP Shop Mart. Tabs adalah plugin WordPress bagus yang membantu Anda membuat tab indah dalam jumlah tak terbatas tanpa bersusah payah.

Mari kita mulai dengan menginstal plugin Tabs WordPress. Karena tersedia di repo plugin WordPress resmi, Anda dapat menginstal plugin langsung dari dalam dashboard admin WordPress Anda.

Kami menggunakan versi gratis, tetapi ada versi premium yang tersedia jika Anda ingin meningkatkan fitur tambahan di kemudian hari.

Memasang Plugin Tab WordPress

Masuk ke dasbor admin WordPress Anda dan navigasikan ke Plugins > Add New dan masukkan “tabs wpshopmart” ke dalam kotak pencarian kata kunci. Setelah Anda menemukan plugin yang tepat, tekan tombol Instal Sekarang seperti yang ditunjukkan di bawah ini.

Setelah itu, klik tombol Aktifkan. Selesai, plugin Tabs Responsive WordPress Anda siap digunakan. Sekarang, mari kita buat beberapa tab untuk mengetahui apa yang ditawarkan plugin ini.

Konfigurasikan Plugin WordPress Responsif Tab

Mengaktifkan plugin akan menambahkan item baru ke menu admin WordPress Anda. Untuk membuat tab baru, navigasikan ke Tab Responsif > Tambahkan Tab Baru seperti yang kami detailkan pada tangkapan layar di bawah.

Melakukannya akan membawa Anda ke Tabs Responsive Builder yang penuh dengan semua fitur yang Anda perlukan untuk membuat tab yang indah seperti bos. Lihat gambar di bawah untuk melihat sekilas apa yang diharapkan.

Cukup rumit bukan? Ya, Anda dapat menemukan sebagian besar fitur di sidebar kanan. Perhatikan juga bahwa masing-masing tab memiliki pengaturannya sendiri. Anda bahkan dapat menggunakan editor WYSIWYG pada tab, artinya Anda memiliki banyak kendali atas tab Anda.

Sekarang, mari kita membuat beberapa contoh tab, dan menampilkannya di halaman atau postingan.

Tambahkan judul

Mulailah dengan memberi judul deskriptif pada tab Anda (seperti halnya menu navigasi Anda) seperti yang ditunjukkan pada gambar di atas. Dengan cara ini, Anda dapat dengan mudah mengidentifikasi tab Anda di dasbor admin WordPress nanti jika Anda perlu mengedit apa pun. Untuk keperluan tutorial ini, saya menamai tab saya “Test Home Tabs.”

Pilih Templat Desain Tab

Seperti yang terlihat pada gambar di atas, langkah Anda selanjutnya adalah memilih template desain yang ingin Anda gunakan untuk tab Anda. Versi gratis plugin Tabs WordPress hanya menawarkan satu templat desain, namun Anda selalu dapat meningkatkan ke versi premium dengan harga 19 lebih. Bicara tentang kebebasan desain.

Tambahkan Tab

Selanjutnya, tambahkan tab sebanyak yang Anda inginkan seperti gambar di bawah ini.

Kami telah membuat daftar bernomor yang memerinci apa yang dapat Anda lakukan di bagian Tambahkan Tab yang ditunjukkan di atas. Angkanya sesuai dengan wilayah masing-masing.

  1. Judul Tab – Tambahkan judul tab Anda di bidang ini, misalnya. Deskripsi, Spesifikasi, Detail, dll.
  2. Deskripsi Tab – Tambahkan deskripsi tab Anda di sini. Bidang ini memungkinkan Anda menambahkan konten tab Anda. Bagian terbaiknya adalah Anda dapat menggunakan editor WYSIWYG (ditunjukkan pada nomor 3 di bawah) untuk menambahkan konten yang kaya ke tab Anda, termasuk gambar, musik, dan video
  3. Gunakan WYSIWYG – Jika Anda ingin menggunakan What-You-See-< kuat>SayaApa-YAnda-Get editor untuk membuat konten tab Anda, silakan tekan ini tombol untuk meluncurkan jendela pop-up
  4. Ikon Tab – Bidang ini membantu Anda memilih ikon untuk digunakan pada tab Anda. Plugin Tabs WordPress menawarkan Anda akses ke banyak ikon Font Awesome untuk meramaikan tab Anda seperti seorang profesional
  5. Tampilkan Ikon Di Atas – Jika Anda ingin menampilkan judul tab di samping ikon, Anda akan menyukai fitur ini. Selanjutnya, ini memungkinkan Anda untuk menonaktifkan ikon tanpa menyentuh judul tab
  6. Hapus – Tekan tombol ini untuk menghapus tab tertentu
  7. Tambahkan Tab Baru – Klik tombol ini untuk menambahkan lebih banyak tab
  8. Hapus Semua – Bosan dengan semua tab? Tekan saja tombol Hapus Semua untuk menyetel ulang semuanya

Beberapa tip bonus untuk membantu Anda. Pertama, Anda dapat menarik dan melepas tab untuk menyusun ulang dan mengaturnya sesuai keinginan.

Kedua – jangan lupa untuk menekan tombol Simpan Draf satu atau dua kali saat Anda membuat tab untuk memastikan Anda tidak kehilangan perubahan apa pun jika Anda keluar dari pembuat tab secara tidak sengaja.

Terakhir – jika Anda memerlukan dukungan, ada tombol Dapatkan Dukungan berwarna biru besar tepat di bawah bagian Tambahkan Tab (dan di sebagian besar halaman plugin) yang mengarahkan Anda ke Tab resmi forum dukungan di WordPress.org. Jangan ragu untuk menekan tombol dukungan jika Anda memerlukan bantuan kapan saja.

Kode Pendek Tab

Selanjutnya, Anda menemukan kode pendek Tab yang Anda gunakan untuk menambahkan dan menampilkan tab Anda di halaman atau postingan mana pun yang Anda inginkan. Misalnya, kode pendek kami adalah [TABS_R id=443]. Untuk menampilkan tab pada suatu halaman, saya cukup menyalin-menempelkan kode pendek di atas ke halaman tersebut.

Widget Tab

Apakah Anda ingin menambahkan tab ke area widget di situs web Anda? Jika jawabannya ya, Anda akan menyukai dukungan widget yang disertakan dengan plugin Tabs WordPress.

Menekan tautan Klik Di Sini pada gambar di atas akan membawa Anda ke layar widget WordPress, tempat Anda bebas menambahkan tab di mana pun Anda memiliki area widget di tema Anda.

CSS khusus

Meskipun plugin Tabs WordPress hadir dengan banyak opsi penyesuaian tab (lihat saja sidebar kanan; penuh dengan opsi gaya!), Anda dapat menambahkan gaya CSS khusus Anda sendiri seperti yang ditunjukkan di bawah ini.

Selanjutnya, Anda dapat menetapkan setelan khusus sebagai setelan default untuk semua tab baru hanya dengan mengeklik tombol Perbarui Setelan Default seperti yang ditunjukkan pada gambar di atas.

Bilah Sisi Kanan

Bilah sisi kanan yang kami soroti pada gambar di atas benar-benar menyajikan hari Anda. Itu dikemas dengan semua opsi yang Anda perlukan untuk menata tab Anda sesuai keinginan Anda. Opsi penting meliputi:

  • Warna latar belakang tab
  • Warna font tab
  • Keluarga dan gaya font
  • Opsi tampilan untuk judul dan ikon tab
  • Perataan posisi ikon tab, yaitu sebelum atau sesudah judul tab
  • Batas tab
  • Animasi deskripsi beberapa tab
  • Dan masih banyak lagi

Tambahkan Tab Anda ke Halaman atau Postingan WordPress

Setelah Anda menambahkan konten tab dan opsi gaya, gulir ke atas dan klik tombol Terbitkan seperti yang ditunjukkan di bawah ini.

Pada titik ini, tab Anda sudah siap. Anda hanya perlu menambahkan tab ke halaman atau postingan WordPress. Cukup salin kode pendek tab yang kita lihat sebelumnya. Milik kami adalah [TABS_R id=443].

Luncurkan editor postingan Anda (bahkan jika Anda menggunakan Gutenberg) dan tempelkan kode pendek ke postingan/halaman Anda. Setelah itu, tekan tombol Publikasikan seperti yang ditunjukkan di bawah ini.

Setelah sekitar 5 menit menyiapkan berbagai hal; Saya menggunakan tema Twenty Seventeen dan banyak Lorem Ipsum, saya mendapatkan hasil sebagai berikut.

Perhatikan bahwa saya tidak menyesuaikan warna atau apa pun. Katakan padaku apa yang kau pikirkan; bukankah itu mudah?

Menambahkan tab ke halaman dan postingan WordPress Anda adalah hal yang dilakukan siswa kelas empat. Saya tidak berharap Anda mengalami masalah apa pun, terutama jika Anda menggunakan plugin seperti Tabs by WP Shop Mart.

Bagaimana Anda menambahkan tab ke halaman dan postingan WordPress Anda? Yang mana plugin WordPress tab favorit Anda? Silakan bagikan pemikiran Anda di komentar. Selamat berkreasi!