كيفية جعل Divi Footer الخاص بك مثبتًا

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

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

لماذا تستخدم مثبت التذييل؟

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

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

هنا لديك صورة لصفحة قصيرة لا تحتوي على تذييل ثابت:

وإليك نفس الصورة لتلك الصفحة بعد إضافة تذييل ثابت:

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

لا يقرر الجميع استخدام تذييل على موقع الويب الخاص بهم ولكن عندما يفعلون ذلك ؛ هناك الكثير من الطرق لتصميمه. كل هذا يتوقف على كيفية بنية موقع الويب الخاص بك وإذا كنت تريد تضمين تذييل "يدوي" ومصمم بشكل مختلف تم إنشاؤه باستخدام Divi builder بدلاً من ذلك.

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

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

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

قم بإنشاء تذييل مثبت على موقع Divi الخاص بك من خلال CSS

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

أضف كود CSS من خلال إعدادات الصفحة (لصفحة واحدة على وجه الخصوص)

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

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

المضي قدما ، أضف الكود التالي إلى حقل CSS المخصص في النافذة التي فتحتها للتو:

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

من اللحظة التي تقوم فيها بمعاينة صفحتك ، يجب تطبيق كود CSS وجعل التذييل ثابتًا.

إضافة كود CSS من خلال أداة تخصيص السمات (عرض الوقت الفعلي)

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

لإضافة كود CSS إلى مُخصص القوالب ، انقر فوق "مُخصص القوالب" في النهاية الخلفية لموقع WordPress الخاص بك. بعد ذلك ، قم بالتمرير لأسفل الصفحة وافتح خيار CSS الإضافي. سترى جميع رموز CSS المخصصة التي استخدمتها حتى الآن تظهر. انطلق وأضف الكود التالي إليه:

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

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

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

انتقل إلى Divi> Theme Options> قم بالتمرير لأسفل الصفحة> أضف رمز CSS التالي إلى مربع CSS المخصص:

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

قم بإنشاء تذييل مثبت على موقع Divi الخاص بك من خلال JQuery

أضف كود jQuery من خلال وحدة الكود (لصفحة واحدة على وجه الخصوص)

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

أضف قسمًا به صف كامل العرض إلى الصفحة التي تعمل عليها.

تابع بإضافة وحدة رمز إلى هذا الصف ذي العرض الكامل والصق الكود التالي فيه:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

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

هناك إمكانية أخرى لإضافة كود jQuery من خلال خيارات Divi Theme. عند إضافة كود jQuery للموقع بأكمله ، هناك مكان واحد محدد في Divi Theme Options حيث يمكننا القيام بذلك ؛ في الرأس و GT. مجال علامة التبويب التكامل. هذا هو بالضبط المكان الذي سنضيف إليه الشفرة الآن.

افتح موقع WordPress الخاص بك> انتقل إلى Divi> افتح خيارات السمة> انتقل إلى علامة تبويب التكامل وأضف كود jQuery التالي إلى <head> لموقع الويب الخاص بك:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

افكار اخيرة

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

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

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