{"id":8818,"date":"2022-02-02T09:52:00","date_gmt":"2022-02-02T02:52:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=8818"},"modified":"2022-01-25T10:29:12","modified_gmt":"2022-01-25T03:29:12","slug":"cara-membuat-slider-di-wordpress-serta-5-plugin-slider-wordpress-terbaik","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/cara-membuat-slider-di-wordpress-serta-5-plugin-slider-wordpress-terbaik\/","title":{"rendered":"Cara Membuat Slider di WordPress serta 5 Plugin Slider WordPress Terbaik"},"content":{"rendered":"\n

Slider merupakan salah satu elemen penting yang ada di hampir semua jenis website. Selain mudah diinstall dan dijalankan, Slider juga memberikan tampilan website yang rapi dan atraktif. Fitur ini juga terdapat di WordPress. Dengan slider WordPress, kalian dapat melakukan banyak hal, termasuk menambahkan efek transisi. Okay, simak yuk Cara Membuat Slider di WordPress serta 5 Plugin Slider WordPress Terbaik<\/strong><\/p>\n\n\n\n

Kapan Anda Harus Memasang Slider WordPress? <\/strong><\/h2>\n\n\n\n

Slider (atau bisa disebut juga carousel) adalah satu dari sekian fitur yang simpel dan mudah digunakan. Satu slider menampilkan kumpulan gambar yang \u2018berjalan\u2019 jika kalian mengklik suatu button <\/em>atau secara otomatis karena menerapkan transisi. <\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Kalian dapat menambahkan efek transisi, memodifikasi teks, bahkan membuat button yang unik di slider. Dengan adanya fitur ini, kalian dapat mengubah tampilan slides yang membosankan dan terlihat seperti itu-itu saja menjadi sesuatu yang menakjubkan bahkan ikut memengaruhi style <\/em>halaman web.<\/p>\n\n\n\n

Lalu kapan waktu yang tepat untuk memasang slider? Jawabannya bergantung pada website dan tujuannya. Sebagian besar website bahkan mencantumkan \u2018hero\u2019 slider di bagian paling atas sebagai pengganti header<\/em>.<\/p>\n\n\n\n

Selain \u2018hero\u2019 slider, kalian juga dapat membuat carousel <\/em>untuk testimoni dan klien yang pernah bekerja sama dengan kalian. Tampilannya seperti pada gambar di bawah ini:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

3 Langkah Mudah Cara Membuat Slider di WordPress <\/strong><\/h2>\n\n\n\n

Meskipun yang digunakan dalam tutorial ini adalah Master Slider, kami tetap akan membahas plugin alternatif untuk membuat slider di WordPress. Untuk saat ini, silakan install Master Slider <\/a>agar dapat mengikuti tutorial yang kami sediakan.<\/p>\n\n\n\n

Pilihan plugin jatuh kepada Master Slider karena menawarkan banyak fitur, opsi membuat slider WordPress sebanyak mungkin yang dibutuhkan, serta mudah digunakan.<\/p>\n\n\n\n

Oia, kalian juga tentunya bisa memilih berbagai paket WordPress Hosting<\/a> terbaik yang disediakan oleh Jetorbit. Selain itu, kami juga menyediakan VPS dan bisa kalian cek di sini<\/a>.<\/p>\n\n\n\n

Langkah 1: Membuat slider WordPress dan Menambahkan Media yang Akan Digunakan <\/strong><\/h3>\n\n\n\n

Setelah menginstall dan mengaktifkan plugin Master Slider, cari tab Master Slider<\/strong> baru di dashboard<\/em>. Di tab ini akan ditemukan daftar semua slider yang aktif di WordPress (jika ini pertama kalinya, maka daftarnya kosong). Klik Create New Slider<\/strong>:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Plugin akan mengonfirmasi tipe slider seperti apa yang akan dibuat. Kalian memiliki 8 pilihan slider, termasuk horizontal slider dengan dan tanpa thumbnails<\/em>:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Pada kesempatan ini kami hanya akan membahas cara membuat slideshow <\/em>di WordPress yang tampilannya sederhana. Okay, selanjutnya silakan pilih tipe horizontal slider, lalu klik CREATE<\/strong>.<\/p>\n\n\n\n

Lalu kalian akan diarahkan ke tab elemen SLIDES<\/strong>. Di tab ini kalian bisa menambahkan gambar ke slider dengan menggunakan WordPress media uploader atau dengan memilih gambar yang sudah ada di library<\/em>:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Setelah berhasil menambahkan foto atau gambar, tampilan tab SLIDES <\/strong>akan berubah menjadi seperti di bawah ini:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Gambar sudah siap digunakan. Jangan tutup tab karena kita akan lanjut ke langkah berikutnya.<\/p>\n\n\n\n

Langkah 2: Mengonfigurasikan Slider WordPress <\/strong><\/h3>\n\n\n\n

Slider WordPress dapat diatur sesuai keinginan kalian, lho. Caranya scroll ke bawah, lalu klik Background<\/strong> lalu pilih tab SLIDES<\/strong>. Kalian dapat mengonfigurasikan background <\/em>untuk masing-masing slide dengan memilih gambar yang tepat beserta warna dan teksnya:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Kita baru saja selesai membuat slider WordPress sederhana dengan menggunakan semua gambar yang telah diupload. Jika scroll ke bawah, kalian akan lihat tampilan masing-masing gambar di slider. Untuk mengecek apakah bentuk dan ukuran slider WordPress fit <\/em>di website, pilih Preview<\/strong>.<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Masuk ke tab SLIDER CONTROLS<\/strong> untuk memilih tipe kontrol yang ingin kalian aktifkan di slider. Arrows <\/strong>adalah tipe kontrol default yang ditawarkan plugin. Tampilannya seperti ini:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Kalian bebas memilih tipe kontrol, tidak harus stuck <\/em>pada opsi default yang ditawarkan. Setelah itu, masuk ke tab SLIDER SETTINGS<\/strong> untuk mengatur berbagai hal terkait slider WordPress, seperti menentukan tinggi dan lebar slider. Di bagian yang sama, kalian bahkan dapat membuat nama untuk slider yang akan muncul di tab Master Slide<\/strong>r:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Scroll ke bawah jika ingin menambahkan efek transisi ke slider. Sayangnya, untuk versi gratis Master Slider, kalian hanya bisa menggunakan dua efek: Normal <\/strong>dan Fade<\/strong>. Untuk saat ini, pilih efek Normal agar transisi slider post WordPress tertata rapi:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Berikutnya atur tampilan slider. Klik Appearance <\/strong>dan kalian akan melihat berbagai pilihan template, termasuk yang default. Jika ingin membuat template sendiri, tambahkan custom CSS ke slider WordPress:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Simpan perubahan yang dilakukan dengan mengklik Save Changes<\/strong>.<\/p>\n\n\n\n

Langkah 3: Menampilkan Slider di Halaman Manapun yang Diinginkan <\/strong><\/h3>\n\n\n\n

Langkah terakhir dari cara membuat slider di WordPress adalah menampilkannya di website. Karena plugin Master Slider menyediakan shortcode untuk setiap slider yang dibuat maka proses penempatan slider semakin dipermudah.<\/p>\n\n\n\n

Untuk menggunakan shortcode, buka tab Master Slider<\/strong> yang ada di dashboard dan cari kolom Shortcode<\/strong>:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Copy <\/em>shortcode dari slider yang ingin ditampilkan di situs lalu buka editor dari halaman atau postingan yang hendak dipasangkan slider. Paste <\/em>shortcode di mana saja untuk memunculkan slider di WordPress. Contohnya seperti ini:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Jika Anda cek di front end (beranda utama website) maka tampilan slider akan seperti ini:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Kalian dapat membuat slider di WordPress sebanyak mungkin dengan menggunakan plugin Master Slider. Untuk menghapus slider yang sudah tidak digunakan lagi, masuk ke tab Master Slider<\/strong>, lalu pilih delete<\/strong>:<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Gimana Guys, mudah kan?<\/p>\n\n\n\n

5 Plugin Slider WordPress Terbaik <\/strong><\/h2>\n\n\n\n

Selain Master Slider, ada beberapa plugin alternatif untuk membuat slider sendiri.<\/p>\n\n\n\n

Master Slider <\/strong><\/h3>\n\n\n\n

Selain memudahkan dalam membuat slider di WordPress, Master Slider<\/a> juga menawarkan slideshow yang sepenuhnya responsif. Plugin ini fitur slideshow-nya juga dilengkapi dengan navigasi sehingga website akan terlihat rapi serta mobile-friendly<\/em> saat diakses melalui smartphone<\/em>. Bahkan, Master Slider akan membuat website kalian menjadi situs yang search engine friendly<\/em>.<\/p>\n\n\n\n

\"cara<\/a><\/figure><\/div>\n\n\n\n

Fitur Unggulan:<\/strong><\/p>\n\n\n\n