الأدراج السفلية هي إضافات مفيدة لأي منها موقع انترنت، حيث يقومون بتخزين محتوى إضافي يمكن للمستخدمين الوصول إليه بسهولة. أدراج التذييل عبارة عن حاويات محتوى ويب (مثل قسم Divi) يمكن فتحها وإغلاقها بالنقر فوق زر أو التمرير فوقها. إنه يشبه امتلاك القليل من المحتوى المتميز.
في هذا البرنامج التعليمي ، سنقوم بتصميم درج تذييل عائم في Divi. سنضيف درج التذييل إلى منطقة التذييل العالمية لـ قالب الموقع بحيث يمكن الوصول إلى درج التذييل على مستوى الموقع بمحتوى التذييل العادي.
من خلال العملية التي سنستخدمها ، يمكن تحويل أي قسم Divi (ومحتواه) إلى درج تذييل في غضون دقائق.
كيفية إضافة قالب درج التذييل إلى موقع Divi الخاص بك
ستؤدي إضافة هذا النموذج إلى استبدال ملف قالب الموقع بشكل افتراضي (إذا كان لديك واحد) على موقع Divi الخاص بك. نقترح إضافته إلى موقع اختبار حتى لا تفسد أي شيء على موقع مباشر.
لاستيراد قالب درج التذييل الثابت بنفسك موقع انترنت، قم بفك ضغط ملف zip للتنزيل للوصول إلى ملف JSON.
ثم انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder.
ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.
في نافذة قابلية النقل ، اختر ملف JSON الذي قمت بفك ضغطه للتو وحدد خيار "تنزيل النسخة الاحتياطية قبل الاستيراد" ، فقط في حالة وجود شيء ما في السابق في قالب الموقع الافتراضي الذي لا تريد تجاوزه.
ثم انقر فوق الزر استيراد.
أخيرًا ، احفظ التغييرات في منشئ السمة واعرض صفحة مباشرة لرؤية شريط التذييل الثابت.
الآن إلى البرنامج التعليمي ، حسنًا؟
الجزء 1: إضافة تذييل عمومي
يسمح لك مولد سمات Divi باستبدال التذييل الافتراضي بأخرى جديدة عن طريق تحديث قالب موقع الويب الافتراضي.
لإنشاء تذييل عام ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder. ثم انقر فوق مساحة "إضافة تذييل عام" داخل نموذج موقع الويب الافتراضي.
ثم حدد خيار "Build Global Footer" من القائمة المنسدلة.
قم بإضافة تخطيط محدد مسبقًا إلى تخطيط تذييل عام
سيؤدي هذا إلى نشر محرر تخطيط النموذج حيث ستتم مطالبتك على الفور بالاختيارات الثلاثة لكيفية بدء البناء. حدد الخيار "اختيار تنسيق محدد مسبقًا".
في النافذة المنبثقة تحميل من المكتبة ، ابحث عن تخطيط الصفحة المقصودة للقرطاسية. ثم انقر فوق "استخدام هذا التنسيق".
إزالة المحتوى غير المرغوب فيه من تخطيط premade
بمجرد تحميل التخطيط في المحرر ، افتح مربع الطبقات المنبثق عن طريق النقر فوق رمز الطبقات في قائمة الإعدادات. ثم احذف جميع أقسام التخطيط باستثناء القسمين الأخيرين.
نقل وتسمية القسمين
بمجرد إزالة الأقسام ، يجب أن يكون لديك قسمان ، أحدهما بعنوان "التذييل" والآخر بعنوان "كيف يعمل". انقل قسم "التذييل" إلى أعلى التنسيق.
قم بتغيير الصياغة في القسم السفلي لقراءة "Footer Drawer". سيكون هذا هو القسم الذي سنستخدمه كمحتوى لدرج التذييل الخاص بنا.
الجزء 2: إنشاء درج التذييل الثابت
الآن بعد أن قمنا بتعيين أحد الأقسام كتذييل والآخر كدرج تذييل ، نحن على استعداد لبدء بناء درج التذييل الثابت الخاص بنا. لنبدأ بإنشاء رمز blurb الذي سنستخدمه لتبديل درج التذييل.
إنشاء زر درج التذييل
أضف سطرًا جديدًا
في قسم التذييل السفلي ، أضف صفًا جديدًا إلى عمود.
قم بتسمية الصف الجديد "زر الدرج" لأن هذا هو الصف الذي سيحتوي على الزر المستخدم لتبديل الدرج لفتحه وإغلاقه. ثم انقل الخط إلى أعلى القسم.
الحشو الصف
قبل إضافة وحدة نمطية ، افتح إعدادات الصف وقم بتحديث المساحة المتروكة على النحو التالي:
- الحشو: 0px عالية ، 0px منخفضة
حشو القسم
ثم افتح الإعدادات في قسم "درج التذييل" وقم بتحديث الحشو كما يلي:
لإنشاء الزر القابل للنقر الذي يبدل درج التذييل ، سنستخدم وحدة blurb برمز. وسنمنحه شكل دمعة فريد من خلال الجمع بين الشكل المربع لحاوية جراب Blurb مع رمز الدائرة.
إليك كيف.
أضف وحدة Blurb
أضف وحدة نصية عرضية إلى سطر "زر الدرج" في الجزء العلوي من القسم.
محتوى / أيقونة Blurb
بعد ذلك ، قم بإزالة العنوان الافتراضي ومحتوى النص وحدد رمز السهم الذي يشير إلى الزاوية اليسرى العليا (انظر لقطة الشاشة). نحن نستخدم الأيقونة التي تم تدويرها جزئيًا لأننا سنقوم بتدويرها لاحقًا.
تصميم Blurb
ثم أعط نص العرض كما يلي:
- لون الخلفية: # 081540
ثم قم بتحديث معلمات التصميم على النحو التالي:
- لون الأيقونة: #eeeeee
- رمز الدائرة: نعم
- لون الدائرة: # 081540
- استخدام حجم خط الأيقونة: نعم
- حجم خط الأيقونة: 17 بكسل
حجم نص العرض التقديمي
الآن أعط الوحدة ارتفاعًا وعرضًا على النحو التالي:
- العرض: 30px
- الارتفاع: 30px
سيؤدي ذلك إلى تدفق رمز الدائرة في حاوية النص لإنشاء شكل قطرة الماء.
موقف Blurb
ثم امنح نص العرض التقديمي موضعًا مطلقًا في أعلى منتصف القسم.
- المنصب: مطلق
- الموقع: توب سنتر
إعدادات التحول Blurb
الآن يمكننا استخدام خيارات التحويل لتدوير الدعاية / الأيقونة لأعلى ووضعها فوق حاوية القسم. الآن عندما نخفي القسم الموجود أسفل نافذة المتصفح ، سيظل الرمز مرئيًا / قابل للنقر.
تحديث العناصر التالية:
- تحويل محور X للترجمة: -50٪
- ترجمة المحور Y: -250٪
- تحويل محور دوران Z: -45 درجة
ثم قم بإزالة الرسوم المتحركة الافتراضية للأيقونة:
- صورة / أيقونة رسوم متحركة: لا توجد رسوم متحركة
سنستخدم JQuery لتبديل الدرج ، لذلك نحتاج إلى استهداف النص / الرمز كعنصر قابل للنقر باستخدام فئة CSS التي سنستخدمها لاحقًا في الكود. أضف فئة CSS التالية:
- فئة CSS: درج الهدف
إعدادات قسم درج التذييل
سنقوم الآن بإخفاء قسم "Footer Drawer" باستخدام خيار ترجمة التحويل. افتح إعدادات القسم وقم بتحديث ما يلي:
- تحويل محور Y للترجمة: 100٪
يكمن جمال استخدام التحويل هنا في أن قيم النسبة المئوية تستند إلى الحجم الفعلي للعنصر. وبالتالي ، فإن 100٪ على المحور Y ستكون مرتبطة ارتباطًا مباشرًا بارتفاع القسم (ما هو أكثر في أي وقت). بمعنى آخر ، سيتم نقل العنصر إلى أسفل المسافة المحددة بارتفاعه.
من أجل إعادة "درج التذييل" إلى العرض مرة أخرى ، سنحتاج إلى عكس ترجمة التحويل التي أضفناها للتو إلى القسم. للقيام بذلك ، سنحتاج إلى استهداف العنصر بفئة CSS وتعطيل تحويل الترجمة بالنقر فوق الرمز (إعادة القسم بأكمله إلى موضعه الأصلي).
أضف فئة CSS إلى قسم درج التذييل
ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية:
- CSS class: has-convert
قسم درج التذييل موقف ثابت
بالنسبة للخطوة الأخيرة ، نحتاج إلى إصلاح درج التذييل بحيث يطفو (مع الأيقونة) في الجزء السفلي من نافذة المتصفح.
قم بتحديث موضع قسم "درج التذييل" كما يلي:
- المنصب: ثابت
- الموقع: أسفل اليسار
- مؤشر Z: 13
قم بإيقاف تشغيل محتوى الجوال
نظرًا لأنه سيكون لديك قدر محدود من محتوى درج التذييل الذي يناسب كل من الجهاز اللوحي والهاتف (بسبب ارتفاع الشاشة المحدود) ، فستحتاج إلى تعطيل / إخفاء العناصر غير الأساسية من الشاشة. في هذا المثال ، سنقوم بإخفاء الصف الأوسط من تخطيط القسم.
افتح الإعدادات من الصف الثاني إلى الصف الأخير في قسم "Footer Drawer". ضمن علامة التبويب "خيارات متقدمة" ، قم بتحديث خيار الرؤية لإيقاف تشغيل الخط على الهاتف والجهاز اللوحي.
إضافة رمز مخصص
لإضافة وظيفة النقر والتبديل في درج التذييل ، نحتاج إلى إضافة CSS و JQuery مخصصين إلى الصفحة. للقيام بذلك ، قم بإنشاء وحدة رمز جديدة ضمن الوحدة النمطية Blurb المستخدمة للزر.
ثم الصق الكود التالي في منطقة الكود:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
حفظ التغييرات
تذكر حفظ التخطيط قبل الخروج من المحرر.
قم أيضًا بحفظ التغييرات في منشئ السمة.
نتيجة نهائية
الآن يمكننا الذهاب إلى أي صفحة من صفحاتك موقع انترنت لرؤية النتيجة النهائية.
الأفكار النهائية
نأمل أن يساعدك درج التذييل العائم تعزيز المحتوى بطريقة ممتعة ويمكن الوصول إليها. مثل أي درج، يمكنك ملؤه بأي شيء يخطر ببالك.
موارد أخرى
فيما يلي قائمة بالبرامج التعليمية التي يمكن أن تساعدك في إنجاز المزيد مع الميزات الداخلية لـ Divi.
- كيفية إنشاء صندوق أدوات الموضوع على Divi
- كيفية إنشاء قسم ترويجي متحرك على Divi
- كيفية تخصيص الشبكات على Divi
مترجم من: أنيقة ثيمات
