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

هل ترغب في إنشاء قائمة انزلاقية ودفعية في DIVI التي لا تخفي عناصر صفحتك؟

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

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

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

دعونا نذهب!

مسح

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

قم ببناء قائمة الدفع المنزلقة باستخدام أداة إنشاء السمات Divi

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

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

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

اقرأ أيضا: كيفية إنشاء رأس عام باستخدام نموذج تسجيل الدخول في DIVI

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

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

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

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

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

خلفية

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

الهامش الداخلي

• الهامش الداخلي: 0 بكسل للأعلى ، 0 بكسل للأسفل

فئة CSS

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

• فئة CSS: قائمة الدفع et

أضف سطر 1

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

معلمات الخط 1

بعد ذلك ، قم بتحديث معلمات الخط على النحو التالي:

التحجيم

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

مباعدة

• الهامش: أعلى 3vh ، أسفل 3vh

الحدود

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

عرف المغلق

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

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

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

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

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

سيؤدي هذا إلى توسيط محتويات من العمود سواء عموديا وأفقيا.

إضافة زر

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

راجع أيضًا دليلنا حول: كيفية إنشاء قائمة تنقل عمودية في DIVI

إعدادات زر

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

محتويات

• نص الزر: التصميم

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

الطراز

• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #ffffff

• عرض حد الزر: 0 بكسل
• زر الخط: مونتسيرات
• زر ضوء خفيف: ثقيل

• زر الرمز: نعم
• زر الرمز: [اختيارك]
• فقط إظهار الرمز على زر التحويم: لا
• وضع رمز الزر: يسار

عمود مكرر

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

أضف سطر 2

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

اقرأ أيضا: كيفية إضافة نموذج اتصال إلى عنوان عام في DIVI

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

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

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

معلمات الخط 2

قم بتحديث معلمات السطر 2 كما يلي:

• أقصى عرض: 1 بكسل

• عرض الحد السفلي: 0 بكسل

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

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

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

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

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

• حجم نص الزر: 14 بكسل

• زر Soft Light: نص غامق
• تباعد حرف الزر: 2 بكسل
• نمط نسخ الزر: TT
• زر الرمز: NO

عمود مكرر

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

إزالة الحد من العمود الأخير

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

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

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

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

إضافة قسم

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

انظر أيضا: كيفية إنشاء رأس عام باستخدام منشئ السمات في DIVI

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

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

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

مباعدة

• الهامش الداخلي: 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 المخصصين إلى وحدة Code.

انطلق وأضف وحدة رمز إلى العمود 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 اللازمة.

لقد تم !

حفظ الإعدادات

لا تنس حفظ تخطيط وإعدادات Theme Builder.

نتيجة نهائية

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

جعل لزجة

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

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

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

تحميل DIVI Now !!!

وفي الختام

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...