آموزش ساخت هدر در قالب آوادا + تنظیمات هدر و شخصی سازی

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

طراحی هدر در قالب آوادا

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

گام اول: تنظیمات اولیه هدر در قالب آوادا وردپرس

ابتدا از آموزش ورود به پیشخوان وردپرس کمک گرفته و وارد پیشخوان وبسایت وردپرسی خود شوید. اکنون در ستون سمت راست صفحه روی منوی آوادا Avada و زیرمنوی داشبورد Dashboard کلیک کنید تا به بخش پیشخوان آوادا هدایت شوید.

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

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

گام دوم: آموزش ساخت هدر اختصاصی در قالب Avada

برای اینکه طراحی دلخواه خودتان را داشته باشید باید Section هدرتان را بسازید سپس در قالب آوادا آن را جایگزین هدر قبلی کنید. برای این منظور در قسمت Layout Section Builder ابتدا یک نام دلخواه برای هدر خود بنویسید سپس از کشوی Layout Selection Type گزینه Header را انتخاب کنید در آخر روی دکمه Create New Layout Section کلیک کنید تا جایگاه هدر ایجاد شود.

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

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

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

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

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

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

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

در سربرگ Design می توانید موارد مرتبط با ظاهر را طراحی کنید.

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

در سربرگ Background هم می توانید یک رنگ، گرادیانتف تصویر را ماسک را به عنوان پس زمینه کانتینر تنظیم کنید.

• Background Options: در این بخش می توانید مشخص کنید که بک گراند کانتینر به چه صورتی باشد می توانید یک بک گراند تصویری یا یک رنگ را به عنوان پس زمینه تعیین کنید.
• Container Background Color: در این قسمت هم میتوانید یک کد رنگی درج کنید تا در بک گراند کانتینر تنظیم شود.

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

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

گام سوم: طراحی هدر در قالب آوادا و سفارشی سازی

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

به عنوان مثال المان “تایتل” را انتخاب کردیم تا بتوانیم روی بخش هدر سایت یک عنوان بنویسیم.

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

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

گام چهارم: تغییر هدر وبسایت

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

اکنون در بالای صفحه روی Layouts طرح بندی ها کلیک کنید و در کادر نمایش داده شده باید به Layout Buildes یا سازنده طرح بندی مراجعه کنید.

در این صفحه، بخش های مختلفی را مشاهده میکنید که هر کدام مربوط به صفحات مختلف سایت شما هستند به عنوان مثال بخش Global Layout در برگیرنده هدر و فوتر عمومی کل سایت است در واقع هر هدر و فوتری در Global Layout انتخاب کنید روی کلیه صفحات سایت نمایش داده می شود و اگر در بخش Single Page هدر و فوتری انتخاب کنید، روی برگه ها و نوشته های سایتتان نمایش داده خواهد شد و حتی می توانید برخی صفحات را استثنا کنید. برای اینکه هدر فعلی سایت را تغییر دهید و هدری که خودتان طراحی کردید را روی سایت به نمایش بگذارید کافی است در Global Layout روی آیکن لینک شکسته کلیک کنید.

سپس روی + کلیک کنید تا بتوانید هدر مورد نظرتان را انتخاب کنید.

از آنجایی که قبلا هدر مورد نظر را طراحی کردید پس روی تب Existing Section کلیک کنید تا کلیه طراحی های موجود نمایش داده شود. در این مثال New header که در گام های قبلی طراحی شد را انتخاب کردیم. در نهایت در پایین صفحه روی دکمه Save Layout Order کلیک کنید تا تغییرات ذخیره شود.

اکنون اگر صفحات مختلف وبسایت خود را بررسی کنید خواهید دید که هدر طراحی شده روی سایت شما نمایش داده می شود. 😍

پیکربندی تنظیمات عمومی هدر قالب آوادا

در بخش Avada زیرمنوی Options و سپس در بخش Header می توانید کلیه تنظیمات عمومی هدر در قالب آوادا را پیکربندی کنید. بخش Header شامل 4 زیرمنوی زیر است:

• Header Content: در این بخش کلیه تنظیمات جنرال و عمومی هدر مثل موقعیت قرار گیری هدر، طرح بندی هدر و… را اعمال میکنید.
• Header Background Image: تنظیمات عمومی برای پس زمینه هدرهای سایت را تعیین می کنید این تصویر در هدر کلیه صفحات نمایش داده می شود.
• Header Styling: استایل و ظاهر پیش فرض هدر کل سایت بر اساس این تنظیمات پیاده سازی می شود مثل پدینگ پیشض فرض هدرها، عرض هدر، رنگ بک گراند و…
• Sticky Header: در این بخش می توانید تنظیم کنید که هدر چسبان داشته باشید و در هنگام اسکرول صفحه، هدر در بالای صفحه به صورت قابت و چسبان قرار داشته باشد.

دقت داشته باشید پیکربندی تنظیمات این قسمت ها کاملا اختیاری است.

در ادامه تنظیمات موجود در هر کدام از بخش های بالا را به صورت کامل توضیح میدهیم.

1- تنظیم موقعیت قرارگیری و محتوای هدر از قسمت Header Content

