Bagaimana Cara Membuat Slide Dinamis dengan Smart Slider 3 di OceanWP?

Menambahkan slider ke situs web Anda bisa menjadi pilihan yang baik karena itu membuat kesan pertama bagi pengunjung Anda. Tetapi setelah Anda memutuskan ingin menambahkan slider ke halaman WordPress Anda, bagaimana Anda tahu mana yang harus Anda pilih? Bisakah Anda menggunakannya dengan bebas? Apakah sederhana untuk mengelola? Bisakah Anda memasukkannya ke situs Anda dengan mudah?

Jawaban untuk semua pertanyaan Anda adalah ya, itu mungkin, Smart Slider 3 dapat melakukan semua ini: sepenuhnya gratis, ramah pengguna, dan juga berfungsi dengan baik dengan Tema OceanWP Anda.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat mengimpor Slider demo, membuat Smart Slider Anda sendiri, dan bagaimana Anda dapat membuat slider Dynamic Post menggunakan Tema OceanWP.

Memasang Smart Slider 3

Anda dapat dengan mudah menginstal Smart Slider 3 saat Anda membuka Plugins → Add new . Cari Smart Slider 3 dan setelah itu Anda dapat menginstalnya.

Pilihan lainnya adalah Anda dapat langsung mengunduhnya dari situs web Smart Slider 3 dan kemudian Anda dapat mengunggahnya.

Setelah itu Anda dapat mengaktifkan Smart Slider 3:

Bagaimana cara Membuat Slide pertama saya?

Mengimpor penggeser demo itu bagus, tetapi saya ingin menunjukkan kepada Anda bagaimana Anda dapat membuat penggeser Anda sendiri. Saya akan menunjukkan kepada Anda bagaimana saya membuat slide pertama dari contoh slider Full Width.

Pertama saya memilih opsi New Slider di dasbor dan setelah itu saya memilih mode lebar penuh di jendela pop-up.

Saya mengatur ukuran slider ke 1200x600px dan kemudian saya membuat slider saya.

Setelah itu saya menambahkan slide kosong, yang memiliki warna latar belakang gradien linier, jadi saya mengaturnya di pengaturan Slide → tab latar belakang .

Untuk membuat slide saya akan menggunakan 2 mode pengeditan yang berbeda. Salah satunya adalah mode Konten yang berfungsi seperti pembuat halaman, dan Anda dapat membuat slide dengan cepat, dan memiliki perilaku responsif yang hebat. Mode pengeditan lainnya adalah mode Kanvas , di mana Anda dapat menyeret lapisan Anda ke mana saja tetapi Anda harus menjaga pemosisian dan responsivitas.

Pada slider asli Anda dapat melihat bahwa konten ada di sebelah kiri: heading, teks dan 2 tombol, dan di sebelah kanan ada gambar laptop dan di gambar ini ada lapisan video YouTube. Gambar dan video ini akan diatur dalam mode kanvas karena dalam mode ini Anda dapat meletakkan lapisan di atas atau di bawah lapisan lain.

Saya menetapkan lebar maksimum ke konten karena saya tidak ingin teks lebar penuh dalam satu baris tanpa jeda, dan saya tidak membutuhkan konten di sisi kanan – video akan ada di sana. Jadi saya akan memposisikannya ke kiri. Dan kemudian saya menjatuhkan Header, layer teks, dan tombol ke dalam konten. Saya mengatur sedikit lebih banyak padding kiri seperti di sisi lain dan di antara lapisan saya memberi sedikit margin.

Setelah itu saya pergi ke tab Design pada pengaturan layer dan mengatur warna font dan font-family juga. Untuk tombol Download saya berikan link download, dan atur efek hover.

Ada banyak pilihan untuk mendesain layer Anda sendiri dan Anda juga dapat membuatnya responsif, misalnya Anda dapat mengatur padding dengan nilai "em", jadi pada perangkat seluler, pengaturan ini juga akan bagus.

