آموزش ساخت هدر شفاف شیشه‌ای در وردپرس

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

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

هدر شیشه‌ای (Glassy Header) دقیقاً چیست؟

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

این ظاهر از ترکیب دو ویژگی به دست می‌آید: یک رنگ پس‌زمینه نیمه‌شفاف و افکت Blur روی محتوای پشت هدر. میزان شفافیت باید طوری انتخاب شود که تصویر یا رنگ زیر هدر مشخص باشد، اما نوشته‌های منو، لوگو و دکمه‌ها همچنان راحت خوانده شوند.

افکت Blur زمانی بیشتر به چشم می‌آید که کاربر صفحه را اسکرول می‌کند یا پشت هدر یک تصویر، گرادینت یا طرح گرافیکی قرار دارد. این محوشدگی جلوی انتقال جزئیات شلوغ پس‌زمینه به فضای منو را می‌گیرد و تمرکز را روی عناصر اصلی هدر نگه می‌دارد.

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

پیش‌نیازهای ساخت هدر شیشه‌ای در وردپرس

پیش از شروع، وردپرس و Elementor را نصب و به‌روز کنید و مطمئن شوید به پیشخوان سایت دسترسی کامل دارید. همچنین از سایت نسخه پشتیبان بگیرید تا اگر نتیجه تنظیمات مطابق انتظارتون نبود، امکان بازگردانی تغییرات را داشته باشید.

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

در نسخه‌های جدید Elementor، ساختارهای تازه معمولاً با Container ساخته می‌شوند. اگر هدر قدیمی‌تری را ویرایش می‌کنید، ممکن است همچنان Section و Column ببینید. منطق آموزش در هر دو حالت یکی است: همه اجزای اصلی باید داخل یک ظرف اصلی قرار بگیرند تا شفافیت و Blur به‌صورت یکدست روی کل هدر اعمال شود.

چرا در این آموزش از قالب وردپرس اهورا استفاده می‌کنیم؟

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

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

البته استفاده از قالب اهورا اجباری نیست. اگر قالب شما هدرساز سازگار با Elementor و تنظیمات هدر چسبان دارد، می‌تونید همین اصول را اجرا کنید؛ فقط ممکن است نام گزینه‌ها و مسیر دسترسی به آن‌ها متفاوت باشد.

ویرایش و طراحی ساختار هدر با Elementor

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

ورود به ویرایشگر هدر

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

برای هدر موردنظرتون روی «ویرایش با Elementor» بزنید. پس از بازشدن ویرایشگر، لوگو، منوی ناوبری، دکمه‌ها و ساختار فعلی هدر را به‌صورت زنده می‌بینید.

Container یا Section اصلی هدر را پیدا کنید؛ همان بخشی که تمام عناصر هدر داخل آن قرار می‌گیرند. تنظیمات شیشه‌ای را بعداً روی همین بخش اعمال می‌کنیم، پس بهتره لوگو، منو و دکمه‌ها بین چند ظرف جدا و نامرتبط پخش نشده باشند.

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

ساده‌سازی ساختار هدر

افکت شیشه‌ای روی هدر شلوغ معمولاً نتیجه خوبی نمی‌دهد. اگر چند ردیف، دکمه‌های متعدد یا عناصر تزئینی زیادی دارید، ابتدا موارد غیرضروری را حذف کنید. هدر باید در یک نگاه مسیرهای اصلی سایت را به کاربر نشان دهد.

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

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

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

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

انتخاب بک‌گراند مناسب برای نمایش بهتر هدر شیشه‌ای

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

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

تنظیم تصویر پس‌زمینه سایت

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

تصویر موردنظرتون را بارگذاری و پیش‌نمایش زنده را بررسی کنید. اگر از SVG استفاده می‌کنید، یادتون باشد وردپرس به‌صورت پیش‌فرض بارگذاری همه فایل‌های SVG را مجاز نمی‌کند؛ فقط فایل مطمئن و پاک‌سازی‌شده را با روشی امن و سازگار با سایت بارگذاری کنید.

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

از کجا بک‌گراند SVG مناسب پیدا کنیم؟

SVG برای طرح‌های برداری مثل موج، شکل‌های هندسی و گرادینت‌های ساده مناسب است، چون بدون افت کیفیت تغییر اندازه می‌دهد. بااین‌حال، حجم آن همیشه از PNG یا JPG کمتر نیست و به پیچیدگی مسیرها و جزئیات فایل بستگی دارد.

اگر با ابزارهای طراحی آشنا هستید، می‌تونید پس‌زمینه را بر اساس رنگ‌های برند خودتون بسازید. چند شکل ساده و فضای خالی کافی است؛ جزئیات زیاد هم حجم فایل را بالا می‌برد و هم خوانایی هدر را دشوارتر می‌کند.

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

برای پیداکردن نمونه‌ها می‌تونید در Google عبارت‌هایی مانند «SVG background for website» یا «SVG wave background» را جست‌وجو کنید. از دانلود فایل از سایت‌های ناشناس یا بارگذاری SVG بررسی‌نشده روی وردپرس خودداری کنید.

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

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

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

در ویرایشگر Elementor، Container یا Section اصلی هدر را انتخاب کنید؛ یعنی همان بخشی که لوگو، منو و سایر عناصر داخل آن قرار دارند.

