افزودن فونت و آیکون به المنتور و افزایش سرعت طراحی

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

۴ روش اضافه‌کردن فونت

افزودن فونت به‌صورت دستی

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

اضافه‌کردن فونت به کمک قالب

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

نصب افزونه برای افزودن فونت

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

افزودن فونت به کمک المنتور

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

افزودن فونت به کمک فونت سفارشی المنتور

فایل فونت خریداری شده را از حالت فشرده خارج کنید. به این نکته توجه کنید، فونت‌های استاندارد باید حداقل این سه فرمت eot، ttf و woff را داشته باشند تا در تمام مرورگرها به‌درستی نمایش داده شوند. حال فونت‌های سفارشی را از زیرمجموعه المنتور را انتخاب ‌کنید و در صفحه جدید بر روی افزودن جدید کلیک کنید.

در صفحه باز شده نام فونت خود را وارد کنید مثال (IRANYekan-Bold) و بعد از آن بر روی اضافه‌کردن فونت‌های متفاوت کلیک کنید. در اینجا باتوجه‌به گزینه‌ها فرمت‌های مختلف را آپلود کنید.

برای مثال: | فایل | woff >> برای این گزینه باید (iranyekanwebbold.woff) را اضافه کنید. به همین ترتیب فرمت‌های مختلف را اضافه کنید و بر روی انتشار کلیک کنید.

نکته: ممکن است فونت با استایل‌های مختلف (Regular, Bold …) داشته باشید. توجه داشته باشید برای اضافه‌کردن فونت با استایل مختلف باید برای هرکدام از این فونت‌ها دوباره این مراحل را طی کنید.

بیشتر بخوانید:
دوره های رایگان طراحی سایت

افزودن پک آیکون

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

نکته: آیکون‌های شما حتما باید به فونت آیکون تبدیل شده باشد تا در این قسمت نصب شود.

دانلود پک آیکون و تبدیل به فونت آیکون

شما می‌توانید فونت آیکون‌های مختلفی از سایت‌های ایرانی و خارجی خریداری کنید. اما اگر بخواهید آیکون پک‌های دلخواه خود را به‌صورت رایگان داشته باشید می‌توانید از سایت‌های flaticon iconfinder، thenounproject، graphicburger برای جمع‌آوری آیکون با فرمت svg استفاده کنید.

بعد از جمع‌آوری آیکون با فرمت ذکر شده نوبت تبدیل آن‌ها به فونت آیکون می‌رسد. برای این کار وارد سایت fontello شوید و فایل‌های svg خود را در قسمت Custom Icons به‌صورت کشیدن و رهاکردن قرار دهید، از قسمت بالا اندازه دلخواه + اسم پک خود را وارد کنید و بر روی دکمه دانلود کلیک کنید. بعد از دریافت فایل فشرده، طبق توضیحات قبل این پک شخصی را به المنتور اضافه کنید.

افزایش سرعت طراحی و پیکربندی تنظیمات

صفحه ساز المنتور بخشی قرار داده که می‌توانیم با شخصی‌سازی این بخش سرعت طراحی خودمان را افزایش دهیم. برای شخصی‌سازی وارد قالب‌های ذخیره شده شوید، در این قسمت کیت پیش‌فرض (Default Kit) را با المنتور ویرایش کنید، اگر این کیت را پیدا نکردید در ابتدای این صفحه بر روی (همه) کلیک کنید. همچنین از بخش منوی همبرگری المنتور در هنگام ویرایش هم می‌توانید وارد این بخش شوید.

در این پنل تمامی تنظیمات اصلی قالب وجود دارد.

رنگ‌های عمومی

برای سریع‌تر شدن انتخاب رنگ، می‌توانید در این بخش کدهای رنگی سایت خود را وارد کنید. بعدازاین مرحله دیگر نیاز نیست هر بار کد رنگ را وارد کنیم و با یک کلیک دسترسی به تمام‌رنگ‌های انتخاب شده خواهید داشت.

