Cara Membuat Situs Web Anda Lebih Menarik Menggunakan Widget Elementor Slider

Diterbitkan: 2021-10-08

Apakah Anda ingin menambahkan slider responsif ke situs web Elementor Anda? Ini pasti akan membuat desain website Anda canggih. Selain itu, desain slider yang terstruktur dengan baik membantu Anda mendapatkan keterlibatan pengguna yang lebih baik.

Di blog ini, kami akan membagikan cara termudah untuk menambahkan slider ke situs web menggunakan Elementor. Kami juga akan membahas beberapa aspek penting mengenai slider Elementor dan penggunaannya.

Mari kita mulai dengan pertanyaan sederhana mengapa penggeser penting untuk situs web Anda.

Bagaimana Slider Akan Membuat Situs Web Anda Terlihat Elegan

Create Engaging Slider Using Elementor Silder Widget

Slider mengacu pada tayangan slide gambar, elemen web penting yang sering Anda lihat di situs web modern. Hal ini dapat digunakan untuk tujuan yang berbeda. Dalam kebanyakan kasus, Anda menemukan penggeser ke bagian atas halaman arahan atau bagian pahlawan situs.

Namun, Anda juga dapat menggunakan penggeser untuk memamerkan produk toko eCommerce Anda untuk mendapatkan perhatian cepat pelanggan. Atau Anda dapat menggunakan slider untuk menampilkan testimonial klien Anda atau membagikan logo merek lain.

Slider membantu Anda-

  • Jadikan situs web Anda lebih menarik secara visual
  • Bangun keterlibatan pengguna
  • Optimal untuk menampilkan testimonial
  • Pamerkan produk toko online
  • Gunakan untuk menampilkan posting blog
  • Dapat berbagi penawaran atau promosi pemasaran lainnya

Cara Menggunakan Widget Elementor Slider di Situs WordPress Anda

Di sini, di bagian blog kami berikutnya, kami akan memandu Anda tentang cara membuat slider ke situs web Anda dengan tiga cara sederhana, menggunakan kekuatan Elementor Slider Widget.

Misalkan Anda sudah menyiapkan situs WordPress Anda. Sekarang, Anda harus memiliki plugin berikut di situs web Anda sebelum kita mulai:

  • Elemen (Gratis)
  • Elemen (Pro)

Pastikan Anda sudah menginstal dan mengaktifkan versi Elementor Free & Premium .

Jika Anda baru mengenal Elementor, periksa panduan ini dan pelajari Cara Menggunakan Elementor (Panduan Langkah Demi Langkah Untuk Pemula).

Langkah 1: Tambahkan Widget Slider

Anda perlu menambahkan widget Elementor Slides ke area situs web yang sesuai untuk membuat slider. Anda dapat menemukan widget dari galeri widget sisi kiri. Cukup ketik nama widget dari bilah pencarian dan drag & drop ke tempat yang tepat.

Add Elementor Slider Widget

Langkah 2: Kelola Konten Slider

Di bagian Konten , Anda akan mendapatkan opsi penting untuk menambahkan konten slide Anda. Anda dapat menambahkan konten Slide Anda dan mengelola Opsi Slider di sini.

Content of Elementor Slides

Tambahkan & Kelola Konten Slide

Anda dapat menambahkan item slide dengan mengklik tombol Add Item . Juga, Anda dapat menghapus item, jika Anda mau. Anda dapat menduplikasi item dan mengatur Ketinggian slider Anda di sini.

Manage Slides Content

Atur Latar Belakang Slide

Mari tambahkan gambar latar belakang ke slide. Buka slide individu terlebih dahulu. Di sini, Anda akan mendapatkan opsi Latar Belakang . Anda dapat menambahkan gambar, mengatur warna latar belakang, dan mengatur Ukuran gambar seperti Cover, Container & Auto.

Anda dapat mengaktifkan Efek Ken Burns yang memungkinkan Anda mengatur efek Zoom ke gambar slide. Di sini, di area ini, Anda juga dapat mengaktifkan Background Overlay dan mengatur warnanya, dan memilih mode Blend Mode yang sesuai.

Catatan: Pastikan gambar slide Anda harus indah dan memiliki ukuran yang sempurna.

Set Slides Background

Tulis Konten Slide

Anda dapat menulis Judul & Deskripsi untuk mendeskripsikan slide dan menambahkan Teks Tombol di sini di area konten slide. Jika Anda ingin menambahkan tautan khusus ke slide Anda, Anda dapat melakukannya di sini. Anda dapat mengatur Tautan Terapkan di seluruh slide atau hanya tombol.

Add Slides Content

Tambahkan Gaya Slide Kustom

Jika Anda ingin menambahkan gaya kustom ke slide individual, Anda cukup masuk ke opsi Gaya . Kemudian aktifkan gaya Kustom . Terakhir, atur gaya sesuai kebutuhan Anda. Anda dapat mengatur Slide Horizontal Position, Vertical Position, Text Align, Content Color, dan Text Shadow .

Add Custom Slides Style

Langkah 3: Sesuaikan Slider Elemen Anda

Ini adalah opsi gaya yang dapat Anda gunakan untuk menyesuaikan slider Elementor. Di sini, Anda akan mendapatkan..

  • Slide
  • Judul
  • Keterangan
  • Tombol
  • Navigasi

Mari kita jelajahi cara kerja pengaturan gaya ini.

