ویجت

۹۱۳۰۲۶۵۴ ۰۲۱

عنوان ویدئو آموزشی

آموزش طراحی فوتر با المنتور

تعداد ویدئو

ویدئو شماره 29

زمان ویدئو

42:28 دقیقه

مدرس ویدئو

مهدی جبین پور

نام دوره آموزشی

آموزش المنتور

تاریخ بروزرسانی

2022/10/10

کلیک کنید

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

آموزش طراحی فوتر با افزونه المنتور

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

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

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

فوتر شامل چه مواردی است

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

در فوتر می‌توانیم لینک شبکه‌های اجتماعی را قرار دهیم. به عنوان مثال لینک شبکه‌های اجتماعی مانند تلگرام، واتس‌آپ، یوتیوب، آپارات و… را می‌توانید در فوتر درج کنید.

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

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

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

مدل فوترهای مختلف

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

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

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

نکته بعدی این است که اگر دفت کنید متوجه خواهید شد که در قسمت پایین فوتر اکثر سایت‌ها، قوانینی درباره کپی رایت ذکر شده است.

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

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

نحوه ساخت فوتر

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

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

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

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

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

المان تصویر را در یک ردیف داخلی قرار دهید و عکس خود را در آن آپلود نمایید. اگر می‌خواهید در پایین آیکونتان متنی نوشته شده باشد از المان سربرگ استفاده کنید. البته تگ سربرگ را یا روی P یا روی Span بگذارید تا در سئو سایت شما تاثیر نداشته باشد. می‌توانید ردیف داخلی را کپی کرده و در چهار ستون بعدی پیست کنید. فقط کافی است که تصویر و متن سربرگ را تغییر دهید.

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

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

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

لینک‌های مهم

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

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

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

برای ایجاد هر فرمی در فوتر یا حتی هدر سایت می‌توانید از افزونه فوق العاده گرویتی فرم استفاده نمایید.

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

دکمه بازگشت به بالا

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

سخن پایانی

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

Leave a Reply

Your email address will not be published. Required fields are marked *