Cara Membuat Tab di WordPress untuk Konten Tab yang Menakjubkan

Ingin belajar cara membuat tab di WordPress?

Menambahkan tab ke situs WordPress Anda adalah cara terbaik untuk mengatur berbagai jenis konten dan menghemat ruang pada posting dan halaman.

Pada artikel ini, kami akan menunjukkan cara menambahkan tab di WordPress langkah demi langkah.

Mengapa Anda Membutuhkan Konten WordPress Tab?

Selain menyortir konten, tab memudahkan pengunjung situs web Anda tetap aktif dan terlibat. Karena tab mengelompokkan topik konten di satu halaman, pengguna tidak perlu mengklik halaman lain, yang ideal untuk rentang perhatian yang lebih pendek.

Misalnya, WordPress.org menggunakan tab pada halaman pluginnya untuk menampilkan informasi seperti detail, ulasan, dukungan, dan pengembangan.

Beberapa cara lain untuk menggunakan tab meliputi:

• Dalam deskripsi produk untuk menunjukkan spesifikasi produk yang berbeda
• Di bilah sisi blog Anda untuk memfilter kategori
• Pada halaman kontak untuk mengurutkan informasi kontak

Kiat Pro: Tab tidak boleh disamakan dengan akordeon. Pengguna mengklik tab untuk beralih informasi, sedangkan akordeon meluas untuk mengungkapkan informasi.

Sekarang Anda tahu lebih banyak tentang cara kerja tab dan mengapa Anda membutuhkannya, mari kita lihat cara menambahkan tab ke situs WordPress Anda.

Di bawah ini kami akan membagikan 2 cara untuk menambahkan tab ke WordPress. Pertama, kami akan menggunakan pembuat halaman, lalu menunjukkan cara membuat tab dengan plugin WordPress.

Mari kita mulai.

Metode 1: Cara Membuat Tab di WordPress dengan Page Builder

Untuk metode pertama, kami akan menggunakan SeedProd, pembuat situs web WordPress terbaik, untuk menambahkan konten tab ke situs web Anda.

SeedProd adalah pembuat halaman drag-and-drop yang kuat yang memungkinkan Anda membuat tata letak WordPress yang fleksibel tanpa menulis kode. Dengan kit situs web profesional, templat halaman arahan, dan editor visual langsung, Anda dapat menyesuaikan setiap bagian situs Anda dan melihat perubahannya secara waktu nyata.

Anda juga dapat menggunakan SeedProd untuk:

• Buat tema WordPress khusus
• Bangun situs web WooCommerce
• Buat halaman arahan dengan konversi tinggi
• Tempatkan situs Anda dalam mode pemeliharaan
• Dan banyak lagi

Pembuat halaman ini juga menyertakan blok yang sangat dapat disesuaikan untuk meningkatkan desain WordPress Anda. Misalnya, dengan blok Tab, yang akan kita gunakan dalam panduan ini, Anda dapat menambahkan beberapa tab ke halaman dengan beberapa klik.

Ikuti langkah-langkah di bawah ini untuk membuat tab di WordPress dengan SeedProd.

Langkah 1. Instal Pembuat Situs Web SeedProd

Pertama, Anda harus menuju ke situs web SeedProd dan mengunduh plugin. SeedProd memang memiliki versi gratis; namun, Anda memerlukan paket premium untuk membuka kunci tab dan blok lainnya.

Setelah Anda mengunduh plugin, Anda harus menginstal dan mengaktifkannya di situs WordPress Anda. Anda dapat mengikuti petunjuk ini untuk menginstal plugin WordPress jika Anda belum pernah melakukannya sebelumnya.

Setelah mengaktifkan plugin, navigasikan ke SeedProd »Pengaturan dan masukkan kunci lisensi plugin Anda.

Anda dapat menemukan kunci lisensi SeedProd Anda di dasbor akun Anda di bawah bagian Unduhan .

Ingatlah untuk mengklik tombol Verifikasi Kunci sebelum menuju ke langkah berikutnya.

Langkah 2. Buat Tema WordPress atau Halaman Arahan

Ada 2 cara menggunakan SeedProd untuk menambahkan tab ke situs web Anda:

1. Gunakan Pembuat Tema untuk membuat tema WordPress khusus, dan tambahkan tab ke halaman WordPress mana pun.
2. Buat halaman arahan mandiri dengan konten bertab menggunakan pembuat halaman seret dan lepas.

Untuk panduan ini, kami akan menggunakan opsi pertama karena memungkinkan Anda menambahkan tab ke halaman mana pun yang Anda suka, termasuk beranda, bilah sisi WordPress, header, footer, dan di mana pun dalam tema Anda.

Anda dapat mengikuti panduan langkah demi langkah ini untuk membuat tema WordPress dengan SeedProd, lalu kembali ke sini untuk petunjuk tentang menambahkan tab ke situs Anda.

Langkah 3. Tambahkan Tab ke Halaman WordPress Anda

Setelah membangun tema WordPress Anda, Anda harus memutuskan halaman mana yang harus memiliki konten tab. Misalnya, Anda dapat menambahkan tab ke halaman kontak Anda untuk menampilkan berbagai jenis informasi kontak atau di bilah sisi khusus untuk berbagai kategori posting.

Dalam contoh ini, kami akan menambahkan tab ke halaman tentang untuk menampilkan lebih banyak detail, seperti lowongan pekerjaan, pedoman editorial, dan lainnya.

Untuk melakukannya, buka Halaman » Semua Halaman dari admin WordPress Anda dan temukan halaman yang ingin Anda edit.

