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

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

در این قسمت قرار است با یکدیگر ساخت هدر شفاف را یاد بگیریم. همانطور که گفتیم سعی می‌کنیم تک تک نکات مهم مربوط به ساخت هدر را به شما آموزش دهیم تا هیچ سوالی در ذهن شما باقی نماند.

ساخت هدر شفاف

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

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

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

تراز کردن المان‌ها

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

شفاف کردن پس زمینه هدر

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

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

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

تنظیمات پیشرفته

یک سری تنظیمات اضافه دیگری هم وجود دارد که در واقع برای زمانی است که شما صفحه سایت را اسکرول می‌کنید. ابتدا برای اینکه هنگام اسکرول کردن صفحه سایت، منو پایین بیاید باید به تب تنظیمات پیشرفته بروید و بر روی گزینه موشن افکت کلیک کنید. اگر گزینه چسبان را بر روی “بالا” قرار دهید، منو هنگام اسکرول صفحه پایین می‌آید. ولی به جهت اینکه منو در زیر لایه‌های دیگر گم نشود باید Z ایندکس آن را تا حدی زیاد کنید که هنگام اسکرول منو اصلا مخفی نشود.

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

elementor-sticky–effects{background-color:rgba(0,0,0,0.5) !important;}.

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

سخن پایانی

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