Cara Menambahkan Tab ke Posting dan Halaman WordPress

Cara Menambahkan Tab ke Posting 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, di mana mereka membagi ulasan, deskripsi, spesifikasi teknis dan sebagainya menjadi beberapa tab.


contoh tab yang beraksi di situs web e-niaga

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

tab di halaman deskripsi plugin wordpress.org

Banyak pemilik situs web lain menggunakan tab pada berbagai jenis situs web. Namun, tab tidak perlu dikacaukan akordeon, yang berkembang untuk mengungkapkan informasi. Di bawah, perhatikan bagaimana saya menggunakan akordeon di situs web saya.

akordeon di vistamedia.xyz

Tapi selain akordeon, kita di sini untuk dibicarakan tab, jadi janganlah kita kehilangan fokus kita; Saya hanya perlu memperjelas perbedaan antara tab dan akordeon. Sekarang, saya harap kita ada di halaman yang sama ��

Intinya, pemilik web menggunakan tab untuk membagi informasi yang seharusnya diambil satu halaman penuh atau posting. Itu artinya tab membuat informasi lebih mudah dicerna, tanpa harus memaksa pengguna untuk menekan tombol gulir jutaan kali.

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

Dalam posting hari ini, kami menunjukkan kepada Anda bagaimana cara menambahkan tab ke posting dan halaman WordPress Anda. Sebelum akhir posting ini, Anda akan memiliki semua instruksi yang Anda butuhkan untuk menggunakan tab untuk keuntungan Anda. Kami harap Anda menikmati sampai akhir, dan tolong jangan pergi tanpa berbagi pendapat Anda di bagian komentar. Dari situ, mari kita mulai.

Gunakan Pembuat Halaman

Jika Anda sudah memiliki pembuat halaman yang terpasang, Anda beruntung – Anda mungkin sudah memiliki modul tab di ujung jari Anda. Sebagian besar pembuat halaman utama menawarkan tab sebagai bagian dari set elemen pembangun halaman inti mereka. Berikut ini sekilas dua favorit kami.

Elementor Builder Halaman Gratis

Tab Pembuat Halaman Elemen

Info & Unduh Lihat Demo

Pembuat halaman Elementor yang populer menyertakan tab sebagai bagian dari versi gratis plugin. Yang perlu Anda lakukan adalah memasukkan elemen tab di halaman Anda, lalu edit judul, konten, gaya, dll. Itu saja!

WPBakery Premium Page Builder

Tab Pembuat Halaman WPBakery

Menggunakan tema premium yang mencakup WPBakery Page Builder (seperti tema Total kita sendiri)? Bagus! Tab bawaan dan mudah digunakan.

Modul tab WPBakery sedikit berbeda dari contoh sebelumnya karena tab awalnya kosong ketika Anda menambahkannya. Anda harus memasukkan elemen halaman tambahan (area teks, gambar, ikon, dll) di dalam tab untuk menambahkan konten Anda. Tapi ini memberi Anda banyak kebebasan untuk membuat tab sesuai keinginan Anda (di samping opsi gaya bawaan). Kami telah membahas pembuat halaman ini di blog sebelumnya, jadi jika Anda menginginkan petunjuk yang lebih rinci, periksa panduan WPBakery kami (perhatikan – plugin ini sebelumnya bernama Visual Composer, mohon maaf sebelumnya atas segala kebingungan).

Instal Plugin Tabs WordPress

Plugin WordPress Tab Gratis

Jika Anda tidak menggunakan pembuat halaman, tidak perlu menggunakannya hanya untuk tab. Ada banyak alternatif hebat, seperti plugin WordPress gratis yang hanya dikenal sebagai Tab oleh WP Shop Mart. Tab adalah plugin WordPress yang bagus yang membantu Anda membuat tab indah tanpa batas tanpa berkeringat.

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 versi untuk fitur tambahan nanti.

Menginstal Tab WordPress Plugin

Login ke dashboard admin WordPress Anda dan arahkan ke Plugin> Tambah Baru dan masukkan “tab wpshopmart” ke dalam kotak pencarian kata kunci. Setelah Anda menemukan plugin yang tepat, tekan Instal sekarang tombol seperti yang ditunjukkan di bawah ini.

menginstal tab wordpress plugin

Setelah itu, klik tombol Mengaktifkan tombol. Dan itu saja, 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 Tabs Responsif> Tambahkan Tab Baru seperti yang kita detailkan di screengrab di bawah ini.

