Bagaimana cara menambahkan tab ke posting dan halaman WordPress

Tab banyak digunakan di banyak situs web, terutama di toko e-commerce. Pemilik toko e-niaga umumnya menggunakan tab di area deskripsi produk, tempat mereka membagikan ulasan, deskripsi, spesifikasi teknis, dll. Pada banyak tab.

Namun, tab telah digunakan pada banyak jenis situs web lain, bukan hanya situs e-commerce. Bahkan situs WordPress.org resmi menggunakan tab pada halaman deskripsi plugin. Ilustrasi berikut menunjukkan tab yang disorot di WP.org.

Banyak pemilik situs lain menggunakan tab untuk berbagai jenis situs. Namun, tab tidak boleh disamakan dengan akordeon yang meluas untuk menampilkan informasi. Kemudian perhatikan bagaimana saya menggunakan akordeon di situs web saya.

Tapi selain dari akordionis, kita di sini untuk membicarakannya. bulu mataJadi jangan sampai kita kehilangan fokus. Saya harus mengklarifikasi perbedaan antara tab dan akordeon. Sekarang saya berharap kita berada di halaman yang sama 🙂

Pada dasarnya, pemilik situs menggunakan tab untuk berbagi informasi yang akan mengambil seluruh halaman atau posting. Ini artinya tab memfasilitasi pencernaan informasi tanpa memaksa pengguna bermain trackball jutaan kali.

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

Dalam posting hari ini, kami akan menunjukkan kepada Anda bagaimana cara menambahkan tab ke posting dan halaman WordPress Anda. Di akhir posting 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. Mari kita mulai.

Gunakan generator halaman

Jika Anda sudah menginstal pembuat halaman, Anda beruntung – Anda mungkin sudah memiliki modul tab yang tersedia. Sebagian besar pembuat halaman utama menawarkan tab sebagai bagian dari rangkaian inti elemen pembangun halaman mereka. Berikut ini sekilas dua favorit kami.

Pembuat Halaman Elemen Gratis

Pembuat halaman Elementor yang populer berisi tab sebagai bagian dari versi gratis plugin. Yang harus Anda lakukan adalah memasukkan elemen tab pada halaman Anda dan kemudian mengedit judul, konten, gaya, dll. Itu saja!

WPBakery Premium Page Builder

Apakah Anda menggunakan tema premium yang mencakup WPBakery Page Builder (seperti tema umum kami sendiri)? Luar biasa! Tab terintegrasi dan mudah digunakan.

Modul tab WPBakery sedikit berbeda dari contoh sebelumnya dalam hal tab awalnya kosong ketika ditambahkan. Anda harus menambahkan elemen halaman tambahan (area teks, gambar, ikon, dll.) Ke tab untuk menambahkan kontennya. Namun, ini memberi Anda banyak kebebasan untuk membuat tab sesuai dengan keinginan Anda (di samping pengaturan gaya bawaan). Kami telah membahas generator situs blog ini. Untuk instruksi lebih detail silakan baca panduan WPBakery kami (catatan: plugin ini sebelumnya bernama Visual Composer, mohon maaf atas kebingungan sebelumnya).

Instal plugin tab WordPress

Jika Anda tidak menggunakan pembuat halaman, Anda tidak perlu menggunakan satu tab. Ada banyak alternatif bagus, seperti plugin WordPress gratis, yang disebut WP Shop Mart. Tab adalah plugin WordPress yang luar biasa yang memungkinkan Anda membuat tab indah tanpa batas tanpa banyak keringat.

Mari kita mulai dengan menginstal tab plugin WordPress. Karena tersedia di arsip plugin WordPress resmi, Anda dapat menginstal plugin langsung melalui panel admin WordPress.

Kami menggunakan versi gratis, tetapi versi premium tersedia jika Anda ingin meningkatkan ke fitur tambahan nanti.

Instal plugin tab WordPress

Masuk ke area admin WordPress Anda dan arahkan ke Plugin> Tambah baru dan ketik "tab wpshopmart" di bidang kata kunci dengan kata kunci. Ketika Anda menemukan plugin yang tepat, tekan tombol Instal sekarang Tombol seperti yang ditunjukkan di bawah ini.

Kemudian klik Aktifkan Tombol. Dan itulah yang siap digunakan oleh plugin Tab WordPress responsif Anda. Sekarang mari kita buat beberapa tab untuk mengetahui apa yang ditawarkan plugin ini.

Siapkan plugin tab WordPress responsif

Mengaktifkan plugin menambahkan item baru ke menu admin WordPress Anda. Arahkan ke untuk membuat tab baru Piutang tab> Tambahkan tab baru seperti yang dijelaskan dalam tangkapan layar di bawah ini.

Ini membawa Anda ke tab Pembuat Respons, yang berisi semua fitur yang Anda butuhkan untuk membuat tab bos yang indah. Lihatlah gambar di bawah ini untuk mendapatkan ide tentang apa yang diharapkan.

Semuanya perkamen, kan? Sebagian besar fungsi dapat ditemukan di sidebar kanan. Perhatikan juga bahwa masing-masing tab memiliki pengaturannya. Anda bahkan dapat menggunakan editor tab WYSIWYG, yang berarti Anda memiliki banyak kendali atas tab Anda.

Sekarang kita akan membuat beberapa tab sampel dan menampilkannya pada halaman atau posting.

Tambahkan judul

Pertama, beri tab Anda judul deskriptif (seperti menu navigasi), seperti yang ditunjukkan pada gambar di atas. Dengan cara ini, Anda dapat dengan mudah mengidentifikasi tab Anda nanti di area admin WordPress jika Anda perlu mengedit sesuatu. Untuk keperluan tutorial ini, saya menyebut tab saya "Tes Mulai Tab."

