آموزش اضافه کردن آیکون و ابزار آیکون جعبه در المنتور

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

ساخت آیکون سفارشی در المنتور

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

مرحله اول) پیدا کردن و دانلود آیکون‌ برای المنتور

اولین قدم برای اضافه کردن آیکون‌ پس از نصب المنتور پرو، دانلود آیکون از سایت‌های مرجع است:

• سایت iconmonstr
• سایت flaticon
• سایت dryicons
• سایت Icons
• سایت iconfinder

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

نکته: به یاد داشته باشید فرمت تصویر مورد نظر برای آپلود باید فرمت SVG باشد به همین دلیل پس از دانلود باید فرمت تصویرتان را تغییر دهید.

مرحله دوم) اضافه کردن آیکون به المنتور

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

وارد پیشخوان وردپرس شوید و از طریق منوی المنتور > آیکون‌های سفارشی را باز کنید.

2. سپس گزینه افزودن جدید (Add New) را انتخاب کنید.

3. در صفحه جدید نامی برای مجموعه آیکون خود انتخاب کنید.

4. فایل آیکون‌ های سفارشی را آپلود کنید.

5. بعد از آپلود آیکون‌ها روی دکمه انتشار با Publish کلیک کنید.

مرحله سوم) استفاده از آیکون در صفحات سایت

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

آیکن جعبه در المنتور چیست؟

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

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

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

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

همچنین در برخی نسخه‌ها یا افزونه‌های سازگار، امکان استفاده از تصویر به‌جای آیکون یا آپلود فایل SVG نیز وجود دارد. با این حال، اصل ساختار این ویجت بر ترکیب آیکون، عنوان و توضیح متنی است.

آموزش کار با ابزار آیکن جعبه در المنتور

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

1. افزودن ویجت به صفحه

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

2. تنظیمات محتوا در تب Content

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

انتخاب آیکون

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

نوشتن عنوان

عنوان باید کوتاه، روشن و دقیق باشد. عنوان خوب باید در یک نگاه مفهوم اصلی را منتقل کند، عنوان نقش اصلی در هدایت توجه کاربر را دارد؛ بنابراین از عناوین مبهم یا بیش از حد طولانی پرهیز کنید.

افزودن توضیحات

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

افزودن لینک

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

تعیین موقعیت آیکون

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

انتخاب حالت نمایش

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

تنظیم تگ HTML عنوان

برای بهینه‌سازی ساختار صفحه، می‌توانید تگ HTML عنوان را از H1 تا H6 تنظیم کنید. این گزینه در سئو و نظم معنایی صفحه اهمیت دارد. البته باید دقت کنید که تگ عنوان با ساختار واقعی صفحه هماهنگ باشد و تنها برای ظاهر بصری تغییر نکند.

تنظیمات استایل در آیکن جعبه

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

رنگ و اندازه آیکون

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

استایل متن عنوان و توضیحات

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

فاصله‌گذاری و چیدمان

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

پس‌زمینه، حاشیه و گوشه‌ها

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

افکت هاور

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

نکات مهم برای استفاده بهتر از Icon Box

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

از آیکون مرتبط استفاده کنید: آیکون باید مستقیماً با مفهوم عنوان و توضیح مرتبط باشد. آیکون نامرتبط باعث می‌شود کاربر در همان نگاه اول دچار ابهام شود و از کیفیت محتوای شما برداشت درستی نداشته باشد.

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

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

از ارتفاع برابر برای یکدست‌سازی استفاده کنید: اگر چند آیکن جعبه را کنار هم قرار می‌دهید، هم‌تراز بودن آن‌ها اهمیت زیادی دارد. استفاده از گزینه‌هایی مانند Equal Height می‌تواند کمک کند همه جعبه‌ها ظاهری یکسان و منظم داشته باشند. این موضوع در بخش‌های معرفی خدمات یا ویژگی‌ها بسیار مهم است.

تعادل بین سادگی و جذابیت را حفظ کنید

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

و در پایان بهتر است بگوییم:

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

سوالات متداول

1. آیا برای اضافه کردن آیکون در المنتور نیاز به کدنویسی داریم؟

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

2. آیا می‌توان آیکون دلخواه خودمان را در المنتور آپلود کنیم؟

بله، در نسخه‌های حرفه‌ای‌تر و با استفاده از قابلیت Custom Icons، می‌توانید آیکون‌های اختصاصی خود را اضافه کنید، اما اگر از نسخه رایگان المنتور استفاده میکنید باید به نسخه پرو ارتفا بدهید.