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

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

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

• فونت‌هایی مثل B Titr برای تیترها و عناوین استفاده می‌شوند تا توجه کاربر را جلب کنند.

• در عین حال، فونت‌های ساده‌تر برای متن‌های طولانی مناسب‌ترند چون چشم را خسته نمی‌کنند.

نکته مهم این است که فونت فقط ظاهر متن را تغییر نمی‌دهد، بلکه می‌تواند شخصیت برند شما را به مخاطب منتقل کند.

چند فونت در سایت استفاده کنیم؟

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

پیشنهاد حرفه‌ای:

• حداقل ۱ فونت اصلی برای متن‌ها

• حداکثر ۳ فونت مختلف برای کل سایت (متن، عناوین و بخش‌های خاص)

به این ترتیب هم تنوع دارید، هم سایتتان سبک و سریع باقی می‌ماند.

مراحل اضافه کردن فونت دلخواه به المنتور

مرحله ۱: تبدیل فونت به فرمت وب

فونت‌هایی که روی کامپیوتر استفاده می‌کنید معمولاً برای وب آماده نیستند. پس باید ابتدا آن‌ها را به فرمت مخصوص وب (مانند WOFF یا WOFF2) تبدیل کنید.

• وارد سایت OnlineFontConverter.com شوید.

• فایل فونت خود (ttf یا otf) را در سایت آپلود کنید.

• پسوند مناسب (مثل WOFF) را انتخاب کنید.

• روی گزینه Save your font کلیک کنید و بعد فایل زیپ‌شده را دانلود کنید.

• فایل زیپ را Extract کنید تا نسخه‌های مختلف فونت آماده شود.

مرحله ۲: ورود به تنظیمات المنتور

• به پیشخوان وردپرس بروید.

• از منوی المنتور، بخش فونت سفارشی (Custom Fonts) را انتخاب کنید.

• روی افزودن فونت جدید (Add New Font) کلیک کنید.

مرحله ۳: بارگذاری فونت در المنتور

• یک نام برای فونت وارد کنید (مثلاً "IranSans").

• در بخش وزن و استایل (Weight & Style) گزینه‌های مختلف را تنظیم کنید (Bold، Regular، Italic و …).

• فایل‌های فونت با پسوندهای مختلف (WOFF، TTF، SVG و …) را بارگذاری کنید.

• تغییرات را ذخیره کنید.

مرحله ۴: استفاده از فونت در طراحی صفحات

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

نکات حرفه‌ای در انتخاب و استفاده از فونت

• از فونت‌های فارسی استاندارد مثل ایران یکان، ایران سنس و وزیر برای متن‌ها استفاده کنید.

• برای تیترها بهتر است فونت‌هایی مثل B Titr یا شبنم بولد به کار ببرید.

• همیشه نمایش فونت را در موبایل و دسکتاپ تست کنید.

• ترکیب فونت‌های ساده و خوانا با فونت‌های جذاب در عناوین، بهترین نتیجه را می‌دهد.

جمع‌بندی

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

پس فراموش نکنید:

• از فونت‌های زیاد استفاده نکنید.

• فونت‌ها را به فرمت وب تبدیل کنید.

• همیشه عملکرد سایت را بعد از بارگذاری فونت‌ها بررسی کنید.

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

منبع : https://ofoghweb.com/insert-custom-fonts-elemntor/

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

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

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

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

اهمیت آیکون‌ها در طراحی سایت

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

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

1. افزایش جذابیت سایت: آیکون‌های زیبا باعث می‌شوند سایت شما حرفه‌ای‌تر و کاربرپسندتر دیده شود.

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

3. یادآوری و برندینگ: آیکون‌ها به کاربران کمک می‌کنند برند شما را راحت‌تر به خاطر بسپارند.

4. افزایش نرخ کلیک: دکمه‌ها و لینک‌هایی که همراه با آیکون هستند معمولاً توجه بیشتری جلب کرده و کلیک بیشتری دریافت می‌کنند.

5. تمایز از رقبا: یک مجموعه آیکون اختصاصی می‌تواند سایت شما را در میان رقبا متمایز کند.

ویژگی‌های یک آیکون خوب

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

• سادگی: آیکون باید ساده باشد تا در اولین نگاه مفهوم خود را منتقل کند.

• هماهنگی: سبک طراحی آیکون‌ها باید با طراحی کلی سایت هماهنگ باشد.

• سایزبندی مناسب: آیکون‌ها در اندازه‌های مختلف (موبایل، دسکتاپ) باید واضح باشند.

• رنگ‌بندی هوشمندانه: رنگ آیکون باید با رنگ سازمانی و طراحی سایت هماهنگ شود.

• تعامل‌پذیری: آیکون‌ها باید کاربران را به سمت تعامل (کلیک یا لمس) هدایت کنند.

نحوه درج آیکون در المنتور

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

1. یک بخش جدید (Section) در صفحه ایجاد کنید.

