سربرگ a سایت اینترنتی اولین قطعه اطلاعاتی است که توسط آخرین بازدید از سایت شما این به شما امکان می دهد لوگوی برند خود را برجسته کنید، صفحات سایت خود را سازماندهی کنید و همچنین سایر ویژگی های مهم (جستجو، اتصال و غیره) را ارائه دهید. علاوه بر این، داشتن یک هدر شناور و شفاف ضروری است زیرا تجربه کاربر را بهبود می بخشد.
در این مقاله به شما نشان خواهیم داد که چگونه یک هدر ایجاد کنید و آن را شفاف کنید Elementor. اما قبل از آن خواهیم دید که هدر شناور و شفاف چیست.
هدر شناور و شفاف چیست؟
هدر شناور یک نوار ناوبری است که همیشه ثابت می ماند حتی زمانی که بازدیدکننده صفحه وب را به پایین اسکرول می کند. برای سایت هایی که صفحاتی با مقالات طولانی، نقد و بررسی و سایت های تک صفحه ای دارند بسیار مناسب است. و جنبه شفاف آن به شما امکان می دهد رنگ پس زمینه صفحه و همچنین محتوای آن را مشاهده کنید.
چرا از هدرهای شناور و شفاف استفاده کنیم؟
وب سایت های مدرن به طور فزاینده ای از هدرهای شناور و شفاف استفاده می کنند زیرا تأثیر بصری بر روی آن دارند آخرین بازدید از سایت دلایل اتخاذ آنها عبارتند از:
- آگاهی از برند خود را افزایش دهید،
- افزایش تجربه کاربری،
- بهبود ناوبری
کشف کنید نحوه ایجاد یک عنوان دو رنگ در Elementor
با Elementor یک هدر را پین کرده و شفاف کنید
برای ایجاد یک هدر شفاف و شناور، باید هر دو نسخه را داشته باشیدElementor (Pro و Lite). در غیر این صورت فایل (Elementor, Elementor Pro) قبل از شروع.
پس از نصب، مراحل بعدی را دنبال کنید.
گام 1: یک منو با Elementor ایجاد کنید
برای ایجاد یک منو، مراحل زیر را دنبال کنید:
- به صورت متوالی انتخاب کنید ظاهر >> منوها
- منو را نام ببرید
- محل منو را مشخص کنید
- با کلیک بر روی دکمه اعتبار سنجی کنید منو ذخیره کنید
- صفحات، مقالات یا پست های گروه را بررسی کنید افزودن آیتم های منو
- با کلیک بر روی به منو اضافه کنید برای افزودن موارد علامت گذاری شده به منو
- در نهایت بر روی آن کلیک کنید منو را ذخیره کنید
Lire aussi Elementor: نحوه نمایش متن بالای یک تصویر
مرحله 2: قالب سرصفحه را از کتابخانه الگوی Elementor انتخاب کنید
کاربران ازElementor Pro دسترسی به کتابخانه ای از قالب های آماده برای استفاده برای طراحی بخش های مختلف a دارد وب سایت. همچنین انواع قالب های هدر را در اینجا خواهید یافت. برای انجام این،
- پی در پی به مدل ها >> افزودن
- یک پاپ آپ مودال را مشاهده خواهید کرد
- Sélectionnez هدر
- در نهایت بر روی آن کلیک کنید ایجاد یک الگوی
از آن به بعد، کتابخانه نمایش داده می شود. به طور پیش فرض، بلوک های هدر را نشان می دهد. الگوهای ارائه شده را مرور کنید، سپس الگوی مورد علاقه خود را وارد کنید.
قالب هدر در بوم Elementor باز می شود.
مرحله 3: پین هدر با Elementor
برای پین کردن هدر، مراحل زیر را دنبال کنید:
- روی دکمه کلیک کنید ویرایش بخش سرصفحه
- سپس تب را انتخاب کنید پیشرفته
- سپس اثر حرکت
- منو را پایین بکشید سنجاق و مقدار را انتخاب کنید در بالا، هنگامی که بازدید کننده صفحات را به پایین اسکرول می کند، هدر سایت شما مسدود می شود.
- بهطور پیشفرض، هدر بهطور خودکار روی رسانههایی مانند دسکتاپ، تبلت و موبایل پین میشود
همچنین مرور کنید Elementor: نحوه صادرات و واردات قالب ها
مرحله 4: هدر را با Elementor شفاف کنید
برای رسیدن به این هدف، روش زیر را تکرار کنید:
- رفتن به سبک >> پس زمینه >> انتخابگر رنگ
- سپس opacity پس زمینه را تغییر دهید
اگر می خواهید هدر را کاملا شفاف کنید، با انتخاب نوع، نوع پس زمینه را تغییر دهید کلاسیک. بنابراین، منوهای ناوبری به دلیل تضاد رنگ متن (سفید) نامرئی خواهند بود.
برای رفع این وضعیت موارد زیر را انجام دهید:
- به طور متوالی روی Modify Menu of کلیک کنید سبک های >> را مرور کنید
- سپس بر روی انتخاب کننده رنگ
- رنگ مورد نظر را انتخاب کنید (در مورد ما نیازی به تغییر آن نبود).
پس از اتمام، می توانید صفحه وب خود را منتشر کنید. اما قبل از آن، بیایید ببینیم که چگونه منوهای ناوبری را در قالب خود با منوهایی که ایجاد کردیم جایگزین کنیم. به یاد داشته باشید که نامی که به ما اختصاص داده شده است منوی سرصفحه (مرحله 1 را ببینید):
- برگه را انتخاب کنید محتویات
- سپس آن را اصلاح کنید منو با انتخاب نام هدر خود
و همین جا می روی :).
نتیجه
هدرهای شفاف و شناور می توانند در چندین مورد برای شما مفید باشند. امیدواریم این مقاله بتواند نیازهای شما را در مورد نحوه ایجاد هدرهای شفاف و شناور با المنتور برآورده کند. اگر نگرانی دیگری در مورد این موضوع دارید، در نظرات با ما در میان بگذارید.
تیم Bonjour،
از مقاله شما متشکرم
من در واقع یک هدر شفاف ایجاد کردم تا عکس در پس زمینه قابل مشاهده باشد.
با این حال این عکس فقط در صفحه اصلی است.
من می خواهم مشخص کنم که این هدر فقط در صفحه اصلی شفاف است زیرا در غیر این صورت در مقالات من دیگر آن را نمی بینم!
من شدیدا دنبال راه حل بودم... بدون موفقیت!
از کمک شما متشکرم