در این زیر منو میتوانید تنطیمات عمومی و پیش فرض هدر را تعیین کنید که به صورت زیر هستند:

• Header Position: محل قرار گیری هدر را تعیین کنید که در بالا، سمت راست یا سمت چپ قرار گیرد.
• Select a Header Layout: میتوانید یک طرح بندی دلخواه برای نحوه نمایش هدر سایت تعیین کنید. در هر طرح بندی موقعیت قرار گیری منو، لوگو و سایر جزئیات متفاوت است.
• Slider Position: در این قسمت تعیین می کنید که در صورت ساخت اسلایدر، در بالای هدر قرار گیرد یا در پایین هدر؟!
• Header Content 1: از این کشو میتوانید مشخص کنید که در بالای هدر شما چه محتوایی درج شود مثلا نوار شبکه های اجتماعی، فضای خالی و…
• Header Content 2: در این قسمت تعیین می کنید چه مواردی زیر هدر شما درج شود؟ بدون محتوا، نوار شبکه های اجتماعی و…
• Phone Number For Contact Info: در این قسمت می توانید یک شکاره تماس درج کنید تا در سایت به کاربران شما نمایش داده شود.
• Email Address For Contact Info: در این فیلد هم می توانید یک ایمیل برای برقراری ارتباط درج کنید تا به بازدیدکنندگان نمایش داده شود در صورت عدم تمایل میتوانید این فیلد را خالی رها کنید.

2- تنظیم تصویر پس زمینه هدراز بخش Header Background Image

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

• Background Image For Header Area: در این قسمت می توانید یک تصویر برای بک گراند هدر انتخاب کنید این تصویر به صورت عمومی در تمام صفحات سایت حتی برگه ها و نوشته های جدید، قرار خواهید گرفت.
• 100% Background Image: بک گراند شما در اندازه 100% منطبق با عرض صفحه خواهد بود.
• Parallax Background Image: در این قسمت میتوانید تعیین کنید که بک گراند هدر شما حال پارالکس داشته باشد یا خیر؟ (پارالکس یک افکت جذاب در طراحی سایت است که همزمان با اسکرول، تصویر پس زمینه با سرعت کمتری نسبت به سایر المان ها حرکت خواهد کرد).
• Background Repeat: در این بخش می توانید نوع تکرار شدن تصویر بک گراند هدر را تعیین کنید حتی می توان تعیین کنید که تصویر هدر تکرارشونده نباشد.

3- تنظیمات استایل و ظاهر هدر سایت در Header Styling

استایل و ظاهر پیش فرض هدر کل سایت بر اساس این تنظیمات پیاده سازی می شود مثل پدینگ پیشض فرض هدرها، عرض هدر، رنگ بک گراند و…

در بخش Header Styling می توانید کلیه تنظیماتی که با ظاهر و استایل هدر سایت مرتبط است را تنظیم کنید.

• Header Padding: در این کادرها می توانید براساس پیکسل فاصله محتوای داخلی را تا لبه ها تعیین کنید.
• Header Shadow: میتوانید مشخص کنید که هدر دارای یک حالت سایه مانند، باشد یا خیر.
• 100% Header Width: در این بخش عرض هدر را تعیین کنید که نسبت 100 درصد با عرض صفحه داشته باشد یا خیر.
• Header Background Color: رنگ پیش فرضی برای پس زمینه هدرهای سایت تعیین کنید.
• Archive Header Background Color: رنگ بک گراند هدر صفحات آرشیو را از این بخش مشخص میکنید.
• Header Border Color: رنگ کادر اطراف هدر را تعیین کنید.
• Header Top Background Color: رنگ بک گراند بخش بالای هدر را انتخاب کنید.

4- ایجاد یک هدر چسبان در بخش Sticky Header

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

• Sticky Header: اگر قصد دارید حالت هدر چسبان را در سایت خود فعال کنید این گزینه را روی حالت On تنظیم کنید.
• Sticky Header on Tablets: با فعال کردن این گزینه تعیین می کنید در دستگاه های تبلت هم هدرسایت به صورت چسبان مشاهده شود.
• Sticky Header on Mobiles: هدر سایت در دستگاه های موبایلی هم به صورت چسبان نمایش داده شود.
• Sticky Header Shadow: یک کادر یا حالتی مثل سایه اطراف هدر نمایش داده می شود.
• Sticky Header Background Color: رنگ پس زمینه هدر چسبان را انتخاب کنید
• Sticky Header Menu Font Color: رنگ فونت منوهای قرار گرفته در هدر را تنظیم کنید.
• Sticky Header Menu Item Padding: می توانید تنظیم کنید که Padding آیتم های قرار گرفته در هدر چقدر باشد.
• Sticky Header Navigation Font Size: اندازه فونت متون داخل هدر را تنطیم کنید.

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

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

نتیجه گیری

با آموزش ساخت هدر در قالب آوادا در کنار شما بودیم و به نحوه پیاده سازی تنظیمات هدر سایت در قالب Avada اشاره کردیم. به طور خلاصه پس از طراحی هدر و شخصی سازی، نوبت به این میرسد که در بخش های مختلف قالب، هدر دلخواه خود را انتخاب کنید. با تغییر Header در هر صفحه می توانید هدر متفاوتی را به نمایش بگذارید.