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

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

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

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

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

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

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

• حداقل از یک فونت اصلی استفاده کنید.

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

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

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

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

فونت‌هایی که روی کامپیوتر استفاده می‌کنیم معمولاً برای وب آماده نیستند. برای این کار:

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

• فونت دلخواه (مثلاً ttf یا otf) را آپلود کنید.

• پسوندهای وب مثل woff یا woff2 را انتخاب کنید.

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

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

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

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

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

۳. بارگذاری و تنظیم فونت

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

• در بخش وزن و استایل (Regular, Bold, Italic و …) گزینه‌های لازم را مشخص کنید.

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

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

۴. استفاده از فونت در طراحی

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

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

• همیشه خوانایی را در اولویت قرار دهید.

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

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

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

جمع‌بندی

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

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

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

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

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

1. انتقال سریع مفهوم: یک تصویر کوچک می‌تواند بهتر از چند خط متن پیام را منتقل کند.

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

3. زیبایی سایت: آیکون‌ها ظاهر سایت شما را از یکنواختی در می‌آورند.

4. یادآوری برند: آیکون‌های خاص به مرور بخشی از هویت برند شما می‌شوند.

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

۱. آیکون تماس و پشتیبانی

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

• شما می‌توانید یک آیکون تلفن یا پیام‌رسان (WhatsApp, Telegram) در گوشه سایت قرار دهید.

• این آیکون‌ها باعث می‌شوند کاربر به سرعت راه ارتباطی را پیدا کند.

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

۲. آیکون‌های شبکه‌های اجتماعی

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

• المنتور ویجت Social Icons را در اختیار شما می‌گذارد.

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

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

۳. آیکون‌های فروشگاهی

اگر سایت فروشگاهی دارید، آیکون‌ها حیاتی هستند:

• سبد خرید (Cart): نشان می‌دهد کاربر چه محصولاتی انتخاب کرده است.

• قلب یا Favorite: برای افزودن محصولات به لیست علاقه‌مندی‌ها.

• کاربر (User): برای ورود یا ثبت‌نام مشتری.

• جستجو (Search): امکان یافتن سریع محصول.

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

۴. آیکون‌های راهنما و دسته‌بندی

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

• مثلا در سایت آموزشی، برای دوره‌های طراحی وب یک آیکون لپ‌تاپ بگذارید.

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

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

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

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

1. یک بخش جدید در صفحه بسازید.

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

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

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

5. لینک مربوطه (مثل شماره تماس یا آدرس شبکه اجتماعی) را وارد کنید.

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

استفاده از آیکون‌های سفارشی (Fontello)

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

1. به Fontello.com بروید.

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

3. روی گزینه Download webfont کلیک کنید.

4. فایل CSS و فونت‌ها را به سایت اضافه کنید.

5. حالا آیکون‌های جدیدتان را می‌توانید مثل آیکون‌های المنتور استفاده کنید.

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

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

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

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

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

جمع‌بندی

آیکون‌ها دیگر فقط المان‌های تزئینی نیستند، بلکه ابزارهای کلیدی برای هدایت کاربر و افزایش نرخ تعامل هستند. المنتور با ابزارهای ساده‌ای مثل Icon و Social Icons این امکان را به شما می‌دهد که آیکون‌های مختلف را در سایت استفاده کنید.

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

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

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

• کاربران بیشتری را جذب کنید.

• و در نهایت یک تجربه کاربری حرفه‌ای‌تر ارائه دهید.

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

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

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

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

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

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

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

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

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

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

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

درج آیکون در المنتور (روش پیش‌فرض)

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

1. یک Section در صفحه بسازید.

2. ویجت Icon را انتخاب کرده و در بخش موردنظر قرار دهید.

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

4. اندازه، رنگ، حالت هاور و تراز آیکون را تغییر دهید.

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

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

IcoMoon چیست و چه کاربردی دارد؟

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

ویژگی‌های اصلی IcoMoon:

• انتخاب از میان هزاران آیکون رایگان و پولی

• امکان آپلود آیکون اختصاصی (SVG)

• خروجی به صورت فونت آیکون یا SVG