2. ویجت Icon یا Icon Box را از پنل المنتور بکشید و در بخش موردنظر رها کنید.

3. در پنل تنظیمات آیکون، می‌توانید از میان آیکون‌های پیش‌فرض المنتور، گزینه دلخواه خود را انتخاب کنید.

4. اندازه، رنگ، افکت هاور و موقعیت آیکون را مطابق نیاز تنظیم نمایید.

5. تغییرات را ذخیره کنید.

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

آشنایی با Fontello

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

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

نحوه ساخت و درج آیکون سفارشی با Fontello

مرحله ۱: ورود به سایت

به آدرس fontello.com بروید. محیط کاربری ساده‌ای مشاهده خواهید کرد.

مرحله ۲: انتخاب آیکون‌ها

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

مرحله ۳: آپلود آیکون‌های اختصاصی

اگر فایل SVG اختصاصی دارید، می‌توانید آن را در Fontello آپلود کنید تا در کنار سایر آیکون‌ها قرار گیرد.

مرحله ۴: ساخت مجموعه آیکون

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

مرحله ۵: استفاده در وردپرس و المنتور

• فایل ZIP دانلودی را استخراج کنید.

• پوشه فونت‌ها و فایل CSS را در سایت خود بارگذاری کنید.

• فایل CSS را در قالب یا از طریق افزونه‌های مدیریت فونت آیکون (مثل Custom Icons for Elementor) فراخوانی کنید.

• حالا می‌توانید آیکون‌های Fontello را درست مثل آیکون‌های پیش‌فرض المنتور استفاده کنید.

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

• همیشه آیکون‌ها را تست کنید تا در موبایل و تبلت درست نمایش داده شوند.

• از آیکون‌های زیاد و شلوغی پرهیز کنید؛ سادگی و نظم کلید موفقیت است.

• اگر برند شما رنگ سازمانی مشخصی دارد، حتماً رنگ آیکون‌ها را با آن هماهنگ کنید.

• از افکت‌های هاور (Hover) در المنتور استفاده کنید تا آیکون‌ها جذاب‌تر شوند.

جمع‌بندی

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

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

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

منبع : https://ofoghweb.com/learn-how-to-insert-the-desired-icon-in-the-menu-introduce-the-fontello-site/

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

سلام به همه‌ی علاقه‌مندان المنتور!

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

در این مقاله قصد داریم به صورت کامل بررسی کنیم:

• اهمیت آیکون‌ها در طراحی وب‌سایت

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

• معرفی سایت IcoMoon و امکانات آن

• آموزش مرحله به مرحله ساخت مجموعه آیکون اختصاصی با IcoMoon

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

• نکات حرفه‌ای برای استفاده بهینه از آیکون‌ها در طراحی سایت

اهمیت آیکون‌ها در طراحی سایت

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

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

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

• زیبایی بصری: آیکون‌ها ظاهر سایت را از یکنواختی خارج کرده و جذابیت بیشتری به صفحات می‌بخشند.

• بهبود تجربه کاربری (UX): با استفاده از آیکون‌ها مسیر دسترسی کاربران به بخش‌های مختلف ساده‌تر می‌شود.

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

• افزایش تعامل و نرخ کلیک: دکمه‌ها و لینک‌هایی که همراه با آیکون هستند، نرخ کلیک بالاتری نسبت به متن ساده دارند.

نحوه درج آیکون در المنتور

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

1. یک بخش (Section) جدید در صفحه ایجاد کنید.

2. ویجت آیکون (Icon Widget) را بکشید و در بخش موردنظر رها کنید.

3. در پنل تنظیمات، از بین آیکون‌های آماده المنتور گزینه‌ی دلخواه را انتخاب نمایید.

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

5. تغییرات را ذخیره کنید.

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

معرفی IcoMoon

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

• آیکون‌های دلخواه را از کتابخانه‌های آماده انتخاب کنید.

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

• یک مجموعه شخصی‌سازی شده بسازید.

• خروجی آیکون‌ها را به صورت فونت (Icon Font) یا SVG دانلود کنید.

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

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

مرحله ۱: ورود به سایت

• وارد icomoon.io شوید.

• از منوی سمت راست، روی IcoMoon App کلیک کنید تا وارد محیط کاربری شوید.

مرحله ۲: افزودن آیکون‌ها

• روی گزینه Add Icons From Library… کلیک کنید.

• از میان کتابخانه‌های موجود، آیکون‌های رایگان را انتخاب نمایید (توجه: برخی آیکون‌ها پولی هستند).

• در صورت نیاز می‌توانید آیکون‌های اختصاصی خود را به صورت فایل SVG آپلود کنید.

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

• بعد از افزودن، روی آیکون‌های دلخواه کلیک کنید تا انتخاب شوند.

• در پایین صفحه و بخش Selection تعداد آیکون‌های انتخابی نمایش داده می‌شود.

مرحله ۴: ساخت مجموعه آیکون

• روی گزینه Generate Font کلیک کنید.

