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

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

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

در مقالات گذشته به ساخت فوتر با المنتور پرداخته‌ایم. اکنون نوبت به طراحی هدر رسیده است؛ بخشی از سایت که اولین نگاه کاربران به آن می‌افتد. اگر از صفحه‌ساز المنتور استفاده می‌کنید، امکانات فراوانی در اختیار دارید که یکی از آن‌ها امکان ساخت هدر شفاف در وردپرس است. برای شروع، ابتدا مطمئن شوید افزونه المنتور پرو را نصب و فعال کرده‌اید. سپس وارد پیشخوان وردپرس شوید و از مسیر «قالب‌ها» به بخش «قالب‌های ذخیره شده» بروید. در این قسمت ممکن است قالب‌هایی برای هدر مشاهده کنید. در صورت عدم وجود قالب آماده، می‌توانید یک قالب جدید به‌صورت سکشن (Section) بسازید.

مراحل ساخت هدر شفاف در وردپرس

مراحل ساخت هدر شفاف در وردپرس عبارتند از:

مرحله ۱:

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

مرحله ۲:

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

مرحله ۳:

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

مرحله ۴:

معمولاً یک سربرگ به‌صورت پیش‌فرض شامل عناصری مانند لوگو و بخش‌های مرتبط با تنظیمات قالب است. با این حال، اگر در صفحه طراحی المنتور چنین عناصری را مشاهده نکردید، جای نگرانی نیست. به راحتی می‌توانید با استفاده از قابلیت کشیدن و رها کردن (Drag & Drop) ویجت‌های المنتور، یک تصویر دلخواه را به‌عنوان لوگوی سایت در ناحیه هدر قرار دهید و آن را مطابق با طراحی سایت شخصی‌سازی کنید.

مرحله ۵:

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

مرحله ۶:

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

مرحله ۷:

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

مرحله ۸:

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

مرحله ۹:

برای شفاف کردن هدر، وارد تب "استایل" شوید. سپس گزینه مربوط به "پس‌زمینه" را انتخاب کرده و مقدار آن را به (255,255,255,0)rgba تغییر دهید. این کار باعث می‌شود که پس‌زمینه هدر کاملاً شفاف شود و جلوه‌ای مدرن و جذاب به سایت شما ببخشد. در این فرآیند، شما موفق به ساخت هدر شفاف در وردپرس شدید.

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

برای حرفه‌ای‌تر شدن ساخت هدر شفاف در وردپرس، بهتر است به سراغ تنظیمات پیشرفته‌تری بروید. در ابتدا، برای ایجاد هم‌پوشانی بین هدر و محتوای زیر آن، مقدار Margin پایین را به منفی 100 پیکسل یا کمتر تنظیم کنید. همچنین در تنظیمات پیشرفته سربرگ، مقدار ارتفاع (Height) را بر روی منفی 90 پیکسل قرار دهید. توجه داشته باشید که برای اعمال دقیق این تغییرات، حتماً گزینه زنجیر کنار تنظیمات فاصله را غیرفعال کنید تا مقادیر به صورت مستقل وارد شوند. برای اطمینان از اینکه هدر همواره روی سایر المان‌ها قرار بگیرد، مقدار z-index را روی 999 قرار دهید. این کار باعث می‌شود سربرگ در بالاترین لایه نمایش قرار گیرد.

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

سپس به بخش Motion Effects بروید. در این قسمت، گزینه Sticky را روی Top قرار داده و در تنظیمات مربوط به نمایش، دستگاه‌هایی مانند دسکتاپ، تبلت و موبایل را نیز انتخاب کنید تا هدر در تمام صفحات به صورت شناور باقی بماند. مقدار Offset نیز باید بر اساس ارتفاع هدر تنظیم شود تا هنگام اسکرول، رفتار مناسبی از خود نشان دهد. تا این مرحله، طراحی سفارشی هدر شما کامل شده اما ممکن است در زمان اسکرول به علت شفاف بودن پس‌زمینه، عناصر موجود در هدر به‌خوبی دیده نشوند. برای رفع این مشکل، می‌توانید از کد CSS استفاده کنید تا رنگ بک‌گراند هدر هنگام اسکرول تغییر یابد. 

برای انجام این کار، به تب Advanced بروید، گزینه Custom CSS را انتخاب کرده و کد زیر را وارد کنید:

.elementor-sticky--effects {

  background-color: #000;}

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