فونت‌های عمومی

به کمک این بخش می‌توانید فونت‌های خود را با استایل‌های مختلف تنظیم کنید.

تایپوگرافی

در این بخش شما می‌توانید برای هر تگ نوشته یک فونت معرفی کنید و به آن استایل دهید. مثلا می‌توانید مشخص کنید فونت متن اصلی، ایران یکان ۱۶ پیکسل با رنگ خاکستری باشد.

دکمه‌ها

با استایل دهی دکمه در این بخش دیگر نیاز به تنظیم هر بار بعد از واردکردن یک دکمه نیست و به‌صورت خودکار دکمه‌ها با استایل‌هایی که در این بخش مشخص می‌کنید نمایش داده می‌شوند.

تصاویر

همانند دکمه می‌توانید تصاویر خود را استایل دهی کنید تا این استایل در تمام تصاویر سایت اجرا شود.

فیلدهای فرم

همچنین می‌توانید فرم‌های خود را استایل دهی کنید مثل اندازه تیتر و متن، رنگ پس زمینه، گوشه‌های نرم و غیره

هویت سایت

اگر از قالب هلو المنتور استفاده می‌کنید لازم است که این بخش را تکمیل کنید. در این قسمت شما باید لوگو سایتتان را به صفحه ساز معرفی کنید همچنین می‌توانید فایو آیکون خود را وارد کنید (*فایو آیکون همان لوگو شما است که در بالای تب‌های مرورگر دسکتاپ نمایش داده می‌شود)

پس‌زمینه

با تنظیم این بخش تمام صفحات سایت شما با این کد رنگی نمایش داده می‌شود.

طرح‌بندی

در این بخش شما می‌توانید عرض سایتتان را مشخص کنید، اندازه بین ابزارک‌ها رو تعیین کنید و یا اگر نیازمند مخفی کردن عنوان برگه‌ای بودید می‌توانید آن بخش را مشخص کنید.

نقاط شکست

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

لایت باکس

با فعال‌کردن این گزینه هنگامی که بر روی تصاویر کلیک کنید، تصاویر به‌صورت یک باکس به حالت تقریبا تمام صفحه‌نمایش داده می‌شود.

انتقال صفحه یا page transitions

اگر می‌خواهید قبل از بارگزاری کامل صفحه یک آیکون لودینگ نمایش داده شود می‌توانید از این بخش این تنظیمات را به اجرا دربیاورید.

Css سفارشی

اگر css سفارشی دارید و می‌خواهید این css در تمام سایت تکرار و اجرا شود می‌توانید از این بخش کد خود را وارد کنید.

ووکامرس

اگر افزونه فروشگاه ساز ووکامرس را نصب‌کرده باشید این تنظیمات برای شما نمایش داده می‌شود و می‌توانید از این بخش صفحات فروشگاه خودتان را مشخص کنید. البته این تنظیمات در بخش پیکربندی ووکامرس هم موجود و قابل تغییر است.

تنظیمات اضافی

همان تنظیمات کلی المنتور در پیشخوان وردپرس است.

نتیجه‌گیری

خب ممکنه برای شما سوال پیش بیاید که چگونه این کار باعث افزایش سرعت ما می‌شود؟ اگر این تنظیمات را پیکربندی کنید دیگر نیاز نیست برای انتخاب رنگ هر بار کد رنگی را وارد کنید و یا تمام فونت‌های سایت شما از الان آماده است مثل فونت متن و تیترها مختلف (h1,h2,h3….) و یا دیگر نیاز نیست برای هر بار اضافه‌کردن یک دکمه وارد تنظیمات آن شویم و فقط یک لینک و متن به این دکمه می‌دهم و تمام.

با پیکربندی این تنظیمات سایت شما طبق یک اصول و چهار چوبی که شما تنظیم کردید جلو می‌رود و همین موضوع کمک فراوانی به شما می‌کند.

مدرس:

علیرضا محسن پور

هلپ چک مرجع یادگیری و ثبت سفارش