• سبک‌سازی مجموعه آیکون‌ها برای سرعت بهتر سایت

• سازگاری کامل با وردپرس و المنتور

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

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

به آدرس icomoon.io بروید. از منوی اصلی گزینه IcoMoon App را انتخاب کنید تا وارد محیط طراحی شوید.

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

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

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

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

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

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

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

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

• پس از انتخاب، روی Generate Font کلیک کنید.

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

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

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

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

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

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

• یک فایل ZIP دانلود می‌شود که شامل:

  • فونت آیکون‌ها (فرمت‌های eot, woff, ttf)

  • فایل CSS مربوط به آن‌ها

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

چطور آیکون‌های IcoMoon را در وردپرس و المنتور استفاده کنیم؟

بعد از دانلود، دو روش اصلی برای استفاده وجود دارد:

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

افزونه‌هایی مثل Custom Icons for Elementor این امکان را می‌دهند تا فایل ZIP دانلودی از IcoMoon را آپلود کنید. سپس آیکون‌ها به کتابخانه المنتور اضافه می‌شوند و می‌توانید مثل آیکون‌های پیش‌فرض از آن‌ها استفاده کنید.

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

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

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

3. فایل CSS را در فایل functions.php یا style.css فراخوانی کنید.

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

روش سوم: استفاده از فایل‌های SVG

اگر خروجی SVG گرفته باشید، کافی است در المنتور ویجت Image یا Icon را انتخاب کرده و فایل SVG را بارگذاری کنید.

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

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

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

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

• ریسپانسیو بودن: مطمئن شوید در نمایشگرهای مختلف (موبایل و تبلت) درست دیده می‌شود.

جمع‌بندی

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

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

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

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

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

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

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

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

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

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

• تاثیر مثبت بر سئو: تجربه کاربری بهتر معمولاً باعث افزایش رتبه در نتایج گوگل می‌شود.

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

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

1. در صفحه‌ای که طراحی می‌کنید یک بخش بسازید.

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

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

4. بعد از تنظیمات دلخواه، صفحه را ذخیره و به‌روزرسانی کنید.

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

درج آیکون سفارشی در المنتور با Fontastic

۱. ایجاد حساب کاربری

به سایت Fontastic بروید و یک حساب کاربری رایگان بسازید.

۲. انتخاب آیکون‌ها

پس از ورود، از بخش Add More Icons مجموعه‌ای از آیکون‌های آماده را انتخاب کنید یا آیکون‌های اختصاصی برند خود را آپلود نمایید.

۳. شخصی‌سازی آیکون‌ها

در تب Modify Font می‌توانید:

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

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

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

۴. ذخیره و دانلود آیکون‌ها

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

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

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

۶. استفاده در طراحی

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

مزایای استفاده از Fontastic

• تنوع بالای آیکون‌ها

• امکان ساخت آیکون‌های اختصاصی برند

• سبک و بهینه بودن برای افزایش سرعت سایت

• سازگاری کامل با المنتور

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

جمع‌بندی

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

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

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

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

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

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

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

• طولانی شدن بیش از حد صفحه

• نمایش نامرتب و به‌هم‌ریخته محتوا

• کاهش سرعت بارگذاری

• گیج شدن کاربر هنگام جستجو در صفحه

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

• محتوای اصلی در دسترس‌تر خواهد بود.

• ظاهر سایت ساده‌تر و چشم‌نوازتر می‌شود.

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

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

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

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

• بنرهای تبلیغاتی بزرگ

• اسلایدرها و گالری‌های سنگین

• ستون‌های تزیینی و بلاک‌های کم‌اهمیت

• جداول عریض یا محتوایی که در صفحه کوچک موبایل خوب دیده نمی‌شود

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

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

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

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

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

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

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

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

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

• از پنل سمت چپ به بخش پیشرفته (Advanced) بروید.

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

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

مرحله ۳: تنظیم نسخه دسکتاپ و تبلت

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

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

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

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

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

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

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

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

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

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

ستون‌بندی واکنش‌گرا چه تأثیری روی سئو دارد؟

