كيفية إصلاح تذييل Divi الخاص بك

في البرنامج التعليمي Divi اليوم ، سوف نوضح لك كيفية إنشاء تذييل ثابت لموقع الويب الخاص بك بدلاً من التذييل العادي. في منشور سابق ، أوضحنا لك كيفية جعله لزجًا وهو ما يختلف في الواقع عن جعله ثابتًا ، على الرغم من أنه قد يبدو كما هو في البداية. إذا كنت لا تتطلع إلى جعلها لزجة ولكن ثابتة بدلاً من ذلك ، فستساعدك هذه المشاركة.

قد تكون إضافة تذييل تم إصلاحه إلى موقع الويب الخاص بك طلبًا لديك من أحد عملائك أو حاجة لديك لموقع الويب الخاص بك. على الرغم من أنه لا يتم استخدامه كثيرًا كعنوان ثابت ، إلا أنه قد يكون أحد الأشياء التي تكافح معها. سنعرض لك طريقتين حول كيفية جعل تذييل الصفحة الخاص بك مثبتًا على موقع Divi الخاص بك. سيكون الأول باستخدام بعض سطور CSS والثاني باستخدام كود jQuery. كلتا الطريقتين ستعملان على إجراء تعديلات على ورقة أنماط CSS للتذييل على موقع الويب الخاص بك.

هنا لديك مثال على كيفية ظهور التذييل الثابت عند التمرير:

متى يجب استخدام تذييل ثابت

هناك أسباب مختلفة وراء رغبتك في الحصول على تذييل ثابت على موقع الويب الخاص بك. قد يكون أحد هذه الأسباب هو ملاءمة المعلومات التي يحتفظ بها التذييل الخاص بك. يمكنك ، على سبيل المثال ، وضع أيقوناتك الاجتماعية في تذييل الصفحة ولأنك تريد تشجيع الزوار الموجودين على موقع الويب الخاص بك على استكشاف قنوات التواصل الاجتماعي الخاصة بك. قد يكون سبب آخر هو أنك ببساطة تحب التأثير الذي يعطيه لموقعك على الويب.

إذا كنت تستخدم تذييلًا ثابتًا ، فيجب أن تدرك أنه سيتم شغل جزء من نافذة الزائر طوال الوقت. هذا يعني أنهم سيحتاجون إلى التمرير أكثر لرؤية نفس المحتوى الذي كانوا سيشاهدونه إذا لم يكن هناك تذييل ثابت. هذا يمثل تحديًا لأن الزوار يرغبون في بذل أقل جهد ممكن.

ومع ذلك ، إذا لم يكن تذييلك بهذا الحجم ، فقد يؤدي ذلك إلى زيادة عدد الإجراءات التي يتم اتخاذها في التذييل الخاص بك. نحن لا نشجع على استخدام رأس ثابت وقائمة أساسية وتذييل في نفس الوقت. من خلال إصلاح الثلاثة ، سيتم تقليل المحتوى الذي يظهر بشكل كبير مما قد يؤدي إلى ارتفاع معدل الارتداد.

الفرق بين التذييل الثابت واللزج

قبل أن نبدأ ، سنشرح الفرق بين التذييل الثابت والتذييل اللزج.

عادةً ما يكون التذييل الثابت أكثر تعقيدًا بعض الشيء. تم تصميمه ليتصرف مثل تذييل ثابت إذا كانت الصفحة لا تحتوي على محتوى كافٍ لدفع التذييل إلى أسفل الشاشة. في الحالات التي تكون فيها الصفحات طويلة بما فيه الكفاية ، سوف يتصرف التذييل مثل التذييل العادي وسيتم دفعه لأسفل حتى أسفل الصفحة ، وبالتالي ليس الشاشة.

هيا بنا نبدأ

اشترك في قناتنا على اليوتيوب

سنبدأ على الفور من خلال توضيح كيفية إضافة التذييل الثابت إلى موقع الويب الخاص بك بطريقتين ؛ من خلال كود CSS ومن خلال كود jQuery. تعمل كلتا الطريقتين ولكن كل هذا يتوقف على الطريقة التي تفضل استخدامها لموقع الويب الذي تحتاجه من أجله.

إضافة تذييل ثابت من خلال CSS

الطريقة الأولى والأسهل لإنشاء تذييل ثابت هي إضافة بعض سطور CSS. باستخدام Divi Builder و WordPress ، يمكننا إضافة هذه السطور في أماكن مختلفة. دعونا نلقي نظرة عليهم.

