Cara Membuat Panduan Seluler dengan Modul Slider Divi (Unduh Gratis!)

Slider selalu sangat populer dalam desain web. Salah satu keuntungan terbesar mereka adalah kenyataan bahwa pengunjung dapat menggeseknya di perangkat seluler. Saat ini, menggesek adalah klik baru, jadi tidak perlu dikatakan lagi bahwa menyertakan bilah geser dapat membantu meningkatkan pengalaman pengguna seluler yang dimiliki pengunjung di situs web Anda. Saat membangun situs web dengan Divi, Anda dapat dengan mudah menambahkan Modul Slider ke baris atau bagian mana pun yang sedang Anda kerjakan. Dan dengan sedikit kreativitas dan eksperimen, Anda dapat mencapai desain web yang menakjubkan.

Salah satu hal yang dapat Anda lakukan adalah membuat panduan seluler dengan Modul Slider. Anda dapat menambahkan slide sebanyak yang Anda inginkan dan panduannya akan terlihat sama bagusnya di desktop dan tablet, meskipun awalnya dirancang untuk perangkat seluler. Dalam posting ini, kami akan membuat ulang contoh yang menakjubkan dari awal dan menawarkan bagian untuk diunduh di bagian akhir.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil yang akan kita buat ulang pada ukuran layar yang berbeda.

Statis

GIF

Mari Mulai Berkreasi!

Cara Membuat Panduan Seluler dengan Modul Slider Divi

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Jarak

Mari mulai berkreasi! Tambahkan halaman baru atau buka yang sudah ada dan tambahkan bagian reguler baru ke dalamnya. Buka pengaturan bagian dan tambahkan beberapa nilai padding khusus yang cocok dengan ukuran layar yang berbeda.

• Padding Atas: 4vw (Desktop), 5vw (Tablet), 3vw (Telepon)
• Padding Bawah: 4vw (Desktop), 5vw (Tablet), 3vw (Telepon)
• Padding Kiri: 30vw (Desktop), 18vw (Tablet), 3vw (Telepon)
• Padding Kanan: 30vw (Desktop), 18vw (Tablet), 3vw (Telepon)

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien radial.

• Warna 1: #f9f9f9
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 40%
• Posisi Akhir: 40%

Perekat

Lanjutkan dengan masuk ke pengaturan ukuran baris dan hapus semua ruang di antara kolom.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Kami juga menambahkan beberapa padding bawah ke baris.

• Padding Bawah: 30px

Berbatasan

Selanjutnya, tambahkan '20px' ke masing-masing sudut di pengaturan perbatasan.

Bayangan Kotak

Last but not least, tambahkan bayangan kotak halus ke baris untuk membuat beberapa kedalaman pada halaman.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba (0,0,0,0.07)

Tambahkan Modul Slider

Ubah Warna Latar Belakang

Setelah Anda selesai memodifikasi pengaturan baris, Anda dapat melanjutkan dan menambahkan Modul Slider. Buka pengaturan modul dan ubah warna latar belakang. Semua perubahan yang Anda buat di tab desain akan secara otomatis diterapkan ke semua slide yang Anda tambahkan sesudahnya.

• Warna Latar Belakang: rgba(255,255,255,0)

Pengaturan Teks

Lalu, buka tab desain dan ubah pengaturan teks.

• Orientasi Teks: Tengah
• Warna Bayangan: rgba(0,0,0,0)

Pengaturan Teks Tubuh

Ubah pengaturan teks isi selanjutnya.

• Font Tubuh: Default (Buka Sans)
• Ukuran Teks Tubuh: 0.6vw (Desktop), 1.5vw (Tablet), 2.4vw (Telepon)
• Tinggi Garis Tubuh: 2.2em (Desktop), 2.3em (Tablet), 2.4em (Ponsel)

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 2vw
• Padding Bawah: 2vw

CSS Kustom Tombol

Kita juga perlu menambahkan beberapa nilai padding dan margin khusus ke tombol Modul Slider pada khususnya. Karena elemen ini digabungkan dengan elemen yang berbeda di setiap slide, Anda harus menambahkan padding dan margin secara manual menggunakan kode CSS di tab lanjutan.

