آموزش ساخت فوتر با المنتور با ویدیو و تصویر [ویرایش و طراحی ریسپانسیو]

برای ساخت فوتر با المنتور به چه چیزی نیاز داریم؟

قبل از شروع بهتر است چند نکته را مشخص کنید. مهم ترین مورد این است که قابلیت های Theme Builder و فوتر سراسری را با امکانات نسخه مورد استفاده خود تطبیق دهید. طبق مستندات فعلی المنتور، قابلیت Theme Builder و Site Partهایی مانند Footer در امکانات حرفه ای المنتور قرار دارند و کاربران با دانلود رایگان افزونه المنتور پرو می توانند بخش هایی از قابلیت های در دسترس نسخه Pro را مشاهده کنند.

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

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

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

مرحله اول: ورود به Theme Builder

1. وارد پیشخوان وردپرس شوید.
2. از منوی وردپرس وارد Elementor > Theme Builder شوید.
3. در صفحه Theme Builder، بخش مربوط به Footer را پیدا کنید.
4. روی علامت + یا گزینه ایجاد Footer جدید کلیک کنید.

در مستندات رسمی المنتور، همین مسیر به عنوان روش ایجاد Footer معرفی شده است؛ پس اگر آموزش های قدیمی مسیرهایی مانند «المنتور > قالب ها > افزودن قالب» را نشان می دهند، ممکن است ظاهر و نام گزینه ها در نسخه جدید با آن آموزش متفاوت باشد.

مرحله دوم: انتخاب ساختار فوتر

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

• ستون اول: لوگو و معرفی کوتاه برند
• ستون دوم: لینک های مهم
• ستون سوم: خدمات یا دسته بندی ها
• ستون چهارم: اطلاعات تماس و شبکه های اجتماعی

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

مرحله سوم: افزودن محتوا

حالا نوبت اضافه کردن محتوای واقعی است. در ویرایشگر المنتور پرو رایگانمی توانید المان های مختلف را با روش Drag & Drop به محل موردنظر منتقل کنید. برای یک فوتر کاربردی، بسته به نیاز سایت می توانید از موارد زیر استفاده کنید:

اضافه کردن لوگو و معرفی برند: یکی از رایج ترین کاربردهای فوتر، معرفی کوتاه برند است. لوگو را در یک بخش قرار دهید و در زیر آن یک متن کوتاه و واقعی درباره فعالیت سایت بنویسید. از نوشتن متن های طولانی در این قسمت خودداری کنید. هدف فوتر انتقال سریع اطلاعات است، نه ایجاد یک صفحه درباره ما.
ایجاد ستون لینک های مهم: در ستون های دیگر می توانید لینک هایی مانند «درباره ما»، «تماس با ما»، «خدمات»، «وبلاگ»، «قوانین» یا دسته بندی های مهم را قرار دهید. لینک ها باید واقعاً فعال باشند. یکی از اشتباهات رایج در طراحی فوتر این است که لینک هایی با ظاهر قابل کلیک ایجاد می شوند اما مقصد مشخص یا کاربردی ندارند.
افزودن شبکه های اجتماعی: برای نمایش شبکه های اجتماعی می توانید از Social Icons استفاده کنید. این ویجت امکان اضافه کردن آیکون شبکه های اجتماعی، تعیین لینک، تنظیم اندازه، فاصله، شکل و نحوه نمایش آیکون ها را فراهم می کند. در راهنمای افزودن آیکون در المنتور نیز می توانید با روش های مختلف استفاده از آیکون ها آشنا شوید.
افزودن اطلاعات تماس: اگر سایت شما خدماتی یا تجاری است، اطلاعات تماس یکی از بخش های مهم فوتر محسوب می شود. شماره تلفن، ایمیل، آدرس و در صورت نیاز ساعات کاری را می توان در این قسمت قرار داد. برای سایت المنتور ایران می توان اطلاعات ارتباطی مانند شماره تماس و ایمیل مجموعه را در یک ستون مشخص قرار داد تا کاربر بدون جستجوی طولانی بتواند مسیر ارتباط با مجموعه را پیدا کند.

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

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

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

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

اگر نمی خواهید طراحی فوتر را از صفر شروع کنید، استفاده از قالب های آماده یکی از سریع ترین روش هاست. در این حالت ابتدا یک قالب Footer انتخاب می کنید و سپس محتوا، رنگ ها، فونت ها، فاصله ها و لینک ها را مطابق نیاز سایت تغییر می دهید. طبق راهنمای رسمی المنتور، هنگام ایجاد Footer از طریق Theme Builder می توانید از Template Library یک فوتر از پیش طراحی شده انتخاب کنید یا کتابخانه را ببندید و طراحی را از صفر انجام دهید.

مراحل استفاده از قالب آماده فوتر

