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

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

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

تا 700 تومان تخفیف المنتور بی‌نهایت
ساعت‌
دقیقه
ثانیه

فهرست مطالب

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

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

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

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

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

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

بعد از آن، ابزارک مربوط به لوگوی سایت را اضافه می‌کنیم و در زبانه استایل، عرض آن را به پیکسل تنظیم کرده و مقدار ۲۰۰ را برای آن در نظر می‌گیریم. برای فیلتر CSS لوگو، اشباع رنگ را صفر کرده و درخشندگی را روی ۲۰۰ قرار می‌دهیم. سپس ابزارک ویرایش متن را اضافه کرده و متنی را که از قبل آماده کرده‌ایم در آن قرار می‌دهیم. سایز فونت متن را برابر با ۱۴ انتخاب می‌کنیم و رنگ آن را به سمت خاکستری می‌بریم.

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

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

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

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

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

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

15 پاسخ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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