آموزش ایجاد فوتر سفارشی

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

ایجاد هدر یا پاورقی به کمک المنتور

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

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

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

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

1. جستجو با زبان لاتین در گوگل
2. جستجو در سایت‌های مخصوص به این زمینه

در روش اول کافی است شما به زبان لاتین بخش موردنظر را سرچ کنید (مثلا footer design) به همین راحتی کلی طرح فوتر را در بخش تصاویر گوگل مشاهده می‌فرمایید همچنین سایت‌های مختلفی نمونه‌های زیبا با طرح‌های متفاوت قرار داده‌اند.

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

•  Dribbble
• Pinterest
• Themeforest
• Behance

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

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

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

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

باتوجه‌به فعال‌کردن Container الان می‌توانیم به‌راحتی طرح موردنظر را ایجاد کنیم. الان می‌توانیم ردیف اول طرحمان را در یک کانتینر در کنار هم قرار دهیم، اما در روش قدیمی ما باید سه ستون اضافه می‌کردیم.

مشاهده جلسات:
تمام جلسات این دوره در کانال یوتیوب هلپ چک موجود و قابل مشاهده است.

اضافه‌کردن اطلاعات به فوتر

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

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

direction یا جهت

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

Align Items & Justify Content یا تراز کردن

به کمک این دو گزینه می‌توانید وسط‌چین، راست‌چین، کشیده و غیره را مشخص کنید.

Elements Gap همان فاصله بین ابزارک

می‌توانید فاصله بین ابزارک‌ها را با Elements Gap تنظیم کنید.

Wrap با پوشش

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

اضافه‌کردن لینک‌های ضروری به فوتر

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

اضافه‌کردن باکس خبرنامه به فوتر

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

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

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