Pilih tab Template Desain

Seperti terlihat pada tangkapan layar di atas, hal selanjutnya yang harus dilakukan adalah memilih templat desain yang ingin Anda gunakan untuk tab Anda. Versi gratis dari tab WordPress Plugins hanya menawarkan templat desain, tetapi Anda dapat meningkatkan ke versi premium kapan saja 19 lagi, Bicara tentang kebebasan desain.

Tambahkan tab

Kemudian tambahkan tab sebanyak yang Anda suka (lihat di bawah).

Kami telah membuat daftar bernomor tentang apa yang dapat Anda lakukan dalam daftar. Tambahkan tab Bagian yang ditunjukkan di atas. Angka-angka sesuai dengan masing-masing area.

1. Judul penggemar – Masukkan judul tab Anda di bidang ini. Deskripsi, spesifikasi, detail, dll.
2. Keterangan Tab – Tambahkan deskripsi tab Anda di sini. Di bidang ini Anda dapat menambahkan konten ke tab Anda. Bagian terbaiknya adalah Anda dapat menggunakan editor WYSIWYG (lihat ilustrasi 3 di bawah) untuk menambahkan konten yang kaya ke tab Anda, termasuk foto, musik dan video
3. Gunakan WYSIWYG – Jika Anda ingin menggunakan familiar W.Itu memiliki-Y.UNEDS.EEsayas-W.Itu memiliki-Y.UNEDSunUntuk membuat konten tab Anda, Anda dapat menekan tombol ini di editor untuk membuka jendela sembulan
4. Ikon tab – Di bidang ini Anda dapat memilih ikon untuk tab Anda. Tab Plugin WordPress memungkinkan Anda mengakses simbol Font Awesome yang tak terhitung jumlahnya untuk menghidupkan tab Anda seperti pro
5. Tampilkan ikon di atas – Jika Anda ingin menampilkan judul tab di sebelah ikon, Anda akan menyukai fitur ini. Anda juga dapat 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. Bersihkan semua – Bosan dengan semua bulu mata? Cukup tekan Bersihkan semua Tombol untuk mengatur ulang semuanya

Beberapa tips tambahan untuk membantu Anda. Pertama, Anda dapat menarik dan melepas tab untuk mengatur ulang dan mengaturnya sesuka Anda.

Kedua, jangan lupa untuk menekan tombol simpan konsep Saat membuat tab Anda, klik tombol sekali atau dua kali untuk memastikan Anda tidak melewatkan perubahan jika Anda secara tidak sengaja berjalan menjauh dari pembuat tab.

Jika Anda butuh bantuan, ada warna biru besar Dapatkan bantuan Tombol tepat di bawah Tambahkan tab Bagian (dan sebagian besar halaman plugin) yang akan membawa Anda ke forum dukungan berbasis tab resmi di WordPress.org. Tekan tombol bantuan jika Anda memerlukan bantuan kapan saja.

Kode tab

Di bawah ini adalah kode kartu tab untuk menambah dan menampilkan tab Anda pada halaman atau posting mana pun. Misalnya, kode kartu kami (TABS_R id = 443). Untuk melihat tab pada halaman, cukup salin kode dari kartu di atas dan tempel di halaman itu.

Tab widget

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

Pukul itu 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 tab WordPress berisi banyak opsi penyesuaian tab (lihat saja bilah sisi kanan, penuh opsi gaya!), Anda dapat menambahkan gaya CSS kustom Anda sendiri seperti yang ditunjukkan di bawah ini.

Anda juga dapat mengatur pengaturan khusus sebagai pengaturan default untuk semua tab baru hanya dengan mengklik Perbarui bawaan Tombolnya seperti yang ditunjukkan pada gambar di atas.

Bilah sisi kanan

Bilah sisi kanan, yang kami sorot pada gambar di atas, merangkum hari itu. Ini berisi semua opsi yang Anda butuhkan untuk mendesain tab Anda sesuai dengan isi hati Anda. Pengaturan penting termasuk:

• Tab warna latar belakang
• Warna Tab
• Font dan gaya
• Pengaturan tampilan untuk judul dan ikon tab
• Tempatkan alamat ikon tab, mis. H. Sebelum atau sesudah tab
• Tab Kanter
• Animasi dengan deskripsi beberapa tab
• Dan masih banyak lagi

Tambahkan tab Anda ke situs atau pos WordPress

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

Pada titik ini, tab Anda siap. Cukup tambahkan tab ke situs atau pos WordPress. Cukup salin kode tab yang pernah Anda lihat sebelumnya. Milik kami adalah (TABS_R id = 443).

Luncurkan editor posting Anda (bahkan jika Anda menggunakan Gutenberg) dan rekatkan kode kartu ke dalam postingan Anda. Lalu tekan tombol Terbitkan Tombol seperti yang ditunjukkan di bawah ini.

Setelah sekitar. 5 Menetapkan protokol; Saya menggunakan tema Twenty Seventeen dan beberapa Lorem Ipsum. Saya mendapat hasil sebagai berikut.

Harap dicatat bahwa saya belum menyesuaikan warna atau apa pun. Katakan apa yang Anda pikirkan; Bukankah itu mudah?

Menambahkan tab ke halaman WordPress Anda dan posting adalah jenis keempat. Saya tidak mengharapkan masalah apa pun terutama jika Anda menggunakan plugin seperti WP Shop Mart Tabs.

Bagaimana Anda menambahkan tab ke halaman dan posting WordPress Anda? Apa plugin tab WordPress favorit Anda? Bagikan pendapat Anda di komentar. Selamat ciptaan!