Cara Membuat Slider di WordPress dengan Plugin

Slider dapat membantu kamu menampilkan beberapa gambar, promosi, produk, atau portofolio dalam satu area website. Kalau menggunakan WordPress, kamu tidak perlu membuat slider dengan coding karena tersedia plugin yang dapat mengatur seluruh prosesnya. Slider adalah elemen website yang menampilkan beberapa konten secara bergantian dalam satu area. Kontennya dapat berupa gambar, teks, tombol, video, maupun kombinasi beberapa elemen.

Pada panduan ini, kita akan menggunakan Smart Slider 3 karena plugin tersebut masih aktif dikembangkan dan menyediakan visual editor yang dapat digunakan tanpa coding. Jika website WordPress belum tersedia, kamu bisa mengikuti cara membuat website dengan WordPress terlebih dahulu.

Persiapan Sebelum Membuat Slider WordPress

Sebelum menginstal plugin, siapkan gambar yang akan digunakan pada setiap slide. Sebaiknya semua gambar menggunakan rasio yang sama agar tinggi slider tidak berubah ketika berpindah.

Sebagai contoh, kamu dapat menggunakan ukuran 1200 × 600 px untuk slider horizontal. Ukuran tersebut bukan ketentuan wajib karena dimensinya tetap perlu disesuaikan dengan layout website.

Kompres gambar sebelum mengunggahnya dan gunakan format seperti WebP atau AVIF jika memungkinkan. Langkah ini penting karena beberapa gambar berukuran besar dalam satu slider dapat menambah waktu loading halaman.

Pastikan kamu juga sudah memiliki:

• akses Administrator WordPress;
• minimal 2-3 gambar untuk slider;
• judul atau teks setiap slide jika diperlukan;
• URL tujuan apabila slide akan diberi link atau tombol.

Setelah semuanya siap, kamu bisa mulai membuat slider.

Kalau website WordPress kamu mulai membutuhkan resource yang lebih optimal untuk menjalankan tema dan berbagai plugin, kamu dapat mempertimbangkan Hosting WordPress DomaiNesia yang memang disiapkan untuk website berbasis WordPress.

Cara Membuat Slider di WordPress dengan Smart Slider 3

Pada tutorial ini, kita akan membuat image slider sederhana menggunakan Smart Slider 3 versi gratis.

1. Install Smart Slider 3

Masuk ke dashboard WordPress, kemudian pilih menu Plugins > Add New Plugin.

Masukkan Smart Slider 3 pada kolom pencarian. Setelah plugin ditemukan, klik Install Now, lalu klik Activate setelah proses instalasi selesai.

Setelah aktivasi selesai, menu Smart Slider akan muncul pada sidebar dashboard WordPress.

2. Buat Project Slider Baru

Buka menu Smart Slider, kemudian klik New Project.

Smart Slider 3 menyediakan beberapa pilihan untuk memulai project. Untuk membuat slider dari awal, pilih Create a New Project.

Pada bagian Project Type, pilih Slider. Kemudian pilih Simple sebagai Slider Type.

Tipe Simple menampilkan satu slide pada satu waktu sehingga cocok untuk banner, hero slider, promosi, maupun galeri gambar sederhana.

3. Tentukan Ukuran Slider

Selanjutnya, masukkan nama slider agar mudah ditemukan dari dashboard. Misalnya, gunakan nama Homepage Slider jika slider akan diletakkan pada halaman utama.

Atur juga ukuran dasar slider melalui kolom Width dan Height. Kamu dapat menggunakan ukuran 1200 × 600 px sebagai titik awal apabila gambar menggunakan rasio 2:1.

Ukuran tersebut nantinya tetap dapat menyesuaikan layar karena Smart Slider 3 menyediakan layout responsif.

4. Tambahkan Gambar ke Slider

Setelah project dibuat, klik Add Slide.

Pilih Image, kemudian tentukan gambar dari WordPress Media Library. Kamu dapat memilih beberapa gambar sekaligus jika seluruh gambar tersebut akan dijadikan slide.

Smart Slider 3 mendukung penambahan image slide langsung dari menu Add Slide.

Setelah gambar dimasukkan, setiap gambar akan muncul sebagai slide terpisah.

Susun urutannya sesuai kebutuhan. Letakkan informasi paling penting pada slide pertama karena bagian tersebut merupakan konten pertama yang dilihat pengunjung.

5. Edit Isi Setiap Slide

