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

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

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

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

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

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

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

بخش طرح بندی

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سخن پایانی

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