• در صفحه جدید می‌توانید:

  • نام مجموعه آیکون‌ها را تغییر دهید.

  • پیشوند CSS اختصاصی تعریف کنید.

  • ترتیب آیکون‌ها را تغییر دهید.

مرحله ۵: دانلود آیکون‌ها

• در نهایت روی دکمه Download کلیک کنید.

• یک فایل زیپ شامل فونت آیکون، CSS و نمونه کد HTML دانلود خواهد شد.

روش‌های افزودن آیکون‌های IcoMoon به وردپرس

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

۱. استفاده از افزونه‌های مدیریت فونت آیکون

افزونه‌هایی مثل Custom Icons for Elementor یا Elementor Custom Icon Library به شما امکان می‌دهند فایل زیپ IcoMoon را بارگذاری کنید و مستقیماً در المنتور به آیکون‌ها دسترسی داشته باشید.

۲. آپلود دستی در قالب یا چایلد تم

• فایل زیپ IcoMoon را استخراج کنید.

• پوشه فونت‌ها را در قالب یا چایلد تم آپلود کنید.

• فایل CSS مربوط به آیکون‌ها را در فایل functions.php یا style.css فراخوانی کنید.

• حالا می‌توانید با استفاده از کلاس‌های CSS آیکون‌ها را در المنتور یا هر جای سایت استفاده نمایید.

۳. استفاده از فایل‌های SVG

IcoMoon به شما امکان می‌دهد آیکون‌ها را به صورت SVG نیز دانلود کنید. این فایل‌ها سبک و باکیفیت هستند و می‌توانید آن‌ها را مستقیماً در المنتور بارگذاری و درج کنید.

نکات حرفه‌ای برای استفاده از آیکون‌ها

• سادگی را حفظ کنید: استفاده بیش از حد از آیکون‌ها می‌تواند باعث شلوغی سایت شود.

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

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

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

جمع‌بندی

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

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

 

منبع : https://ofoghweb.com/insert-the-desired-icon-in-the-menu-from-the-icomoon-site

چگونه در المنتور آیکون اضافه کنیم؟ (با معرفی سایت Fontastic)

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

1. استفاده از آیکون‌های آماده و/یا SVG در خودِ المنتور،

2. ساخت و درج آیکون‌های سفارشی با Fontastic و به‌کارگیری آن‌ها در صفحات.

چرا آیکون‌ها مهم‌اند؟

• درک سریع پیام: آیکون زبان مشترک بصری است؛ کاربر بدون خواندن متن، عملکرد را تشخیص می‌دهد (جستجو، سبد خرید، تماس و…).

• بهبود تجربه کاربری (UX): پیمایش و یافتن اطلاعات را کوتاه‌تر و واضح‌تر می‌کند.

• زیبایی و نظم بصری: متن‌های طولانی را تکه‌تکه و خواناتر می‌کند؛ دکمه‌ها و بخش‌ها را جذاب‌تر می‌سازد.

• کمک غیرمستقیم به سئو: وقتی UX بهتر شود، ماندگاری کاربر افزایش و نرخ پرش کاهش می‌یابد.

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

روش ۱: استفاده از آیکون‌های آماده و/یا SVG در المنتور

• Icon Widget: ویجت «آیکون» را در صفحه بگذارید و از کتابخانه پیش‌فرض انتخاب کنید.

• آپلود SVG (ایمن): اگر می‌خواهید آیکون اختصاصی داشته باشید، می‌توانید فایل‌های SVG را (با رعایت نکات امنیتی) اضافه کنید و از همان ویجت استفاده نمایید.

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

روش ۲: ساخت مجموعه آیکون سفارشی با Fontastic

این روش برای زمانی است که می‌خواهید هویت بصری یکپارچه داشته باشید (مثلاً آیکون‌های برند). خروجی Fontastic معمولاً یک فونت آیکون + فایل CSS است که می‌توان آن را در وردپرس/المنتور بارگذاری و استفاده کرد.

آموزش گام‌به‌گام: درج آیکون سفارشی در المنتور با Fontastic

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

1. وارد سایت Fontastic شوید و یک حساب کاربری بسازید.

2. از میان مجموعه‌ها، آیکون‌های مدنظر را انتخاب کنید.

3. هر زمان لازم بود، از گزینه Add More Icons آیکون‌های بیشتری بیفزایید.

مرحله ۲: شخصی‌سازی مجموعه (Modify Font)

1. به تب Modify Font بروید.

2. برای مجموعه یک نام بگذارید (مثلاً brand-icons).

3. یک پیشوند CSS تعریف کنید (مثلاً bi-) تا کلاس‌های شما نظم داشته باشد: bi-home, bi-phone و… .

4. ذخیره کنید (Save).

مرحله ۳: خروجی و دانلود

1. به تب Publish بروید.

