افزودن آیکون اختصاصی در المنتور

طراحی صفحات وب سایت در وردپرس به کمک پلاگین محبوبی به نام المنتور گرچه خیلی راحت شده است اما هر سایتی برای حفظ کیفیت و شاخص شدن نیاز به تغییرات و ابزاری جهت نمایش اختصاصی و کاربرپسند هست. یکی از مواردی که در زیبایی و رابط کاربری سایت موثر است استفاده از آیکون های اختصاصی برای صفحات وب هست. آیکون ها به دلیل حجم کمتر نسبت به تصاویر و سادگی در نمایش می تواند تعامل بیشتری با کاربران ایجاد کرد.

پلاگین المنتور در دو نسخه رایگان و پرمیوم قابل استفاده است که نسخه رایگان آن هم از قابلیت های بسیاری برخوردار است و پاسخگوی اکثر نیازهای یک طراح سایت است. در این آموزش با سه گام، افزودن آیکون دلخواه به المنتور در حالت های پرمیوم و رایگان را بررسی خواهیم کرد. آیکون های زیر نمونه هایی هست که در کتابخانه وردپرس و المنتور موجود نیست اما می توان آن را طبق آموزش اضافه کرد:

۱ . انتخاب آیکون دلخواه

آیکون ها را می توان در نرم افزارهای گرافیکی برداری مانند ایلستریتور طراحی و در فرمتی مانند svg خروجی گرفت. با توجه به این که کار با چنین نرم افزارهایی نیاز به تخصص دارد برای همه مقدور نیست تا این کار را خود انجام دهند. البته تمام طراحان نیز همیشه طرح اختصاصی خود را طراحی نمی کنند و طرح های آماده را شخصی سازی کرده و استفاده می کنند و با این کار زمان خود را صرفه جویی می کنند.

سایت های مختلفی برای دانلود آیکون وجود دارند. در این مقاله ما از سایت flaticon برای ساخت آلبومی از آیکون های اختصاصی خود استفاده می کنیم. (این سایت برای IP ایران تحریم است و باید از فیلتراسیون عبور کنید.) این سایت منبع بزرگی از انواع آیکون به صورت خطی، تک رنگ و رنگی هست که می توان آلبومی از آن ها را جمع آوری و پس از تنظیمات شخصی سازی دانلود کرد. آیکون ها در قالب یک فایل zip دانلود شده که می بایست فایل های svg آن را از حالت فشرده خارج کرده و وارد مرحله بعد بشویم و آیکون ها را برای صفحات وب بهینه سازی نماییم.

۲ . تبدیل آیکون به فونت آیکون

برای آن که بتوانیم آیکون ها را به فرمتی مناسب صفحات وب تبدیل کنیم نیاز به ابزاری برای تبدیل آیکون به فونت آیکون داریم. البته این کار زمانی به کار می آید که بخواهیم مجموعه ای از آیکون را وارد کتابخانه آیکون المنتور کنیم. با این کار آیکون در کتابخانه همواره موجود است و لازم نیست تک به تک وقت گذاشته و تمام آیکون ها را بارگذاری کنیم. حجم هاست هم کمتر درگیر می شود. سایت های خوبی برای این کار وجود دارد که بهترین آن سایت Fontello هست.

پس از ورود به این سایت می توانید از مجموعه آیکون های داخل خود سایت مواردی را انتخاب کرده و همچنین می توانید در قسمت custom icons فایل svg آیکون هایی که در مرحله قبل دانلود کرده اید را بارگذاری کنید. سپس در با کلیک روی گزنیه آچار، یک پیشوند یکتا و منحصر به فرد برای مجموعه آیکون خود معرفی کرده و پس از وارد کرده یک نام برای آیکون های خود، گرینه دانلود را بزنید تا خانواده آیکون شما در یک فایل فشرده zip دانلود شود.

۳ . افزودن آیکون در المنتور

• المنتور نسخه PRO:

المنتور پرو این امکان را قرار داده تا بتوانید آیکون خود را به آسانی درون ریزی کنید. می توانید با کلیک برای custom icon در پیشخوان المنتور و یا گزینه کتابخانه من در صفحه افزودن آیکون، فایلی را که در سایت فونتللو دانلود کرده اید را بارگذاری کنید. در صورتی که می خواهید تک آیکون را اضاقه کنید می توانید روی گزینه افزودن svg نیز در هنگام کار با ادیتور کلیک کرده و آیکون را اضافه کنید.

• المنتور نسخه رایگان:

برای افزودن خانواده آیکون در المنتور رایگان نیاز است تا پلاگین custom icon for elementor را نصب و فعال کنیم. پس از این کار، گزینه custom icon در پیشخوان المنتور اضافه شده که می توانید فایل دانلود شده را در آن بارگذاری کنید. با این کار، مجموعه آیکون اهتصاصی شما در کتابخانه المنتور اضافه شده و می توانید به راحتی از آن استفاده نمایید. اگر می خواهید هر آیکون را تک به تک وارد کنید در نسخه رایگان نیز می توانید در هنگام کار با ادیتور همانند نسخه پرو توسط گزینه بارگذاری svg اضافه کنید. برای دانلود پلاگین می توانید از گزینه دانلود زیر استفاده نمایید.

آموزش های بیشتر در آکادمی بوف


دانلود custom icon for Elementor

در صورتی که برای این کار مشکلی دارید می توانید پیام دهید تا راهنمایی تون کنم. به زودی آموزش کامل المنتور نیز تهیه می شود که می توانید از آن استفاده کنید. در صورتی که به مجموعه آیکون برای کسب و کار و سایت خود نیاز دارید می توانید پیام دهید تا برای شما ارسال نمایم.