Karena Anda menggunakan kit situs web SeedProd, halaman konten seperti halaman tentang, kontak, dan layanan, dibuat secara otomatis. Untuk membukanya di editor visual, klik tautan Edit dengan SeedProd .

Setelah halaman Anda terbuka di pembuat halaman, Anda dapat menggunakan opsi penyesuaian SeedProd untuk membuat perubahan. Anda dapat mengklik elemen apa pun untuk mengubah konten, warna, gaya, dan visibilitasnya.

Juga mudah untuk menambahkan lebih banyak elemen ke halaman Anda dengan menyeretnya dari panel blok dan meletakkannya di tempatnya. Jadi mari kita lakukan itu dengan blok tab SeedProd.

Pertama, tambahkan bagian baru ke halaman untuk "menampung" konten tab Anda. Dalam kasus kami, kami akan menduplikasi salah satu bagian yang ada dan menyeretnya ke bagian bawah halaman.

Setelah itu, tukar gambar dengan sesuatu yang lebih relevan dan hapus konten apa pun yang tidak lagi Anda perlukan dengan mengklik ikon tempat sampah.

Sekarang Anda dapat mencari blok Tab di panel sebelah kiri dan menyeretnya ke bagian baru di halaman Anda.

Mengklik blok menunjukkan pengaturan kontennya di mana Anda dapat:

• Tambahkan banyak tab
• Tampilkan atau sembunyikan ikon tab
• Ubah ukuran font
• Tambah atau kurangi ruang antar tab
• Sesuaikan perataan tab

Memperluas setiap tab memungkinkan Anda menambahkan judul tab dan menulis konten Anda menggunakan editor klasik dengan pengaturan 'apa yang Anda lihat adalah apa yang Anda dapatkan' (WYSIWYG).

Anda juga dapat mengaktifkan ikon khusus untuk menambahkan lebih banyak minat pada tab Anda dan membuatnya menonjol. Cukup putar tombol 'Sembunyikan ikon tab' ke posisi 'Nonaktif' dan pilih ikon khusus dari perpustakaan Font Awesome.

Mengklik tab Lanjutan memungkinkan Anda memilih lebih banyak opsi penyesuaian, termasuk warna latar belakang khusus, font, batas, spasi, dan banyak lagi.

Anda juga dapat menampilkan tab vertikal atau kumpulan tab horizontal dengan mengeklik salah satu opsi tata letak.

Ingatlah untuk mengklik tombol Simpan di sudut kanan atas layar untuk menyimpan perubahan Anda.

Ikuti langkah yang sama untuk menambahkan tab ke halaman lain di situs WordPress Anda, lalu lanjutkan ke langkah berikutnya untuk membuat perubahan Anda aktif.

Langkah 4. Publikasikan Konten Tab Anda

Setelah menambahkan tab ke berbagai halaman WordPress Anda, Anda siap untuk mempublikasikannya agar dapat dilihat oleh pengunjung situs web Anda.

Untuk melakukan ini, buka halaman SeedProd »Pembuat Tema dan alihkan tombol 'Aktifkan tema SeedProd' ke posisi 'Aktif'.

Sekarang Anda dapat melihat pratinjau halaman Anda dan melihat konten tab Anda beraksi.

Metode 2: Cara Menambahkan Tab dengan Plugin WordPress

Metode berikut adalah alternatif yang baik jika Anda tidak ingin mengubah tema WordPress atau membuat halaman arahan. Kami akan menggunakan plugin WordPress Responsif Tabs gratis untuk menambahkan tab responsif ke situs WordPress Anda.

Pertama, Anda harus menginstal plugin Tabs Responsive dan mengaktifkannya dari admin WordPress Anda.

Kemudian, navigasikan ke Tab Responsif »Tambah Tab Baru dan beri judul set tab Anda.

Dari sana, Anda dapat memilih template default, atau jika Anda menggunakan versi Pro, Anda dapat memilih dari 18+ gaya template.

Langkah selanjutnya adalah menambahkan tab Anda. Anda dapat membuat tab sebanyak yang Anda suka dan menyertakan:

• Judul tab
• Deskripsi tab
• Ikon tab

Anda juga dapat mengedit gaya setiap tab di bilah sisi kanan dengan memilih gaya tab khusus, warna latar belakang, warna font, dan lainnya.

Saat Anda puas dengan tab Anda, salin kode pendek tab dan tempel di mana saja di tema WordPress Anda.

Misalnya, Anda dapat menempelkan kode pendek ke dalam posting atau halaman WordPress seperti ini:

Beginilah tampilannya di ujung depan situs Anda:

Anda juga dapat menambahkan kode pendek tab ke area siap widget, seperti bilah sisi WordPress atau widget footer, dengan menempelkan kode pendek ke dalam blok paragraf.

Setelah itu, Anda akan melihat konten bertab Anda langsung di area bilah sisi:

Di sana Anda memilikinya!

Dalam tutorial ini, Anda telah belajar cara membuat tab di WordPress tanpa menulis kode. Siap membuat tab yang dapat disesuaikan di situs web Anda?

Anda mungkin juga menyukai panduan WordPress bermanfaat lainnya saat berada di sini:

• Cara Membuat Animasi Teks di WordPress (Langkah Mudah)
• Cara Membuat Pembagi Bagian Mewah untuk Situs WordPress
• Cara Menambahkan Kotak Penulis di WordPress (Tanpa Plugin)

Terima kasih sudah membaca. Ikuti kami di YouTube, Twitter, dan Facebook untuk konten bermanfaat lainnya guna mengembangkan bisnis Anda.