كيفية إنشاء تذييل كشف مع Divi

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

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

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

كيفية إنشاء تذييل كشف مع Divi

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

أضف كود CSS المطلوب

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

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

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

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

لإضافة الرمز ، انتقل إلى WordPress Dashboard> Divi> Theme Options> وانسخ والصق الأسطر التالية من كود CSS في حقل CSS المخصص في أسفل علامة التبويب:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

بمجرد إضافة الشفرة ، انتقل إلى موقع الويب الخاص بك وشاهد التذييل يظهر يقوم بعمله.

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

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

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

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

أضف كود CSS المطلوب إلى صفحة واحدة فقط

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

لإضافة كود CSS إلى صفحة واحدة على وجه الخصوص ، افتح تلك الصفحة المحددة. في الزاوية العلوية اليمنى من Divi Builder في تلك الصفحة ، سترى الرمز التالي.

انقر فوق الرمز والصق سطور التعليمات البرمجية التالية في حقل CSS المخصص:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

بمجرد حفظ الإعدادات ، سترى التذييل يظهر في تلك الصفحة على وجه الخصوص.

تغيير ارتفاع التذييل

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

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

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

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

أضف CSS Box Shadow

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

لإضافة ظل المربع إلى كشف التذييل الخاص بك ، استخدم سطور التعليمات البرمجية التالية:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

هذا كل شيء! يجب أن يعمل كشف التذييل الخاص بك الآن بشكل جيد.

افكار اخيرة

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

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

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