padding-left: 80px;
padding-right: 80px;
padding-top: 8px;
padding-bottom: 8px;
margin-bottom: 80px;

Hapus Penggeser Aktif

Setelah Anda selesai memodifikasi semua pengaturan slide umum, Anda dapat melanjutkan dan menghapus slide aktif yang sudah ada di sana. Alih-alih menggunakan yang ini, kita akan membuatnya dari awal di bagian selanjutnya dari posting. Ini akan membantu kami memodifikasi dan menyesuaikan semuanya lebih cepat.

Sesuaikan Slide Pertama

Sesuaikan Konten di Kotak Konten

Tambahkan slide baru ke Modul Slider dan mulai menyesuaikan konten di kotak konten. Pada layar cetak di bawah, Anda akan melihat bahwa kami menambahkan gambar ke kotak konten alih-alih ke pengaturan gambar. Ini akan memungkinkan kita untuk menempatkan gambar di atas konten tertulis. Anda dapat menemukan ilustrasi yang telah kami gunakan dengan membuka posting Paket Tata Letak Illustrator Grafis dan mengunduh gambar di bagian akhir. Kami juga menambahkan dan menata judul H3 di kotak konten alih-alih bidang judul agar muncul persis di tempat yang kami inginkan.

Tautan Tombol

Lanjutkan dengan masuk ke pengaturan tautan dan tambahkan tautan ke tombol yang akan mengarahkan pengunjung ke halaman yang lebih detail tentang slide yang dimaksud.

Latar Belakang Gradien

Kemudian, tambahkan latar belakang gradien menggunakan pengaturan berikut:

• Warna 1: #aaacff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 30%
• Posisi Akhir: 30%

Navigasi

Ubah pengaturan teks berikutnya.

• Warna Kustom Panah: #f4f4f4
• Warna Kustom Dot Nav: #000000

Pengaturan Teks

Dan ubah warna teks di pengaturan teks slide.

• Warna Teks: Gelap

Tombol

Terakhir, modifikasi tombol agar terlihat persis seperti yang Anda inginkan.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #aaacff
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 10px

Kloning Slide Sesering yang Dibutuhkan

Setelah Anda selesai membuat dan menyesuaikan slide pertama, Anda dapat melanjutkan dan mengkloning slide tersebut sebanyak yang Anda inginkan. Anda harus membuat beberapa modifikasi manual untuk setiap duplikat.

Ubah Konten di Kotak Konten

Hal pertama yang perlu Anda ubah adalah konten di kotak konten. Ini termasuk gambar/ilustrasi yang digunakan. Anda dapat menemukan kedua ilustrasi yang digunakan dalam tutorial ini dengan membuka posting Paket Tata Letak Illustrator Grafis dan mengunduh gambar di bagian akhir.

Ubah Tautan

Ubah juga tautan tombol.

Ubah Latar Belakang Gradien

Anda juga dapat menyesuaikan palet warna dari setiap slide duplikat dengan mengubah warna gradien pertama.

• Warna 1: #ffccaa

Ubah Warna Latar Belakang Tombol

Gunakan warna yang sama untuk mengubah warna latar belakang tombol. Ulangi langkah-langkah ini untuk setiap duplikat yang Anda buat dan selesai!

• Warna Latar Tombol: #ffccaa

Unduh Bagian Panduan Seluler GRATIS

Untuk mendapatkan bagian panduan seluler gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil yang akan kita buat ulang pada ukuran layar yang berbeda.

Statis

GIF

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggunakan Modul Slider Divi untuk membuat panduan seluler yang cantik. Meskipun awalnya dirancang untuk ukuran layar seluler, tampilannya sama bagusnya di tablet dan desktop. Anda dapat menggunakan pendekatan ini untuk membuat semua jenis bagian slide di situs web Anda dan berinteraksi secara mulus dengan pengunjung Anda. Kami harap tutorial ini menginspirasi Anda untuk berkreasi dengan Modul Slider Divi. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!