2. روی Download کلیک کنید تا یک بسته فشرده دریافت کنید.
   این بسته معمولاً شامل:

   • فایل‌های فونت (.woff, .woff2, گاهی .ttf/.eot/.svg)

   • یک فایل CSS برای نگاشت نام کلاس‌ها به گلیف‌ها

مرحله ۴: بارگذاری فایل‌ها در وردپرس

سه راه رایج برای در دسترس قرار دادن فایل‌های فونت و CSS:

راه A – سفارشی‌ساز (Additional CSS) + آپلود فونت‌ها در رسانه/هاست

• فونت‌ها را در یک پوشه‌ی منظم (مثلاً /wp-content/uploads/icons/fontastic/) آپلود کنید.

• مسیرها را در @font-face داخل CSS به همان پوشه اشاره دهید و CSS را در نمایش > سفارشی‌سازی > CSS اضافی قرار دهید.

راه B – افزونه‌های مدیریت CSS/کد

• از یک افزونه معتبر «مدیریت کد/CSS» استفاده کنید.

• فایل CSS خروجی Fontastic را در آن افزونه ثبت یا محتوا را کپی کنید و مسیر فونت‌ها را درست کنید.

راه C – چایلد تم (Child Theme)

• فایل‌های فونت را داخل پوشه‌ای مثل /child-theme/assets/fonts/fontastic/ بگذارید.

• CSS را در پوشه‌ی استایل‌های چایلد تم قرار دهید و با enqueue کردن، در فرانت‌اند لود کنید.

نکته: فرمت WOFF2 را در اولویت بگذارید (سبک‌تر و سریع‌تر). WOFF را به عنوان پشتیبان نگه دارید.

 

در اکثر خروجی‌های Fontastic، فایل CSS آماده‌ی نگاشت کلاس‌ها به content همراه بسته دانلود می‌شود. کافی‌ست همان فایل را درج/لود کنید و مسیر فونت‌ها را تنظیم نمایید.

بهترین پرکتیک‌ها (Best Practices)

عملکرد و سرعت

• WOFF2 را اولویت دهید؛ اندازه کم و سرعت لود بالا.

• اگر مجموعه بزرگی دارید، فقط گلیف‌های لازم را نگه دارید (subsetting) تا وزن فونت کاهش یابد.

• از preload برای فایل‌های حیاتی محتاطانه استفاده کنید؛ فقط اگر آیکون‌ها در Above-the-fold واقعاً لازم‌اند.

طراحی و ثبات برند

• یک سبک بصری یکپارچه برای آیکون‌ها انتخاب کنید (ضخامت خط، گوشه‌ها، نسبت‌ها).

• اندازه، فاصله و رنگ آیکون‌ها را در کل سایت یکسان نگه دارید (Design System کوچک برای آیکون‌ها بسازید).

دسترس‌پذیری

• اگر آیکون صرفاً تزئینی است: aria-hidden="true" را اضافه کنید تا توسط صفحه‌خوان‌ها نادیده گرفته شود.

• اگر آیکون نقش معنایی دارد: متن جایگزین قابل‌دسترسی بگذارید (label مجاور یا متن پنهان).

نگهداری و مقیاس‌پذیری

• کلاس‌ها را با پیشوند مشخص (مثل bi-) تعریف کنید تا برخورد نام‌ها کمتر شود.

• مسیر فایل‌ها و نام فونت را مستند کنید تا در بروزرسانی قالب/هاست به‌هم نریزد.

مقایسه روش‌ها

ویژگی/روش	آیکون‌های آماده/آپلود SVG در المنتور	Fontastic (فونت آیکون سفارشی)
سرعت شروع کار	بسیار سریع	متوسط (نیاز به یک‌بار تنظیم)
یکنواختی بصری در مقیاس بزرگ	متوسط	بالا
کنترل کامل روی نام‌گذاری کلاس‌ها	محدود	عالی
عملکرد و بهینه‌سازی وزن	خوب با SVGهای سبک	بسیار خوب با WOFF2 + Subset
سادگی استفاده برای مبتدی‌ها	بسیار ساده	کمی فنی‌تر
وابستگی به کد/CSS	کم تا متوسط	متوسط تا زیاد

رفع اشکال (Troubleshooting)

مشکل رایج	دلیل احتمالی	راه حل کوتاه
آیکون به‌جای شکل، مربع/جعبه خالی است	فونت لود نشده یا مسیر اشتباه است	مسیر فونت‌ها در CSS را تصحیح کنید؛ کش مرورگر/کش سایت را خالی کنید.
آیکون نمایش می‌شود اما به‌هم‌ریخته است	تعارض CSS یا فونت اشتباه	font-family را روی کلاس آیکون‌ها !important کنید.
آیکون‌ها دیر ظاهر می‌شوند	فونت سنگین/بدون کش	از WOFF2 و کش مرورگر استفاده کنید؛ در صورت لزوم subset بسازید.
آیکون با متن تراز نیست	line-height یا vertical-align نامناسب	برای آیکون line-height:1 و vertical-align:middle بگذارید.

پرسش‌های پرتکرار

