كيفية إنشاء قائمة رمز دائرية تتوسع عند النقر فوق Divi

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

هيا بنا نبدأ

نظرة خاطفة

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

قم بتنزيل مخطط قائمة رمز الدائرة مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme المثبت (أو البرنامج المساعد Divi Builder إذا لم تكن تستخدم Divi Theme).
2. قم بإنشاء صفحة جديدة في WordPress وتمكين Divi Builder من تحرير الصفحة على الواجهة الأمامية (منشئ مرئي).

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

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء الأول

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

ثم افتح إعدادات الصف وأضف المساحة المتروكة التالية:

الحشو: 300 بكسل في الأعلى

هذا ببساطة لتوفير بعض المساحة لعناصر القائمة الدائرية لتظهر عند النقر.

إنشاء أيقونات القائمة باستخدام وحدات Blurb Modules

دعاية رقم 1

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

ثم حدِّث محتوى الدعاية الدعاية بإخراج العنوان والنص الأساسي. ثم أضف رمزًا إلى الدعاية الدعاية على النحو التالي.

استخدام الأيقونة: نعم
الرمز: انظر لقطة الشاشة

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

لون الأيقونة: # 29a1f2
رمز الدائرة: نعم
لون الدائرة: # 222222
إظهار حدود الدائرة: نعم
لون حدود الدائرة: # 29a1f2
استخدام حجم خط الأيقونة: نعم
حجم خط الأيقونة: 25 بكسل
حجم النص الأساسي: 20 بكسل
الهامش: 0 بكسل

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

بعد ذلك ، قم بإخراج الرسوم المتحركة الافتراضية للصورة / الأيقونة.

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

ثم قم بتعيين فهرس Z لهذه الوحدة على 1 بحيث يكون فوق الآخرين الذين سيجلسون خلفها في النهاية.

الفهرس Z: 1

وأخيرًا ، قم بإخراج الهامش السفلي الافتراضي الموجود أسفل الأيقونة عن طريق إضافة CSS المخصص التالي إلى Blurb Image.

margin-bottom: 0px;

دعاية رقم 2

لإنشاء دعاية مغالى فيها ثانية ، ما عليك سوى تكرار دعاية دعاية رقم 1.

ثم افتح إعدادات الدعاية الجديدة (دعاية دعاية رقم 2) وقم بتغيير الأيقونة واضبط مؤشر Z مرة أخرى على الإعداد الافتراضي (0).

بعد ذلك ، لنقم بتقليص حجم الرمز باستخدام مقياس التحويل كما يلي:

مقياس التحويل: 70٪

إنشاء Blurbs # 3 و # 4 و # 5

يمكن إنشاء الدعاية الثلاثية التالية عن طريق تكرار دعاية دعاية رقم 2 وتحديث الرمز لكل منها.

تكديس الدعاية المغلوطة في نفس الموضع المطلق

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

ثم أضف CSS المخصص التالي إلى العنصر الرئيسي:

position: absolute !important;
bottom: 20px;
left: 20px;

يؤدي هذا إلى وضع الدلالات الدعاية في الجزء السفلي الأيسر من الصف.

وضع رموز القائمة باستخدام تحويل الترجمة

بمجرد وضع جميع الدعاية المغلوطة في الحالة الافتراضية ، يمكننا البدء في وضع عناصر القائمة لحالة النقر (حيث ستنتهي بعد النقر فوق زر القائمة الرئيسية). للقيام بذلك ، يمكننا استخدام خاصية ترجمة التحويل داخل Divi builder. لا توجد حالة نقر متاحة في Divi builder (مثل التمرير) لأن هذا شيء يتم التعامل معه بواسطة JavaScript. لذلك سنقوم بوضع عناصر القائمة لدينا حيث نريدها أن تكون عند النقر الآن. ثم سنستخدم Javascript لتبديل هذا الموضع وإيقاف تشغيله عند النقر فوق زر القائمة الرئيسية.

نريد الاحتفاظ بالدعاية الدعائية رقم 1 في مكانها لأنها زر القائمة الرئيسية. ومع ذلك ، فإننا نريد نقل دعاية مغالى فيها # 2 و # 3 و # 4 و # 5. ونظرًا لأن دعاية مغالى فيها مكدسة الآن في المنشئ المرئي ، فلننشر وضع الإطار الشبكي لتحديث المواضع لكل دعاية مغالى فيها.

