كيفية بناء قائمة همبرغر Stagger-Animated مع Divi & Anime.js

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

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

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل قالب Global Header مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. إنشاء قالب رأس جديد

انتقل إلى Divi Theme Builder وأضف قالب رأس عام جديد

ابدأ بالذهاب إلى Divi Theme Builder. واحد هناك ، أضف عنوانًا عالميًا جديدًا.

ابدأ البناء من الصفر

وابدأ في بناء تصميم الرأس من البداية.

2. بناء الشعار وأيقونة همبرغر

إعدادات القسم

لون الخلفية

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

• لون الخلفية: rgba (255،255،255،0)

تباعد

انتقل إلى علامة تبويب تصميم القسم وقم بإزالة جميع الحشوة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

موقع

ثم انتقل إلى الإعدادات المتقدمة وأدر القسم ثابتًا.

• المركز: ثابت
• الموقع: أعلى اليسار
• الفهرس Z: 13

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

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات التحجيم وفقًا لذلك:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 95٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

العنصر الرئيسي CSS

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

display: flex;

أضف وحدة الصورة النمطية إلى العمود 1

تحميل الشعار

حان الوقت لإضافة وحدات ، بدءًا من Image Module في العمود 1. قم بتحميل شعار من اختيارك.

تحجيم

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات التحجيم بعد ذلك.

• عرض ماكس:
  • سطح المكتب: 80 بكسل
  • الجهاز اللوحي والهاتف: 50 بكسل

موقع

ثم قم بتغيير موضع الوحدة بأكملها.

• الموقف: مطلق
• الموقع: أعلى اليسار
• الإزاحة العمودية: 20 بكسل

أضف وحدة نصية إلى العمود 3

بنية HTML في Content Box

في العمود الثالث ، سنضيف وحدة نصية. سنستخدم وحدة النص هذه لإنشاء رمز الهامبرغر الخاص بنا. ابدأ بالتبديل إلى علامة تبويب النص في مربع المحتوى وأدخل علامات HTML التالية:

<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

تحجيم

قم بتعديل إعدادات تحجيم الوحدة بعد ذلك.

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

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 10 بكسل
  • الجهاز اللوحي والهاتف: 17 بكسل
• الحشوة السفلية:
  • سطح المكتب: 10 بكسل
  • الجهاز اللوحي والهاتف: 17 بكسل
• الحشوة اليسرى:
  • سطح المكتب: 15 بكسل
  • الجهاز اللوحي والهاتف: 30 بكسل
• الحشوة اليمنى:
  • سطح المكتب: 15 بكسل
  • الجهاز اللوحي والهاتف: 10 بكسل

موقع

قم بتغيير موضع هذه الوحدة أيضًا.

• الموقف: مطلق
• الموقع: الزاوية اليسرى العلوية

3. بناء قائمة همبرغر

إضافة قسم جديد

خلفية متدرجة

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

• اللون 1: # 000000
• اللون 2: # 111111
• نوع التدرج: خطي
• اتجاه التدرج: 90 درجة
• موقف البداية: 50٪
• موقف النهاية: 50٪

تحجيم

قم بتطبيق الحد الأدنى للارتفاع والحد الأقصى للارتفاع على إعدادات التحجيم التالية.

• ارتفاع الحد الأدنى: 100vh
• إرتفاع max: 100vh

تباعد

بعد ذلك ، قم بإزالة كل المساحة المتروكة العلوية والسفلية للقسم الافتراضي.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

فيضانات

قم بتعديل الفائض أيضًا.

• الفائض الأفقي: مخفي
• الفائض الرأسي: تلقائي

موقع

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

• المركز: ثابت
• أعلى مركز الموقع

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

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات التحجيم على النحو التالي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

فيضانات

بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وقم بتغيير الفائض.

• الفائض الأفقي: مخفي
• الفائض الرأسي: تلقائي

موقع

قم بتغيير موضع الصف أيضًا.

• الموقف: مطلق
• أعلى مركز الموقع

إعدادات العمود 1

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 24 ساعة
  • الجهاز اللوحي والهاتف: 10vh
• الحشوة السفلية:
  • سطح المكتب: 24 ساعة
  • الجهاز اللوحي والهاتف: 5vh
• الحشوة اليسرى: 13٪
• الحشوة اليمنى: 13٪

الحدود

سنطبق بعض إعدادات الحدود أيضًا:

• عرض الحد الأيمن:
  • سطح المكتب: 2 بكسل
  • الجهاز اللوحي والهاتف: 0px \
• لون الحد الأيمن: # 191919
• عرض الحد السفلي:
  • سطح المكتب: 0 بكسل
  • الجهاز اللوحي والهاتف: 2 بكسل
• لون الحد الأيمن: # 191919

إعدادات العمود 2

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: 24 ساعة
  • الجهاز اللوحي والهاتف: 5vh
• الحشوة السفلية:
  • سطح المكتب: 24 ساعة
  • الجهاز اللوحي والهاتف: 5vh
