Cara Membuat Roda Menu Berputar di Arahkan

Membuat roda menu berputar saat mengarahkan kursor adalah cara yang menyenangkan untuk menampilkan tautan bermanfaat di situs web Anda. Ini akan menjadi cara yang bagus untuk menyediakan beberapa ajakan bertindak di header untuk mengarahkan pengguna ke mana mereka harus pergi. Dan itu juga akan menjadi menu sub kategori yang keren untuk blog Anda.

Dalam tutorial ini, saya akan menunjukkan cara membuat roda menu berputar saat melayang di Divi. Ini dapat dilakukan dengan menggunakan kombinasi opsi Divi bawaan dan beberapa cuplikan css khusus.

Sneak Peek

Unduh Tata Letaknya 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?

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)

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Membuat Desain Roda Menu Berputar di Divi

Ide Dasar

Roda dibuat dengan mengubah baris menjadi elemen melingkar dengan memberinya tinggi dan lebar 500px dan sudut membulat 50%. Setiap tautan menu dibuat dalam modul teks terpisah dan disejajarkan di sepanjang garis melingkar dengan memutar setiap modul teks di sepanjang radius (tengah) baris. Pengaturan ini mirip dengan cara Anda membuat teks melengkung di Divi.

Buat Bagian dan Baris 1

Buat bagian reguler dengan satu baris kolom.

Kemudian tambahkan modul teks ke baris dengan konten berikut.

Kemudian perbarui desain teks sebagai berikut:

Font Teks: Bagikan Teknologi
Spasi Huruf Teks: 1px
Judul 2 Ukuran Teks: 8vw

Tambahkan Baris 2 untuk Membangun Roda

Selanjutnya, kita perlu menambahkan baris satu kolom baru di bawah Baris 1.

Sebelum kita mulai menambahkan modul teks untuk tautan kita, kita perlu mendesain baris kita sebagai roda. Akan ada sedikit optimasi yang baik yang dibutuhkan pada baris untuk membuat desain roda kita. Untuk memulai, buka pengaturan untuk Baris 2 dan perbarui yang berikut ini:

Warna Latar Belakang: #02366b
Warna Kiri Gradien Latar Belakang: rgba(0,0,0,0.45)
Warna Kanan Gradien Latar Belakang: #02366b
Tipe Gradien: Radial
Arah Radial: Pusat
Posisi Awal: 36%
Posisi Akhir: 0%

Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Lebar: 500 piksel
Lebar Maks: 500px (desktop), otomatis (tablet dan ponsel)
Tinggi: 500px (desktop), otomatis (tablet dan ponsel)
Padding (desktop): 0px atas, 0px bawah
Padding (tablet dan ponsel): 20px atas, 20px bawah, 20px kiri
Margin (telepon): -10% benar

Kita perlu mengatur tinggi dan lebar baris menjadi 500px sehingga menjadi persegi yang sempurna. Ini akan memungkinkan kita untuk memberikannya bentuk lingkaran yang sempurna menggunakan opsi sudut membulat (radius batas) di Divi.

Sudut Bulat: 50%

Kemudian kita dapat menambahkan level lain dari desain lingkaran menggunakan bayangan kotak sebagai berikut:

Bayangan Kotak: lihat tangkapan layar
Kekuatan Buram Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 210px
Warna Bayangan: rgba (2,54.107,0.66)

Selanjutnya kita akan menambahkan potongan kecil CSS untuk membuat konten baris kita terpusat secara vertikal. Di bawah tab lanjutan, tambahkan CSS khusus berikut di Elemen Utama.

display:flex;
align-items:center;

Itu menangani pengaturan baris untuk saat ini. Kami akan kembali untuk menambahkan efek hover berputar kami nanti.

Menambahkan Tautan

Setiap tautan di roda akan dibuat dengan modul teks. Kita akan membuat total enam modul teks. Lima dari modul teks akan menyimpan tautan untuk roda dan salah satu modul teks akan berisi judul menu.