موقف دعاية # 2

افتح إعدادات دعاية دعاية رقم 2 وقم بتحديث ما يلي:

تحويل محور ص للترجمة: -10em

ها هو الموضع الجديد للدعاية الخاطفة رقم 2.

موقف دعاية # 3

افتح إعدادات دعاية دعاية رقم 3 وقم بتحديث ما يلي:

تحويل محور Y للترجمة: -8.6em
تحويل محور X للترجمة: 5em

هذا هو الموضع الجديد للدعاية الخاطفة رقم 3.

موقف دعاية # 4

افتح إعدادات دعاية دعاية رقم 4 وقم بتحديث ما يلي:

تحويل محور ص للترجمة: -5em
تحويل محور X للترجمة: 8.6em

ها هو الموضع الجديد للدعاية الخاطفة رقم 4.

موقف دعاية # 5

افتح إعدادات دعاية دعاية رقم 5 وقم بتحديث ما يلي:

تحويل محور ص للترجمة: 0 بكسل
تحويل محور X للترجمة: 10em

ها هو الموضع الجديد للدعاية الخاطفة رقم 5.

إضافة فئات CSS مخصصة إلى الدعاية

لكي تعمل JavaScript بشكل صحيح ، نحتاج إلى إضافة بعض فئات CSS التي ستكون بمثابة محددات لتصميم ووظائف إضافية.

أضف فئة CSS إلى Blurb # 1

في وضع عرض الإطار السلكي ، افتح الإعدادات الخاصة بالدعاية الدعائية رقم 1 وأضف فئة CSS التالية:

فئة CSS: transform_target

أضف فئات CSS إلى Blurbs # 2 و # 3 و # 4 و # 5

ستشترك جميع الدلالات الأربعة الأخرى في نفس فئات CSS ، لذا يمكننا استخدام ميزة التحديد المتعدد لتحديد Blurb # 2 و # 3 و # 4 و # 5 وتحديث فئة CSS للأربعة على النحو التالي:

فئة CSS: تحتوي على رسوم متحركة لتحويل التبديل

لاحظ أن هناك فئتي css مفصولة بمسافة.

إضافة CSS الخارجية وجافا سكريبت مع وحدة التعليمات البرمجية

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

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

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

هذا هو CSS الخارجي المستخدم في تركيبة مع كود jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

وهذه هي حاجة JavaScript للحصول على عناصر قائمة الرموز الدائرية لتتوسع عند النقر فوق زر القائمة.

تأكد من أن علامة style ملفوفة حول CSS وعلامة script ملفوفة حول JavaScript / jQuery.

تحقق من النتيجة النهائية للوظيفة على الصفحة المباشرة.

إضافة عناوين URL لعناصر القائمة

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

جعل زر القائمة ثابتًا (أو ثابتًا)

نظرًا لأن هذه القائمة صغيرة وبديهية للأجهزة المحمولة ، فقد ترغب في جعل القائمة ثابتة بحيث تظل ثابتة في الجزء السفلي الأيسر من المتصفح.

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

position: fixed !important;
bottom: 20px;
left: 20px;

الآن ستبقى القائمة ثابتة في الجزء السفلي الأيسر من نافذة المتصفح.

للتأكد من أن القائمة تقع فوق المحتوى الآخر بالصفحة ، قم بتحديث الفهرس z للصف على النحو التالي:

الفهرس Z: 11

ثم أخرج حشوة الصف:

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

تصميم نهائي

هذا هو التصميم النهائي للرمز الدائري الثابت بتصميم مسبق الصنع.

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

كيفية ضبط حجم القائمة والتباعد بسهولة

كما ذكرنا سابقًا ، تم تصميم القائمة باستخدام وحدة طول em لتحديد موضع عنصر القائمة على محوري x و y (باستخدام ترجمة التحويل). تعتبر وحدة طول em متناسبة مع حجم حجم النص الأساسي. لذلك ، نظرًا لأن كل وحدة من وحدات الدعاية الدعاية لها نفس حجم النص الأساسي الذي يبلغ 20 بكسل ، يمكننا استخدام التحديد المتعدد لتغيير النص الأساسي لجميع الدعاية المغلوطة مرة واحدة.

سيؤدي هذا إلى زيادة أو تقليل التباعد بين عناصر القائمة حسب الحاجة.

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

افكار اخيرة

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

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

هتافات!