35% تخفیف
پکیج های المنتور پرو
تا شروع آذر ماه
مشاهده
ورود | ثبت نام
  • 15 نظر

آموزش ساخت فوتر با المنتور

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

جلسه 50 - قبلی

آموزش ساخت سربرگ (هدر) در المنتور

بعدی - جلسه 52

ساخت صفحه 404 در المنتور

فهرست مطالب

طراحی فوتر در المنتور 

برای ساخت فوتر، به بخش پوسته‌ساز (Theme Builder) در المنتور پرو بروید. پس از کلیک روی Add New، نوع طراحی را Footer انتخاب کنید و وارد محیط طراحی شوید. در این مرحله، تگ HTML را روی Footer تنظیم کنید تا ساختار استاندارد کد حفظ شود.

ساخت فوتر در المنتور

یک کانتینر تمام‌عرض (Full Width) ایجاد کنید.تنظیمات کانتینر را از بخش Layout سفارشی کنید، مانند ارتفاع، فاصله داخلی (Padding) و رنگ پس‌زمینه.در داخل کانتینر، کانتینرهای فرزند اضافه کنید و محتوای موردنظر را در هر کانتینر قرار دهید.

بخش‌های مختلف فوتر

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

  • اطلاعات تماس
    • با استفاده از ابزارک ویرایشگر متن (Text Editor)، اطلاعات تماس مانند شماره تلفن، ایمیل و آدرس را وارد کنید.
  • درباره ما
    • از ابزارک متن برای نمایش توضیحات کوتاه درباره وب‌سایت استفاده کنید.
  • شبکه‌های اجتماعی
    • با ابزارک آیکون‌های اجتماعی (Social Icons)، لینک شبکه‌های اجتماعی را اضافه کنید و ظاهر آن‌ها را از بخش استایل سفارشی‌سازی کنید.
  • قوانین و کپی‌رایت
    • با ابزارک متن یا HTML، عبارت کپی‌رایت یا لینک قوانین سایت را در فوتر قرار دهید.
  • مقالات مرتبط
    • از ابزارک Posts برای نمایش مقالات مرتبط استفاده کنید و ظاهر آن را از بخش استایل تنظیم کنید.
  • افزودن لوگو
    • ابزارک Site Logo را به کانتینر اضافه کنید و موقعیت آن را در فوتر مشخص کنید

نکات طراحی فوتر

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

15 پاسخ

  1. سلام ببخشید من لو گوی سایتم و اسم هدرم هم زیر هدرم نمایش داده میشه و وقتی وارد سایتمم میشم بازم نمایش داداه میشه علتش چیه

    پاسخ

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

  2. سلام استاد اول ممنون بابت آموزش های عالی تون . دوم یه سوال داشتم. من عینا مثل فوتر شما را طراحی کردم ولی در قیمت موبایل ترتیبش عوض میشه. وقتی جابجایی انجام میدم یا مارجین میدم یا وسط چین میکنم در حالت دسکتاپ هم میریزه بهم . چیکار باید بکنم؟

    پاسخ

    1. سلام
      تیکت هم ارسالی کردید. لطفا برسی کنید 🌹

  3. سلام وقت بخیر
    من چطور میتونم از قسمت ابزارک ها اطلاعات تماس بزارم حاوی تماس و ایمیل و …
    مشکلم با قسمت گذاشتن آیکن هست
    نمیدونم چطور آیکن بزارم کنار متن
    ممنون میشم راهنماییم کنید

    پاسخ

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

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

    پاسخ

    1. سلام وقت بخیر
      اگر قالب فوتر را با استفاده از المنتور پرو طراحی کرده اید کافیه قالب ساخته شده را در بخش پوسته ساز المنتور حذف کنید تا فوتر پیشفرض وودمارت نمایش داده شود.

  6. منظور Breadcrumb با قابلیت اسکرول افقی هست و اینکه داخل صفحه نمایش کامپیوتر این نوع Breadcrumb ایجاد مشکل نمی کنه ؟

    پاسخ

  7. ممنون از این دوره عالی و بی نظیرتون آقایی معلمی

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

    پاسخ

    1. سلام
      ایمیل بزنید راهنماییتون می کنیم

    2. سلام آموزشهاتون عالی و کاربردیه ممنون. فقط برای من این ابزارک نوشته ها (posts) کار نمیکنه همچنین من از نسخه پرو استفاده میکنم.لطفا راهنمایی بفرمایید.

    3. سلام
      بفرمایید یعنی چی کار نمیکنه؟ ابزارک لود نمیشه یا محتوای نمایش داده نمیشود؟

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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