Klik salah satu slide untuk membuka Slide Editor.

Pada halaman ini, kamu dapat mengubah background maupun menambahkan elemen atau layer. Smart Slider menyediakan layer seperti heading, teks, gambar, dan tombol yang dapat ditempatkan di atas slide.

Misalnya, jika slider digunakan untuk promosi produk, kamu dapat menambahkan:

• judul promosi;
• deskripsi singkat;
• tombol Lihat Produk.

Pastikan teks tetap singkat agar slider tidak berubah menjadi section yang terlalu padat.

6. Atur Navigasi Slider

Kembali ke pengaturan slider, kemudian tentukan kontrol navigasi yang ingin digunakan.

Kamu dapat menggunakan arrows agar pengguna dapat berpindah ke slide berikutnya atau sebelumnya. Tambahkan bullets jika ingin menunjukkan jumlah slide yang tersedia.

Tidak semua kontrol harus digunakan sekaligus. Untuk slider sederhana, kombinasi arrows dan bullets biasanya sudah cukup.

Tampilan slider juga perlu disesuaikan dengan desain website. Jika kamu ingin mengubah tampilan website secara menyeluruh, pelajari juga cara mengganti tema WordPress agar tema baru tetap kompatibel dengan plugin dan layout yang digunakan.

7. Atur Autoplay

Jika slide ingin berpindah secara otomatis, aktifkan Autoplay pada pengaturan slider.

Atur jeda yang cukup agar pengunjung sempat membaca konten sebelum slide berpindah. Hindari perpindahan yang terlalu cepat karena teks atau tombol dapat menjadi sulit digunakan.

Autoplay juga tidak selalu wajib. Slider portofolio atau galeri terkadang lebih nyaman apabila perpindahan dilakukan langsung oleh pengguna.

8. Sesuaikan Tampilan Mobile

Slider yang terlihat rapi pada desktop belum tentu memiliki tampilan yang sama pada smartphone.

Gunakan pilihan perangkat pada editor untuk memeriksa tampilan desktop, tablet, dan mobile. Sesuaikan ukuran teks, posisi tombol, maupun elemen lain yang terlihat terlalu besar pada layar kecil.

Smart Slider 3 menyediakan pengaturan responsif dan memungkinkan beberapa elemen disesuaikan berdasarkan perangkat.

Jangan hanya mengecilkan seluruh desain desktop. Pastikan teks tetap mudah dibaca dan tombol masih dapat ditekan dengan nyaman melalui layar sentuh.

9. Preview Slider

Setelah semua slide selesai dibuat, klik Preview.

Periksa seluruh slide satu per satu dan pastikan:

• gambar tidak terpotong secara tidak wajar;
• teks mudah dibaca;
• tombol menuju URL yang benar;
• arrows dan bullets berfungsi;
• autoplay memiliki durasi yang nyaman;
• tampilan mobile tidak berantakan.

Jika masih ada bagian yang kurang sesuai, kembali ke editor dan lakukan penyesuaian sebelum slider ditampilkan ke website.

10. Tambahkan Slider ke Halaman WordPress

Setelah slider selesai, buka halaman atau posting tempat slider akan ditampilkan.

Jika menggunakan Gutenberg, klik tombol + untuk menambahkan block. Cari block Smart Slider 3, kemudian pilih slider yang baru saja dibuat.

Smart Slider 3 memang menyediakan metode publish menggunakan Gutenberg block. Selain itu, slider juga dapat dipasang menggunakan shortcode.

Kalau belum familiar dengan block editor, kamu dapat membaca panduan cara menggunakan editor Gutenberg WordPress.

Klik Preview untuk memeriksa posisi slider pada halaman. Jika sudah sesuai, klik Publish atau Update.

11. Alternatif: Pasang Slider Menggunakan Shortcode

Smart Slider 3 juga menghasilkan shortcode untuk setiap slider.

Buka slider yang ingin digunakan, lalu cari shortcode pada bagian pengaturan atau publishing. Salin shortcode tersebut.

Contohnya akan memiliki struktur seperti berikut:

[smartslider3 slider="ID_SLIDER"]

Jangan menyalin contoh tersebut secara langsung karena setiap slider memiliki ID yang berbeda.

Buka halaman WordPress, tambahkan block Shortcode, kemudian paste shortcode slider yang sudah disalin. Klik Update atau Publish untuk menyimpan perubahan.

