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

create vertical header elementor

فهرست مطالب

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

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

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

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

بخش جدید
ساخت بخش جدید در المنتور

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

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

هدر عمودی
ساخت سربرگ عمودی

بخش طرح بندی

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

طرح بندی
بخش طرح بندی در المنتور

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

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

ایندکس بخش
قرار دادن ایندکس بر روی بخش

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

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

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

سفارشی سازی ستون
سفارشی سازی بخش ستون های المنتور

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

بخش پیشرفته
بخش پیشرفته برای کلاس css

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

تصوری رنگی
رنگی کردم تصویر در صفحه

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

شرایط
انتخاب کردن شرایط قرار گیری هدر

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

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

کدهای css
اضافه کردن کدهای css سفارشی

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

مشاهده سایت
مشاهده سایت مورد نظر

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

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

کدهای مورد نظر
کدهایی برای مچ کردن هدر و زیر هدر

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

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

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

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

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

تعیین فاصله
نتخاب فاصله بین ابزرکها

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

ساخت سربرگ عمودی
طراحی هدر عمودی در المنتور

سخن پایانی

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

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

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

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

      پاسخ

دیدگاهتان را بنویسید