نیاز به تغییر هدر در اسکرول صفحه با Elementor ?
رفتارهای هدر زیادی وجود دارد که می توانید با آنها به دست آورید Elementor Pro. یکی از آنها تغییر یک سرصفحه با سرصفحه دیگر هنگام پیمایش صفحه است. این مقاله به شما نشان می دهد چگونه.
Elementor همان طور که می دانید Pro با یک ویژگی همراه است تم سازنده به شما اجازه می دهد تا یک هدر سفارشی بر روی خود ایجاد کنید سایت اینترنتی وردپرس. به لطف این ویژگی، دیگر نیازی به اتکا به آنچه ارائه می شود ندارید تم وردپرس وقتی صحبت از سفارشی سازی هدرها می شود که معمولاً محدود است.
می‌توانید هر عنصری را که می‌خواهید اضافه کنید، از هر تنظیم تایپوگرافی که می‌خواهید استفاده کنید و هر رفتاری را که دوست دارید تنظیم کنید.
Elementor Pro دارای یک گزینه تنظیم داخلی برای اضافه کردن a است هدر چسبنده. ما از این قابلیت برای ایجاد هدر استفاده خواهیم کرد که با اسکرول صفحه تغییر می کند. CSS سفارشی نیز برای این نوع رفتار هدر مورد نیاز خواهد بود.
همچنین بخوانید: نحوه ایجاد یک هدر سفارشی در وردپرس با Elementor
در اینجا نمونه ای از هدر است که با اسکرول صفحه تغییر می کند.
مرحله 1: هدر سفارشی ایجاد کنید
قبل از شروع، مطمئن شوید که Elementor خود را به نسخه حرفه ای ارتقا داده اید زیرا Theme Builder فقط در Elementor Pro در دسترس است. شما می توانید نسخه حرفه ای Elementor Pro را در آن دریافت کنید وب سایت رسمی.
وقتی آماده شدید، به الگوها -> قالب ساز در داشبورد اصلی وردپرس شما. در داشبورد تم ساز، نشانگر خود را روی برگه نگه دارید سربرگ و روی نماد کلیک کنید به علاوه برای ایجاد یک قالب هدر جدید.
در کتابخانه قالبی که ظاهر می شود، می توانید یک الگوی سرصفحه از پیش تعریف شده را انتخاب کنید که دوست دارید. یا اگر می‌خواهید هدر را از ابتدا ایجاد کنید، می‌توانید کتابخانه الگو را ببندید تا ویرایشگر Elementor باز شود.
همچنین کشف کنید: نحوه ایجاد اشکال سفارشی در Elementor
در این مقاله، قالب هدر را از ابتدا ایجاد می کنیم.
ایجاد هدر خود را با افزودن یک بخش شروع کنید، سپس عناصر لازم را اضافه کنید و بر اساس آن استایل ها را ایجاد کنید.
هنگامی که عناصر لازم را اضافه کردید و استایل ها را ایجاد کردید، به تب بروید پیشرفته زیر بلوک پیشرفته ، شاخص Z را روی 100 قرار دهید و کلاس CSS را اضافه کنید.header-1
سپس قسمت سرصفحه ای را که در بالا ایجاد کردید کپی کنید. بخش تکراری دومین سرصفحه شما خواهد بود که وقتی صفحه به پایین اسکرول شود ظاهر می شود.
هدر تکراری را ویرایش کنید. می توانید موارد بیشتری اضافه کنید یا موارد موجود را حذف کنید. همچنین می توانید پس زمینه را تغییر دهید. تمام آنچه شما می خواهید. پس از اتمام ویرایش، به برگه بروید پیشرفته زیر بلوک تنظیمات پیشرفته، نام کلاس CSS را به header-2 تغییر دهید.
سپس بلوک را باز کنید اثرات حرکتی در لیست کشویی مهم ، تنظیم شده به بالا. می توانید افست افکت ها را در فیلد تعریف کنید افست افکت. مقداری که در اینجا تنظیم می‌کنید، عمق اسکرول را قبل از ایجاد افکت (در این مورد چسبنده) تعیین می‌کند.
پس از اتمام ویرایش هر دو بخش سرصفحه، ترتیب آنها را تغییر دهید.
قسمت پایین را ویرایش کنید و حاشیه منفی را بالای قسمت بالا قرار دهید. برای انجام این کار، به زبانه Advanced و حاشیه بالایی را در حدود -65 قرار دهید.
هدر خود را با کلیک بر روی دکمه منتشر کنید انتشار دهنده در پایین پانل تنظیمات Elementor. با کلیک بر روی دکمه یک شرط نمایش اضافه کنید یک شرط اضافه کنید کلیک بر روی دکمه ذخیره کن و ببند هنگامی که تنظیم وضعیت نمایش را انجام دادید.
مرحله 2: CSS سفارشی را اضافه کنید
CSS زیر برای کنترل اثر گذار استفاده می شود. می‌توانید CSS را روی Theme Customizer اضافه کنید. قابل اعتماد و متخصص ظاهر -> سفارشی کردن در داشبورد اصلی وردپرس شما. در داشبورد Theme Customizer، بلوک را باز کنید CSS اضافی و CSS زیر را Paste کنید.
قطعه CSS:
.header-2 {transform: translatey (-80px); -moz-transition: همه .3s سهولت!مهم. -webkit-transition: همه .3s سهولت!مهم. انتقال: همه سهولت .3 مهم است. } .elementor-sticky - effect.header-2 {height: auto! important; transform: translatey (0px)؛ } .elementor-sticky - effect.header-1 {نمایش: هیچ!مهم. }
کلیک بر روی دکمه انتشار دهنده برای اعمال تغییر
در کوتاه
Elementor Pro دارای ویژگی Theme Builder است که در آن می‌توانید قالب‌های سفارشی را برای بخش‌هایی از پوسته خود، مانند هدر ایجاد کنید. هنگام ایجاد یک هدر سفارشی با استفاده از Elementor Theme Builder، می توانید هر رفتاری را که می خواهید با قابلیت افزودن CSS سفارشی تنظیم کنید. حتی بدون افزودن CSS سفارشی، می‌توانید افکت‌ها را چسبناک و شفاف تنظیم کنید.
دفعات بازدید: نحوه ایجاد صفحه 404 در وردپرس با Elementor
تغییر هدر در صفحه اسکرول خود مزایایی دارد.
برای مثال، می‌توانید از هدر ثانویه (هدری که پس از اسکرول صفحه ظاهر می‌شود) استفاده کنید تا با نمایش دکمه‌های اشتراک‌گذاری رسانه‌های اجتماعی، شانس اشتراک‌گذاری صفحه شما را افزایش دهید.
اکنون Elementor Pro را دریافت کنید!
نتیجه
بنابراین ! این برای این آموزش است که به شما نشان می دهد چگونه هدر پیمایش صفحه را در Elementor تغییر دهید. اگر شما هر گونه نگرانی در مورد نحوه رسیدن به آنجا دارید به ما اطلاع دهید نظر.
با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
