Cara membuat tab gulir vertikal di WordPress dengan Elementor

Tab gulir vertikal memungkinkan Anda untuk menampilkan konten tab dalam tata letak yang tinggi dan berdampingan. Tab tetap ditumpuk di sisi kiri atau kanan, sedangkan konten untuk setiap tab muncul di sisi yang berlawanan. Pengunjung dapat menggulir tab ke bawah untuk menjelajahi konten di dalamnya.

Ini menjaga halaman tetap bersih, dan orang -orang dapat melihat banyak informasi tanpa meninggalkan halaman saat ini. Anda tidak hanya dapat menampilkan teks, tetapi Anda juga dapat menampilkan gambar, video, dan templat di tab gulir vertikal. Pengguna dapat mengklik atau mengetuk tab untuk melihat konten yang ditautkan ke sana, sementara bagian lain tetap tersembunyi.

Elementor adalah pembangun situs web no-kode yang populer. Dengan plugin ini, Anda dapat membangun seluruh situs web dari awal menggunakan fungsi seret-dan-tetes. Dalam posting tutorial ini, kami akan menunjukkan kepada Anda cara membuat tab gulir vertikal di WordPress dengan Elementor.

Gunakan kasing tab gulir vertikal

Tab gulir vertikal membantu Anda mengatur sejumlah besar konten di ruang kecil. Mereka membiarkan pengunjung bergerak melalui topik tanpa memuat halaman baru. Tata letak ini mudah digunakan di desktop dan seluler. Mari kita lihat beberapa kasus penggunaan tab gulir vertikal di bawah ini.

A. Detail Produk atau Layanan

Anda dapat menampilkan banyak deskripsi produk atau layanan berdampingan. Setiap tab dapat memiliki spesifikasi, harga, fitur, atau ulasan. Pengunjung dapat dengan cepat membandingkan berbagai opsi tanpa meninggalkan halaman.

B. Pertanyaan yang Sering Diajukan (FAQ)

Tab vertikal sangat cocok untuk FAQ. Anda dapat mengelompokkan pertanyaan serupa di bawah satu tab dan jawaban di bawah yang lain. Pembaca dapat menggulir dan mengklik hanya pertanyaan yang menarik minat mereka.

C. Panduan atau tutorial langkah demi langkah

Jika Anda ingin berbagi proses dengan banyak langkah, tab vertikal menjaga setiap langkah tetap jelas. Pengguna dapat mengklik setiap tab untuk mengikuti panduan ini secara berurutan. Ini membuat belajar mudah dan menjaga halaman tetap rapi.

D. Anggota tim atau profil staf

Perkenalkan tim Anda dengan cara profesional dengan memberi setiap anggota tab. Setiap tab dapat menampilkan foto, peran, dan bio pendek. Pengunjung dapat menelusuri daftar dan belajar tentang semua orang tanpa kekacauan. Jelajahi beberapa contoh halaman tim terbaik.

e. Portofolio atau proyek proyek

Tampilkan pekerjaan atau proyek Anda di tab vertikal untuk menghemat ruang. Setiap tab dapat menampilkan gambar, deskripsi, dan tautan ke detail. Ini membantu pengunjung menjelajahi banyak proyek dari satu halaman.

Cara Membuat Tab Gulir Vertikal di Elementor

Bagian teoretis sudah berakhir. Semoga Anda sekarang memiliki gagasan yang jelas tentang apa tab Gulir Vertikal dan apa kasus penggunaannya. Kami akan membahas bagian tutorial sekarang. Kami akan menjelaskan cara membuat tab gulir vertikal dengan Elementor di WordPress di bagian ini. Teruslah membaca!

Prasyarat untuk memulai tutorial

Untuk membuat tab gulir vertikal di WordPress dengan Elementor, Anda perlu plugin berikut diinstal dan diaktifkan di situs Anda.

• Elementor gratis
• Happyaddons gratis
• HappyAddons Pro