Sekarang konten sudah siap.

Saya hanya memiliki 2 langkah untuk menyelesaikan: Saya menempatkan gambar Laptop dan lapisan video YouTube dalam mode Kanvas ke dalam slide. Saya cukup menyeretnya ke sisi kanan dan menyesuaikannya.

Saya pikir kombinasi laptop + video ini tidak begitu penting untuk muncul di perangkat seluler, jadi saya matikan tampilan seluler.

Sekarang saya memeriksanya di tampilan responsif dan saya dapat melihat bahwa Judul dan lapisan teks lebih besar dari yang saya inginkan, jadi saya menetapkan nilai yang lebih rendah untuk ini dengan penskala ukuran font.

Sekarang saya siap dengan slide pertama. Jika saya ingin menggunakan lebih banyak slide untuk slider saya, saya cukup menggandakan slider ini dan mengubah video atau gambar dan mengganti teks, karena strukturnya sudah jadi, jadi saya tidak harus memulainya dari awal. melangkah.

Bagaimana saya bisa membuat slider posting langsung ke beranda saya?

Jika Anda ingin menyorot posting Anda, ada baiknya untuk membuat slider dari posting Anda, yang berisi informasi terpenting: misalnya judul, tanggal posting, dan gambar yang dapat menarik perhatian pengunjung Anda dan menjadikannya membacanya.

Dengan Smart Slider 3 Anda dapat membuat slider ubah dinamis dari sebuah posting, sehingga situs web Anda dapat hidup, karena jika Anda membagikan posting baru, slider akan berubah secara otomatis.

Saya akan menunjukkan contoh bagaimana Anda dapat mengaturnya.

Setelah saya mengimpor template WordPress Post Slider lebar penuh, saya akan menambahkan slide dinamis baru, di mana saya akan memilih opsi Post by filter.

Saya memilih kategori dan saya memesannya berdasarkan tanggal Posting. Saya mengatur 3 slide, sehingga 3 Posting terakhir akan muncul di slider saya di kategori yang dipilih.

Kemudian saya menyimpannya dan saya dapat menyesuaikan slider posting saya.

Secara default hanya Judul dengan gambar unggulan yang muncul. Tapi ini bukan yang saya butuhkan, saya ingin menggunakan contoh template yang telah saya impor. Anda dapat membuatnya dalam 3 langkah:

Langkah 1: Salin slide sampel

Langkah 2 : Tempelkan ke slide dinamis

Langkah 3 : Ubah gambar latar belakang ke gambar unggulan, dan itu akan berubah secara dinamis.

Dan Anda mendapatkan tema dan latar belakang untuk slide dinamis Anda:

Demikian pula, Anda dapat mengatur variabel dinamis untuk lapisan dalam pengaturan lapisan. Jadi Anda dapat memasukkan banyak variabel seperti judul, tanggal, konten, atau Anda juga dapat menautkan ke posting.

Anda dapat mengatur variabel-variabel ini, misalnya saya telah menetapkan bahwa lapisan teks dinamis hanya menampilkan 100 karakter konten saya.

Setelah Anda membuat slider posting dinamis Anda, Anda harus memasukkannya ke dalam tema OceanWP Anda.

Bagaimana saya bisa mengimpor Slider yang siap digunakan?

Setelah Anda mengaktifkan Smart Slider 3, Anda dapat masuk ke menu Smart Slider 3, dan di sana Anda akan melihat dashboard. Anda dapat menambahkan Slider Baru atau Anda dapat memilih template dari Perpustakaan Template di sini. Jika Anda ingin membuat slider dengan cepat, cara termudah adalah mengimpor Slider demo.

Smart Slider 3 memiliki demo slider gratis yang dapat Anda tambahkan dengan mudah ke halaman Anda.

Di perpustakaan Template Anda dapat memilih penggeser yang ingin Anda gunakan, cukup klik tombol Impor, dan tema akan diunduh ke dasbor Anda dan Anda dapat menyesuaikannya.

