آموزش اضافه کردن آیکون در المنتور [ساده، سریع و حرفه‌ ای]

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

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

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

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

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

• طراحی اختصاصی
• پشتیبانی
• تحویل سریع
• ضمانت

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

روش های اضافه کردن آیکون در المنتور

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

استفاده از آیکون های آماده

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

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

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

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

استفاده از Icon Box

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

• طراحی اختصاصی: توضیح کوتاهی درباره خدمات طراحی.
• پشتیبانی تخصصی: توضیح کوتاهی درباره نحوه ارائه پشتیبانی.
• اجرای سریع: توضیح مختصر درباره فرآیند اجرا.

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

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

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

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

اولین مرحله، پیدا کردن یا طراحی آیکون موردنظر است. می توانید از منابع مختلف آیکون استفاده کنید؛ از جمله:

• Iconmonstr
• Flaticon
• DryIcons
• Icons
• Iconfinder

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

• مجوز استفاده از فایل
• کیفیت طراحی
• هماهنگی سبک آیکون ها با یکدیگر
• امکان تغییر رنگ
• وضوح در اندازه های مختلف
• ساختار مناسب فایل

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

نکته مهم درباره SVG

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

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

پس از آماده کردن فایل ها، وارد پیشخوان وردپرس شوید و بخش مربوط به آیکون های سفارشی Elementor را باز کنید.

1. وارد پیشخوان وردپرس شوید.
2. از مسیر Elementor به بخش آیکون های سفارشی بروید.
3. گزینه افزودن جدید (Add New) را انتخاب کنید.
4. برای مجموعه آیکون یک نام مشخص انتخاب کنید.
5. فایل های آیکون سفارشی را آپلود کنید.
6. پس از تکمیل فرآیند، مجموعه را منتشر کنید.

انتخاب نام مناسب برای مجموعه اهمیت زیادی دارد؛ به خصوص اگر تعداد زیادی آیکون سفارشی در پروژه داشته باشید. بهتر است نام مجموعه به گونه ای باشد که بعداً بتوانید به سادگی تشخیص دهید هر مجموعه برای چه پروژه یا بخشی ساخته شده است. برای مثال، نام هایی مانند Brand Icons، Service Icons، Product Icons و Custom UI Icons از نام های نامشخص و عمومی کاربردی تر هستند.

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

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

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

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

Icon Box یکی از ابزارهای کاربردی برای ساخت بلوک های اطلاعاتی در Elementor است. این ویجت معمولاً آیکون، عنوان و توضیح را در یک ساختار واحد قرار می دهد. به همین دلیل می توان از آن برای موارد مختلفی مانند موارد زیر استفاده کرد:

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

برای مثال، در صفحه یک شرکت خدماتی می توان چهار Icon Box ایجاد کرد:

این ساختار باعث می شود کاربر بدون مطالعه متن های طولانی، ساختار کلی خدمات را سریع تر درک کند.

Icon Box بهتر است چه زمانی استفاده شود؟

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

آموزش کار با Icon Box در المنتور

افزودن ویجت Icon Box

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

تنظیم محتوای Icon Box

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

انتخاب آیکون

آیکون باید با موضوع محتوای همان جعبه ارتباط داشته باشد.

• آیکون قفل → امنیت
• آیکون تلفن → تماس
• آیکون کامیون → ارسال
• آیکون تیک → تأیید یا مزیت
• آیکون چرخ دنده → تنظیمات یا خدمات فنی

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

نوشتن عنوان

عنوان باید کوتاه و مشخص باشد.

به جای:

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

بهتر است بنویسید:

خدمات اختصاصی

سپس مفهوم را در توضیح کوتاه کامل کنید. عنوان قرار نیست همه اطلاعات را منتقل کند؛ وظیفه آن این است که موضوع را سریع مشخص کند.

نوشتن توضیحات

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

افزودن لینک

می توانید برای Icon Box لینک تعریف کنید تا کاربر با کلیک روی آن به صفحه دیگری منتقل شود. این قابلیت برای موارد زیر مفید است:

• لینک به صفحه خدمات
• لینک به صفحه محصول
• لینک به مقاله آموزشی
• لینک به صفحه دسته بندی
• لینک به توضیحات تکمیلی

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

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

موقعیت آیکون نسبت به متن نیز قابل تنظیم است. بسته به طراحی، می توانید آیکون را:

