Sorotan Plugin Divi: Ikon Unggah Divi

Diterbitkan: 2019-04-28

Divi Upload Icons adalah plugin pihak ketiga untuk Divi yang memudahkan untuk menambahkan lebih banyak ikon ke Divi Builder. Tidak seperti plugin ikon lain yang hanya mengintegrasikan Font Awesome dan Ikon Material, plugin ini memungkinkan Anda menambahkan set ikon apa pun yang Anda inginkan. Itu hanya harus menjadi jenis file yang kompatibel, dan kebetulan menggunakan lima jenis file paling populer.

Plugin menambahkan pengunggah ke instalasi WordPress Anda di mana Anda akan menarik dan melepaskan file ikon Anda. Ikon kemudian ditambahkan ke modul Divi yang menampilkan ikon. Sama seperti ikon Divi standar, kumpulan ikon apa pun yang Anda unggah dapat ditata dengan Divi Builder. Dalam sorotan plugin Divi ini, kita akan melihat Ikon Unggah Divi dan melihat betapa mudahnya menggunakannya.

Memasang dan Mengaktifkan Ikon Unggah Divi

Unggah dan aktifkan plugin seperti biasa, lalu buka Pengaturan > Ikon Unggah Divi di menu dasbor untuk memasukkan kunci aktivasi Anda.

Mengunggah Ikon dengan Ikon Unggah Divi

Juga di layar pengaturan adalah fitur unggah. Di sini, Anda akan mengunggah ikon Anda. Ikon harus dalam format .eot, .svg, .ttf, .woff, .woff2, dan .css. Anda dapat mengunduh ikon dari sumber mana pun yang Anda inginkan dan menggunakannya dengan Ikon Unggah Divi selama ikon tersebut dalam format ini dan menyertakan file CSS. Untuk memasang ikon, seret dan lepas ke jendela unggah. Instruksi disediakan di area unggahan dan ada video pendek yang menunjukkan cara menggunakannya.

Ikon terkadang menyertakan banyak format. Anda harus mengunggah file CSS bersama dengan ikon, dan ikon harus file yang didukung. Dalam contoh ini, saya mengunggah beberapa set. Mereka termasuk beberapa jenis file dan file CSS. Yang ada di gambar di atas dengan ikon oranye memiliki file yang hilang.

File dalam contoh ini benar. Saya telah mengunggah jenis file yang didukung dengan file CSS-nya. Saya sekarang memiliki lebih dari 2500 ikon baru. Saya mengunduhnya dari iconfont, Dripicons, Foundation Icon Fonts, dan Map Icons. Pengembang menyimpan daftar ikon yang telah diuji dan dapat Anda gunakan dengan Ikon Unggah Divi. Tentu saja, masih banyak lagi ikon yang bisa Anda gunakan.

Sebagai perbandingan, inilah modul uraian Divi sebelum saya mengunggah ikon baru. Divi menyertakan 360 ikon. Anda bisa mendapatkan gambaran berapa banyak dengan melihat panjang bilah di jendela.

Gambar ini mencakup semua 2500 ikon yang saya unggah. Saya sekarang memiliki lebih banyak ikon untuk dipilih dan bilah untuk jendela jauh lebih kecil. Anda dapat melihat ikon di Visual Builder, tetapi tidak menyertakan filter dan alat pencarian baru.

Filter dan Pencarian Ikon Unggah Divi

Alat filter baru ditambahkan jika Anda menggunakan pembuat klasik. Anda dapat membuka atau menutup filter. Itu ditutup dalam contoh ini.

Klik Filter Ikon untuk melihat kumpulan ikon yang telah Anda instal dan fitur pencarian. Klik salah satu keluarga ikon untuk melihat keluarga itu saja. Anda juga dapat melihat semua keluarga atau menutup opsi filter dan pencarian. Filternya bekerja dengan cepat. Mengklik keluarga ikon atau mencari ikon menunjukkan ikon hampir seketika, bahkan dengan 2500 ikon saya. Saya yakin itu sebagian tergantung pada berapa banyak ikon yang telah Anda instal, jadi pengalaman Anda mungkin berbeda.

Dalam contoh ini, saya telah memilih Ikon Peta yang saya unggah. Ada hampir 200 ikon dalam keluarga ikon ini.

Berikut adalah Ikon Yayasan . Ini juga memiliki hampir 200 ikon.

Berikut adalah Iconfonts . Keluarga ikon ini menambahkan lebih dari 2000 ikon.

Anda dapat mencari berdasarkan kata kunci atau nama keluarga ikon. Hasilnya termasuk ikon dari semua keluarga ikon yang telah Anda unggah dan yang sudah tersedia di Divi.

Akan menarik jika filter akan berfungsi setelah pencarian untuk melihat hasil berdasarkan keluarga ikon. Itu memang menunjukkan nama dengan keluarga ikon saat Anda mengarahkan kursor ke setiap ikon. Pada gambar di atas, saya mengarahkan kursor ke ikon kedua dari kanan. Ini cukup membantu, jadi filter pencarian bukanlah prioritas utama.