Menggunakan slide demo

Setelah Anda menambahkan slider baru atau mengimpor satu dari template, Anda dapat menambahkan lebih banyak slide ke slider Anda. Cukup klik tombol Tambah Slide .

Ada banyak opsi untuk membuat gambar, video, atau penggeser kosong dan Anda dapat menambahkan bilah geser Posting dan Dinamis juga, atau Anda dapat memilih Hamparan Statis, yang berarti bahwa itu akan selalu berada di atas penggeser dan slide Anda, dan itu akan ' t beralih. Misalnya itu adalah cara yang baik untuk membuat navigasi.

Anda juga dapat menggunakan slide demo pada penggeser Anda, ada banyak template yang telah disiapkan yang dapat Anda sesuaikan. Klik pada opsi Library dan pilih template yang akan Anda gunakan.

Anda dapat beralih antara Kulit gelap atau terang dan memilih dari kategori juga. Dan setelah Anda dapat menyesuaikan slide Anda, Anda dapat mengubah semuanya, judul, teks, lapisan dan latar belakang juga.

Bagaimana saya bisa memasukkan Slider saya ke Tema OceanWP saya?

Memasukkan Smart Slider 3 di Tema OceanWP Anda sangat sederhana:

Anda dapat menggunakan kode pendek penggeser, dan dengan mudah menyalin dan menempelkannya ke dalam pos atau halaman.

Atau dengan plugin OceanWP Extra di Pengaturan OceanWP, Anda dapat meletakkan slider sebelum/setelah bilah atas, header, judul, atau footer.

Dan ada opsi lain, Anda dapat menyesuaikannya dengan Elementor atau pembuat halaman lainnya dengan menggunakan widget Smart Slider 3.

Bagaimana cara membuat header khusus dengan Smart Slider 3?

Dengan membuat custom header anda bisa menggunakan page builder, yang menurut saya adalah cara yang paling mudah.

Cukup arahkan ke Panel Tema → tab Perpustakaan saya , lalu klik Tambah Baru . (Untuk Panel Tema Anda memerlukan plugin Ocean Extra, jadi Anda harus menambahkan dan mengaktifkan plugin yang direkomendasikan ini.) Jika Anda menggunakan pembuat halaman Elementor, pilih template Elementor Canvas di Post Attributes, dan setelah itu Anda dapat menambahkan slider ke dalam tema Anda.

Saat Anda siap dengan pengaturan, navigasikan ke menu Appearance → Customize → Header → General , dan pilih Custom Header Anda. Dan sekarang Anda memiliki tajuk khusus sendiri.

Tanpa pembuat halaman, Anda juga dapat membuat Template di Panel Tema dengan menggunakan kode pendek.

Penawaran eksklusif

Memasang Smart Slider 3 di situs web WordPress dengan tema OceanWP memberi Anda akses ke serangkaian alat canggih untuk membuat konten khusus untuk situs web Anda. Sekarang Anda bisa mendapatkan diskon 30% saat membeli Smart Slider 3 Pro jika Anda menggunakan kupon SMARTSLIDEROCEANWP30 saat checkout.

Penawaran ini eksklusif dan kode kupon hanya tersedia untuk waktu yang terbatas. Dimulai pada 10 Juli 2018 dan berakhir pada 17 Juli 2018 jadi ambil salinan Smart Slider 3 Pro Anda dengan cepat!

Pikiran Akhir

Slider dapat digunakan dalam beberapa cara, Anda harus memutuskan apa yang ingin Anda dapatkan. Dan ada banyak fungsi, yang tidak saya tulis. Dalam versi Pro, membuat slider lebih menarik karena animasi, layer baru, efek paralaks, efek pembagi bentuk dan banyak generator dinamis seperti Facebook atau Instagram, yang dengannya Anda dapat membuat situs web Anda hidup.