Cara Menambahkan Tab ke Posting dan Halaman WordPress
Tab adalah fitur yang cukup umum di banyak situs web, terutama di toko e-niaga. Pemilik toko e-niaga sering menggunakan tab di area deskripsi produk, tempat mereka membagi ulasan, deskripsi, spesifikasi, dll. dalam beberapa tab.
Namun, tab telah digunakan di berbagai jenis situs web, bukan hanya situs 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 pada berbagai jenis situs web. Namun, tab tidak boleh disamakan dengan akordeon, yang diperluas untuk mengungkapkan informasi. Selanjutnya, perhatikan bagaimana saya menggunakan akordeon di situs web saya.
Tapi di luar perjanjian, kami di sini untuk membicarakannya bulu matajadi jangan sampai kehilangan fokus; Saya hanya perlu mengklarifikasi perbedaan antara tab dan akordeon. Sekarang, saya harap kita berada di halaman yang sama
Pada dasarnya, pemilik situs web menggunakan tab untuk membagi informasi yang dapat memenuhi seluruh halaman atau postingan. Itu berarti tab membuat informasi lebih mudah dicerna, tanpa harus memaksa pengguna untuk menekan trackball 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 posting hari ini, kami menunjukkan kepada Anda cara menambahkan tab ke posting dan halaman WordPress Anda. Sebelum mengakhiri artikel ini, Anda akan memiliki semua instruksi yang Anda butuhkan untuk menggunakan tab untuk keuntungan Anda. Kami harap Anda menikmati sampai akhir dan jangan pergi tanpa membagikan pemikiran Anda di bagian komentar. Keluar dari jalan, mari kita mulai.
Gunakan pembuat halaman
Jika Anda telah menginstal pembuat halaman, Anda beruntung – kemungkinan Anda sudah memiliki modul tab di ujung jari Anda. Sebagian besar pembuat halaman master menawarkan tab sebagai bagian dari rangkaian inti elemen pembuat halaman mereka. Berikut ini sekilas dua favorit kami.
Elemen Pembuat Halaman Gratis
Pembuat halaman Elementor yang populer menyertakan tab sebagai bagian dari versi gratis plugin. Yang perlu Anda lakukan hanyalah menyisipkan elemen tab di halaman Anda, lalu mengedit judul, isi, gaya, dll. Selesai!
Pembuat Halaman Premium WPBakery
Apakah Anda menggunakan tema premium yang menyertakan WPBakery Page Builder (seperti tema Total kami sendiri)? Luar biasa! Tab terintegrasi dan mudah digunakan.
Modul tab WPBakery sedikit berbeda dari contoh sebelumnya karena tab awalnya kosong saat Anda menambahkannya. Anda perlu 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 sesuka Anda (terlepas dari opsi gaya bawaan). Kami membahas pembuat halaman blog ini, jadi jika Anda ingin instruksi yang lebih detail, lihat tutorial WPBakery kami (catatan: plugin ini sebelumnya dikenal sebagai Visual Composer, mohon maaf sebelumnya atas segala kebingungan).
Instal plugin Tab WordPress
Jika Anda tidak menggunakan pembuat halaman, Anda tidak perlu menggunakannya untuk tab. Ada banyak alternatif hebat di luar sana, seperti plugin WordPress gratis yang disebut WP Shop Mart Tabs. Tabs adalah plugin WordPress yang cerdik yang membantu Anda membuat banyak tab yang indah tanpa berkeringat.
Mari kita mulai dengan menginstal plugin WordPress WordPress. Karena tersedia di repositori plugin WordPress resmi, Anda dapat menginstal plugin langsung dari panel admin WordPress.
Kami menggunakan versi gratis, tetapi versi premium tersedia jika Anda ingin meningkatkan untuk fitur tambahan nanti.
Instal plugin Tab WordPress
Masuk ke panel admin WordPress Anda dan navigasikan ke Plugin > Tambah Baru dan ketik “wpshopmart tab” di kotak pencarian kata kunci. Saat Anda menemukan plugin yang benar, tekan tombol Instal sekarang tombol seperti yang ditunjukkan di bawah ini.
Lalu klik Diaktifkan simpul. Dan hanya itu, plugin WordPress Responsive Anda siap digunakan. Sekarang, mari buat beberapa tab untuk mencari tahu apa yang ditawarkan plugin ini.
Konfigurasikan plugin Responsif WordPress
Mengaktifkan plugin akan menambahkan entri baru ke menu admin WordPress Anda. Untuk membuat tab baru, navigasikan ke Tab Responsif > Tambahkan Tab Baru seperti yang dijelaskan pada tangkapan layar di bawah ini.
Melakukannya akan membawa Anda ke Tab Feedback Builder yang berisi semua fitur yang Anda butuhkan untuk membuat tab seperti bos yang indah. Lihat gambar di bawah untuk mendapatkan gambaran tentang apa yang diharapkan.
Semua perkamen, kan? Nah, 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, yang berarti Anda memiliki banyak kendali atas tab Anda.
Sekarang mari buat beberapa contoh tab dan tampilkan di halaman atau postingan.
Tambahkan judul
Mulailah dengan memberi tab Anda judul deskriptif (sama seperti menu navigasi) seperti yang ditunjukkan pada gambar di atas. Dengan cara ini Anda dapat dengan mudah menentukan tab Anda di panel admin WordPress nanti jika Anda perlu mengedit sesuatu. Untuk keperluan tutorial ini, saya menamai tab saya “Test Startup Tabs”.
Pilih template desain tab
Seperti yang terlihat pada tangkapan layar di atas, langkah Anda selanjutnya adalah memilih template desain yang ingin Anda gunakan untuk tab Anda. Versi gratis dari plugin WordPress WordPress hanya memberi Anda satu template desain, tetapi Anda selalu dapat meningkatkan ke versi premium untuk 19 lagi. Bicara tentang kebebasan desain.
Lebih banyak tab
Kemudian tambahkan tab sebanyak yang Anda suka seperti di bawah ini.
Kami telah membuat daftar bernomor yang merinci apa yang dapat Anda lakukan di Lebih banyak tab bagian yang ditunjukkan di atas. Angkanya sesuai dengan daerah masing-masing.
- Judul tab – Tambahkan judul tab Anda di bidang, hal. Deskripsi, spesifikasi, detail, dll.
- Deskripsi tab – Tambahkan deskripsi tab Anda di sini. Bidang ini memungkinkan Anda untuk menambahkan konten tab. 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
- Menggunakan WYSIWYG – Jika Anda ingin menggunakan familiar Wtopi-kamuUNED-See-SayaS-Wtopi-kamuUNED-MatahariDi editor untuk membuat konten tab Anda, silakan tekan tombol ini untuk membuka popup
- ikon tab – Bidang ini membantu Anda memilih ikon untuk digunakan di tab Anda. Plugin Tabs WordPress memberi Anda akses ke banyak ikon Font Awesome untuk menganimasikan tab Anda seperti seorang profesional
- Tampilkan ikon di atas – Jika Anda ingin menampilkan judul tab di sebelah ikon, Anda akan menyukai fitur ini. Juga, ini memungkinkan Anda untuk menonaktifkan ikon tanpa menyentuh judul tab
- Menghapus – Tekan tombol ini untuk menghapus tab tertentu
- Tambahkan tab baru – Klik tombol ini untuk menambahkan tab
- Hapus semua – Bosan dengan semua tab? Tekan saja Hapus semua tombol untuk mengatur ulang semua
Beberapa tips tambahan untuk membantu Anda. Pertama, Anda dapat menarik dan melepas tab untuk mengatur ulang dan mengaturnya sesuka Anda.
Kedua: jangan lupa tekan Menyimpan konsep tombol sekali atau dua kali saat membuat tab untuk memastikan Anda tidak melewatkan perubahan apa pun jika Anda secara tidak sengaja meninggalkan pembuat tab.
Akhirnya, jika Anda butuh bantuan, ada biru besar Dapatkan dukungan tombol tepat di bawah tombol Lebih banyak tab bagian (dan di sebagian besar halaman plugin) akan membawa Anda ke forum dukungan tab resmi di WordPress.org. Silakan tekan tombol bantuan jika Anda membutuhkan bantuan kapan saja.
Tab kode pendek
Di bawah ini Anda akan menemukan kode pendek tab yang Anda gunakan untuk menambahkan dan menampilkan tab Anda di halaman atau posting mana pun yang Anda inginkan. Misalnya, kode pendek kami adalah (TABS_R id=443). Untuk menampilkan tab pada halaman, cukup salin dan tempel kode pendek di atas ke halaman tertentu.
Widget Tab
Apakah Anda ingin menambahkan tab Anda di area widget di situs web Anda? Jika itu buzz ya, Anda akan menyukai dukungan add-on yang disertakan dengan plugin WordPress WordPress.
Pada gilirannya Klik disini tautan pada gambar di atas akan membawa Anda ke layar widget WordPress, di mana Anda dapat menambahkan tab di mana pun Anda memiliki area widget di tema Anda.
CSS khusus
Sementara plugin WordPress WordPress hadir dengan banyak opsi penyesuaian tab (lihat saja di bilah sisi kanan – penuh dengan opsi gaya!), Anda dapat menambahkan gaya CSS khusus Anda sendiri seperti yang ditunjukkan di bawah ini.
Atau, Anda dapat mengatur pengaturan khusus Anda sebagai pengaturan default untuk semua tab baru hanya dengan mengklik Perbarui pengaturan default tombol seperti pada gambar di atas.
Bilah sisi kanan
Bilah sisi kanan yang kami soroti pada gambar di atas memberikan tanggal itu sendiri. Itu dikemas dengan semua opsi yang Anda butuhkan untuk mendesain tab sesuka hati Anda. Pilihan penting meliputi:
- Warna latar belakang tab
- font warna
- Keluarga font dan gaya
- Opsi tampilan untuk judul dan ikon tab
- Sejajarkan posisi ikon tab, yaitu sebelum atau sesudah judul tab
- Tepi tab
- Animasi deskripsi beberapa tab
- Dan banyak lagi
Tambahkan tab Anda ke halaman atau posting WordPress
Saat Anda menambahkan gaya tab dan opsi konten, gulir ke atas dan klik Menerbitkan tombol seperti yang ditunjukkan di bawah ini.
Pada titik ini, tab Anda sudah siap. Anda hanya perlu menambahkan tab ke halaman atau posting WordPress Anda. Cukup salin kode pendek yang kita lihat sebelumnya. Milik kami adalah (TABS_R id=443).
Luncurkan editor posting Anda (bahkan jika Anda menggunakan Gutenberg) dan tempel kode pendek di posting/halaman Anda. Lalu tekan Menerbitkan tombol seperti yang ditunjukkan di bawah ini.
Setelah beberapa 5 menit mengatur semuanya; Saya menggunakan tema Twenty Seventeen dan sekelompok Lorem Ipsum, saya mendapatkan hasil sebagai berikut.
Harap dicatat bahwa saya tidak menyesuaikan warna atau apa pun. Katakan padaku apa yang kau pikirkan; Bukankah itu mudah?
Menambahkan tab ke halaman dan posting WordPress Anda adalah hal keempat. Saya tidak berharap Anda mengalami masalah, terutama jika Anda menggunakan plugin seperti WP Shop Mart Tab.
Bagaimana Anda menambahkan tab ke halaman dan posting WordPress Anda? Apa plugin WordPress favorit Anda untuk tab? Silakan bagikan pemikiran Anda di komentar. Selamat Kreatif!