• الحشوة اليسرى: 13٪
• الحشوة اليمنى: 13٪

أضف وحدة النص رقم 1 إلى العمود 1

أضف محتوى H3

حان الوقت لإضافة الوحدات ، بدءًا من الوحدة النمطية الأولى للنص في العمود 1. أضف بعض محتوى H3 من اختيارك.

إعدادات نص H3

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H3 على النحو التالي:

• خط العنوان 3: مونتسيرات
• وزن خط العنوان 3: غامق للغاية
• نمط خط العنوان 3: أحرف كبيرة
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw
• العنوان 3 تباعد الأحرف: 5 بكسل

تباعد

أضف بعض الهامش السفلي بعد ذلك.

• الهامش السفلي: 5vh

استنساخ وحدة النص ووضع نسخة مكررة في العمود 2

بمجرد الانتهاء من هذه الوحدة الأولى ، يمكنك استنساخها مرة واحدة ووضع النسخة المكررة في العمود 2.

تغيير المحتوى

تأكد من تغيير المحتوى في هذه الوحدة المكررة.

أضف وحدة النص رقم 2 إلى العمود 2

بنية HTML في Content Box

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

<span style="color: #686868;">01—</span> <a href="#">Services</a> <span class="toggle-sub-menu" style="color: #ffff00;">+</span>
<ul>
	<li><a href="#">Web design</a></li>
	<li><a href="#">Branding</a></li>
</ul>

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: رفيع
• لون النص: #ffffff
• حجم الخط:
  • سطح المكتب: 2.7vw
  • الجهاز اللوحي: 4vw
  • الهاتف: 6vw
• تباعد الرسائل النصية: 0.1em
• ارتفاع خط النص: 1em

إعدادات نص الارتباط

تغيير لون نص الارتباط أيضا.

• لون نص لين: #ffffff

إعدادات نص القائمة غير المرتبة

بعد ذلك ، قم بتعديل إعدادات نص القائمة غير المرتبة.

• خط قائمة غير مرتبة: مونتسيرات
• وزن خط القائمة غير المرتبة: غامق
• نمط خط قائمة غير مرتبة: أحرف كبيرة
• حجم النص غير المرتب:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw
• ارتفاع سطر القائمة غير المرتبة: 1.5em
• نوع نمط قائمة غير مرتبة: لا شيء
• وضع نمط قائمة غير مرتبة: في الداخل

تباعد

وأكمل إعدادات الوحدة بإضافة بعض الحشوة العلوية والسفلية المخصصة.

• حشوة علوية: 5٪
• حشوة سفلية: 5٪

استنساخ وحدة النص لإنشاء تباين بدون قائمة فرعية

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

اترك القائمة الفرعية وأيقونة التبديل

لتحويل هذه الوحدة المكررة إلى عنصر قائمة عادي بدون عناصر قائمة فرعية ، استخدم بنية HTML هذه بدلاً من ذلك:

<span style="color: #686868;">03—</span> <a href="#">Contact</a>

أعد استخدام كلا النوعين من عناصر القائمة

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

أضف وحدة النص رقم 2 إلى العمود 2

أضف H4 & Paragraph Content إلى Content Box

في العمود 2 ، سنضيف وحدة نصية أخرى مع بعض محتوى H4 والفقرة من اختيارنا.

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: العاتا
• لون النص: #cecece
• حجم الخط:
  • سطح المكتب: 0.8vw
  • الكمبيوتر اللوحي: 2.4vw
  • الهاتف: 3.4vw
• تباعد حروف النص: 1 بكسل
• ارتفاع خط النص: 1.5em
• لون النص: فاتح

إعدادات نص H4

قم بإجراء بعض التغييرات على إعدادات نص H4 أيضًا.

• حجم نص العنوان 4:
  • سطح المكتب: 1vw
  • الجهاز اللوحي: 3vw
  • الهاتف: 4vw

تحجيم

بعد ذلك ، قم بتعديل عرض الوحدة في إعدادات التحجيم.

• العرض: 48٪

العنصر الرئيسي CSS

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

display: inline-block;

وحدة استنساخ النص # 2

تغيير النسخ

بمجرد الانتهاء من وحدة النص ، يمكنك استنساخها مرة واحدة وتغيير المحتوى وفقًا لذلك.

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 2

أضف الشبكات الاجتماعية المفضلة

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

قم بإزالة لون الخلفية لكل شبكة اجتماعية على حدة

قم بإزالة لون الخلفية لكل شبكة اجتماعية على حدة.

تباعد

ثم ارجع إلى إعدادات الوحدة العامة وقم بتطبيق بعض الهامش العلوي.

• الهامش العلوي: 5vh

4. إضافة وظائف

أضف فئة CSS إلى وحدة نص أيقونة همبرغر

الآن وبعد أن تم بناء أساس تصميم قائمة الهامبرغر لدينا ، يمكننا الآن التركيز على إضافة وظائف! أول شيء عليك القيام به هو فتح وحدة النص التي تحتوي على أيقونة الهامبرغر وإضافة فئة CSS التالية:

• فئة CSS: عرض كامل مفتوح

أضف فئة CSS إلى القسم رقم 2

ثم افتح قسم قائمة الهامبرغر ، القسم رقم 2 ، وأضف فئة CSS التالية:

• فئة CSS: قائمة كاملة العرض

أضف فئة CSS إلى كل وحدة نمطية في قائمة العرض الكامل

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

• فئة CSS: تأثير stagger

أضف فئة CSS إضافية إلى عناصر القائمة

أضف فئة CSS إضافية ، تسمى "main-menu-item" ، إلى كل عنصر من عناصر القائمة في العمود 1 أيضًا.

• فئة CSS: عنصر القائمة الرئيسية ذو التأثير المتدرج

أضف وحدة التعليمات البرمجية إلى القسم رقم 1

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

أدخل كود CSS

أضف كود CSS التالي إلى Code Module بين علامات النمط كما يمكنك ملاحظته في شاشة الطباعة أدناه.

/* enable class below once you're done editing the menu */

/*
.fullwidth-menu {
opacity: 0;
top: 0vh;
visibility: hidden;
}
*/

.line{
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.fullwidth-open.open .line{
background: white; 
}

.line-1 {
top: 15px;    
}
  
.line-2 {
top: 25px;
width: 80%;
}
 
.line-3 {
top: 35px;
width: 50%;
}
 
.fullwidth-open.open .line-1 {
top: 25px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
.fullwidth-open.open .line-2 {
display: none;
}
 
.fullwidth-open.open .line-3 {
top: 25px;
width: 100%;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.fullwidth-menu-open {
opacity: 1 !important;
top: 0 !important;
visibility: visible !important;
}
 
.fullwidth-menu {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}
  
.main-menu-item ul {
display: none; 
padding: 0;
margin-top: 50px;
}
  
.toggle-sub-menu {
cursor: pointer;
}

أدخل مكتبة Anime.js

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

• src = ”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

أدخل كود JQuery

يتم تشغيل وظائف النقر في قائمة الهامبرغر الخاصة بنا بواسطة كود JQuery التالي. تأكد من وضع هذا الرمز بين علامات البرنامج النصي كما ترى في شاشة الطباعة أدناه.

jQuery(function($){
$(document).ready(function(){  

// All variables needed in functions  
var menuSection = $('.fullwidth-menu');
var hamburgerIcon = $('.fullwidth-open');
var menuLink = $('.fullwidth-menu a');
var subMenu = $('.main-menu-item ul');
var toggleIcon = $('.toggle-sub-menu');
  
  
// Open fullwidth menu & animate items  
hamburgerIcon.click(function(){
	$(this).toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');
	if (menuSection.hasClass("fullwidth-menu-open")) {
		anime({
  		targets: '.stagger-effect',
  		translateY: [150, 0],
  		opacity: [0, 1],
  		loop: false,
  		delay: anime.stagger(100, {easing: 'easeOutQuad'})
		});

	} else { 
		subMenu.slideUp();  
		toggleIcon.text($(this).text() == '+' ? '-' : '+');  
	}
});

// Close fullwidth menu when clicking an item
menuLink.click(function(){
	hamburgerIcon.toggleClass('open');
	menuSection.toggleClass('fullwidth-menu-open');  
  subMenu.slideUp();  
	toggleIcon.text($(this).text() == '+' ? '-' : '+');  
});
  
// Change icon when toggling the submenu  
toggleIcon.click(function(){  
	var subMenu = $(this).parent().find("ul");
	subMenu.slideToggle(); 
	$(this).text($(this).text() == '-' ? '+' : '-'); 
});  
  
});
});

قم بتنشيط فئة CSS فور الانتهاء من تصميم رأس ملء الشاشة

أخيرًا وليس آخرًا ، سنقوم بتمكين فئة CSS في Code Module والتي يمكنك العثور عليها في القسم الأول. افتح وحدة التعليمات البرمجية وقم بإزالة “/ * * /” في بداية الفصل الدراسي ونهايته. سيؤدي تمكين هذه الفئة (جنبًا إلى جنب مع بعض أكواد JQuery التي تم تمكينها بالفعل) إلى التأكد من عدم تحميل القسم الذي يحتوي على عناصر القائمة على الفور عندما يزور شخص ما إحدى صفحاتك. بمجرد تمكين هذه الفئة ، سيختفي القسم الثاني من صفحتك من Visual Builder ، ولكن لا يزال بإمكانك الوصول إليه في وضع Wireframe أو إيقاف تشغيل فئة CSS إذا كنت تريد إجراء تغييرات إضافية.

5. حفظ التغييرات في الرأس والموضوع

هذا كل شيء! الشيء الوحيد المتبقي هو حفظ القالب و Divi Theme Builder وعرض النتيجة على موقع الويب الخاص بك!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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