Apakah Anda ingin tahu cara menggunakan modul Ikon dari Divi untuk membuat ikon khusus?
Tombol ikon telah menjadi pokok dalam dunia desain web. Ikon memberikan ajakan bertindak visual yang ringkas yang berfungsi baik untuk perangkat seluler karena tidak memakan banyak ruang. Mereka juga berfungsi dengan baik sebagai tombol sakelar atau sembulan yang dikenali pengguna secara intuitif tanpa perlu teks.
Dalam tutorial hari ini kami akan menunjukkan cara mendesain tombol ikon dengan Divi. Buat tombol ikon di Divi cukup sederhana dan menyenangkan untuk dilakukan.
Dengan menggunakan modul Ikon, kita dapat memilih dari ratusan ikon dan menggunakan opsi desain bawaan yang tak terhitung jumlahnya Divi Pembuat untuk membuat hampir semua jenis tombol ikon yang dapat Anda pikirkan.
Kami harap artikel ini membantu Anda mulai membuat tombol ikon yang luar biasa untuk proyek Anda berikutnya.
Mari kita mulai!
penelitian
Berikut adalah ikhtisar singkat dari tombol ikon yang akan kita buat dalam tutorial ini.
Buat halaman baru dengan Divi Builder
Lihat juga: Divi: Cara menyesuaikan keranjang dan ikon pencarian dari modul "Menu Lebar Penuh"
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik Gunakan Divi Builder
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Buat tombol ikon dengan modul Divi Icons
Bagian 1: Membuat Tombol Ikon
Untuk memulai, mari tambahkan baris satu kolom ke bagian reguler default.
Kemudian tambahkan modul baru icon ke kolom.
Ikon, URL tautan, dan warna latar belakang
Di bawah tab Konten pengaturan modul ikon, perbarui yang berikut:
- Ikon: Panah kanan (lihat tangkapan layar)
- Ikon Tautan URL: # (hanya pengisi untuk saat ini)
- Latar belakang: #3e22ff
Perbatasan dan radius perbatasan
Di bawah tab Mendesain, perbarui berikut ini:
- Sudut Bulat: 10px
- Lebar Perbatasan: 2px
- Warna Perbatasan: #7272ff
Kotak bayangan
- Bayangan Kotak: Lihat tangkapan layar
- Warna Bayangan: rgba (62,34,255,0.48)
Mencocokkan ruang yang dapat diklik dengan ukuran tombol ikon
Saat ini, modul ikon akan menjangkau lebar penuh wadah induk (atau kolom). Ini berarti ruang yang dapat diklik lebih besar dari tombol ikon yang sebenarnya.
Untuk mencocokkan ruang yang dapat diklik dengan ukuran tombol ikon, kami dapat memberikan modul lebar maksimum yang sama dengan lebar tombol ikon.
Dalam contoh ini, lebar total tombol adalah 94 piksel.
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke elemen utama:
max-width: 94px
Inilah hasilnya.
Bagian 2: Buat tombol ikon persegi
Untuk membuat tombol ikon persegi kami, duplikat baris yang berisi tombol ikon pertama yang baru saja kami buat. Ini akan memberi kita tombol duplikat di baris untuk dikerjakan.
Berikan ikon dengan tinggi dan lebar yang sama sambil menjaganya tetap di tengah
Koleksi besar ikon yang tersedia untuk digunakan dalam modul Ikon mencakup ikon Divi dan ikon Fontawesome. Namun, tidak semua ikon akan memiliki tinggi dan lebar yang sama. Ini membuatnya sedikit lebih sulit untuk menentukan lebar dan tinggi tombol ikon yang tepat.
Untuk membuat tombol persegi sempurna yang melibatkan ikon saat mengarahkan kursor, kita dapat menambahkan CSS khusus untuk mengatur tinggi dan lebar ikon serta memusatkan ikon menggunakan properti CSS Flex.
Begini caranya.
Pertama, buka pengaturan ikon duplikat. Kemudian perbarui ikon dengan yang baru dari pemilih ikon.
Lepaskan bantalan dari modul ikon. Ini tidak perlu karena kita akan mengatur tinggi dan lebar untuk ikon.
Di bawah tab lanjutan, tambahkan CSS khusus berikut ke Elemen Ikon :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Sekarang tombol ikon akan memiliki tinggi dan lebar sama dengan 90 piksel, menjadikannya persegi yang sempurna. Juga, properti flex menyelaraskan ikon di tengah modul. Ini memungkinkan Anda dengan mudah memperbarui ukuran ikon di modul ikon.
Untuk melengkapi tombol ini, mari berikan gradien latar belakang dan warna batas putih sebagai berikut:
- Gradien Berhenti:
- 0%: #3e22ff
- 100%: #ff2000
- Warna Batas: #fff
Inilah hasil akhirnya.
Buat tombol ikon melingkar
Setelah tombol ikon berbentuk persegi sempurna, membuatnya melingkar menjadi sederhana. Tapi sebelum menunjukkan trik sederhana ini, mari kita gandakan baris sebelumnya untuk mulai membuat tombol ikon melingkar kita.
Sekarang buka pengaturan untuk ikon duplikat baru kami dan di bawah tab Mendesain, perbarui radius batas (atau sudut membulat) sebagai berikut:
- Sudut Bulat: 50%
Dan begitu saja, kami memiliki tombol ikon melingkar!
Untuk sedikit mengubah desainnya, mari kita beri icon module dengan icon dan warna background yang berbeda sebagai berikut:
- Ikon: lihat tangkapan layar
- Latar belakang: #121212
Inilah hasilnya.
Buat menu horizontal tombol ikon
Tren populer adalah menggunakan ikon untuk membuat menu ikon yang biasanya terdiri dari beberapa tombol yang ditempatkan berdampingan. Untuk melakukan ini, kita dapat menggunakan properti flex.
Inilah cara melakukannya.
Pertama, tambahkan baris baru ke kolom di halaman.
Buka pengaturan garis dan perbarui lebar talang menjadi 1.
- Lebar Talang: 1
Selanjutnya, buka pengaturan kolom di dalam baris dan tambahkan CSS khusus berikut ke elemen kolom utama:
display:flex;
align-items:center;
Tambahkan modul baru icon ke kolom.
Di bawah tab Konten pengaturan ikon, pilih ikon dan tambahkan URL tautan ikon.
Di bawah tab Mendesain, perbarui berikut ini:
- Warna Ikon: #3e22ff
- Ukuran Ikon: 40px
- Margin (Kiri dan Kanan): 10px
- Lebar Perbatasan: 2px
- Warna Batas: #3e22ff
KOMENTAR : Margin akan membuat ruang di antara tombol yang berdekatan setelah kita menambahkan lebih banyak nanti.
Di bawah tab Advanced, tambahkan CSS khusus berikut di bidang Elemen Ikon (seperti yang kita lakukan sebelumnya untuk tombol ikon persegi):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Sekarang setiap kali kita menambahkan tombol ikon baru, mereka akan muncul berdampingan. Untuk mengilustrasikannya, mari duplikat tombol ikon yang ada tiga kali untuk membuat total empat tombol ikon di menu horizontal.
Setelah itu, kita dapat kembali dan memperbarui ikon sesuai kebutuhan.
Inilah hasilnya.
Menambahkan efek hover ke tombol ikon
Sulit untuk berbicara tentang desain tombol ikon tanpa menyebutkan efek hover. Mereka terlalu menyenangkan untuk diabaikan.
Mengubah warna latar belakang dan warna ikon saat melayang
Mengubah warna tombol adalah efek hover yang populer dan efektif. Misalnya, kita dapat mengubah warna latar belakang dan warna ikon secara bersamaan saat pengguna mengarahkan kursor ke tombol.
Untuk melakukan ini, buka pengaturan modul ikon dan aktifkan opsi hover untuk warna latar belakang dan pilih warna yang berbeda untuk status hover. Kemudian Anda dapat melakukan hal yang sama untuk ikon.
Dalam contoh ini, kami mengubah warna latar belakang dari putih menjadi biru dan ikon dari biru menjadi putih.
Ubah ikon di hover
Efek hover lain yang mungkin Anda sukai adalah mengubah ikon sepenuhnya. Untuk melakukan ini, Anda dapat memilih ikon yang berbeda untuk status hover saat Anda memilih ikon di pengaturan ikon.
Skala tombol ikon saat melayang
Efek hover yang sulit diabaikan adalah efek hover penskalaan. Ini memperbesar atau memperbesar tombol ikon. Cara terbaik untuk menambahkan jenis efek hover ini adalah dengan menggunakan opsi transformasi Divi. Ini akan memungkinkan tombol tumbuh tanpa mempengaruhi elemen di sekitarnya.
Untuk menambahkan efek hover skala ke tombol ikon, buka pengaturan ikon dan di bawah tab Mendesain, cari opsi transformasi. Aktifkan opsi hover, lalu tetapkan skala transformasi berikut ke status hover:
- Transformasi Y: 118%
- Transformasi X: 118%
Ini akan meningkatkan ukuran tombol ikon sebesar 18% saat pengguna mengarahkan kursor ke atasnya.
Putar tombol ikon di hover
Memutar objek melayang selalu merupakan interaksi mikro yang menyenangkan. Untuk memutar tombol ikon di hover, kita dapat menggunakan opsi transform rotate. Tapi sebelum itu, mari kita buat tombolnya melingkar sehingga hanya ikon yang muncul untuk berputar.
Untuk membuat ikon melingkar, dengan asumsi tombolnya persegi, cukup perbarui pengaturan sudut membulat menjadi 50% di keempat sudut.
Kemudian perbarui opsi transformasi untuk menyertakan nilai rotasi transformasi berikut dalam status melayang:
- Transform Putar Z: 180 derajat
Mari kita lihat 4 efek hover yang sedang beraksi.
Hasil akhir
Mari kita lihat hasil akhir dari tutorial kita.
Baca juga: Divi: Cara menyorot modul "Blurb" saat mengarahkan kursor dan mengaburkan yang lain
Berikut adalah tiga tombol ikon kami (standar, persegi, dan lingkaran).
Dan berikut adalah menu tombol icon horizontal dengan efek hover.
Unduh DIVI Sekarang!!!
Kesimpulan
Ketahui cara mendesain tombol ikon untuk a situs jaringan sangat penting. Dan, seperti yang telah kita lihat di tutorial ini, Divi tidak terlalu sulit. Modul Ikon Divi memiliki banyak opsi bawaan yang membuka pintu ke desain tombol ikon kreatif.
Semoga teknik dalam artikel ini akan membantu Anda membuka beberapa keajaiban desain tombol ikon Anda sendiri.
Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
