آموزش طراحی هدر شفاف (Transparent) با المنتور

بعد از اینکه هدر سفارشی خودتان را طراحی کردید شاید نیاز به کمی سفارشی سازی و تغییر در ظاهر هدر داشته باشید. روش های مختلفی برای سفارشی سازی هدر سایت هست. یکی از این روش ها ایجاد هدر شفاف (Transparent) می باشد.

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

با ما همراه باشید…

برای مشاهده ویدئو به مقاله طراحی سربرگ شفاف و چسبنده با المنتور مراجعه کنید.

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

در مرحله اول ابتدا یک هدر با استفاده از مقاله طراحی هدر با استفاده از المنتور پیاده سازی کنید.

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

استایل هدر

سپس به تب استایل هدر رفته و مقدار پس زمینه را روی rgba(255,255,255,0) قرار دهید. با این کار مقدار پس زمینه را بدون رنگ و شفاف خواهد شد.

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

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

برای قرار دادن هدر بر روی محتوا، به بخش پیشرفته هدر رفته، و مقدار فاصله (Margin) از پایین را به میزان ارتفاع هدر به صورت منفی وارد کنید. ما در اینجا ارتفاع هدر را 80 پیکسل قرار دادیم، پس مقدار فاصله از پایین را -80 پیکسل قرار میدهیم.

همچنین برای قرار گرفتن هدر بر روی محتوا اصلی، باید مقدار z-index را روی 5 قرار دهید تا با اولویت بالاتری در سایت قرار بگیرد.

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

به تنظیمات هر ویجت رفته و رنگ منو، لوگو، دکمه و یا هر ویجت دیگری که در بخش هدر دارید را تغییر دهید.

به این صورت می توانید با استفاده از المنتور یک هدر شفاف طراحی کنید.

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