آموزش ساخت فوتر در قالب آوادا + تنظیمات کامل Footer

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

گام اول: طراحی فوتر در قالب آوادا

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

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

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

در صورتی که تمایل دارید هر بخش را به صورت اختصاصی از اول طراحی کنید، کافیست سری به قسمت Layout Section Type بزنید. در کشوی اول نوع طرح بندی را انتخاب کنید که می تواند فوتر، هدر، نوار عنوان صفحه یا محتوا باشد که در این آموزش ما قصد طراحی فوتر سایت را دارید پس از این کشو footer را انتخاب میکنیم و در کشوی بعدی نام دلخواهی را برای این قسمتی که قصد داریم طراحی کنیم مینویسیم. نهایتا باید روی دکمه ایجاد بخش طرح بندی جدید Create New Layout Section کلیک کرد.

حالا آماده طراحی فوتر هستیم 😊 برای اینکه از ویرایشگر زنده کمک بگیرید و طراحی ساده و آسان تری داشته باشید روی دکمه Live Builder کلیک کنید. به این شکل به کمک فیوژن بیلدر می توان فوتر سایت را طراحی کرد.

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

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

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

با کلیک روی Container Options ستونی در سمت چپ صفحه نمایان می شود. سربرگ اول یا General به منظور اعمال تنظیمات عمومی در نظر گرفته شده و در این بخش گزینه های متعددی وجود دارد براساس توضیحات زیر می توانید این بخش را تنظیم کنید:

• Interior Content Width: در این قسمت عرض کانتینر را مشخص کنید که در حالت عریض و تمام صفحه باشد 100% WidthSite و یا به اندازه پهنای سایت Site Width باشد.
• Height: ارتفاع کانتینر را تعیین میکنید که به طور Auto یعنی ارتفاع به طور خودکار تنظیم شود، Full Height و Minimum Height باشد.
• Column Alignment: ترابندی ستون ها را مشخص کنید.
• Column Justification: نحوه جاستیفای شدن محتوای ستون ها در حالت افقی را مشخص کنید.
• Content Wrap: با فعال کردن این گزینه در صورت نیاز محتوا اصطلاحا Wrap و دارای انعطاف پذیری می شود و در صورت تغییر اندازه صفحه، محتوا در چند خط قرار میگیرد.
• Column Spacing: فاصله بین ستون ها
• Container HTML Tag: مشخص میکنید این کانتینر چه تگی بگیر؟ به صورت پیش فرض دارای تگ div است.
• Name Of Menu Anchor: میتوانید یک شناسه برای این بخش تنظیم کنید.
• Container Visibility: تعیین میکنید این کانتینر در چه دستگاه هایی نمایش داده شود یا خیر؟ میتوانید نمایش یا عدم نمایش در دسکتاپ، تبلت و موبایل را تنظیم کنید.
• Container Publishing Status: در این قسمت وضعیت انتشار کانتینر را تعیین میکنید مثلا منتشر شده، پیش نویس و…
• CSS Class: در این فیلد می توانید نام کلاس با استایل سفارشی که قبلا تعریف شده را وارد کنید تا روی کانتینر اعمال شود.

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

• Margin: حاشیه مورد نظر از بالا و پایین کانتینر را وارد کنید.
• Padding: در این قسمت مشخص میکنید فاصله محتوای داخل کانتینر تا لبه ها چقدر باشد؟
• Container Link Color: رنگ لینک های داخل کانتینر را تعیین کنید.
• Container Border Size:در این قسمت اندازه بوردر اطراف کانتینر را مشخص کنید.
• Container Border Color: رنگ بوردر اطراف کانتینر را انتخاب کنید.
• Border Style: بوردر یا کادر اطراف کانتینر دارای چه سبک و استایلی باشد؟
• Border Radius: علاقه دارید گوشه ها حالتی گرد داشته باشند؟
• Box Shadow: در اینجا مشخص میکنید تمایل دارید یک سایه اطراف کادر کانتینر قرار گیرد؟
• Z Index: ترتیب قرار گیری عناصر روی هم را مشخص میکنید.

در سربرگ بعدی یعنی Background میتوانید تنظیمات مربوط به پس زمینه کانتینر را اعمال کنید.

Background Options: مشخص میکنید که بک گراند کانتینر شما چطور باشد مثلا یک رنگ، یک بک گراند تصویری، گرادیانت، ویدیو، پترن یا ماسک. هر کدام از این گزینه ها را انتخاب کنید تنظیمات مربوطه هم نمایش داده می شود.

Container Background Color: در این فیلد می توانید یک کد رنگی درج کنید تا روی پس زمینه قرار گیرد.

در ادامه با حرکت موس روی کانتینر آیکون + مشاهده می کنید. با کلیک روی این آیکون به صفحه المان ها هدایت می شوید و می توانید هر المانی که در نظر دارید را انتخاب کنید تا در فوتر قرار گیرد.

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

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