Cara ini berguna apabila block Smart Slider tidak tersedia pada editor atau slider perlu ditempatkan pada area yang mendukung shortcode.

12. Cek Slider Setelah Dipublikasikan

Buka halaman website melalui browser setelah slider dipublikasikan.

Periksa tampilannya melalui desktop dan smartphone. Pastikan slider tidak keluar dari area konten, gambar tidak blur, navigasi dapat digunakan, serta tombol menuju halaman yang benar.

Perhatikan juga kecepatan halaman setelah slider ditambahkan. Jika loading menjadi lebih lambat, optimalkan ukuran file gambar dan cek kembali konfigurasi slider.

Kamu juga dapat menerapkan beberapa langkah meningkatkan kecepatan WordPress jika halaman masih terasa berat.

Dengan langkah tersebut, proses pembuatan slider sudah selesai dari instalasi plugin hingga pengecekan hasilnya pada website.

Rekomendasi Plugin Slider WordPress

Smart Slider 3 bukan satu-satunya plugin yang masih dapat digunakan. Berikut beberapa plugin slider WordPress yang lebih relevan untuk dipertimbangkan saat ini.

1. Smart Slider 3

Smart Slider 3 menjadi pilihan yang cocok jika kamu membutuhkan slider dengan visual editor dan banyak opsi desain.

Plugin ini mendukung image slider, layer berupa teks dan tombol, responsive editing, template, WordPress posts, serta integrasi dengan Gutenberg dan sejumlah page builder. Versi gratisnya sudah mencukupi untuk membuat slider sederhana.

Cocok untuk: slider homepage, banner promosi, hero slider, dan pengguna yang membutuhkan visual editor.

2. MetaSlider

MetaSlider cocok untuk pengguna yang menginginkan proses pembuatan image slider yang lebih sederhana.

Gambar dapat dipilih dari WordPress Media Library lalu disusun dengan drag-and-drop. MetaSlider juga mendukung Gutenberg, shortcode, responsive slider, serta pengaturan title dan alt text untuk gambar.

Cocok untuk: image slider, slideshow, gallery, dan pengguna pemula.

3. Depicter

Depicter menawarkan visual builder yang lebih fleksibel untuk membuat slider, carousel, hero section, dan berbagai elemen interaktif lainnya.

Plugin ini menyediakan responsive editor, template, animasi, dynamic content, dan integrasi dengan berbagai page builder. Depicter juga masih aktif dikembangkan dengan pembaruan pada Agustus 2026.

Cocok untuk: landing page, slider dengan desain kompleks, dan pengguna yang membutuhkan kontrol visual lebih luas.

4. Soliloquy

Soliloquy dapat menjadi alternatif jika kebutuhan utama kamu adalah image atau video slider yang relatif sederhana.

Plugin ini menggunakan sistem drag-and-drop dan mendukung responsive slider. Versi Lite masih aktif dikembangkan dan diperbarui pada 2026.

Cocok untuk: galeri foto, portofolio, dan slider sederhana.

Plugin Slider WordPress Mana yang Sebaiknya Dipilih?

Tidak ada satu plugin yang paling tepat untuk seluruh website.

Jika baru pertama kali membuat slider dan membutuhkan fleksibilitas desain, Smart Slider 3 merupakan pilihan yang paling mudah untuk mengikuti tutorial ini. Jika hanya membutuhkan slider gambar sederhana, MetaSlider atau Soliloquy dapat menjadi alternatif.

Sementara itu, Depicter lebih cocok ketika kamu membutuhkan visual builder dengan pengaturan desain dan elemen interaktif yang lebih kompleks.

Apa pun plugin yang digunakan, pilih plugin yang masih mendapatkan pembaruan dan gunakan hanya fitur yang memang dibutuhkan website.

Buat Slider WordPress Sesuai Kebutuhan Website

Cara membuat slider di WordPress tidak membutuhkan coding jika kamu menggunakan plugin yang tepat. Dengan Smart Slider 3, prosesnya dapat dilakukan mulai dari membuat project, menambahkan gambar, mengatur navigasi, menyesuaikan tampilan mobile, hingga memasangnya melalui Gutenberg atau shortcode.

Setelah slider dipublikasikan, jangan lupa memeriksa tampilan dan performa halaman. Gunakan gambar yang sudah dioptimalkan dan hindari memasukkan terlalu banyak elemen agar slider tetap nyaman digunakan.