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

مقدمه:

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

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

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

1.ایجاد قالب (header):

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

2. ایجاد هدر در ویرایشگر المنتور:

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

1. ابتدا بر روی گزینه افزودن کانتینر جدید کلیک کرده و ساختار کانتینر خود را انتخاب می‌کنیم. بهتر است که در تب محتوا، عرض کانتینر اصلی خود را بر روی ” تمام عرض” تنظیم کنید. در تب استایل نیز می‌توانید آن را استایل دهی کرده و برای بک گراند آن از رنگ یا تصویر استفاده کنید. (در این مثال ساختار کانتینر را چهار ستون انتخاب می‌کنیم).

2. در مرحله بعد عرض کانتینرهای خود را تنظیم می‌کنیم.(در این مثال عرض کانتینر اول را 20 درصد، کانتیر دوم 22 درصد، کانتینر سوم 39 درصد وکانتیر چهارم  را 19 درصد وارد می‌کنیم).

3. ویجت‌های مورد نیاز را به هدر اضافه کرده وتنظیمات آنها را اعمال می‌کنیم.

ما از تصویر برای کانتینر اول، Search Form برای کانتینر دوم، WordPress menu برای کانتینر سوم و از دکمه برای کانتینر چهارم استفاده می‌کنیم.

تنظیمات کانتینر اصلی در المنتور:

• درتب محتوا، عرض محتوا را تمام عرض و گزینه Wrap را فعال می‌کنیم، بهتر است که چینش موارد را هم بر روی وسط تنظیم ‌کنید.
• در تب استایل نیز رنگ پس زمینه را تنظیم کرده و از جدا کننده کوه‌ها برای بالای کانتینر استفاده می‌کنیم، برای نمایش بهتر یک پیکسل از سمت پایین به کانتینر حاشیه‌ی یکپارچه می‌دهیم.

تنظیمات تصویر در کانتینر اول:

تصویر لوگوی خود را انتخاب کرده و در تب استایل ارتفاع آن را 68 پیکسل وارد می‌کنیم، object-fit را نیز در برگیرنده انتخاب می‌کنیم.

تنظیمات Search form:

در تب محتوا، سایز فرم جستجو را 37 پیکسل وارد می‌کنیم.

تنظیمات منو:

• ابتدا لازم است تا منوی خود را انتخاب کنیم. سپس در تب محتوا چیدمان را وسط انتخاب کرده و Breakpoint را در حالت موبایل قرار می‌دهیم تا منوی ما در موبایل به صورت همبرگری نمایش داده شود، گزینه Full width را نیز فعال می‌کنیم.
• در تب استایل رنگ منو را در حالت های نرمال، هاور و drop down تنظیم می‌کنیم.

تنظیمات دکمه ورود و ثبت نام:

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

3. تنظیم هدر در تبلت و موبایل:

این برای ما مهم است که هدر در انواع دستگاه‌ها به درستی نمایش داده شود. به همین دلیل هدر ایجاد شده با المنتور را در حالت های تبلت و موبایل ویرایش می‌کنیم.

تنظیمات هدر در حالت تبلت:

در حالت تبلت تنها کافیست که عرض کانتینرها را تغییر دهید (کانتینر اول 19 درصد، کانتیر دوم 81 درصد، کانتینر سوم 73 درصد و کانتیر چهارم را 27 درصد).

تنظیمات هدر در حالت موبایل:

• در حالت موبایل نیز مانند تبلت ابتدا عرض کانتینرها را تغییر می‌دهیم (کانتینر اول 100 درصد، کانتیر دوم 100 درصد، کانتینر سوم 23 درصد و کانتیر چهارم را 77 درصد).
• در تب استایل (تصویر موجود در کانتیر اول) چیدمان را سمت چپ قرار داده و عرض و ارتفاع تصویر را تنظیم می‌کنیم، برای دکمه ورود و ثبت نام نیز چیدمان را سمت چپ قرار میدهیم.

4.انتشار و افزودن شرط هدر در المنتور:

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

نکته: توجه داشته باشید که اگر شرط را در المنتور وارد نکنید، هدر ایجاد شده در وبسایت شما نمایش داده نخواهد شد.

5. شناور کردن هدر در المنتور:

در بسیاری از وبسایت‌ها هدر به صورت شناور همیشه در بالای وبسایت نمایش داده می‌شود، برای ساخت هدر شناور در المنتور کافیست که به تب پیشرفته در کانتینر اصلی رفته و در قسمت موشن افکت، گزینه Sticky را “Top” انتخاب کنید، در این صورت هدر شما به صورت شناور در بالای وبسایت نمایش داده خواهد شد.