Mulailah dengan membuat modul teks baru.

Kemudian perbarui pengaturan teks sebagai berikut:

Isi isi: “Item Tautan”

Font Teks: Bagikan Teknologi
Warna Teks Teks: #ffffff
Ukuran Teks Teks: 16px (default), 20px (arahkan kursor)
Spasi Huruf Teks: 1px
Tinggi Baris Teks: 60px
Lebar: 250px (desktop), otomatis (tablet dan ponsel)
Tinggi: 60px
Padding: tersisa 20 piksel

Simpan pengaturan untuk saat ini. Kemudian duplikat modul teks 4 kali untuk membuat total 5 modul teks.

Memposisikan Tautan/Modul Teks

Sekarang kami siap untuk memposisikan tautan kami di sepanjang perimeter roda. Untuk melakukan ini, kami akan memperbarui setiap modul teks dengan opsi transformasi yang memindahkan/menerjemahkan dan memutar modul ke tempatnya.

Untuk membuatnya lebih mudah, terapkan mode tampilan gambar rangka dan beri label modul teks yang dimulai dengan Tautan 1 di bagian atas hingga Tautan 5 di bagian bawah.

Tautan 1

Kita akan mulai dengan mengedit Tautan 1. Buka pengaturan modul teks untuk Tautan 1 dan perbarui yang berikut:

Transformasi Terjemahkan Y Axis: 120px (desktop), 0px (tablet dan ponsel)
Transform Rotate Z Axis: 60deg (desktop), 0px (tablet dan ponsel)
Transform Origin: 50% 100% (kanan tengah)

Tautan 2

Buka pengaturan modul teks untuk Tautan 2 dan perbarui yang berikut ini:

Transformasi Terjemahkan Y Axis: 60px (desktop), 0px (tablet dan ponsel)
Transform Rotate Z Axis: 30deg (desktop), 0px (tablet dan ponsel)
Transform Origin: 50% 100% (kanan tengah)

Tautan 3

Karena modul teks untuk tautan 3 ada di tengah, kita bisa membiarkannya di tempatnya.

Tautan 4

Buka pengaturan modul teks untuk Tautan 2 dan perbarui yang berikut ini:

Transformasi Terjemahkan Y Axis: -60px (desktop), 0px (tablet dan ponsel)
Transform Rotate Z Axis: -30deg (desktop), 0px (tablet dan ponsel)
Transform Origin: 50% 100% (kanan tengah)

Tautan 5

Buka pengaturan modul teks untuk Tautan 2 dan perbarui yang berikut ini:

Transformasi Terjemahkan Y Axis: -120px (desktop), 0px (tablet dan ponsel)
Transform Rotate Z Axis: -60deg (desktop), 0px (tablet dan ponsel)
Transform Origin: 50% 100% (kanan tengah)

Sekarang mari kita lihat hasilnya sejauh ini. Perhatikan bagaimana tautan/teks di dalam modul teks berputar sempurna di sepanjang perimeter lingkaran.

Menambahkan Label Menu

Untuk menambahkan label menu, kita perlu menambahkan modul teks lain di bagian atas dari lima modul teks yang sudah kita miliki. Silakan dan tambahkan modul teks baru di atas Tautan 1.

Kemudian perbarui konten tubuh dengan yang berikut:

<p>menu</p>

Pastikan label menu dibungkus dengan tag ap. Ini akan memastikan ketinggian garis dikenali dalam pengaturan teks.

Kemudian untuk mempercepat desain, salin gaya modul dari modul teks untuk Link 3 dan tempel gaya modul tersebut ke modul teks baru.

Kemudian perbarui yang berikut ini:

Tinggi Baris: 300px (desktop), 20px (tablet dan ponsel)
Tinggi: mengembalikan pengaturan default (otomatis)

Line Height harus 300px sehingga sama dengan tinggi kolom konten yang juga 300px (5 modul teks masing-masing dengan tinggi 60px sama dengan 300px). Ini akan memastikan teks tetap berada di tengah vertikal.