Catatan: Anda memerlukan HappyAddons Pro karena Elementor tidak memiliki opsi bawaan untuk membuat tab gulir. HappyAddons Pro menawarkan widget yang disebut tab gulir yang memungkinkan Anda membuat tab gulir vertikal dengan mudah.

Setelah plugin ini siap di situs Anda, ikuti tutorial yang dijelaskan di bawah ini.

Langkah 01: Buka halaman dengan Elementor

Cukup buka halaman dengan Elementor tempat Anda ingin membuat tab gulir vertikal.

Langkah 02: Seret dan jatuhkan widget tab gulir di kanvas

Temukan widget tab gulir pada panel Elementor. Seret dan jatuhkan di kanvas Elementor.

Widget Tab Gulir dilengkapi dengan beberapa konten default. Setelah widget ditambahkan ke kanvas, Anda akan melihat konten default ini.

Langkah 03: Mulai tambahkan konten ke tab

Anda dapat menambahkan konten ke widget tab gulir dan menggeser tata letak dalam banyak hal. Jelajahi mereka di langkah ini.

# Tambahkan judul ke widget tab gulir

Setiap bagian web harus memiliki judul yang dengan jelas memberi tahu jenis konten apa yang dikandungnya. Jadi, Anda harus menulis judul untuk bagian Widget Tab Gulir.

Buka konten> Konten Tab> Judul . Anda akan mendapatkan ruang untuk menulis judul. Anda dapat melihat bahwa kami telah menulis judul, 'Stylish Watch Insights.'

# Tulis deskripsi untuk widget

Tulis di bawah judulnya, Anda dapat menulis deskripsi untuk widget. Jika deskripsi tidak diperlukan, Anda bisa menghapusnya.

# Tambahkan konten ke tab

Bawa kursor Anda ke tab dan klik di atasnya. Ini akan memperluas tab dan memungkinkan Anda untuk menambahkan konten.

# Tulis judul untuk tab

Anda harus menulis judul untuk setiap tab . Setelah tab diperluas, Anda akan mendapatkan kotak di bawah teks NAV. Di sini, Anda dapat menulis judul untuk tab.

# Ubah ikon tab

Anda dapat menghapus ikon jika tidak diperlukan. Tetapi untuk mengubah ikon, klik ikon yang dapat Anda lihat di bawah ikon NAV.

Perpustakaan Ikon akan dibuka secara instan. Pilih ikon yang Anda suka dan tekan tombol masukkan .

Anda dapat melihat bahwa ikon telah diubah.

# Tambahkan konten ke tab via editor

Setiap tab memungkinkan Anda untuk menambahkan dua jenis konten. Anda dapat memilih apakah akan menggunakan editor atau templat .

Mari kita pilih opsi editor terlebih dahulu.

Dengan menggunakan editor ini, Anda dapat menambahkan semua jenis teks dan gambar, yang akan langsung ditampilkan di kanvas tab masing -masing.

# Ubah warna latar belakang konten tab

Untuk lebih menyorot konten di tab, Anda dapat mengubah warna latar belakangnya, sehingga selaras dengan semua konten yang telah Anda tambahkan ke tab.

# Tambahkan konten ke tab melalui template

Seperti yang dikatakan di atas, widget memungkinkan Anda menambahkan konten ke tab melalui editor dan template. Sekarang mari kita lihat cara menambahkan konten menggunakan templat.

Pilih opsi template dari jenis konten . Jika Anda sudah memiliki template yang dirancang sebelumnya yang disimpan di situs Anda, opsi ini akan cocok.

Klik ikon dropdown di sebelah untuk memilih template . Kemudian, pilih templat yang ingin Anda tampilkan pada tab.

Anda dapat melihat bahwa template yang kami inginkan sudah ditambahkan ke tab.

Dengan cara yang sama, tambahkan konten ke semua tab widget tab gulir.

Langkah 04: Mengkonfigurasi Pengaturan Widget Tab Gulir

Setelah bagian konten selesai, perluas bagian Pengaturan .

Anda akan dapat mengubah lebar panel navigator dan ketinggian panel konten, termasuk berbagai penyesuaian penyelarasan, dari bagian ini.

