آیا می خواهید یک پاورقی چسبناک با DIVI ایجاد کنید که هنگام اسکرول کردن به پایین کاملاً نمایان شود؟
اضافه کردن پاورقی چسبناک به شما وب سایت می تواند آن تماس اضافی را که به دنبالش بودید به شما بیاورد وب سایت. افکت "Reveal" که به شما امکان می دهد در هنگام اسکرول کردن پاورقی آشکار شود، طراحی بسیار جذابی به صفحات وب شما می دهد.
معمولاً این افکت به CSS سفارشی نیاز دارد که استفاده از آن محدود و دشوار است. اما به لطف DIVI، به راحتی می توانید به آن دست پیدا کنید.
در این آموزش، ما به شما نشان خواهیم داد که چگونه یک افکت Reveal در فوتر چسبناک خود ایجاد کنید. تنها کاری که لازم است چند مرحله آسان است.
بیایید شروع کنیم!
بررسی
در اینجا یک نمای کلی از فوتر چسبنده با افکت Reveal است که در این آموزش ایجاد خواهیم کرد.
یک الگوی فوتر جدید ایجاد کنید
بازدید Divi >> تم ساز از داشبورد وردپرس
در آنجا، روی آن کلیک کنید "افزودن پاورقی جهانی"
سپس انتخاب کنید "ساخت یک پاورقی جهانی"
در این آموزش، ما از یک چیدمان از پیش ساخته شده برای سرعت بخشیدن به فرآیند ایجاد استفاده می کنیم، اما شما همچنین می توانید آن را از ابتدا انجام دهید. برای انجام این کار، کلیک کنید "بارگیری از کتابخانه".
زیر پنجره پاپ آپ بارگیری از کتابخانه، طرح بندی را پیدا کنید و از آن استفاده کنید Marina درباره صفحه » از بسته طرح مارینا.
پس از بارگذاری طرح، تمام بخش ها به جز قسمت پاورقی را حذف کنید. ما از این بخش فوتر برای اضافه کردن افکت Reveal استفاده خواهیم کرد.
افکت Reveal را اضافه کنید و فوتر را چسبناک کنید
فوتر را چسبناک کنید
همچنین ببینید: چگونه یک منوی کشویی و فشاری در DIVI ایجاد کنیم؟
ابتدا باید فوتر را چسبناک کنیم. برای این کار تنظیمات بخش را باز کرده و روی تب کلیک کنید پیشرفته. زیر "اثرات اسکرول"، تنظیمات را به صورت زیر تغییر دهید:
- موقعیت چسبنده: به پایین بچسبید
به روز رسانی شاخص Z برای حالت چسبنده
در مرحله بعد، زمانی که بخش در حالت چسبنده است، باید به بخش فوتر خود یک z-index 0 بدهیم. این به بخش اجازه می دهد در هنگام پیمایش در پشت سایر بخش ها یا عناصر موجود در بدنه صفحه بماند.
برای انجام این کار، موقعیت Z Index را با کلیک بر روی نماد چسبنده در کنار گزینه Z Index به روز کنید. سپس شاخص Z را به 0 به روز کنید.
- شاخص Z (چسبنده): 0
شاخص Z جانشین پاورقی چسبنده را به روز کنید
هنگامی که یک عنصر در Divi یک موقعیت چسبنده به آن اختصاص داده می شود، یک عنصر مکان نگهدار تکراری نیز به طور خودکار ایجاد می شود. این کارکرد مورد نیاز برای قرار دادن و طراحی عناصر چسبنده با استفاده از Divi Builder را فراهم می کند.
همچنین ببینید: نحوه ایجاد یک سربرگ جهانی با تم ساز Divi
در این مورد، یک مکان‌نمای بخش پاورقی با شاخص z پیش‌فرض 1 ایجاد می‌شود. ما نمی‌خواهیم بخش پاورقی چسبنده واقعی خود (اکنون با شاخص Z برابر با 0) در پشت بخش نگهدارنده قرار گیرد، بنابراین باید به روز رسانی کنیم. شاخص Z از مکان نگهدار به -1.
برای انجام این کار، ابتدا یک کلاس CSS سفارشی را به صورت زیر به قسمت فوتر اضافه کنید:
- کلاس CSS: sticky-footer-reveal
سپس تنظیمات صفحه را با استفاده از منوی تنظیمات باز کنید تم ساز.
برو به " پیشرفته" و CSS زیر را در کادر وارد کنید CSS را سفارشی کنید :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
این باعث می‌شود که بخش نگهدارنده مکان در پشت پانویس چسبنده باقی بماند.
ذخیره تغییرات
پس از انجام، تغییرات ایجاد شده در قالب فوتر را ذخیره کنید.
همچنین تغییرات Divi Theme Builder را ذخیره کنید.
نتیجه نهایی
برای دیدن نتیجه نهایی، یک صفحه را مشاهده کرده و اسکرول کنید.
اکنون DIVI را دانلود کنید!!!
نتیجه
در Divi، یک پاورقی چسبنده به خود اضافه کنید وب سایت به پلاگین یا CSS سفارشی پیچیده نیاز ندارد. با استفاده از سازنده تم، می توانید به راحتی یک قالب فوتر ایجاد کنید اثر آشکار در چند دقیقه
امیدواریم این امر به طراحی فوتر شما با تعاملی جذاب کمک کند آخرین بازدید قدردانی خواهد کرد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین ببینید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