Kemudian kita perlu memutar modul teks label menu 180 derajat sehingga akan ditampilkan dengan benar di sisi berlawanan dari roda. Ini akan memungkinkan pengunjung untuk melihat label menu sebelum status hover yang memutar tautan dalam tampilan.

Transform Rotate Z Axis: 180deg (desktop), 0deg (tablet dan ponsel)
Transform Origin: 50% 100% (kanan tengah)

Setelah selesai, kita perlu memberikan posisi mutlak pada modul teks label menu. Untuk melakukan ini, tambahkan CSS khusus berikut ke Elemen Utama:

position: absolute !important;

Sekarang lihat hasilnya. Anda akan melihat item menu terbalik di sebelah kanan kemudi.

Menambahkan Efek Melayang Berputar ke Baris/Roda

Untuk menambahkan efek hover berputar ke baris, perbarui pengaturan baris sebagai berikut:

Transform Rotate Z axis: 180deg (desktop), 0deg (hover, 0deg (tablet dan ponsel)

Kemudian perbarui pengaturan transisi sebagai berikut:

Durasi Transisi: 450ms
Kurva Kecepatan Transisi: Ease-in-Out

Sekarang lihat bagaimana roda berputar saat melayang.

Membuat Tata Letak Dua Kolom untuk Bagian

Saat ini tata letak terdiri dari dua baris satu kolom yang ditumpuk di atas satu sama lain. Namun, kita dapat menggunakan properti flex css untuk menyelaraskan kedua baris secara horizontal. Untuk melakukan ini, kita dapat menambahkan potongan kecil CSS khusus ke bagian tersebut. Setelah selesai, kita perlu sedikit menyesuaikan jarak agar semuanya terlihat benar.

Buka pengaturan bagian dan tambahkan css khusus berikut ke elemen utama:

display:flex;

Perbarui Spasi Baris 1

Selanjutnya, perbarui ukuran dan spasi untuk baris 1 sebagai berikut:

Lebar: 40% (desktop), 100% (tablet dan ponsel)
Margin (desktop): 5% tersisa
Margin (tablet): 5% kiri, 5% kanan
Margin (telepon): 5% benar

Sentuhan Akhir

Pada tampilan tablet dan ponsel, Anda perlu menambahkan beberapa margin atas ke modul Link 1 Text.

Margin (tablet): 30px atas

Dan Anda selalu dapat menambahkan pemisah bagian ke bagian untuk membuat desainnya lengkap.

Hasil Akhir

Sekarang mari kita lihat hasil akhirnya.

Alternatif Desain Setengah Roda

Salah satu desain alternatif yang keren adalah menyembunyikan bagian kanan roda di luar bagian sehingga tautan disembunyikan dan kemudian terungkap saat melayang. Untuk melakukan ini, lanjutkan dan duplikat seluruh bagian yang memegang desain yang baru saja kita buat. Pada bagian duplikat, perbarui pengaturan baris 1 sebagai berikut:

Lebar: 70% (desktop)

Kemudian perbarui pengaturan untuk baris 2 untuk mendorong roda ke luar bagian sebagai berikut:

Margin: -250px kanan

Kita perlu menggunakan -250px karena lebar total roda adalah 500px dan kita ingin menyembunyikan tepat setengah dari baris.

Kemudian atur visibilitas bagian menjadi tersembunyi sebagai berikut:

Berikut adalah desain akhir.

Pikiran Akhir

Roda tautan yang berputar adalah salah satu elemen desain elegan yang dapat melibatkan pengunjung dengan efek melayang yang halus dan unik. Dan sungguh menakjubkan betapa banyak dari desain ini yang dapat Anda lakukan hanya dengan pengaturan desain bawaan Divi. Saya harap ini menambahkan sedikit sesuatu yang ekstra di sabuk alat desain Anda untuk proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!