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

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

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

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

طراحی فوتر با قالب آماده المنتور

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

استفاده از فوتر آماده المنتور تنها در 3 مرحله انجام می‌شود که عبارت است از:

• ورود به بخش قالب‌ها
• انتخاب فوتر آماده المنتور و درج آن
• تغییر استایل و محتوای فوتر

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

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

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

در صفحه جدید نوع قالب را “فوتر” تعیین کنید و یک نام برای قالب فوتر خود انتخاب کنید.

درج قالب footer در المنتور

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

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

برای درج قالب و انجام تغییرات روی فوتر کافیه موس را روی قالب موردنظر قراردهید تا دکمه “درج” نمایان شود.

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

تغییر استایل و محتوای قالب آماده

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

در انتها، قالبی که ویرایش کردید را ذخیره و با اعمال شرط، درکل سایت انتشار دهید.

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

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

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

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

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

طراحی ساختار اصلی فوتر با المنتور

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

• پس برای شروع ساخت فوتر ابتدا با کلیک روی علامت + در مرکز صفحه یک کانتینر تک ستونه ایجاد می‌کنیم. مقدار فاصله خارجی و داخلی آن را 0 و عرض محتوا را “تمام عرض” قرار می‌دهیم.

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

• سپس برای ساخت 4 کانتینر داخلی، المان کانتینر را انتخاب و داخل کانتینراصلی قرار می‌دهیم. عرض محتوای این کانتینر “تمام عرض”، فاصله داخلی و خارجی آن صفر(برای این‌که به‌طورکامل به کناره‌ها متصل شود) و 3 بار از آن تکثیر می‌گیریم.

• در انتها برای طراحی قسمت بالای فوتر، به کانتینر(1) پس‌زمینه رنگی و حاشیه‌ای به اندازه 15 پیکسل می‌دهیم.

طراحی بخش بالایی فوتر

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

• برای این‌که ستون‌های داخلی ساخته شوند، المان کانتینر را درون کانتینر(1) قرار می‌دهیم و 4 بار آن را تأکثیر می‌کنیم. قبل از آن، جهت کانتینر(1) را به‌صورت ردیف-افقی تنظیم می‌کنیم تا 5ستون داخلی آن دریک سطر قرار بگیرند. برای این‌که محتوای هرستون داخلی زیرهم قرار بگیرند، جهت‌یابی آن‌ها را به‌صورت ستون-عمودی تنظیم می‌کنیم.

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

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

بعداز طراحی بخش بالایی فوتر، نوبت به قراردادن متن، لینک‌های مهم و اینماد سایت است. با کمی دقت به محتوای فوتر متوجه می‌شوید که کانتینر(2) از 4 ستون یا کانتینر داخلی تشکیل شده‌است. در سه ستون آن از المان سربرگ و لیست آیکن و در انتها از المان html برای قراردادن اینماد استفاده شده‌است.

• پس برای ساخت این بخش از فوتر با المنتور، ابتدا المان کانتینر را داخل کانتینر(2) قرار می‌دهیم. فاصله داخلی و حاشیه خارجی را 0 و 3 بار تکثیر می‌کنیم. یادتان باشد جهت‌یابی کانتینر(2) به‌‌صورت ردیف-افقی، تراز محتوا در وسط و چینش موارد نیز وسط قرار بگیرد.

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

افزودن لوگو و توضیح سایت در فوتر

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

برای این منظور ابتدا جهت‌یابی کانتینر(3) را به‌صورت ردیف-افقی قرار می‌دهیم. سپس المان‌های لوگوی سایت، ویرایشگر متن و آیکن شبکه اجتماعی را اضافه می‌کنیم.

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

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

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

ذخیره و انتشار قالب فوتر

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

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

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

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

برای این‌که تاریخ مرتبط با کپی‌رایت به‌صورت خودکار با تغییرسال، آپدیت شود کافیه طبق آموزش زیر عمل کنید:

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

• روی علامت آچار کلیک کنید. فرمت زمان را روی هیچکدام قرار دهید.
• فرمت تاریخ را روی دلخواه تنظیم کنید. و در کادر فرمت سفارشی حرف “Y” را قراردهید.

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

نکات طلایی در آموزش ساخت فوتر با المنتور

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

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

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

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

نتیجه گیری

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

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