آیا می‌توانم آیکون Fontastic را در «Icon Widget» المنتور ببینم؟
به‌صورت پیش‌فرض کتابخانه آیکون المنتور Font Awesome است. آیکون‌های Fontastic به‌عنوان فونت کلاس‌محور اضافه می‌شوند؛ بنابراین ساده‌ترین استفاده از آن‌ها در ویجت HTML یا با کلاس سفارشی + CSS است.

SVG بهتر است یا فونت آیکون؟
برای آیکون‌های تک/کم‌تعداد و نیاز به کنترل دقیق (رنگ، انیمیشن)، SVG عالی است. برای مجموعه‌های بزرگ و یکپارچه، فونت آیکون با WOFF2 و Subset کارآمدتر است.

با بروزرسانی قالب/افزونه، آیکون‌ها می‌پرند؟
اگر مسیرها را در پوشه‌ای مستقل (مثل uploads/icons/) نگه دارید و CSS را در جایی پایدار ثبت کنید، مشکلی پیش نمی‌آید. مستندسازی مسیرها فراموش نشود.

جمع‌بندی

• اگر سرعت و سادگی می‌خواهید، از کتابخانه پیش‌فرض المنتور + SVG‌های ایمن استفاده کنید.

• اگر هویت برند و یکنواختی در مقیاس بزرگ برایتان مهم است، مجموعه‌ی Fontastic بسازید: فونت‌های WOFF2 را لود کنید، کلاس‌ها را با پیشوند منظم تعریف کنید و از طریق HTML/کلاس‌های سفارشی در المنتور به‌کار بگیرید.

• با رعایت اصول عملکرد، دسترس‌پذیری و یکپارچگی بصری، آیکون‌ها به‌جای یک تزئین ساده، به ابزاری راهبردی برای UX و برند شما تبدیل می‌شوند.

منبع : https://ofoghweb.com/insert-the-icon-in-the-menu-introduce-the-fontastic-site/ 

تنظیم نمایش ستون‌ها در موبایل و تبلت با المنتور

امروزه بیشتر کاربران اینترنت از طریق موبایل به وب‌سایت‌ها سر می‌زنند. بنابراین طراحی واکنش‌گرا (Responsive Design) یکی از ضروری‌ترین بخش‌های طراحی سایت است. در المنتور یکی از مهم‌ترین قابلیت‌ها برای رسیدن به یک طراحی کاربرپسند، تنظیم و مخفی‌سازی ستون‌ها در موبایل و تبلت است.

چرا تنظیم ستون‌ها در موبایل اهمیت دارد؟

وقتی ستونی که برای دسکتاپ طراحی شده، بدون تغییر در موبایل نمایش داده شود، اغلب مشکلات زیر پیش می‌آید:

• نامرتب و شلوغ شدن ظاهر صفحه

• اسکرول طولانی و خسته‌کننده برای کاربر

• کاهش سرعت بارگذاری به دلیل عناصر اضافی

• از بین رفتن تجربه کاربری (UX)

اما اگر ستون‌ها به‌درستی تنظیم یا مخفی شوند:

• صفحه ساده‌تر و منظم‌تر خواهد بود.

• کاربر سریع‌تر به محتوای اصلی دسترسی پیدا می‌کند.

• طراحی سایت حرفه‌ای‌تر به نظر می‌رسد.

• نرخ پرش کاهش یافته و ماندگاری کاربران بیشتر می‌شود.

چه زمانی باید ستون‌ها را در موبایل مخفی کنیم؟

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

• تبلیغات یا بنرهای اضافی که در موبایل فضای زیادی اشغال می‌کنند.

• اسلایدرها و ویدئوهای سنگین که سرعت بارگذاری را کاهش می‌دهند.

• بخش‌های تزیینی یا محتوای کم‌اهمیت که نقش کلیدی در انتقال پیام سایت ندارند.

• زمانی که می‌خواهید نسخه‌ای اختصاصی از یک صفحه برای موبایل طراحی کنید.

مراحل تنظیم ستون‌ها در موبایل با المنتور

بیایید قدم‌به‌قدم تنظیمات لازم را بررسی کنیم:

۱. ایجاد نسخه‌های جداگانه برای موبایل و دسکتاپ

ابتدا بخش یا ستونی که قصد دارید تغییر دهید را کپی کنید.
به این ترتیب، دو نسخه در اختیار دارید:

• نسخه مخصوص نمایش در موبایل

• نسخه مخصوص نمایش در دسکتاپ و تبلت

۲. تنظیم ستون مخصوص موبایل

• روی ستون موردنظر کلیک کنید.

• به بخش پیشرفته (Advanced) بروید.

• وارد قسمت واکنش‌گرا (Responsive) شوید.

• گزینه مخفی‌سازی در دسکتاپ و مخفی‌سازی در تبلت را فعال کنید.

• حالا این ستون فقط در موبایل نمایش داده خواهد شد.

