RisangPernah menemukan website yang menampilkan beberapa tabs dalam satu halaman tanpa terlihat penuh dan berantakan? Anda bisa menerapkan tampilan tersebut menggunakan fitur Tabs di SitePro. Dengan fitur ini, berbagai informasi seperti spesifikasi produk, detail layanan, atau informasi lainnya dapat dikelompokkan ke dalam beberapa tab yang bisa dibuka pengunjung dengan sekali klik.
Selain membuat halaman lebih rapi, penggunaan Tabs juga membantu pengunjung menemukan informasi yang mereka butuhkan tanpa harus berpindah ke halaman lain. Lalu, bagaimana cara menggunakan fitur Tabs di SitePro Website Builder? Simak pembahasannya dalam artikel berikut.
Apa itu Fitur Tabs?
Tabs adalah sebuah elemen di dalam website yang berfungsi untuk membagi suatu informasi konten dalam beberapa sekat atau tab terpisah di area website yang sama. Fitur ini mirip seperti tab pada aplikasi browser yang biasa Anda gunakan.
Dengan fitur Tabs di Sitepro, Anda dapat menyusun beberapa kelompok informasi secara berdampingan, rapi, dan menghemat tempat. Pengunjung website cukup melakukan klik sesuai judul tab yang disediakan untuk melihat detail informasi yang relevan, sementara itu tab judul yang lainnya akan otomatis tersembunyi.
Fitur Tabs hanya tersedia pada layanan SitePro berbayar mulai paket Basic, Pro, dan Business. Jika Anda menggunakan Free version, silakan melakukan upgrade paket SitePro terlebih dahulu.
Berikut contoh dari fitur tabs pada sebuah halaman website.
Bagaimana Cara Kerja Fitur Tabs di SitePro?
Cara kerja Fitur Tabs di SitePro cukup intuitif dan dapat membantu menghemat ruang pada halaman website. Informasi yang berbeda dapat dikelompokkan ke dalam beberapa tab, sehingga pengunjung dapat memilih informasi yang ingin dibaca tanpa harus berpindah halaman.
Secara umum, cara kerja Tabs dapat dipahami melalui tiga bagian berikut:
- Navigasi berjajar: Terdapat informasi judul pada bagian atas atau samping kotak (misalnya: Spesfikasi, Ulasan, Cara penggunaan, dll)
- Satu tampilan aktif: Ketika halaman website diakses, tab akan otomatis terbuka dan menampilkan informasi konten. Umumnya tab yang terbuka adalah tab urutan pertama.
- Peralihan ketika di klik: Ketika pengunjung melakukan klik pada judul tab kedua, isi koten dari tab pertama akan tertutup dan secara otomatis menampilkan informasi baru pada tab kedua tanpa perlu melakukan reload halaman website.
Manfaat Menggunakan Fitur Tabs
Berikut beberapa manfaat dari penggunaan fitur tabs pada website.
- Pengelompokkan informasi: Pemilik website dapat memisahkan informasi yang padat menjadi beberapa kategori-kategori kecil agar pengunjung tidak kebingungan ketika membaca
- Navigasi yang cepat: Memudahkan pengunjung dalam melihat berbagai informasi secara cepat dengan sekali klik tanpa perlu melakukan scrolling halaman
- Tampilan Clean dan Profesional: Menampilkan informasi secara detail dan ringkas dalam satu area dapat membuat website menjadi lebih bersih, rapi, modern, dan tentunya profesional
Cara Menggunakan Fitur Tabs
Pada panduan ini, kami menggunakan SitePro Website Builder paket Basic dari Rumahweb. Pastikan Anda menggunakan lisensi berbayar SitePro, karena Fitur Tabs tidak tersedia pada lisensi Free.
Anda dapat mengikuti langkah berikut untuk menambahkan Tabs ke halaman website dan mengatur konten di dalamnya sesuai kebutuhan.
- Login terlebih dahulu ke halaman SitePro builder.
Untuk referensi login SitePro dapat Anda baca dengan klik di sini - Setelah login, pilih terlebih dahulu area di website yang ingin ditambahkan fitur tabs.
- Lalu klik tanda + dan pilih fitur advanced.
- Kemudian pilih Tabs
- Layout tabs akan terpasang di area website yang sudah Anda pilih. Anda dapat melanjutkan proses edit teks, mengatur ukuran, dan lain sebagainya
Mengubah Judul Tabs
- Jika ingin mengubah judul tabs, pastikan terlebih dahulu masuk ke bagian “Page Structure” kemudian pilih Tabs hingga nantinya muncul opsi edit items seperti gambar berikut
- Kemudian Anda dapat mengubah judul sesuai kebutuhan. Anda juga dapat memberikan icon pada judul sesuai kebutuhan. Jika sudah selesai, klik apply untuk menerapkan perubahan.
- Berikut kami lampirkan juga video terkait mengubah judul tabs
Menambah Judul Tabs
- Untuk menambah judul. Pastikan terlebih dahulu masuk ke bagian “Page Structure” kemudian pilih Tabs hingga nantinya muncul opsi new items seperti gambar berikut
- Secara otomatis judul baru akan muncul di fitur tabs. Anda dapat melakukan edit items untuk mengubah nama tabs baru sesuai nama yang Anda butuhkan
- Opsi alternatif, Anda dapat masuk ke edit items langsung untuk menambah judul tabs baru sekaligus memberikan nama tabs
- Berikut kami lampirkan juga video terkait menambah judul tabs
Mengedit Konten pada Tabs
- Jika bagian judul sudah diberikan nama sesuai kebutuhan. Anda dapat melakukan penyesuaian di bagian isian tabs sesuai judul. Cara mengubah cukup dengan klik pada text area di bagian tabs, maka nantinya akan muncul opsi edit items untuk memulai mengedit isiannya
- Berikut kami lampirkan juga video terkait edit isiain tabs
Menambah Media di Area Tabs
- Jika ada media yang ingin Anda tambahkan. Anda perlu masuk ke page structure terlebih dahulu > lalu pilih judul tabs yang ingin dituju. Pastikan text area tabs berwarna biru seperti gambar.
- Kemudian klik tanda + di pojok kiri dan pilih fitur media. Anda dapat memilih media yang ingin dipakai sesuai kebutuhan (tidak harus sama seperti artikel). Pada artikel kami memilih media image.
- Kemudian memilih layout image yang ingin dipakai
- Kemudian memilih gambar yang akan digunakan. Anda dapat upload file gambar juga dari komputer atau perangkat yang Anda pakai dengan klik bagian “upload new pictures”. Lalu klik apply untuk menyimpan perubahan.
- Media akan terlampir di dalam fitur tabs.
- Berikut kami lampirkan juga video terkait menambah media di isiain tabs
Konten Apa Saja yang Cocok Menggunakan Tabs?
Berikut beberapa informasi konten yang cocok dilampirkan pada fitur tabs yang bisa menjadi referensi Anda
- Detail produk : Jika memiliki produk banyak, dapat dikelompokkan menjadi beberapa sesuai kategori. Misalnya : Tab 1 Perawatan Wajah, Tab 2 Perawatan Kulit, dan Tab 3 Perawatan Rambut.
- Informasi penggunaan : Jika memiliki beberapa cara pakai atau penggunaan dalam 1 produk, dapat dikelompokkan berdasarkan kategori. Misalnya : Tab 1 Penggunaan pagi hari, Tab 2 penggunaan siang hari, dan Tab 3 penggunaan malam hari.
- Informasi multi-cabang : Menampilkan titik-titik lokasi alamat dan jam operasional jika memiliki banyak cabang toko di tempat berbeda. Misalnya : Tab Surabaya, Tab Semarang, dan Tab Yogyakarta
- Portofolio kerja : Mengelompokkan hasil karya berdasarkan jenis projek. Misalnya Tab Fotografi, Tab Desain grafis, dan Tab web desain
Tips Menyusun Konten Tabs Agar Tampil Maksimal
- Gunakan judul tab singkat : Buat nama judul tab sesingkat mungkin (1-2 kata) agar tampilan tetap rapi dan tidak terpotong, terutama ketika website diakses melalui layar mobile.
- Urutkan sesuai prioritas : Letakkan informasi yang paling penting dan sering dicari pengunjung untuk diletakkan di posisi pertama. Karena ketika website dibuka, tabs urutan pertama yang sering langsung terlihat
- Jaga keseimbangan panjang konten : Usahakan setiap detail informasi yang ditampilkan pada setiap tabs memiliki panjang kalimat yang tidak jauh berbeda. Hal ini agar tinggi kotak tidak terlalu naik-turun secara drastis ketika diakses pengunjung.
Penutup
Fitur Tabs di SitePro dapat menjadi solusi untuk menampilkan banyak informasi penting dengan membagi berdasarkan kategori-kategori secara lebih menarik tanpa membuat halaman website terlihat penuh.
Sebelum melakukan perubahan pada desain website, sebaiknya buat backup terlebih dahulu. Dengan demikian, Anda dapat mengembalikan tampilan website ke kondisi sebelumnya apabila hasil pengeditan tidak sesuai harapan atau terjadi kesalahan saat proses editing.
Dengan memanfaatkan fitur tabs secara tepat, Anda dapat membuat tampilan website yang lebih profesional, informatif, dan nyaman dinikmati oleh pengunjung. Semoga panduan ini membantu Anda dalam mengoptimalkan website menggunakan SitePro Website Builder.