گوگل سال‌هاست از الگوریتم Mobile-First Indexing استفاده می‌کند. یعنی ابتدا نسخه موبایل سایت شما بررسی می‌شود و سپس رتبه‌دهی انجام می‌گیرد.

بنابراین:

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

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

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

جمع‌بندی

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

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

• سرعت بارگذاری افزایش می‌یابد.

• کاربران تجربه بهتری خواهند داشت.

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

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

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

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

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

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

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

• محتوا برای کاربر قابل فهم‌تر خواهد بود.

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

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

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

ستون‌بندی یا Pillar Page چیست؟

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

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

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

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

• زیبایی و جلوه بصری بهتر

• نظم‌دهی به محتوا

• افزایش کاربرپسندی سایت

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

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

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

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

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

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

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

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

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

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

حالا بیایید به سراغ بخش عملی برویم و نحوه تنظیم ستون‌ها را با المنتور قدم‌به‌قدم یاد بگیریم:

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

ابتدا باید یک ستون جدید ایجاد کنید یا ستونی که قبلاً ساخته‌اید را انتخاب کنید.

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

روی ستون موردنظر کلیک کنید تا بخش تنظیمات ستون در سمت چپ ویرایشگر المنتور باز شود. سپس وارد بخش طرح‌بندی (Layout) شوید.

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

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

• پیش‌فرض (Default): همان حالتی که قالب شما تعیین کرده است.

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

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

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

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

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

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

مرحله چهارم: تست حالت‌ها

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

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

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

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

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

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

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

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

• بهتر است فاصله‌ها (Margins & Paddings) را به‌دقت تنظیم کنید تا ساختار صفحه منظم‌تر دیده شود.

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

جمع‌بندی

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

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

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

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

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

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

چرا المنتور انتخاب شماره یک طراحان وردپرس است؟

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

• کاربر مبتدی می‌تواند با چند حرکت ساده یک وب‌سایت زیبا بسازد.

• طراح حرفه‌ای می‌تواند با امکانات پیشرفته آن، پروژه‌های بزرگ و پیچیده را مدیریت کند.

این انعطاف‌پذیری یکی از دلایلی است که المنتور را به افزونه‌ای بی‌رقیب در دنیای وردپرس تبدیل کرده است.

مهم‌ترین مزایای افزونه المنتور

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

طراحی آسان بدون کدنویسی

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

پیش‌نمایش زنده

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

انعطاف کامل در ساختار صفحات

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

سرعت بالا و بهینه‌سازی سئو

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

قابلیت استفاده مجدد از طراحی‌ها

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

نحوه نصب المنتور در وردپرس

نصب این افزونه به سادگی انجام می‌شود و تنها چند دقیقه زمان می‌برد:

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

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

3. عبارت Elementor را تایپ کرده و افزونه را نصب کنید.

4. پس از نصب، روی فعال‌سازی کلیک کنید.

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

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

تنظیمات المنتور؛ سه بخش اصلی

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

۱. تنظیمات کلی

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

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

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

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

• تعیین فونت پیش‌فرض کلی سایت.

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

• تنظیم نقاط شکست برای نمایش بهتر در موبایل و تبلت.

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

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

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

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

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

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

امکانات ویژه المنتور

افزونه المنتور تنها به طراحی صفحات محدود نمی‌شود و ابزارهای قدرتمند دیگری نیز ارائه می‌دهد:

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

• پاپ‌آپ‌ساز (Popup Builder): ایجاد پاپ‌آپ‌های زیبا برای اطلاع‌رسانی یا تبلیغات.

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

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

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

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

المنتور رایگان یا پرمیوم؟

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

نسخه رایگان

• امکانات پایه برای طراحی صفحات.

• دسترسی به ابزارک‌های اصلی.

• مناسب برای سایت‌های شخصی یا پروژه‌های کوچک.

نسخه پرمیوم (Pro)

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

• صدها قالب و بلاک آماده.

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

• پشتیبانی اختصاصی.

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

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

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

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

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

• پس از هر تغییر، سرعت سایت را با ابزارهایی مثل PageSpeed Insights بررسی کنید.

جمع‌بندی

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

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

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