۳. تنظیم ستون مخصوص دسکتاپ و تبلت

• ستون نسخه دوم را انتخاب کنید.

• دوباره به بخش پیشرفته > واکنش‌گرا بروید.

• این بار گزینه مخفی‌سازی در موبایل را فعال کنید.

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

نکات کلیدی برای ستون‌بندی واکنش‌گرا

• همیشه نتیجه را در حالت پیش‌نمایش بررسی کنید. المنتور امکان نمایش سایت در حالت موبایل، تبلت و دسکتاپ را دارد.

• محتوا را خلاصه و هدفمند کنید. کاربران موبایل به دنبال اطلاعات سریع و مستقیم هستند.

• به سرعت بارگذاری اهمیت بدهید. هرچه صفحه سبک‌تر باشد، تجربه کاربری بهتر خواهد بود.

• طراحی ساده را ترجیح دهید. در موبایل، وضوح و دسترسی مهم‌تر از جلوه‌های بصری پیچیده است.

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

مقایسه طراحی سایت با و بدون تنظیم ستون‌ها

ویژگی‌ها	بدون تنظیم ستون‌ها در موبایل	با تنظیم ستون‌ها در موبایل
ظاهر صفحه	شلوغ و به‌هم‌ریخته	منظم و کاربرپسند
سرعت بارگذاری	پایین‌تر	سریع‌تر
تجربه کاربری (UX)	ضعیف	بهینه و جذاب
نرخ پرش (Bounce Rate)	بالا	پایین
تأثیر روی سئو	منفی	مثبت

ارتباط تنظیم ستون‌ها با سئو

از آنجا که گوگل Mobile-First Indexing را ملاک رتبه‌بندی قرار داده، نسخه موبایل سایت اهمیت بیشتری دارد.
بنابراین:

• اگر سایت شما در موبایل مرتب و بهینه باشد → رتبه بهتری کسب می‌کند.

• اگر شلوغ و کند باشد → کاربران سریع خارج می‌شوند و سیگنال منفی به گوگل ارسال می‌شود.

ستون‌بندی درست یکی از عوامل کلیدی در این روند است.

جمع‌بندی

تنظیم ستون‌ها در موبایل با المنتور نه‌تنها ظاهر سایت را زیباتر می‌کند، بلکه تجربه کاربری را ارتقا داده و بر سئو تأثیر مستقیم دارد.
با کمی دقت و استفاده از قابلیت مخفی‌سازی ستون‌ها در المنتور می‌توانید:

• نسخه‌ای اختصاصی و سبک برای موبایل طراحی کنید،

• سرعت بارگذاری را افزایش دهید،

• و رضایت کاربران را به دست آورید.

به یاد داشته باشید، امروزه بیش از ۷۰٪ بازدیدکنندگان سایت‌ها از طریق موبایل وارد می‌شوند. پس اگر به فکر موفقیت سایتتان هستید، ستون‌بندی موبایل را جدی بگیرید.

منبع : https://ofoghweb.com/elemntor-hide-columns-in-mobile-devices/

ستون‌بندی در المنتور چیست و چطور باید تنظیم شود؟

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

ستون‌بندی چیست و چه اهمیتی دارد؟

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

• متن‌ها و تصاویر در جای مناسب قرار بگیرند.

• کاربر بتواند راحت‌تر به اطلاعات مورد نیازش دسترسی داشته باشد.

• ظاهر سایت حرفه‌ای‌تر و شکیل‌تر دیده شود.

• محتوا بر اساس اهمیت، دسته‌بندی و مرتب شود.

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

مزایای ستون‌بندی در المنتور

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

• ظاهر زیباتر و جذاب‌تر سایت

• دسترسی آسان‌تر به بخش‌های مختلف

• افزایش نظم و ساختار محتوا

• جلب اعتماد کاربران از طریق طراحی حرفه‌ای

• افزایش تعامل و کاهش نرخ خروج کاربران (Bounce Rate)

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

روش‌های ستون‌بندی در سایت

برای ایجاد ستون در وردپرس و المنتور، دو راه اصلی وجود دارد:

۱. ستون‌بندی به‌صورت دستی

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

۲. ستون‌بندی با افزونه‌های جانبی

گاهی برای داشتن انعطاف بیشتر و ظاهر حرفه‌ای‌تر می‌توانید از افزونه‌های کمکی استفاده کنید. یکی از بهترین افزونه‌ها در این زمینه Lightweight Grid Columns است.
این افزونه امکان ساخت ستون‌های متنوع و نمایش ابزارک‌های وردپرس در قالب ستونی را فراهم می‌کند.

آموزش مرحله به مرحله تنظیم ستون‌ها در المنتور

حالا به بخش اصلی این جلسه می‌رسیم: نحوه تنظیم ستون‌ها در المنتور.

مرحله ۱: ایجاد یا انتخاب ستون

• ابتدا یک ستون جدید بسازید.

• یا اگر ستون آماده‌ای در صفحه دارید، روی آن کلیک کنید.

