هل ترغب في إنشاء تذييل ثابت باستخدام DIVI يظهر بالكامل عند التمرير لأسفل؟
إضافة تذييل مثبت إلى ملف موقع انترنت يمكن أن يضفي القليل من اللمسة الإضافية التي كنت تبحث عنها في موقع انترنت. تأثير "كشف" ، الذي يسمح لكشف التذييل عند التمرير لأسفل ، سيعطي تصميمًا ساحرًا للغاية لصفحات الويب الخاصة بك.
عادةً ما يتطلب هذا التأثير CSS مخصصًا يكون محدودًا ويصعب استخدامه. ولكن بفضل DIVI ، يمكنك تحقيق ذلك بسهولة.
في هذا البرنامج التعليمي ، سنوضح لك كيفية إنشاء تأثير كشف على تذييلك اللاصق. كل ما يتطلبه الأمر هو بضع خطوات سهلة.
دعونا نبدأ!
مسح
فيما يلي نظرة عامة مختصرة على التذييل اللاصق بتأثير Reveal الذي سننشئه في هذا البرنامج التعليمي.
إنشاء قالب تذييل جديد
زيارة ديفي >> باني الموضوع من لوحة تحكم WordPress.
هناك ، انقر فوق "إضافة تذييل عام"
ثم اختر "إنشاء تذييل عمومي"
في هذا البرنامج التعليمي ، سنستخدم تخطيطًا معد مسبقًا لتسريع عملية الإنشاء ، ولكن يمكنك أيضًا القيام بذلك من البداية. للقيام بذلك ، انقر فوق "تحميل من المكتبة".
أسفل النافذة المنبثقة تحميل من المكتبة، ابحث عن التخطيط واستخدمه " مارينا حول الصفحة » من حزمة تخطيط المارينا.
بمجرد تحميل التخطيط ، احذف جميع الأقسام باستثناء قسم التذييل. سنستخدم قسم التذييل هذا لإضافة تأثير الكشف.
إضافة تأثير كشف وجعل التذييل لزجة
جعل التذييل لزجًا
انظر أيضا: كيفية إنشاء قائمة منزلقة ودفع في DIVI؟
أولاً ، نحتاج إلى جعل التذييل لزجًا. للقيام بذلك ، افتح إعدادات القسم وانقر فوق علامة التبويب متقدم. تحت "تأثيرات التمرير"، قم بتغيير الإعدادات كما يلي:
- موقف مثبت: التمسك بالقاع
تحديث فهرس Z للحالة اللاصقة
بعد ذلك ، نحتاج إلى إعطاء قسم التذييل لدينا فهرس z يساوي 0 عندما يكون القسم في حالة ثابتة. سيسمح هذا للقسم بالبقاء خلف الأقسام أو العناصر الأخرى في نص الصفحة عند التمرير.
للقيام بذلك ، قم بتحديث موضع الفهرس Z بالنقر فوق الرمز اللاصق بجوار خيار Z Index. ثم قم بتحديث فهرس Z إلى 0.
- فهرس Z (مثبت): 0
تحديث الفهرس Z للعنصر النائب للتذييل الثابت
عندما يتم تعيين موضع ثابت لعنصر في Divi ، يتم أيضًا إنشاء عنصر نائب مكرر تلقائيًا. يوفر هذا الوظائف اللازمة لوضع العناصر اللاصقة وتصميمها باستخدام Divi Builder.
في هذه الحالة ، يتم إنشاء عنصر نائب لقسم التذييل بمؤشر z افتراضي 1. لا نريد قسم التذييل الثابت الفعلي (الآن بمؤشر Z 0) خلف قسم العنصر النائب ، لذلك نحتاج إلى تحديث فهرس Z للعنصر النائب إلى -1.
للقيام بذلك ، قم أولاً بإضافة فئة CSS مخصصة إلى قسم التذييل على النحو التالي:
- فئة CSS: كشف التذييل اللاصق
ثم افتح إعدادات الصفحة باستخدام قائمة الإعدادات في ملف منشئ الموضوع.
انتقل إلى علامة التبويب " متقدم " وأدخل CSS التالي في المربع تخصيص CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
سيؤدي ذلك إلى إجبار قسم العنصر النائب على البقاء خلف التذييل اللاصق.
حفظ التغييرات
بمجرد الانتهاء ، احفظ التغييرات التي تم إجراؤها على قالب التذييل.
احفظ أيضًا تغييرات Divi Theme Builder.
نتيجة نهائية
لرؤية النتيجة النهائية ، قم بعرض الصفحة وقم بالتمرير.
تحميل DIVI الآن !!!
وفي الختام
في Divi، قم بإضافة تذييل لاصق إلى ملفك موقع انترنت لا يتطلب مكونًا إضافيًا أو CSS مخصصًا معقدًا. باستخدام المنشئ المواضيع، يمكنك بسهولة إنشاء قالب تذييل باستخدام كشف التأثير في بضع دقائق.
نأمل أن يمنح هذا تصميم التذييل الخاص بك دفعة خفيفة مع تفاعل جذاب مثل آخر سوف نقدر. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
انظر أيضا مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
