سبد خرید شما خالی است.

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

گالری تصاویر

ارتباط با ما

چهارمحال و بختیاری - شهرکرد

info@domain.com

0383-12345678

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

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

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

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

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


۱. افزودن فونت سفارشی در المنتور پرو (روش مستقیم)

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

مراحل افزودن فونت دلخواه در المنتور پرو:

  1. ورود به تنظیمات فونت

    • وارد پیشخوان وردپرس شوید.
    • به مسیر المنتور > تنظیمات > فونت‌های سفارشی (Custom Fonts) بروید.
    • روی افزودن جدید کلیک کنید.
  2. بارگذاری فایل‌های فونت

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

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

۲. افزودن فونت سفارشی در نسخه رایگان المنتور (با CSS سفارشی)

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

مراحل افزودن فونت با CSS:

  1. آپلود فونت در هاست

    • وارد File Manager هاست شوید.
    • به مسیر wp-content/uploads/fonts بروید (اگر پوشه fonts وجود ندارد، آن را ایجاد کنید).
    • فونت‌های خود را در این پوشه آپلود کنید.
  2. افزودن CSS سفارشی در وردپرس

    • به نمایش > سفارشی‌سازی > CSS اضافی بروید.
    • کد زیر را وارد کنید (نام فایل و مسیر فونت را جایگزین کنید):
    @font-face {
        font-family: 'MyCustomFont';
        src: url('https://yourwebsite.com/wp-content/uploads/fonts/MyFont.woff2') format('woff2'),
             url('https://yourwebsite.com/wp-content/uploads/fonts/MyFont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    body {
        font-family: 'MyCustomFont', sans-serif;
    }
    
  3. ذخیره و اعمال تغییرات
    پس از ذخیره، فونت جدید به سایت اضافه می‌شود و در المنتور قابل استفاده خواهد بود.


۳. استفاده از افزونه‌های جانبی برای افزودن فونت سفارشی

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

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

  • Custom Fonts by Brainstorm Force
  • Use Any Font
  • OMGF | Host Google Fonts Locally

مراحل نصب و استفاده از افزونه:

  1. به پیشخوان وردپرس > افزونه‌ها > افزودن بروید.
  2. یکی از افزونه‌های بالا را جستجو، نصب و فعال کنید.
  3. به تنظیمات افزونه رفته و فونت دلخواه خود را آپلود کنید.
  4. پس از افزودن فونت، می‌توانید آن را در المنتور انتخاب و استفاده کنید.

۴. تغییر فونت المنتور با استفاده از تنظیمات قالب وردپرس

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

مراحل:

  1. نمایش > سفارشی‌سازی را باز کنید.
  2. به Typography (تایپوگرافی) یا Fonts (فونت‌ها) بروید.
  3. فونت دلخواه را انتخاب کرده و ذخیره کنید.

جمع‌بندی

افزودن فونت سفارشی در المنتور به چند روش قابل انجام است:
✅ در المنتور پرو، مستقیماً از طریق Custom Fonts امکان بارگذاری فونت وجود دارد.
✅ در نسخه رایگان، می‌توان از CSS سفارشی برای افزودن فونت استفاده کرد.
✅ افزونه‌هایی مانند Use Any Font و Custom Fonts به شما اجازه می‌دهند فونت‌های دلخواه را بدون کدنویسی اضافه کنید.
✅ برخی قالب‌های وردپرسی امکان مدیریت فونت را در تنظیمات خود دارند.

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

طراحی ریسپانسیو در المنتور: تنظیمات و نکات کلیدی

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

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


۱. دسترسی به تنظیمات ریسپانسیو در المنتور

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

  1. وارد ویرایشگر المنتور شوید.
  2. در پایین صفحه، روی آیکون نمایشگر (Mobile Editing) کلیک کنید.
  3. گزینه‌های دسکتاپ، تبلت و موبایل در دسترس هستند و می‌توانید طراحی هر دستگاه را به‌صورت جداگانه تنظیم کنید.

۲. مهم‌ترین تنظیمات ریسپانسیو در المنتور

۱. تغییر اندازه فونت و تایپوگرافی

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

۲. تنظیم فاصله‌ها (پدینگ و مارجین)

  • برای جلوگیری از به‌هم‌ریختگی محتوا، از پدینگ (Padding) و مارجین (Margin) مناسب در تبلت و موبایل استفاده کنید.
  • برای این کار، به پیشرفته > تنظیمات فاصله‌ها مراجعه کنید.

۳. مخفی‌سازی المان‌ها در دستگاه‌های خاص

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

۴. تنظیم ترتیب چینش عناصر (Column Ordering)

  • در نسخه موبایل، چینش ستون‌ها ممکن است بهم بریزد.
  • از تنظیمات چیدمان (Layout) > ترتیب ستون‌ها استفاده کنید تا چینش عناصر را تنظیم کنید.

۵. تغییر اندازه دکمه‌ها و تصاویر

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

۳. نکات کلیدی برای طراحی ریسپانسیو در المنتور

✅ همیشه طراحی موبایل و تبلت را به‌صورت جداگانه تست کنید.
✅ از ابزارهای تست ریسپانسیو مانند Chrome DevTools (کلید F12 در مرورگر کروم) استفاده کنید.
✅ فاصله‌ها را تنظیم کنید تا از مشکلات نمایش در موبایل جلوگیری شود.
✅ از واحدهای EM و REM به‌جای PX برای اندازه فونت استفاده کنید تا طراحی انعطاف‌پذیرتر شود.
✅ از تصاویر و المان‌های سبک‌تر برای بارگذاری سریع‌تر در موبایل استفاده کنید.


جمع‌بندی

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

ضبط پیام صوتی

زمان هر پیام صوتی 2 دقیقه است