مرحله ۲: ورود به تنظیمات ستون

• وقتی روی ستون کلیک کنید، تنظیمات آن در پنل سمت چپ المنتور ظاهر می‌شود.

• وارد بخش طرح‌بندی (Layout) شوید.

مرحله ۳: تنظیم تراز عمودی

در بخش طرح‌بندی گزینه‌ای به نام Vertical Align (تراز عمودی) وجود دارد. این گزینه نحوه قرارگیری محتوا در ستون را مشخص می‌کند.

حالت‌های مختلف این گزینه عبارت‌اند از:

• Default (پیش‌فرض): ستون طبق تنظیمات قالب نمایش داده می‌شود.

• Top (بالا): محتوا در بالای ستون قرار می‌گیرد.

• Middle (وسط): محتوا دقیقاً در مرکز ستون نمایش داده می‌شود.

• Bottom (پایین): محتوا در انتهای ستون قرار دارد.

• Space Around (فضای اطراف): فضای خالی متعادلی در اطراف محتوا ایجاد می‌شود.

• Space Evenly (فضای یکنواخت): فاصله‌ها به‌صورت مساوی از بالا و پایین تقسیم می‌شوند.

• Space Between (فاصله بینابینی): محتوا در ابتدا و انتهای ستون قرار می‌گیرد و بین آن‌ها فاصله متعادل ایجاد می‌شود.

مرحله ۴: انتخاب حالت مناسب

برای یافتن بهترین حالت، همه گزینه‌ها را امتحان کنید.

• اگر می‌خواهید فاصله یکنواختی در بالا و پایین ایجاد شود، حالت Space Evenly بهترین انتخاب است.

• اگر می‌خواهید محتوا ظاهر حرفه‌ای‌تری داشته باشد، معمولاً Space Between مناسب‌تر است.

نکات حرفه‌ای در ستون‌بندی المنتور

برای اینکه ستون‌بندی شما بهترین نتیجه را داشته باشد، به این نکات توجه کنید:

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

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

• از رنگ‌بندی مناسب استفاده کنید. می‌توانید برای هر ستون پس‌زمینه متفاوتی تعریف کنید تا ظاهر جذاب‌تری داشته باشد.

• فاصله‌ها (Margin & Padding) را درست تنظیم کنید. فاصله مناسب میان عناصر باعث خوانایی بهتر محتوا می‌شود.

مقایسه ستون‌بندی دستی و افزونه‌های جانبی

ویژگی‌ها	ستون‌بندی دستی	ستون‌بندی با افزونه
میزان کنترل	بسیار زیاد	متوسط
امکانات ظاهری	محدود به المنتور	گسترده‌تر
نیاز به نصب افزونه	ندارد	دارد
مناسب برای	پروژه‌های ساده و شخصی	پروژه‌های حرفه‌ای

چرا باید ستون‌بندی را جدی بگیرید؟

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

• سایت شما حرفه‌ای‌تر دیده شود.

• کاربران راحت‌تر به هدفشان برسند.

• زمان حضور کاربر در سایت افزایش یابد.

• گوگل هم ساختار محتوای شما را بهتر درک کند که به بهبود سئو کمک خواهد کرد.

جمع‌بندی

ستون‌ها در المنتور نقش مهمی در نظم‌دهی و زیباسازی صفحات ایفا می‌کنند. با استفاده از تنظیمات داخلی المنتور می‌توانید ستون‌ها را به‌راحتی بسازید و مدیریت کنید. اگر نیاز به امکانات بیشتری داشتید، افزونه‌هایی مانند Lightweight Grid Columns گزینه مناسبی هستند.

یادتان باشد که ستون‌بندی یک مهارت کلیدی در طراحی سایت است و توجه به آن می‌تواند تجربه کاربری سایت شما را به‌طور چشمگیری بهبود دهد.

 

منبع : https://ofoghweb.com/arrange-the-columns-in-the-menu/

آموزش کامل افزونه المنتور؛ از صفر تا طراحی حرفه‌ای

تصور کنید قرار است یک وب‌سایت شخصی یا فروشگاهی بسازید. شاید اولین فکری که به ذهن‌تان برسد این باشد: «من که کدنویسی بلد نیستم، پس چطور باید این کار را انجام بدهم؟»
اینجاست که افزونه المنتور (Elementor) وارد میدان می‌شود؛ ابزاری که به شما کمک می‌کند بدون نوشتن حتی یک خط کد، سایت دلخواه‌تان را بسازید.

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

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

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

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

2. امکانات متنوع: ابزارک‌ها و قابلیت‌های فراوان برای طراحی هر نوع وب‌سایت.

3. سرعت بالا: طراحی‌ها سبک و بهینه هستند و سرعت سایت را کاهش نمی‌دهند.

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

چرا المنتور محبوب‌ترین صفحه‌ساز وردپرس است؟

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

• رابط کاربری آسان و قابل فهم.

