آیلین وب

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

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

آموزش طراحی هدر عمودی

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

word image 31 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
ساخت بخش جدید در المنتور

سفارشی سازی بخش

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

word image 32 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
ساخت سربرگ عمودی

بخش طرح بندی

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

word image 33 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
بخش طرح بندی در المنتور

بخش تب پیشرفته

در این بخش مقدار ایندکس Z را بر روی عدد 1000 قرار دهید و در بخش کلاس‌های CSS مقدار Vertical را وارد کنید. بهتر است طبق تصویر زیر عمل کنید.

word image 34 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
قرار دادن ایندکس بر روی بخش

نکته حائز اهمیت در این بخش این است که برای پس زمینه یک رنگ انتخاب کنید تا ناحیه سربرگ مشخص شود.

سفارشی سازی ستون

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

word image 35 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
سفارشی سازی بخش ستون های المنتور

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

word image 36 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
بخش پیشرفته برای کلاس css

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

word image 37 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
رنگی کردم تصویر در صفحه

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

word image 38 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
انتخاب کردن شرایط قرار گیری هدر

اضافه کردن کدهای CSS

در این مرحله باید کدهای CSS را برای تعیین کردن هدر عمومی اضافه کنید. برای این کار بر روی بخش اصلی کلیک کرده و در تب پیشرفته تب CSS را باز کرده و کدهای زیر را درون آن قرار دهید.

word image - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
اضافه کردن کدهای css سفارشی

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

word image 39 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
مشاهده سایت مورد نظر

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

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

word image 1 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
کدهایی برای مچ کردن هدر و زیر هدر

برای رفع مشکل، عدد فاصله محتوا را به گونه‌ای تعیین کنید که همان مقدار عرض هدر باشد. اگر عرض هدر را روی 200 تنظیم کرده‌اید باید مقدار فاصله نیز 200 باشد.

استایل دهی به هدر عمودی

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

word image 40 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
استایل دهی به هدر عمودی در المنتور

همان‌طور که ملاحظه می‌کنید هدر ظاهر جالبی نداشته و ویجت ها در بالا قرار گرفته‌اند.

word image 41 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
نتخاب فاصله بین ابزرکها

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

word image 42 - آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری
طراحی هدر عمودی در المنتور

سخن پایانی

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

2 دیدگاه دربارهٔ «آموزش طراحی هدر عمودی (Vertical Header) در المنتور + آموزش تصویری»

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

    1. سلام دوست عزیز
      تا الان تجربه ای در مورد این ارور نداشتم تنها راهش اینه که شما اطلاعات ورود رو به تلگرم بنده ارسال کنید تا درستش کنم.@aylinweb
      چون باید مشکل پیدا بشه

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
آموزش انتخاب بهترین کلمات کلیدی (Keywords) برای محتوا + فیلم آموزشی

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

آموزش انتخاب بهترین کلمات کلیدی برای سایت و محتوا، موضوع این جلسه

هاست ویندوز و هاست لینوکس : کدوم رو انتخاب کنم؟

هاست ویندوز و هاست لینوکس

قبل از راه اندازی و ساخت سایت با وردپرس  باید حتما قبلش

آموزش ساخت مگامنو در المنتور (رایگان) + 📽فیلم آموزشی

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

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

کپی کردن صفحات المنتور به صورت کامل از یک سایت به سایت دیگر + (فیلم آموزشی)

کپی کردن صفحات المنتور به

شاید برای خیلی از شماها پیش اومده که توی طراحی صفحات با

مطالب داغ
اسکرول به بالا