طراحی هدر شفاف و شیشه ای با المنتور: سلام به همراهان همیشگی رایا وردپرس اینبار برگشتم با یه آموزش جذاب😊که امیدوارم دوست داشته باشید. تو این آموزش یاد میگیریم که چطوری در المنتور با یه قطعه کد CSS یه هدر شیشه ای و شفاف داشته باشیم و سایتمون رو یه رنگ و لعابی بدیم 🙂 اگه شما هم مثل من هیجان زده هستید واسه انجام اینکار با من همراه باشید 🙂
آموزش طراحی هدر شفاف و شیشه ای با المنتور
هدر شفاف یا شیشه ای یکی از المان‌های جذاب و مدرن در طراحی وبسایته که میتونه به وبسایت شما ظاهری شیک و حرفه‌ای بده. با استفاده از افزونه المنتور، میتونید به راحتی هدرهای شفاف و سفارشی شده ایجاد کنید. در این آموزش، گام به گام شما رو با مراحل طراحی هدر شیشه ای با المنتور آشنا میکنم.
چرا هدرشفاف و شیشه ای؟
- ظاهر مدرن: هدرهای شیشه ای به وبسایت شما ظاهری مدرن و جذاب میبخشن.
- جلب توجه: این نوع هدرها توجه کاربران را به محتوای اصلی وبسایت جلب میکنن.
- افزایش تعامل کاربر: هدرهای شفاف باعث میشن کاربر احساس کنه که مستقیماً با محتوای وبسایت در تعامل هست.
مراحل طراحی هدر شفاف با المنتور ️
اگه از قبل هدر طراحی کردید که هیچی فقط کافیه قطعه کد CSS انتهای این مطلب رو به هدرتون اضافه کنید اما اگه هدر طراحی نکردید من بهتون میگم که چطوری یه هدر ساده و شیشه ای بزنیم.
خب برای ایجاد هدر در وردپرس به قسمت پیشخوان برید و از قسمت سایدبار قالب ها و سپس افزودن جدید رو بزنید.
✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کنAD
در این بخش نوع قالب رو Header (هدر) انتخاب کنید و یه نام دلخواه برای هدرتون تایپ و سپس روی گزینه ایجاد قالب بزنید.
بعد اینکه برگه هدر در المنتور براتون باز شد هدرتون رو طراحی کنید. کارتون که تموم شد روی ویرایش بخش یا سکشن هدر بزنید و از تب پیشرفته در قسمت کد سفارشی یا Custom CSS قطعه کد سفارشی زیر رو وارد کنید.
.selector {
backdrop-filter: saturate(180%) blur(15px) !important;
background-color: rgb(255 255 255 / 20%) !important;
}دقت داشته باشین که اصولیش اینه کد سی اس اس سفارشی تون رو در فایل استایل خود قالب با نام Style.css وارد کنید یا هم از قسمت سفارشی سازی قالبتون کاستوم css اونجا کدو بزارید.
نکات مهم برای طراحی هدر شفاف (شیشه ای) ✨
- تضاد رنگ‌ها: از رنگ‌هایی استفاده کنید که با پس‌زمینه شفاف تضاد داشته باشن تا متن و عناصر دیگر به خوبی قابل رویت باشن.
- سادگی: هدرهای شیشه ای معمولاً ساده هستند. از شلوغ کردن هدر با عناصر زیاد خودداری کنید.
- سرعت بارگذاری: از تصاویر با کیفیت مناسب و بهینه استفاده کنید تا سرعت بارگذاری وبسایت کاهش پیدا نکنه.
با کمی خلاقیت و استفاده از امکانات المنتور، میتونید هدرهای شیشه ای زیبای و جذابی واسه سایتتون طراحی کنید.
🎥 آموزش ویدیویی ایجاد هدر شفاف در المنتور
همچنین میتونید ویدیوی آموزشی زیر رو تماشا کنید تا بهتر با نحوه طراحی هدر شفاف در وردپرس و المنتور آشنا بشید 🙂
شاید براتون سوال پیش بیاد!
آیا برای طراحی هدر شفاف به المنتور پرو نیاز است؟
خیر، با نسخه رایگان المنتور نیز میتوانید هدر شیشه ای طراحی کنید. اما برخی از ویژگی‌های پیشرفته مانند انیمیشن‌ها و افکت‌های خاص ممکن است در نسخه پرو در دسترس باشند.
چگونه پس‌زمینه هدر را شفاف کنیم؟
در تنظیمات پیشرفته بخش هدر، قطعه کد CSS این آموزش را قرار دهید.
چگونه متن را در هدر شفاف خوانا کنیم؟
برای خوانایی بهتر متن در پس‌زمینه شفاف، از رنگ‌هایی با کنتراست بالا استفاده کنید و مطمئن شوید که اندازه فونت به اندازه کافی بزرگ باشد.
چه زمانی بهتر است از هدر شفاف یا شیشه ای استفاده کنیم؟
هدر شیشه ای برای وبسایت‌هایی با طراحی مینیمال و مدرن بسیار مناسب است. همچنین برای وبسایت‌هایی که می‌خواهند بر روی محتوای تصویری خود تاکید کنند، هدر شیشه ای گزینه خوبی است.