• قابلیت کشیدن و رها کردن عناصر (Drag & Drop).

• پیش‌نمایش زنده تغییرات.

• هماهنگی کامل با اکثر قالب‌ها و افزونه‌های وردپرسی.

• پشتیبانی از طراحی واکنش‌گرا (Responsive).

شروع کار با المنتور؛ نصب و فعال‌سازی

برای اینکه اولین پروژه خود را با المنتور شروع کنید، کافی است این مراحل را طی کنید:

1. وارد پیشخوان وردپرس شوید.

2. از منوی افزونه‌ها > افزودن، نام Elementor را جست‌وجو کنید.

3. روی دکمه نصب و سپس فعال‌سازی کلیک کنید.

4. پس از نصب، گزینه المنتور به پیشخوان اضافه می‌شود.

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

تنظیمات المنتور؛ اولین قدم حرفه‌ای شدن

بعد از نصب، سه بخش اصلی تنظیمات در دسترس شماست:

تنظیمات کلی

• انتخاب نوع نوشته‌هایی که با المنتور ویرایش می‌شوند.

• غیرفعال کردن رنگ‌ها و فونت‌های پیش‌فرض.

• ارسال داده‌ها به تیم توسعه المنتور (اختیاری).

تنظیمات استایل

• تعیین فونت پیش‌فرض.

• تنظیم عرض محتوای اصلی و فاصله بین ابزارک‌ها.

• مشخص کردن نقاط شکست (Breakpoint) برای نمایش در موبایل و تبلت.

• فعال‌سازی لایت‌باکس برای تصاویر.

تنظیمات پیشرفته

• انتخاب روش بارگذاری CSS (درونی یا خارجی).

• امکان آپلود فایل‌های SVG.

• تعیین دسترسی نقش‌های کاربری.

• فعال‌سازی فونت‌ها و آیکن‌های سفارشی.

طراحی اولین صفحه با المنتور

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

1. به بخش برگه‌ها > افزودن برگه بروید.

2. روی گزینه ویرایش با المنتور کلیک کنید.

3. محیط ویرایشگر المنتور باز می‌شود.

4. از ستون ابزارک‌ها در سمت چپ، المان‌های دلخواه (مثل متن، تصویر، دکمه) را بکشید و روی صفحه قرار دهید.

5. تغییرات خود را ذخیره کنید و پیش‌نمایش بگیرید.

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

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

• پوسته‌ساز (Theme Builder): طراحی کامل هدر، فوتر و سایر بخش‌های قالب.

• پاپ‌آپ‌ساز (Popup Builder): ساخت پاپ‌آپ برای تبلیغات یا جمع‌آوری ایمیل.

• قالب‌های آماده: صدها قالب از پیش طراحی‌شده برای صرفه‌جویی در زمان.

• ابزارک‌های پیشرفته: فرم‌ها، اسلایدرها، شمارش معکوس و …

تفاوت نسخه رایگان و پرمیوم المنتور

المنتور در دو نسخه ارائه می‌شود:

ویژگی‌ها	نسخه رایگان	نسخه پرمیوم (Pro)
ابزارک‌ها	محدود به ابزارک‌های پایه	بیش از ۹۰ ابزارک حرفه‌ای
پوسته‌ساز	ندارد	دارد
پاپ‌آپ‌ساز	ندارد	دارد
قالب‌های آماده	تعداد محدود	صدها قالب متنوع
پشتیبانی	انجمن کاربری	پشتیبانی اختصاصی

مزایای کلیدی المنتور برای سئو و سرعت سایت

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

• کدنویسی تمیز و سبک.

• بارگذاری سریع صفحات.

• طراحی واکنش‌گرا برای نمایش در موبایل و تبلت.

• امکان استفاده از تگ‌های مناسب برای بهبود رتبه در گوگل.

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

برای اینکه بیشترین بهره را از المنتور ببرید، به نکات زیر توجه کنید:

• همیشه از آخرین نسخه استفاده کنید.

• از قالب‌های آماده به عنوان شروع کار بهره ببرید اما آن‌ها را مطابق برند خود تغییر دهید.

• به بهینه‌سازی تصاویر توجه کنید تا سرعت بارگذاری کاهش نیابد.

• در طراحی صفحات، اصول سئو (مانند استفاده درست از تیترها و متا توضیحات) را رعایت کنید.

مقایسه المنتور با سایر صفحه‌سازهای معروف

ویژگی‌ها	المنتور	ویژوال کامپوزر	دیوی بیلدر
رابط کاربری	بسیار ساده	متوسط	خوب
پیش‌نمایش زنده	دارد	ندارد	دارد
سرعت بارگذاری	بالا	متوسط	بالا
امکانات نسخه رایگان	گسترده	محدود	محدود
یادگیری	سریع	کمی دشوار	متوسط

جمع‌بندی؛ چرا المنتور بهترین انتخاب است؟

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

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

منبع : https://ofoghweb.com/mentor-installation-tutorial/