المان آیکن (Icon) در المنتور

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

المان آیکن در المنتور چیست ؟

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

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

محتوا در المان آیکن (Icon) المنتور

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

بخش آیکن در ویجت Icon المنتور

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

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

گزینه پیوند المان آیکن (Icon) در المنتور

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

بخش استایل المان آیکن (Icon) در المنتور

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

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

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

بخش پیشرفته المان Icon در المنتور

در بخش پیشرفته (Advanced Tab) المنتور برای المان‌ هایی که شامل آیکون هستند، مجموعه‌ ای از ابزارها برای کنترل دقیق طرح‌ بندی و جلوه‌ های بصری فراتر از تنظیمات پایه‌ ای ارائه می‌ شود؛ این تنظیمات شامل کنترل کامل فضای اطراف آیکون از طریق حاشیه و فاصله‌ گذاری، تنظیم دقیق موقعیت آیکون نسبت به سایر عناصر با استفاده از موقعیت‌ یابی مطلق یا ثابت، و مدیریت ترتیب لایه‌ ها با Z-Index است. علاوه بر این، کاربران می‌ توانند با استفاده از افکت‌ های حرکتی جذابیت بصری آیکون را افزایش دهند یا نمایش آن را بر اساس نوع دستگاه موبایل، تبلت یا دسکتاپ تنظیم کنند، که این امکانات در مجموع به طراح اجازه می‌ دهد تا آیکون را به صورت یکپارچه و حرفه‌ ای در ساختار کلی صفحه وب‌ سایت ادغام نماید.

توضیح طرح‌ بندی در المان آیکن المنتور

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

آموزش موشن افکت در ویجت آیکن

ویژگی موشن افکت (Motion Effects) به کاربران اجازه می‌ دهد تا جلوه‌ه ای حرکتی پیچیده و انیمیشن‌های جذابی را مستقیماً روی المان آیکون اعمال کنند تا تجربه کاربری پویا تری ایجاد شود. این تنظیمات شامل دو دسته اصلی هستند: انیمیشن‌های ورودی که نحوه ظاهر شدن آیکون در صفحه را هنگام اسکرول کاربر مشخص می‌ کنند، و افکت‌های اسکرول که باعث می‌ شوند آیکون در حین حرکت کاربر در صفحه مثلاً حرکت عمودی، چرخش، یا تغییر شفافیت واکنش نشان دهد و حرکت کند. این قابلیت‌ها باعث می‌ شوند که آیکون از یک عنصر ثابت به بخشی فعال و تعاملی از طراحی وب‌ سایت تبدیل شود.

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

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

تنظیمات پس زمینه در آیکن وردپرس

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

بخش حاشیه المان آیکن المنتور

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

گزینه ماسک ویجت Icon در المنتور

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

آموزش واکنش‌ گرا در آیکن المنتور

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

بخش ویژگی ها در المان آیکن وردپرس  

مجموعه‌ ای جامع از ویژگی‌ها برای سفارشی‌ سازی دقیق المان‌ های حاوی آیکون وجود دارد که کنترل کاملی بر طرح‌ بندی و جلوه‌ های بصری ارائه می‌ دهند. این ویژگی‌ ها شامل مدیریت فاصله با Margin و Padding، کنترل دقیق موقعیت‌ یابی، افزودن انیمیشن‌ های جذاب از طریق موشن افکت، تغییر شکل هندسی آیکون با ابزار تبدیل، تنظیمات کامل پس‌ زمینه از جمله رنگ و تصویر، اعمال حاشیه‌ ها و شعاع مرزها، استفاده از قابلیت خلاقانه ماسک برای تغییر شکل ظاهری آیکون، و تنظیمات واکنش‌ گرا برای اطمینان از نمایش صحیح در تمام دستگاه‌ها هستند. این ابزارها در کنار هم، قدرت بی‌ نهایتی برای طراحی حرفه‌ ای و منحصر به فرد آیکون‌ ها در اختیار کاربر قرار می‌ دهند.

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

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

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

منابع آیکن در المنتور

المنتور به شما چند گزینه برای انتخاب آیکن می دهد:

کتابخانه داخلی المنتور :

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

Font Awesome :

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

آپلود فایل  SVG :

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

تصویر آیکن :

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

تنظیمات مهم ویجت اIcon در المنتور

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

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

پیشنهاد مطالعه: آموزش کامل بخش تصویر در المنتور

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

آیکن در کارت خدمات

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

آیکن در دکمه ها

وقتی دکمه تماس دارید، کنار متن دکمه یک آیکن تلفن قرار دهید. این کار باعث می شود کاربر سریع تر متوجه عملکرد دکمه شود.

آیکن در لیست ویژگی ها

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

آیکن در بخش تماس با ما

در قسمت پایین سایت می توانید آیکن تلفن، ایمیل و آدرس را به همراه اطلاعات متنی قرار دهید تا کاربر سریع تر مسیر ارتباطی را پیدا کند.

نکات مهم برای سئو و دسترسی

آیکن ها مستقیما روی سئو سایت تاثیر ندارند اما تجربه کاربری را بهتر می کنند و همین موضوع باعث افزایش زمان حضور کاربر در سایت می شود.

اگر از SVG استفاده می کنید، فایل را بهینه کنید تا حجم اضافه نداشته باشد.

اگر آیکن صرفا تزئینی است، باید aria-hidden داشته باشد تا توسط اسکرین ریدر خوانده نشود.

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

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

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

جمع بندی نهایی

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