menambahkan tab baru menggunakan tab wordpress responsif

Melakukan hal itu akan mengarahkan Anda ke Tabs Responsive Builder yang penuh dengan semua fitur yang Anda butuhkan untuk membuat tab indah seperti bos. Lihat gambar di bawah ini untuk sekilas tentang apa yang diharapkan.

tab responsif pembuat tab plugin wordpress

Cukup gulir bukan? Nah, Anda dapat menemukan sebagian besar fitur di sidebar kanan. Perhatikan, juga, masing-masing tab memiliki pengaturannya. Anda bahkan dapat menggunakan editor WYSIWYG pada tab, yang berarti Anda memiliki banyak kendali atas tab Anda.

Sekarang, mari kita buat beberapa tab sampel, dan tampilkan pada halaman atau posting.

Tambahkan judul

tambahkan judul tab

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

Pilih Template Desain Tab

pilih templat desain tab

Seperti terlihat pada tangkapan layar di atas, langkah Anda berikutnya melibatkan memilih templat desain yang ingin Anda gunakan untuk tab Anda. Versi gratis dari plugin Tabs WordPress hanya menawarkan satu templat desain, tetapi Anda selalu dapat meningkatkan ke versi premiumnya 19 lagi. Bicara tentang kebebasan desain.

Tambahkan Tab

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

menambahkan tab baru

Kami telah membuat daftar bernomor yang merinci apa yang dapat Anda lakukan di Tambahkan Tab bagian yang ditunjukkan di atas. Angka sesuai dengan masing-masing area.

  1. Judul Tab – Tambahkan judul tab Anda di bidang ini, mis. Deskripsi, Spesifikasi, Detail, dll.
  2. Keterangan Tab – Tambahkan deskripsi tab Anda di sini. Bidang ini memungkinkan Anda untuk 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 yang familier Wtopi-You-See-sayas-Wtopi-You-Gdan editor untuk membuat konten tab Anda, silakan tekan tombol ini 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 meningkatkan 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. Menghapus – 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 Hapus semua tombol untuk mengatur 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 Menyimpan konsep tombol sekali atau dua kali saat Anda membuat tab untuk memastikan Anda tidak kehilangan perubahan jika Anda menavigasi keluar dari pembuat tab secara tidak sengaja.

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

Kode Pendek Tab

kode pendek tab

Selanjutnya, Anda menemukan kode pendek Tab yang Anda gunakan untuk menambah dan menampilkan tab Anda pada halaman atau posting yang Anda inginkan. Misalnya, kode pendek kami adalah [TABS_R id = 443]. Untuk menampilkan tab pada halaman, saya cukup menyalin-tempel kode pendek di atas ke halaman tertentu.

Widget Tab

dukungan widget tabs

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

Memukul Klik disini tautan pada gambar di atas membawa Anda ke layar widget WordPress, tempat Anda bebas untuk menambahkan tab di mana pun Anda memiliki area widget di tema Anda.

widget tab

CSS khusus

Sementara plugin Tabs WordPress hadir dengan banyak opsi penyesuaian tab (cukup dengan melihat sidebar kanan; penuh dengan opsi gaya!), Anda dapat menambahkan gaya CSS kustom Anda sendiri seperti yang ditunjukkan di bawah ini.

tab wordpress plugin kustom css

Selanjutnya, Anda dapat mengatur pengaturan khusus sebagai pengaturan default untuk semua tab baru hanya dengan mengklik Perbarui Pengaturan Default tombol seperti yang ditunjukkan pada gambar di atas.

Bilah Sisi Kanan

tab opsi penataan plugin wordpress

Bilah sisi kanan yang kami soroti pada gambar di atas benar-benar membawa hari untuk Anda. Ini dikemas dengan semua opsi yang Anda butuhkan untuk menata tab Anda sesuai dengan isi hati Anda. Opsi penting termasuk:

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

Tambahkan Tab Anda ke Halaman atau Posting WordPress

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

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

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

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

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


Menambahkan tab ke halaman dan posting WordPress Anda adalah hal yang dilakukan oleh siswa kelas empat. Saya tidak berharap Anda mengalami masalah, terutama jika Anda menggunakan plugin seperti Tab oleh WP Shop Mart.

Bagaimana Anda menambahkan tab ke halaman dan posting WordPress Anda? Yang merupakan plugin WordPress tab favorit Anda? Silakan bagikan pemikiran Anda dalam komentar. Selamat menciptakan!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map