• بالای متن
• کنار متن
• در سمت راست
• در سمت چپ

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

Stacked و Framed در Icon Box چه تفاوتی دارند؟

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

تنظیم تگ HTML عنوان در Icon Box

یکی از تنظیماتی که نباید صرفاً از روی ظاهر انتخاب شود، HTML Tag عنوان است. ممکن است Elementor اجازه دهد عنوان Icon Box را با تگ هایی مانند H2، H3 و H4 نمایش دهید، اما انتخاب این تگ باید بر اساس ساختار معنایی صفحه باشد. برای مثال، اگر عنوان اصلی صفحه با H1 مشخص شده و هر Icon Box بخشی از یک H2 را تشکیل می دهد، استفاده از H3 می تواند منطقی باشد؛ اما این موضوع به ساختار واقعی همان صفحه بستگی دارد.

تنظیمات Style در Icon Box

بعد از تنظیم محتوا، وارد بخش Style شوید. در این قسمت ظاهر Icon Box را تنظیم می کنید.

رنگ آیکون

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

اندازه آیکون

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

تایپوگرافی عنوان و توضیحات

عنوان باید از توضیحات برجسته تر باشد. برای مثال:

• عنوان: وزن فونت بیشتر و اندازه بالاتر
• توضیح: وزن معمولی و اندازه کوچک تر

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

فاصله گذاری

یکی از مهم ترین عوامل در طراحی Icon Box، فاصله مناسب بین عناصر است. به فاصله میان موارد زیر توجه کنید:

• آیکون و عنوان
• عنوان و توضیح
• جعبه و جعبه بعدی
• متن و لبه های داخلی جعبه

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

پس زمینه، Border و گوشه های گرد

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

• پس زمینه پررنگ
• Border ضخیم
• سایه شدید
• گوشه های بسیار گرد
• آیکون بزرگ
• افکت Hover

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

افکت Hover برای Icon Box

افکت Hover زمانی فعال می شود که کاربر نشانگر ماوس را روی عنصر قرار دهد. این افکت می تواند شامل تغییر رنگ، جابه جایی جزئی، تغییر Border یا تغییر پس زمینه باشد. استفاده از Hover می تواند تعامل صفحه را جذاب تر کند، اما باید کنترل شده باشد.

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

مقایسه آیکون ساده و Icon Box

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

چطور چند Icon Box را حرفه ای کنار هم قرار دهیم؟

یکی از رایج ترین کاربردهای Icon Box، ایجاد چند کارت کنار هم است.

برای مثال، یک بخش چهارستونه می تواند شامل چهار ویژگی باشد:

1. کیفیت
2. سرعت
3. پشتیبانی
4. تخصص

اما قرار دادن چهار جعبه کنار هم به تنهایی باعث حرفه ای شدن طراحی نمی شود.

طول عنوان ها را نزدیک به هم نگه دارید

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

توضیحات را هم حجم بنویسید

اگر یک کارت یک خط توضیح و کارت دیگر چهار خط داشته باشد، تراز بصری به هم می ریزد.

ارتفاع کارت ها را کنترل کنید

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

فاصله بین کارت ها را حفظ کنید

کارت هایی که بیش از حد به هم چسبیده اند، مرز بصری مشخصی ندارند.

نسخه موبایل را جداگانه بررسی کنید

چهار ستون دسکتاپ ممکن است در موبایل به یک یا دو ستون تبدیل شود. بنابراین اندازه آیکون، فاصله ها، متن و ترتیب کارت ها باید در صفحه کوچک نیز بررسی شود.

آیکون سفارشی یا آیکون آماده؛ کدام را انتخاب کنیم؟

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

نکات سئو هنگام استفاده از آیکون در المنتور

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

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

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

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

یکی از کاربردهای جالب Icon Box، استفاده از آن برای هدایت کاربر به بخش های مرتبط سایت است. برای مثال، در یک صفحه آموزشی درباره Elementor می توانید چند جعبه ایجاد کنید:

• ساخت جدول در المنتور
• ویجت دکمه در المنتور
• افزودن CSS سفارشی به المنتور
• آموزش فلکس باکس در المنتور

این نوع لینک دهی زمانی ارزشمند است که مقصد واقعاً ادامه منطقی موضوع باشد.

جمع بندی

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

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

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