كيفية إنشاء قائمة انزلاق لأسفل في Divi

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

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

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

نظرة خاطفة

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

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

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى Divi Theme Builder الخاص بك ، انتقل إلى Divi Theme Builder.

انقر فوق أيقونة قابلية النقل.

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

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

بمجرد الانتهاء من ذلك ، سيظهر قالب القسم في Divi Theme Builder.

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

بناء قائمة الدفع المنزلقة باستخدام Divi Theme Builder

إنشاء قائمة عالمية جديدة

لإنشاء القائمة ، سنقوم ببناء رأس عالمي جديد داخل Divi Theme Builder.

انتقل إلى Divi> Theme Builder.

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

سينقلك هذا إلى محرر تخطيط الرأس العام.

بمجرد أن تكون في محرر تخطيط الرأس العام ، اختر الخيار "بناء من الصفر.

إنشاء قائمة الدفع

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

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

افتح إعدادات القسم الافتراضي وقم بتحديث الإعدادات على النحو التالي:

خلفية

• لون الخلفية: # 1a1e36

حشوة

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

فئة CSS

ضمن علامة التبويب خيارات متقدمة ، أضف فئة CSS التالية والتي سيتم استخدامها لاحقًا في كود JS الخاص بنا.

• فئة CSS: قائمة الدفع الإلكترونية

CSS مخصص (جهاز لوحي)

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

أضف CSS المخصص التالي إلى العنصر الرئيسي على الجهاز اللوحي فقط:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

أضف صف 1

بمجرد الانتهاء من إعدادات القسم ، قم بإنشاء صف من عمود واحد داخل القسم.

إعدادات الصف 1

ثم قم بتحديث إعدادات الصف كما يلي:

تصميم

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 1280 بكسل
• الحشوة: 3vh أعلى ، 3vh أسفل
• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: rgba (255،255،255،0.2)

لغة تنسيق ويب حسب الطلب

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

ضمن سطح المكتب ...

display:flex;
justify-content:center;
align-items:center;

ضمن الجهاز اللوحي ...

display:flex;
flex-direction:column;
align-items:center;

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

بعد الانتهاء من إعدادات الصف ، افتح إعدادات العمود وأضف مقتطف CSS مخصصًا إلى العنصر الرئيسي:

display:flex;
align-items:center;
justify-content:center;

سيؤدي ذلك إلى توسيط محتويات العمود رأسيًا وأفقيًا.

إضافة زر

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

إعدادات الزر

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

المحتوى

• نص الزر: التصميم
• عنوان URL لرابط الزر: # (استبدل هذا بعنوان URL المخصص الخاص بك لاحقًا)

تصميم

• لون نص الزر: #ffffff
• عرض حد الزر: 0 بكسل
• زر الخط: مونتسيرات
• وزن خط الزر: ثقيل
• رمز الزر: [اختيارك]
• وضع رمز الزر: يسار

تكرار العمود

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

أضف صف 2

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

لإنشاء الصف التالي ، قم بتكرار الصف 1.

احذف كافة الأعمدة باستثناء عمود واحد

ثم احذف جميع الأعمدة باستثناء عمود واحد داخل الصف المكرر.

إعدادات الصف 2

قم بتحديث إعدادات الصف 2 كما يلي:

• العرض الأقصى: 1080 بكسل
• عرض الحد السفلي: 0 بكسل

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

ثم أضف حدًا إلى العمود كما يلي:

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: rgba (255،255،255،0.2)

تحديث إعدادات الزر

بعد أن يحتوي العمود على الحد الأيمن ، افتح إعدادات الزر وقم بتحديث ما يلي:

• حجم نص الزر: 14 بكسل
• تباعد حرف الزر: 2 بكسل
• وزن خط الزر: شبه عريض
• نمط خط الزر: TT
• إظهار رمز الزر: NO

قم بتكرار العمود

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

حذف حدود العمود الأخير

نظرًا لأننا لا نريد أن يكون للعمود الأخير الحد الأيمن ، فافتح إعدادات العمود 4 وقم بتحديث عرض الحد:

• عرض الحد الأيمن: 0 بكسل

إنشاء شريط الرأس الرئيسي

بعد ذلك ، سنقوم بإنشاء قسم لشريط الرأس الرئيسي. سيظل شريط الرأس هذا مرئيًا دائمًا وسيكون ما يحمل شعار موقعنا و CTA وزر تبديل القائمة.

إضافة قسم

قبل أن نضيف القسم الجديد ، من الأفضل تحديث ملصق القسم السابق لقراءة "قسم قائمة الدفع".

ثم قم بإنشاء قسم جديد أسفل القسم الأول.

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

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

حشوة

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

اضف سطر

بعد إضافة مساحة القسم ، أضف صفًا من ثلاثة أعمدة إلى القسم.

إعدادات الصف

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

تحجيم

• عرض الحضيض: 1
• العرض: 90٪
• الارتفاع: 70 بكسل

حشوة

• الحشو: الحشو: 0 بكسل للأعلى ، 0 بكسل للأسفل

لغة تنسيق ويب حسب الطلب

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

display:flex;
align-items:center;

سيؤدي هذا إلى توسيط الأعمدة عموديًا داخل الصف.

إضافة زر

لإنشاء CTA الرئيسي في قسم الرأس ، يمكننا استخدام زر من الصف الثاني في القسم العلوي. انسخ الزر من العمود 1 في الصف 2 من القسم العلوي والصقه في العمود 1 من الصف في قسم الرأس.

تحديث إعدادات الزر

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

• نص الزر: سجل
• حجم نص الزر: 14 بكسل
• لون نص الزر: # 1a1e36
• إظهار رمز الزر: نعم
• رمز الزر: السهم الأيمن (انظر لقطة الشاشة)

أضف الشعار

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

مرر مؤشر الماوس فوق مربع الصورة وانقر فوق رمز "استخدام المحتوى الديناميكي". من القائمة المنسدلة ، حدد "شعار الموقع".

إعدادات الصورة

بعد ذلك ، ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• محاذاة الصورة: المركز
• أقصى ارتفاع: 55 بكسل

إضافة رمز همبرغر مخصص

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

أضف وحدة نصية

لإنشاء رمز القائمة ، سنستخدم وحدة نصية مع بعض HTML المخصص الذي سيتم تصميمه باستخدام CSS خارجي.

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

إضافة وحدة نصية HTML

ثم أضف HTML التالي إلى محتوى وحدة النص:

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

خلفية

امنح وحدة النص لونًا للخلفية:

• لون الخلفية: # 1a1e36

تصميم نصي

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

• العرض: 70 بكسل
• محاذاة الوحدة: صحيح
• الارتفاع: 70 بكسل
• المساحة المتروكة: 20 بكسل للأعلى ، 20 بكسل للأسفل ، 16 بكسل لليسار ، 16 بكسل لليمين

فئة CSS

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

• فئة CSS: et-push-menu-toggle

أضف كود

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

امض قدمًا وأضف وحدة رمز إلى العمود 3 تحت وحدة النص.

ثم الصق الكود التالي (مهم: قم بلف هذه الشفرة في علامات النمط لتعمل بشكل صحيح):

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    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;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

بعد ذلك ، انسخ هذا الرمز والصقه أسفله مباشرةً (مهم: قم بلف هذا الرمز في علامات البرنامج النصي حتى يعمل بشكل صحيح):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

تحديث نص الزر والارتباطات

أخيرًا ، يمكننا تحديث جميع الأزرار بنص الزر وعناوين URL اللازمة.

هذا كل شيء!

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

لا تنس حفظ التخطيط وإعدادات منشئ السمات.

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

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

جعلها لزجة

إذا كنت تريد إصدارًا "ثابتًا" من القائمة ، فكل ما عليك فعله هو إضافة مقتطف CSS التالي إلى وحدة التعليمات البرمجية (بين علامات الأنماط ):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

وها هي النتيجة.

افكار اخيرة

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

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

هتافات!