در نهایت روی دکمه Save کلیک کنید تا فوتری که طراحی کردید ذخیره شود.

گام دوم: تغییر فوتر سایت وردپرسی

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

مجددا در بخش Layouts طرح بندی ها، زیرمنوی Layout Buildes یا سازنده طرح بندی را انتخاب کنید.

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

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

یک پیغام تایید نمایش داده می شود روی دکمه ok کلیک کنید و در نهایت روی گزینه Select Footer کلیک کنید تا بتوانید فوتری که طراحی کردید را انتخاب کنید.

در ادامه با صفحه ای مشابه تصویر زیر مواجه خواهید شد. در تب New Section می توانید بخش دلخواهتان را طراحی کنید اما چون فوتر را قبلا طراحی کردیم به تب Existing Section مراجعه می کنیم. در اینجا لیست تمام فوترهایی که تاکنون طراحی شده مشاهده میکنید. ما New Footer که در گام قبلی طراحی کردیم را انتخاب میکنیم.

اکنون مشاهده می کنید که فوتر طراحی شده، جایگزین شده است.

درانتهای صفحه روی دکمه Save Layout Order کلیک کنید تا تغییرات ذخیره شود.

تغییر فوتر صفحات دلخواه در سایت

تا اینجا گفتیم که چطور می توان فوتر سایت را طراحی و روی کل سایت پیاده سازی کرد اما در برخی مواقع شاید تمایل داشته باشید که برخی بخش های سایت اختصاصی باشند به عنوان مثاال شاید بخواهید فوتر صفحات محصولات متفاوت باشد و در آن لینک راهنمای خرید و… درج کنید در حالیکه این راهنما در فوتر مقالات هیچ کاربردی ندارند! بنابراین برای شخصی سازی بخش های مختلف صفحات سایت در قالب آوادا تنها کافیست که در قسمت تنظیمات آوادا و زیرمنوی Dashboard روی سربرگ Layouts و نهایتا روی Layout Buildes یا سازنده طرح بندی کلیک کنید.

در صفحه باز شده کلیه طراحی های از پیش آماده را مشاهده می کنید مثل Global Footer، Global Header، Post Archives  و…

• طرح بندی سراسری Global Layout: تنظیمات هدر و فوتر این بخش روی کل سایت اعمال می شود.
• Single Page: هدر و فوتر انتخاب شده در این قسمت روی صفحات (برگه ها، نوشته ها، صفحات آرشیو) اعمال می شود.
• Single Product: می توان هدر و فوتر صفحات محصول را اختصاصی کرد.
• Post Archives: هدر و فوتر صفحات آرشیو را انتخاب کنید.
• 404: طراحی هدر و فوتر صفحات 404 را مشخص کنید.
• Search: بخش های صفحات جستجو
• Home Page: هدر و فوتر صفحه اصلی وبسایت
• و امکان اضافه کردن طرح بندی جدید برای هر بخش دلخواه

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

به عنوان مثال با ویرایش بخش Single Product میتوان تعیین کرد که در صفحات محصول، هدر یا فوتر اختصاصی داشته باشید یا با ویرایش Single Page میتوانید برگه ها و نوشته های سایت را متمایز کنید. به طور شفاف تر زمانی که بخواهید یک صفحه منحصر بفرد داشته باشید که طراحی هدر یا فوتر آن بنابه هردلیلی با سایر صفحات متفاوت باشد و دارای یک هدر یا فوتر اختصاصی باشد می توانید از این بخش ها اقدام کنید و مثل گام دوم که در این آموزش به آن پرداختیم روی آیکون 🔗 مقابل بخش Select footer کلیک کنید و فوتر مورد نظرتان را انتخاب کنید و فوتر هر کدام را تغییر دهید.

حالا باز هم می توانید از میان همین صفحات استثنا قائل شوید! برای شروع، روی دکمه مدیریت شرایط Manage Conditions زیر باکس مورد نظرتان کلیک کنید تا تعیین کنید این فوتر دقیقا در کدام صفحات سایت نمایش داده شود.

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

برای شخصی سازی بیشتر در همین صفحه می تونید طرح بندی دلخواه خود را بسازید برای این کار در بخش Layout Builder یک نام دلخواه برای این طرح بنویسید و روی دکمه آبی رنگ Create New Layout کلیک کنید.

حالا مطابق با توضیحات این راهنما، هر تنطیمی که تمایل دارید اعمال کنید. 😍

کلیه تنظیمات فوتر در قالب اوادا به همین موارد ذکر شده محدود می شود و با شخصی سازی هر بخش می توانید هدر و فوترهای مختلفی در صفحات سایت خود داشته باشید.

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

نتیجه گیری

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