Style Options of Elementor Slides

Slide

Di Style–>Slides , Anda dapat mengelola Content Width global, menambahkan Padding , dan mengatur Horizontal Position, Vertical Position, dan Text Align . Anda juga dapat menambahkan Bayangan Teks ke konten slide Anda.

Style Slides

Buka opsi Style–>Title dan rancang judul slide Anda dengan cara Anda sendiri. Anda dapat mengatur Spasi , Warna Teks , dan menambahkan Tipografi baru.

Seperti opsi Judul, Anda juga dapat menata bilah geser Deskripsi .

Style Slider Title

Tombol

Ingin mendesain ulang tombol slide Anda dan membuatnya lebih menarik bagi pengguna Anda. Buka Gaya -> Tombol , Anda akan memiliki semua opsi yang diperlukan untuk menyesuaikan tombol penggeser. Anda dapat mengatur tombol Ukuran, Tipografi, Lebar Batas, dan Radius Batas. Juga dapat menambahkan Warna Teks, Jenis Latar Belakang, Warna, dan Warna Batas untuk desain yang lebih baik.

Style Slider Button

Navigasi

Anda dapat mengatur gaya Navigasi slider Anda di sini di area Style->Navigation . Anda dapat mengubah Posisi Panah di dalam atau di luar slide juga mengatur Ukuran Panah dan tambahkan Warna Panah .

Seperti Panah Navigasi, Anda juga mengubah Titik Navigasi .

Style Slider Navigations

Pratinjau Akhir

Setelah menyelesaikan desain, ini adalah tampilan akhir dari slider Elementor kami:

Elementor Slider Final Preview

Bonus: Memperkenalkan Widget Slider Happy Addons untuk Mendesain Slider Eksklusif

Jika Anda ingin menambahkan lebih banyak fungsionalitas ke slider Anda, Anda dapat mempertimbangkan Addons Elementor lainnya. Di sini, kita berbicara tentang Happy Addons, addon Elementor pihak ke-3 yang super cepat di luar sana.

Addon eksklusif ini hadir dengan widget slider dalam versi gratisnya, yang canggih, mudah digunakan, dan sepenuhnya dapat disesuaikan sehingga pengguna Elementor pemula dapat mendesain slider unik dari awal.

Anda juga bisa mendapatkan lebih banyak fitur seperti…

  • Tambahkan animasi yang indah ke penggeser Anda
  • Gunakan desain slider luar biasa yang dibuat sebelumnya
  • Tawarkan opsi penyesuaian yang lebih baik
  • Dapatkan dokumentasi & tutorial video yang tepat

Anda juga dapat menonton video demonstrasi singkat widget Slider Happy Addons ini.

Biarkan Saya Mencoba Happy Addons

FAQ Umum untuk Elementor Slider

Orang-orang biasanya menanyakan pertanyaan di bawah ini ketika mereka berencana untuk mendesain slider Elementor. Namun, kami telah membahas semua detail tentang membuat bilah geser khusus menggunakan Elementor. Untuk membantu Anda lebih jauh, kami juga akan menjawab pertanyaan-pertanyaan ini.

Bagaimana Menyisipkan Gambar ke dalam Slide Elementor?

Anda harus pergi ke area Content–>Slides . Kemudian buka satu slide tempat Anda ingin menyisipkan gambar. Terakhir, buka Latar Belakang di sini Anda akan mendapatkan opsi Menambahkan gambar . Anda dapat memilih gambar dari bagian media situs web Anda atau mengunggahnya dari perangkat Anda.

Bisakah Saya Membuat Slider Untuk Situs Saya Menggunakan Elementor Versi Gratis?

Tidak, Anda harus memiliki versi Elementor Pro di situs Anda jika Anda ingin bekerja dengan widget slider Elementor.

Bagaimana Saya Lebar Penuh Slider Elementor Saya?

Klik pengendali Bagian tempat Anda menambahkan penggeser. Setelah itu, Anda akan mendapatkan opsi Tata Letak . Terakhir pilih Content Width–> Full Width .

Bagaimana Saya Dapat Meningkatkan Ketinggian Slider di Elementor?

Buka opsi Konten–> Slide . Di sini, Anda dapat dengan mudah mengatur ketinggian penggeser Anda menggunakan opsi Tinggi .

Bagaimana Saya Dapat Menautkan Gambar ke Elementor Slider?

Buka Konten -> Slide dan buka slide yang sesuai tempat Anda ingin menautkan gambar slide Anda. Kemudian klik tab Konten dan tambahkan suka ke dalam area Tautan .

Apakah Anda Siap Mendesain Slider Elemen Pertama Anda?

Di blog ini, kami telah menunjukkan semua cara yang mungkin untuk membuat bilah geser Elementor khusus dari awal. Kami telah menjawab beberapa pertanyaan umum yang selalu ditanyakan orang tentang membuat Elementor Slider.

Kami juga telah memperkenalkan widget penggeser Happy Addons yang memungkinkan Anda menambahkan bilah geser yang menakjubkan ke situs web Anda dan telah membahas mengapa bilah geser itu penting.

Nah, jika Anda memiliki pertanyaan tentang blog atau widget slider Elementor atau Happy Addons ini, Anda dapat bertanya di kotak komentar di bawah.

Jangan lupa untuk berlangganan buletin kami. Gratis!

Berlangganan newsletter kami