به تب Style بروید و در قسمت Background، حالت Classic را انتخاب کنید. سپس یک رنگ روشن، برای نمونه سفید، در نظر بگیرید. اگر طراحی سایت شما تیره است، می‌تونید از رنگ تیره نیمه‌شفاف استفاده کنید؛ مهم این است که رنگ با منو و لوگو کنتراست کافی داشته باشد.

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

تغییرات را ذخیره و پیش‌نمایش کنید. در این مرحله هدر نیمه‌شفاف شده، اما هنوز محتوای پشت آن محو نمی‌شود. حاشیه، سایه و CSS مربوط به Blur را در مراحل بعد اضافه می‌کنیم.

زیباتر کردن هدر با حاشیه و سایه

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

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

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

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

صفحه را ذخیره کنید و هدر را روی چند بخش روشن و تیره بررسی کنید. اگر مرز هدر بیش‌ازحد مشخص است، ابتدا شدت حاشیه و سایه را کم کنید؛ معمولاً نیازی نیست شفافیت کل هدر را تغییر دهید.

فعال‌سازی هدر چسبان (Sticky Header)

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

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

پس از فعال‌سازی، صفحه را اسکرول کنید و وضعیت لوگو، منو و دکمه‌ها را ببینید. هدر نباید بپرد، ارتفاعش ناگهان تغییر کند یا پشت سایر عناصر قرار بگیرد. اگر چنین مشکلی دیدید، تنظیمات Position و z-index هدر را در امکانات قالب یا Elementor بررسی کنید.

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

ساخت شیشه واقعی با CSS و افکت Blur

تا اینجا هدر نیمه‌شفاف است، اما هنوز محتوای پشت آن را محو نمی‌کند. ویژگی CSS با نام backdrop-filter همان بخشی است که افکت شیشه‌ای را کامل می‌کند.

برای اعمال این ویژگی باید هدر را با یک شناسه منحصربه‌فرد هدف بگیریم. این کار به Elementor Pro وابسته نیست و شناسه CSS را می‌تونید از تنظیمات پیشرفته همان Container یا Section وارد کنید.

اضافه‌کردن شناسه CSS به هدر

در ویرایشگر Elementor، Container یا Section اصلی هدر را انتخاب کنید؛ همان بخشی که رنگ، حاشیه و سایه را روی آن تنظیم کردید.

تب Advanced را باز کنید و در فیلد CSS ID شناسه زیر را بنویسید. علامت # را داخل این فیلد وارد نکنید:

mihanwp-glass-header

این شناسه باعث می‌شود کد مرحله بعد فقط همان هدر را هدف بگیرد و روی بخش‌های دیگر صفحه اثر نگذارد. هر CSS ID باید در صفحه یکتا باشد؛ پس این عبارت را به عنصر دیگری ندهید.

تغییرات را ذخیره کنید و مطمئن شوید هدر بدون مشکل نمایش داده می‌شود. حالا می‌تونیم با همین شناسه، CSS مربوط به Blur را اضافه کنیم.

افزودن CSS سفارشی برای ایجاد افکت شیشه‌ای واقعی

در قالب‌های کلاسیک مانند اهورا، معمولاً می‌تونید از مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» کد را وارد کنید. در قالب‌های بلوکی، Customizer ممکن است در دسترس نباشد و محل CSS سراسری داخل بخش Styles ویرایشگر سایت قرار بگیرد.

کد زیر را در بخش CSS سفارشی قرار دهید:

#mihanwp-glass-header {
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

رنگ rgba یک پس‌زمینه سفید نیمه‌شفاف می‌سازد و در صورت اجرا نشدن Blur، نقش حالت جایگزین را دارد. ویژگی backdrop-filter محتوای پشت هدر را محو می‌کند و -webkit-backdrop-filter برای سازگاری بهتر با برخی نسخه‌های مرورگرهای مبتنی بر WebKit اضافه شده است.

مقدار blur(10px) نقطه شروع مناسبی برای آزمایش است، نه یک قانون ثابت. اگر نوشته‌ها روی پس‌زمینه شلوغ گم می‌شوند، ابتدا شفافیت رنگ زمینه را کمتر کنید؛ Blur بسیار زیاد ممکن است هزینه پردازشی بیشتری داشته باشد، به‌خصوص روی بعضی دستگاه‌های موبایل.

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

نکات مهم برای طراحی حرفه‌ای‌تر هدر شیشه‌ای

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

انتخاب فونت مناسب برای هدر

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

استفاده از لوگوی SVG شفاف

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

خوانایی متن منو را در اولویت بگذارید

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

تعادل در استفاده از افکت‌ها

خود افکت شیشه‌ای به‌اندازه کافی جلب توجه می‌کند. سایه سنگین، انیمیشن‌های متعدد و تغییرات اغراق‌شده هنگام اسکرول، هدر را شلوغ می‌کنند. هر افکتی را با یک سؤال بسنجید: آیا پیدا کردن مسیر و استفاده از منو را ساده‌تر می‌کند؟ اگر پاسخ منفی است، احتمالاً نیازی به آن ندارید.

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

سؤالات متداول (FAQ)

جمع‌بندی

برای ساخت هدر شیشه‌ای در وردپرس، ابتدا اجزای هدر را داخل یک Container یا Section اصلی مرتب کنید. بعد یک پس‌زمینه نیمه‌شفاف، حاشیه و سایه ظریف بسازید، هدر چسبان را فعال کنید و در پایان با backdrop-filter محتوای پشت آن را محو کنید.

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

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

تیم تولید محتوا

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