Contoh Ikon Unggah Divi

Tentu saja, salah satu keuntungan menggunakan ikon adalah kemampuan untuk menyesuaikan ukuran, warna, menambahkan lingkaran, batas, dll., menggunakan Divi Builder. Plugin dan ikon berfungsi dengan Visual Builder, tetapi tidak menampilkan ikon di tampilan langsung. Contoh ini menunjukkan ikon dalam pemilihan ikon modul, tetapi pratinjau langsung tidak berfungsi.

Ikon ditampilkan dengan baik di halaman atau postingan yang dipublikasikan. Anda masih dapat menggunakan Visual Builder untuk menyesuaikan ukuran dan warna, Anda tidak akan melihatnya di pratinjau langsung. Saya lebih suka Visual Builder ketika saya menyesuaikan warna dan ukuran, tetapi saya akan menggunakan Classic Builder untuk contoh lainnya. Ini adalah halaman arahan dari paket tata letak Hipotek.

Ikon tampak hebat dan dapat dikustomisasi seperti ikon Divi standar. Saya menemukan semua ikon ini menggunakan fitur pencarian. Ini adalah pengaturan default.

Saya mengubah warna agar sesuai dengan tata letak, seperti gambar asli tata letak yang digunakan.

Untuk yang satu ini, saya telah memilih untuk menggunakan ukuran font untuk ikon dan menyesuaikannya menjadi 32px. Ini mulai terlihat lebih mirip dengan desain aslinya, tetapi dengan ikon saya.

Dalam hal ini, saya telah menambahkan lingkaran ke setiap ikon. Saya telah mengubah warna lingkaran dan ikon, dan saya telah menambahkan batas ke kedua dan keempat dari kiri. Saya memilih warna yang berbeda hanya untuk menunjukkan seperti apa bentuknya.

Begini tampilan ikon yang ditempatkan di sebelah kiri teks.

Dalam hal ini, saya telah mengganti gambar dalam tata letak Lapangan Golf dengan ikon. Saya telah menggunakan warna dari tata letak dan mengukurnya pada 48px.

Untuk contoh ini, saya telah menonaktifkan penyesuaian ukuran font untuk ikon. Ini adalah ukuran default, pada 96px. Mereka menyatu dengan baik dengan desain tata letak.

Mereka juga terlihat luar biasa saat menggunakan pengaturan ikon lingkaran. Saya mengubah warna ikon menjadi putih dan menggunakan warna cokelat dari tata letak sebagai warna lingkaran. Ikon masih di 48px.

Untuk yang satu ini, saya telah menggunakan salah satu nuansa hijau dari tata letak. Ada banyak kemungkinan dengan kustomisasi Divi Builder.

Harga Ikon Unggah Divi

Ikon Unggah Divi adalah $24,97. Ini memiliki penggunaan dan pembaruan tanpa batas. Anda dapat membeli Ikon Unggah Divi di pasar.

Mengakhiri Pikiran

Ikon Unggah Divi memudahkan untuk mengunggah ikon persis yang Anda inginkan dari pustaka font apa pun. Ide di balik plugin ini adalah alih-alih memasang ribuan ikon yang tidak Anda perlukan, Anda dapat memasang ikon dan keluarga ikon yang tepat yang ingin Anda gunakan dengan situs web Divi Anda.

Karena Anda mengunggah ikon ke Divi Builder, ikon tersebut disimpan di server Anda. Saya mengunggah lebih dari 2500 ikon dan tidak memiliki masalah kecepatan dengan Divi Builder atau situs web saya.

Perlu diingat bahwa itu memang memerlukan font dengan file font dan file CSS. Sangat mudah untuk mengunggah font yang salah (tebak bagaimana saya tahu). Pastikan Anda mengikuti petunjuk dengan tepat atau font akan menjadi kotak kosong. Juga, itu tidak bekerja dengan Font Awesome 5, tetapi bekerja dengan baik dengan 4.7.

Saya suka menggunakan Ikon Unggah Divi. Saya ingin menggunakannya dengan Visual Builder, tetapi ini berfungsi dengan baik dengan pembuat klasik. Perlu usaha ekstra untuk memastikan saya memiliki file yang tepat, tetapi mengingat berapa banyak keluarga ikon yang ada di internet, ada baiknya meluangkan waktu untuk menemukan ikon dengan file yang tepat. Ikon tidak sulit ditemukan, dan pengembang menyediakan banyak tautan ke ikon yang sudah dia uji.

Jika Anda tertarik untuk menambahkan ikon Anda sendiri ke Divi Builder, Divi Upload Icons layak untuk dilihat.

Kami ingin mendengar dari Anda. Sudahkah Anda mencoba Ikon Unggah Divi? Beri tahu kami pendapat Anda tentang hal itu di komentar.

Gambar Unggulan melalui hanss / shutterstock.com