كيفية تصميم درج عائم في Divi

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

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

من خلال العملية التي سنستخدمها ، يمكن تحويل أي قسم Divi (ومحتوياته) إلى درج تذييل في دقائق.

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على درج التذييل الثابت الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

كيفية إضافة قالب درج التذييل إلى موقع Divi الخاص بك

تحذير!: ستؤدي إضافة هذا القالب إلى تجاوز قالب موقع الويب الافتراضي (إذا كان لديك واحدًا) على موقع Divi الخاص بك. نقترح إضافة هذا إلى موقع اختبار حتى لا تفسد أي شيء على موقع مباشر.

لاستيراد قالب درج التذييل الثابت إلى موقع الويب الخاص بك ، قم بفك ضغط ملف zip للتنزيل للوصول إلى ملف JSON.

ثم انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder.

ثم انقر فوق رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة.

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

ثم انقر فوق الزر "استيراد".

أخيرًا ، احفظ تغييرات Theme Builder واعرض صفحة مباشرة لرؤية شريط التذييل الثابت.

الآن ، دعنا ننتقل إلى البرنامج التعليمي ، أليس كذلك؟

الجزء 1: إضافة تذييل عمومي

يسمح لك Divi's Theme Builder باستبدال التذييل الافتراضي بآخر جديد عن طريق تحديث قالب موقع الويب الافتراضي.

لإنشاء تذييل عام ، انتقل إلى لوحة معلومات WordPress وانتقل إلى Divi> Theme Builder. ثم انقر فوق مساحة "إضافة تذييل عام" داخل نموذج موقع الويب الافتراضي.

ثم حدد الخيار "إنشاء تذييل عام" من القائمة المنسدلة.

أضف تخطيط Premade إلى تخطيط تذييل الصفحة العام

سيؤدي هذا إلى نشر محرر تخطيط القالب حيث ستتم مطالبتك على الفور بالاختيارات الثلاثة لكيفية بدء البناء. حدد الخيار "اختيار تخطيط Premade".

من النافذة المنبثقة تحميل من المكتبة ، ابحث عن تخطيط الصفحة المقصودة لمتجر القرطاسية. ثم انقر فوق "استخدام هذا التخطيط".

احذف المحتوى غير المرغوب فيه من تخطيط Premade

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

نقل وتسمية القسمين

بمجرد حذف الأقسام ، يجب أن يكون لديك قسمان ، أحدهما بعنوان "التذييل" والآخر بعنوان "كيف يعمل". انقل قسم "التذييل" إلى أعلى التخطيط.

قم بتغيير تسمية القسم السفلي إلى "درج التذييل". سيكون هذا هو القسم الذي سنستخدمه كمحتوى لدرج التذييل.

الجزء 2: إنشاء درج التذييل الثابت

الآن بعد أن قمنا بتعيين أحد الأقسام كتذييل لدينا والآخر كدرج تذييل ، نحن جاهزون لبدء إنشاء درج التذييل الثابت الخاص بنا. لنبدأ بإنشاء رمز blurb الذي سنستخدمه لتبديل درج التذييل.

إنشاء زر درج التذييل

أضف صفًا جديدًا

داخل قسم "درج التذييل" السفلي ، أضف صفًا جديدًا مكونًا من عمود واحد.

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

مساحة الصفوف

قبل أن نضيف وحدة نمطية ، افتح إعدادات الصف وقم بتحديث المساحة المتروكة على النحو التالي:

• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

قسم الحشو

ثم افتح إعدادات قسم "Footer Drawer" وقم بتحديث المساحة المتروكة على النحو التالي:

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

هيريس كيفية القيام بذلك.

أضف الوحدة النمطية Blurb

أضف وحدة دعاية دعاية إلى صف "زر الدرج" أعلى القسم.

محتوى / رمز دعاية

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

تصميم دعاية

بعد ذلك ، امنح الدعاية الدعائية خلفية على النحو التالي:

• لون الخلفية: # 081540

ثم قم بتحديث إعدادات التصميم على النحو التالي:

• لون الأيقونة: #eeeeee
• رمز الدائرة: نعم
• لون الدائرة: # 081540
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 17 بكسل

حجم دعاية

الآن أعط الوحدة ارتفاعًا وعرضًا كما يلي:

• العرض: 30 بكسل
• الارتفاع: 30 بكسل

سيؤدي هذا إلى تجاوز رمز الدائرة للحاوية الدعاية لإنشاء شكل قطرة الماء.

موقف دعاية

بعد ذلك ، امنح الدعاية المغلوطة موقعًا مطلقًا في منتصف الجزء العلوي من المقطع.

• الموقف: مطلق
• الموقع: توب سنتر

إعدادات تحويل الدعاية

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

قم بتحديث ما يلي:

• تحويل المحور X للترجمة: -50٪
• تحويل المحور Y للترجمة: -250٪
• تحويل تدوير المحور Z: -45 درجة

ثم قم بإخراج الرسوم المتحركة الافتراضية للأيقونة:

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

سنستخدم JQuery لتبديل الدرج ، لذلك نحتاج إلى استهداف blurb / icon كعنصر قابل للنقر باستخدام فئة CSS سنستخدمها لاحقًا في الكود. أضف فئة CSS التالية:

• فئة CSS: الدرج المستهدف

إعدادات قسم درج التذييل

سنقوم الآن بإخفاء قسم "Footer Drawer" باستخدام خيار تحويل الترجمة. افتح إعدادات القسم وقم بتحديث ما يلي:

• تحويل المحور Y للترجمة: 100٪

يكمن جمال استخدام ترجمة التحويل هنا في أن قيم النسبة المئوية تستند إلى الحجم الفعلي للعنصر. لذا فإن نسبة 100٪ على المحور Y ستكون مرتبطة ارتباطًا مباشرًا بارتفاع القسم (أقل ما هو عليه في أي لحظة). بعبارة أخرى ، سيتم نقل العنصر إلى الأسفل على نفس المسافة بالضبط بارتفاعه.

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

أضف فئة CSS إلى قسم درج التذييل

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية:

• فئة CSS: لديها تحويل

قسم درج التذييل موضع ثابت

بالنسبة للخطوة الأخيرة ، نحتاج إلى إصلاح درج التذييل بحيث يطفو (مع الرمز) في الجزء السفلي من نافذة المتصفح.

قم بتحديث موضع قسم "Footer Drawer" على النحو التالي:

• الوضعية: ثابت
• الموقع: أسفل اليسار
• الفهرس Z: 13

تعطيل المحتوى للجوال

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

افتح إعدادات الصف الثاني إلى الأخير في قسم "Footer Drawer". ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيار الرؤية لتعطيل الصف على الهاتف والجهاز اللوحي.

إضافة الكود الجمركي

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

ثم الصق الكود التالي في مربع الشفرة:

<style>
  .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;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.drawer-target').click(function(){
      $(this).toggleClass('toggle-icon-animation');      
      $('.has-transform').toggleClass('toggle-drawer-animation');   
    });    
  });
})( jQuery );   
</script>

حفظ التغييرات

لا تنس حفظ التنسيق قبل الخروج من المحرر.

احفظ التغييرات في Theme Builder أيضًا.

النتيجة النهائية

يمكننا الآن الانتقال إلى أي من الصفحات الموجودة على موقع الويب الخاص بك لمعرفة النتيجة النهائية.

وها هو على الهاتف المحمول.

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

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!