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

Share

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی هدر شفاف با المنتور

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=16158

نظرات ارزشمند خود را به اشتراک بگذارید

14 − هشت =

نیاز به کمک دارید؟ پیام دهید
  • بازگشت به کتابخانه

قالب های آماده جدید Travel Kit هم اکنون در افزونه المنتور پرو