1. به Elementor > Theme Builder بروید.
2. یک Footer جدید ایجاد کنید.
3. در کتابخانه قالب، نمونه های Footer را بررسی کنید.
4. قالبی را انتخاب کنید که ساختار آن به نیاز سایت شما نزدیک باشد.
5. روی گزینه درج قالب کلیک کنید.
6. متن ها، لینک ها، لوگو و اطلاعات تماس را تغییر دهید.
7. رنگ پس زمینه و رنگ متن را با هویت بصری سایت هماهنگ کنید.
8. نسخه دسکتاپ، تبلت و موبایل را بررسی کنید.
9. در پایان Footer را منتشر کنید و شرایط نمایش آن را مشخص کنید.

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

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

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

یکی از مهم ترین مراحل طراحی فوتر، بررسی نسخه واکنش گراست. فوتر دسکتاپ ممکن است چهار ستون کنار هم داشته باشد، اما همین ساختار در صفحه موبایل معمولاً فضای کافی ندارد. راهکار مناسب این است که در نمایشگرهای کوچک، ستون ها به صورت عمودی یا چند ردیف مرتب شوند. المنتور ابزارهای واکنش گرا برای کنترل نحوه نمایش المان ها در دستگاه های مختلف در اختیار شما قرار می دهد. در طراحی مبتنی بر Flexbox Container نیز می توان برای نمایشگرهای کوچک، حالت Wrap را فعال کرد و عرض کانتینرهای فرزند را متناسب با موبایل تغییر داد.

چک لیست نسخه موبایل فوتر

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

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

ویرایش فوتر در المنتور

اگر قبلاً یک فوتر ساخته اید و فقط می خواهید متن، رنگ، لینک یا ساختار آن را تغییر دهید، لازم نیست فوتر را دوباره بسازید. می توانید همان Site Part را از طریق Theme Builder باز کنید و آن را در ویرایشگر المنتور تغییر دهید.

مراحل ویرایش فوتر

1. وارد پیشخوان وردپرس شوید.
2. به Elementor > Theme Builder بروید.
3. فوتر موردنظر را پیدا کنید.
4. روی فوتر کلیک کرده و گزینه Edit را انتخاب کنید.
5. المان موردنظر را انتخاب کنید.
6. محتوا، لینک، رنگ، فونت، فاصله یا سایر تنظیمات را تغییر دهید.
7. نمایش فوتر در دسکتاپ، تبلت و موبایل را بررسی کنید.
8. روی Update کلیک کنید تا تغییرات ذخیره شوند.

طبق مستندات رسمی، برای ویرایش Footer کافی است از Theme Builder وارد Footer موردنظر شوید و گزینه Edit را انتخاب کنید. همچنین از همین بخش می توان شرایط نمایش آن را نیز تغییر داد.

چگونه مشخص کنیم فوتر در کدام صفحات نمایش داده شود؟

یکی از امکانات مهم Theme Builder، Display Conditions است. به کمک این قابلیت می توانید تعیین کنید فوتر در کل سایت نمایش داده شود یا فقط در صفحات، نوشته ها یا بخش های مشخصی ظاهر شود. برای یک فوتر عمومی معمولاً شرایط Entire Site انتخاب می شود. اما اگر برای بخش خاصی از سایت فوتر متفاوتی نیاز دارید، می توانید شرایط Include یا Exclude را تنظیم کنید.

تنظیم فوتر برای کل سایت

1. فوتر را در Theme Builder منتشر کنید.
2. پنجره Display Conditions را باز کنید.
3. گزینه Include را انتخاب کنید.
4. محدوده Entire Site را انتخاب کنید.
5. شرایط را ذخیره کنید.

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

نمایش فوتر فقط در صفحات خاص

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

جمع بندی

ساخت فوتر با المنتور زمانی نتیجه خوبی می دهد که قبل از طراحی، محتوای موردنیاز و مسیر دسترسی کاربر مشخص شده باشد. می توانید از قالب آماده شروع کنید و آن را شخصی سازی کنید یا تمام ساختار را با کانتینرها از ابتدا بسازید. مراحل اصلی را می توان به این شکل خلاصه کرد: ورود به Theme Builder، ایجاد Footer، انتخاب قالب آماده یا طراحی از صفر، اضافه کردن محتوای ضروری، تنظیم ظاهر، بررسی نسخه واکنش گرا، تست لینک ها و در نهایت تنظیم Display Conditions. اگر در کنار ساخت فوتر قصد دارید سایر بخش های سایت را نیز با المنتور توسعه دهید، آموزش های کار با کانتینر در المنتور، آموزش فلکس باکس در المنتور و ویجت دکمه در المنتور می توانند مسیر طراحی شما را کامل تر کنند.

سؤالات متداول درباره ساخت فوتر با المنتور