أضف كود CSS من خلال CSS مخصص لصفحة واحدة

الطريقة الأولى لإضافة كود CSS هي إضافته إلى صفحة واحدة على وجه الخصوص. على الرغم من أنه من الأفضل إنشاء تذييل ثابت كما هو لكل صفحة على موقع الويب الخاص بك (للحصول على هذا التناسق على موقع الويب الخاص بك) ، يمكنك اختيار السماح له بالتطبيق على صفحة واحدة على وجه الخصوص أيضًا.

افتح الصفحة التي تريد إضافة خطوط كود CSS إليها وانقر فوق الزر التالي لـ Divi Builder.

قم بالتمرير لأسفل وأضف الكود التالي إلى حقل CSS المخصص:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

أضف كود CSS من خلال أداة تخصيص السمة

هناك طريقة أخرى لإضافة الكود وهي من خلال أداة تخصيص القوالب. باستخدام أداة تخصيص السمات ، ستشاهد النتائج تحدث في الوقت الفعلي على موقع الويب الخاص بك. الكود الذي تضيفه من خلال أداة تخصيص القوالب ينطبق على جميع الصفحات على موقع الويب الخاص بك.

انتقل إلى Theme Optimizer على موقع الويب الخاص بك> CSS إضافية> الصق سطور CSS التالية من التعليمات البرمجية:

#main-footer{
position: fixed;
bottom: 0;
width: 100%;
}

أضف كود CSS من خلال خيارات النسق

الطريقة الأخيرة لإضافة كود CSS إلى موقع الويب الخاص بك هي من خلال خيارات السمة. عندما تضيف الكود الخاص بك في حقل CSS المخصص لخيارات السمة ، سيتم تطبيق الكود على موقع الويب بأكمله أيضًا. هذه هي الطريقة الأكثر استخدامًا لإضافة رمز CSS مخصص إلى موقع Divi بالكامل.

انتقل إلى Divi> Theme Options> General> قم بالتمرير لأسفل وأضف الكود التالي إلى حقل CSS المخصص:

#main-footer{ 
position: fixed; 
bottom: 0; 
width: 100%; 
}

إضافة تذييل ثابت من خلال jQuery

هناك احتمال آخر لدينا وهو إجراء تغييرات CSS من خلال بعض خطوط كود jQuery. عندما تستخدم تذييلًا ثابتًا ، فأنت تريد عادةً التأكد من أنه ينطبق على جميع الصفحات الموجودة على موقع الويب الخاص بك. هذا النوع من الاتساق يجعل من السهل على زوارك التنقل عبر موقع الويب الخاص بك دون الشعور بالارتباك.

أضف كود jQuery من خلال وحدة التعليمات البرمجية لصفحة واحدة على وجه الخصوص

افتح الصفحة حيث تريد تطبيق التذييل الثابت وأضف قسمًا قياسيًا جديدًا إلى أعلى صفحتك. بعد ذلك ، اختر صفًا كامل العرض وأضف وحدة التعليمات البرمجية إليه. افتح Code Module والصق كود jQuery التالي في Content Box:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

بإضافة كود jQuery من خلال Code Module في صفحة واحدة معينة ، سيتم تطبيق الكود على تلك الصفحة فقط. سيكون لبقية موقع الويب الخاص بك تذييلًا عاديًا بينما سيكون للتذييل الذي استخدمت فيه وحدة الشفرة تذييلًا ثابتًا.

أضف كود jQuery من خلال خيارات النسق

الخيار الأخير لإضافة كود jQuery الذي يجعل تذييلك ثابتًا هو من خلال خيارات السمة. سيتم تطبيق سطور التعليمات البرمجية فورًا على موقع الويب بالكامل وستوفر هذا التناسق الذي يحتاجه موقع الويب الخاص بك.

انتقل إلى Divi> Theme Options> Integration> والصق سطور الرموز التالية في <head> لموقع الويب الخاص بك:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

افكار اخيرة

لقد أوضحنا لك كيفية إنشاء تذييل ثابت في إحدى المشاركات السابقة. تناول هذا المنشور بشكل خاص كيفية إنشاء تذييل ثابت لموقع الويب الخاص بك. سيظل التذييل الثابت دائمًا في الجزء السفلي من شاشة الزائر أثناء زيارة موقع الويب الخاص بك. إذا كانت لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه حتى نتمكن من التواصل معك!

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Zeeker2526 / shutterstock.com