# Sesuaikan lebar panel NAV

Widget Tab Gulir memiliki dua bagian - Panel Navigator (panel NAV) dan panel konten .

Anda dapat mengubah lebar panel Navigator dengan menyeret skala di bawah opsi ini. Anda juga dapat menyesuaikan posisinya dan penyelarasannya. Proses ini ditampilkan dalam klip video yang terpasang di bawah ini.

# Sesuaikan Tinggi Panel Kontrol

Dengan cara yang sama, sesuaikan ketinggian panel kontrol. Juga, konfirmasi bahwa konten secara vertikal disejajarkan dengan benar.

Langkah 05: Gaya widget tab gulir

Datanglah ke tab Gaya . Pertama mari atur warna latar belakang untuk panel Navigator .

# Kustomisasi tipografi konten panel nav

Perbarui tipografi, satu per satu, untuk setiap konten yang telah Anda tambahkan ke panel Navigator. Anda dapat mengubah keluarga font, ukuran, berat badan, tinggi garis, dll., Sesuai kebutuhan.

# Stylize tab

Dengan menambahkan tipe perbatasan, lebar perbatasan, bantalan, warna perbatasan, jari -jari perbatasan, warna teks, dan warna latar belakang, Anda dapat menggerakkan tab dan menyajikannya seperti gambar berikut. Semoga Anda bisa melakukan ini sendiri.

Dengan cara yang sama, perluas dan stylize konten yang terkait dengan panel konten dan bagian gulir.

Langkah 06: Optimalkan widget tab gulir untuk ponsel

Untuk mengoptimalkan widget untuk ukuran layar ponsel, buka mode potret seluler di bilah atas.

Anda akan melihat bahwa tab Navigator muncul di atas secara default.

# Sesuaikan tinggi panel konten untuk perangkat seluler

Tinggi yang ada mungkin tidak cukup untuk panel konten. Dalam hal ini, Anda harus meningkatkan ketinggian sehingga semua konten di dalam tab dapat dilihat dengan sempurna pada ukuran layar ponsel.

Langkah 07: Optimalkan widget tab gulir untuk tablet

Demikian pula, beralih ke mode potret tablet untuk mengoptimalkan konten untuk tampilan optimal pada ukuran layar tablet.

Anda dapat melihat di klip video yang terpasang di bawah ini bahwa widget sudah terlihat bagus di layar tablet. Jadi, kita tidak perlu memodifikasinya.

Langkah 08: Pratinjau widget tab gulir

Datanglah ke halaman pratinjau dan periksa apakah widget berfungsi dengan baik atau tidak. Anda dapat melihat bahwa widget bekerja dengan baik di pihak kami.

Dengan demikian, Anda dapat membuat tab gulir vertikal di WordPress dengan Elementor.

Takawi terakhir!

Tab gulir vertikal adalah cara cerdas untuk menjaga halaman web tetap rapi saat berbagi banyak informasi. Mereka membiarkan pengunjung menemukan apa yang mereka butuhkan tanpa melompat ke halaman baru. Setelah mengikuti langkah -langkah di atas, Anda dapat dengan mudah merancang tab ini dengan Elementor dan HappyAddons Pro.

Ini memberi situs Anda tampilan modern dan meningkatkan cara pengguna menjelajahi konten Anda. Namun, saat membuat bagian ini, ingatlah beberapa praktik terbaik. Gunakan judul yang jelas untuk setiap tab sehingga pengguna tahu apa yang diharapkan. Pastikan teks, gambar, dan video ringan sehingga halaman memuat dengan cepat.

Periksa desain pada ukuran layar yang berbeda dan sesuaikan jarak untuk pengguna seluler. Jaga agar warna dan font konsisten dengan gaya situs Anda sehingga tab -tabnya menyatu secara alami dengan sisa desain. Detail kecil ini membantu menciptakan pengalaman profesional yang lancar untuk setiap pengunjung.

Pelajari cara merancang kotak flip di WordPress dengan Elementor.