Cara Menambahkan Elemen Slider Vertikal ke Modul Slider Divi untuk Desain Header yang Unik

Modul slider Divi dikemas dengan opsi desain yang memudahkan untuk berpikir di luar kebiasaan dan membuat desain slider yang menakjubkan. Jadi hari ini, kita akan membalikkan beberapa hal (secara harfiah). Dalam posting berikutnya, kita akan menambahkan elemen slider vertikal ke modul slider Divi. Memiliki penggeser dengan elemen vertikal (seperti teks judul dan kontrol slide) memungkinkan pengunjung melihat lebih banyak konten slide dan gambar latar dalam kolom yang lebih sempit (terutama di seluler). Dan elemen vertikal menambahkan sentuhan menyegarkan pada desain keseluruhan.

Untuk melakukan ini, kami akan menggunakan opsi putar transformasi Divi untuk memutar seluruh penggeser dan kemudian memutar balik elemen lain dalam setiap slide sesuai kebutuhan untuk membuat desain penggeser vertikal modern. Kita akan mulai dengan membahas teknik dasar. Kemudian kita akan membuat desain header yang benar-benar unik dengan slider vertikal ini.

Mari selami!

Sneak Peek

Unduh Tata Letak Elemen Slider Vertikal Divi secara GRATIS

Untuk mendapatkan desain dari tutorial ini, 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!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

https://youtu.be/Nmuy9VAYo4M

Berlangganan Saluran Youtube Kami

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus memiliki yang berikut:

1. Tema Divi diinstal dan aktif
2. Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
3. Dua gambar yang telah diputar 90 derajat berlawanan arah jarum jam. Ini dapat dengan mudah dilakukan menggunakan opsi bawaan OS Anda atau melalui aplikasi pengeditan foto sederhana. Anda juga dapat memutar gambar secara langsung di WordPress dengan mengedit elemen media.
   

Setelah itu, Anda siap membuat karya agung Anda di Divi.

Ide Dasar

Ide dasar di balik penambahan elemen penggeser vertikal adalah menggunakan opsi transformasi Divi untuk memutar modul penggeser 90 derajat (searah jarum jam atau berlawanan arah jarum jam) sehingga ditampilkan secara vertikal di halaman. Untuk gambar latar slider (atau slide), Anda harus memutar gambar terlebih dahulu (atau menggunakan editor Gambar WordPress) sehingga gambar akan ditampilkan tegak setiap kali Anda memutar slider. Ini akan menampilkan kontrol penggeser, panah, dan teks secara vertikal seperti yang Anda harapkan. Bagian yang sulit hadir dengan menyesuaikan tinggi dan lebar penggeser karena semuanya benar-benar berbalik. Desain penggeser ini berfungsi paling baik dalam tata letak dengan dua kolom atau lebih.

Berikut adalah contoh cepat bagaimana melakukan ini.

Di bagian reguler dengan dua baris kolom, tambahkan modul slider ke kolom kiri.

Kemudian tambahkan beberapa slide masing-masing dengan Judul, kalimat isi isi, dan gambar latar belakang yang sebelumnya telah diputar berlawanan arah jarum jam 90 derajat.

Kemudian putar modul penggeser sebesar 90 derajat di sepanjang sumbu z menggunakan opsi transformasi Divi.

Kemudian tambahkan spasi (padding bawah) ke penggeser untuk membuat lebar tambahan dan sejajarkan teks di sebelah kanan setiap slide.

Inilah hasilnya.

Seperti yang Anda lihat, konsepnya sederhana, tetapi elemen penggeser vertikal ini sangat berguna untuk membuat desain yang unik.

Di bawah ini, kita akan mencoba membuat salah satu desain slider unik ini bersama-sama.

Menambahkan Elemen Slider Vertikal ke Modul Slider Divi untuk Desain Header yang Unik

Membuat Bagian dan Baris

Latar Belakang Bagian

Mulailah dengan membuat bagian reguler dengan dua baris kolom.

Sebelum menambahkan modul ke baris, perbarui dulu bagian dengan warna latar belakang berikut:

Warna Latar Belakang: #24272a

Pengaturan Baris

Kemudian kita perlu memberi baris kita lebar selokan khusus 1 dan kemudian mengatur lebarnya menggunakan satuan panjang vw. Menggunakan unit panjang vw penting untuk membuat slider vertikal kita responsif nanti.

Buka pengaturan baris dan perbarui yang berikut:

Lebar selokan: 1
Lebar: 80vw (desktop dan tablet), 95vw (ponsel)
Lebar Maks: 80vw (desktop dan tablet), 95vw (ponsel)

Kemudian kita akan menambahkan bayangan kotak untuk tujuan desain.

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: -10px
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan: rgba (255,255,255,0.03)

Tambahkan Konten Judul Menggunakan Modul Teks

Kami akhirnya akan menambahkan slider di kolom 2, tapi untuk sekarang mari kita tambahkan judul header dengan beberapa teks tambahan di kolom 1. Untuk melakukan ini kita akan menambahkan dua modul teks di kolom 1.

Tambahkan Modul Teks untuk Judul

Untuk menambahkan judul header kita, tambahkan modul teks ke kolom 1.

Perbarui konten isi dengan judul h2 berikut:

<h2>My Work</h2>

Kemudian perbarui yang berikut ini:

Judul 2 Font: Karla
Judul 2 Warna Teks: #ffffff
Judul 2 Ukuran Teks: 5vw (desktop), 60px (tablet), 50px (ponsel)
Padding: 15% atas, 20% bawah, 5% kiri, 5% kanan

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 60px
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan: #9a2508

Tambahkan Modul Teks untuk Isi Tubuh

Selanjutnya, tambahkan modul teks baru di bawah modul teks pertama di kolom 1. Kita dapat meninggalkan konten default untuk saat ini.

Kemudian perbarui yang berikut ini:

Warna Teks Teks: #cccccc
Lebar: 70%
Penyelarasan Modul: kanan
Margin: -5% atas
Padding: 5% bawah, 10% kiri, 5% kanan

Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 10px
Warna Bayangan: rgba (255,255,255,0.03)

Membuat Slider Vertikal

Sekarang kita siap untuk membuat slider dengan elemen slider vertikal.

Untuk melakukan ini, tambahkan Modul Slider di kolom 2.

Buka pengaturan slide yang pertama dari dua slide default.

Kurangi teks isi default untuk menyertakan satu baris teks. Kemudian tambahkan gambar latar belakang yang sebelumnya telah diputar berlawanan arah jarum jam 90 derajat.

Kemudian lakukan hal yang sama untuk slide default kedua dengan memberikan gambar latar belakang yang berbeda.

Putar Penggeser

Selanjutnya, putar penggeser menggunakan opsi putar transformasi:

Transform Putar sumbu z: 90deg

Tinggi Penggeser

Kita tidak perlu khawatir tentang lebar slider karena secara otomatis akan merentang 100% dari kolom. Kolomnya adalah 50% dari 80vw (lebar baris) jadi pada dasarnya lebarnya akan menjadi 40vw secara default. Sekarang kita perlu memberikan slider ketinggian 40vw yang cocok di desktop dan kemudian menyesuaikan ketinggian menjadi 80vw di tablet dan 95vw di ponsel.

Perbarui berikut ini:

Tinggi: 40vw (desktop), 80vw (tablet), 95vw (ponsel)

Kemudian sesuaikan padding untuk menyelaraskan teks di sebelah kanan penggeser vertikal.

Padding (desktop): 0px atas, 21vw bawah, 0px kiri, 0px kanan
Padding (tablet): 42vw bawah
Padding (telepon): 50vw bawah

Perbarui Pengaturan Teks

Sesuaikan judul dan isi teks sebagai berikut:

Perataan Teks: kiri
Judul Font: Karla
Ukuran Teks Judul: 32px
Tinggi Baris Judul: 1.3em
Spasi Huruf Isi: 3px
Tinggi Garis Tubuh: 1.8em

Menata Tombol

Untuk menata dan memposisikan tombol, perbarui yang berikut:

Ukuran Teks Tombol: 16px
Warna Latar Tombol: #9a2508
Lebar Batas Tombol: 0px
Jarak Huruf Tombol: 2px
Berat Huruf Tombol: semi tebal
Ikon Tombol: tanda plus (lihat tangkapan layar)
Penjajaran Tombol: kanan
Margin Tombol: 10% atas, 10% bawah

Gradien Latar Belakang

Untuk membuat latar belakang untuk teks judul penggeser vertikal, kita dapat menambahkan gradien latar belakang ke penggeser sebagai berikut:

Warna Kiri Gradien Latar Belakang: #9a2508
Warna Kanan Gradien Latar Belakang: rgba(0,0,0,0)
Posisi Awal: 12%
Posisi Akhir: 0%
Tempatkan Gradien Di Atas Gambar Latar Belakang: YA

Catatan: Jika mau, Anda dapat menyesuaikan opasitas warna gradien latar belakang yang tepat untuk membuat overlay untuk gambar slide Anda.

Memutar Tombol dan Panah Slider dengan CSS Kustom

Karena tombol kita masih vertikal, kita perlu memutarnya kembali ke posisi sebelumnya dengan potongan CSS. Tambahkan CSS berikut ke Tombol Slide:

transform: rotate(-90deg);

Untuk panah slider, Anda dapat menambahkan potongan css yang sama sehingga mengarah ke kanan dan kiri, bukan ke atas dan ke bawah. Dan saat kita berada di sana, kita juga bisa meningkatkan ukuran panah. Tambahkan CSS berikut ke

transform: rotate(-90deg);
font-size: 80px;

Itu dia!

Mari kita lihat hasil akhirnya.

Hasil Akhir

Dan ini dia di tablet dan ponsel.

Jangan ragu untuk menjelajahi desain baru dengan mengutak-atik elemen vertikal. Berikut adalah contoh desain yang sama dengan tombol yang diposisikan di sebelah kiri dan hamparan teks.

Pikiran Akhir

Memutar modul penggeser Divi adalah cara cepat dan efektif untuk menambahkan elemen desain vertikal ke penggeser Anda. Sungguh, satu-satunya bagian yang menantang adalah membuat ukuran dan jarak menjadi bagus dan responsif. Tapi untungnya, Divi memiliki cukup opsi bawaan yang memudahkan untuk mengubah desain agar terlihat bagus di semua perangkat.

Desain penggeser vertikal ini juga akan berfungsi dengan baik di area lain situs Anda selain header. Saya dapat melihat ini digunakan untuk menampilkan produk unggulan atau testimonial dalam tata letak kolom yang lebih sempit.

Semoga bisa menjadi inspirasi untuk project selanjutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!