كيفية إنشاء متزلج أكورديون متجاوب في Divi

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

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

تحقق من ذلك!

نظرة خاطفة

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

سطح المكتب

الجهاز اللوحي والهاتف

قم بتنزيل مخطط Divi Responsive Accordion Slider Layout مجانًا

لوضع يديك على شريط تمرير الأكورديون المصمم في هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني 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 لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. قم بتحميل حوالي 5 صور وهمية مختلفة إلى مكتبة الوسائط لاستخدامها في صور الخلفية المطلوبة في البرنامج التعليمي.

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

إنشاء متزلج أكورديون مستجيب في Divi

خلق الصف

للبدء ، أضف صفًا من عمود واحد إلى القسم العادي.

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

• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 800 بكسل
• الارتفاع: 400 بكسل (سطح المكتب) ؛ 700 بكسل (جهاز لوحي وهاتف)

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

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

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

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

لوح

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

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

إنشاء لوحة الأكورديون بوحدات Blurb النمطية

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

ابدأ بإضافة وحدة دعاية مغالى فيها إلى الصف.

تصميم وحدة Blurb

افتح إعدادات الوحدة النمطية Blurb وقم بتحديث ما يلي:

احتفظ بالعنوان الوهمي ومحتوى الجسم. يمكننا دائمًا تغيير ذلك لاحقًا.

ثم قم بتحديث أيقونة الدعاية الدعاية كالتالي:

• رمز (سطح المكتب): رمز خط السهم الأفقي (انظر لقطة الشاشة)

• أيقونة (تحوم): تحقق من أيقونة (انظر لقطة الشاشة)

• الرمز (الجهاز اللوحي والهاتف): رمز خط السهم العمودي (انظر لقطة الشاشة)

خلفية

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

• أضف صورة خلفية بعرض 1000 بكسل على الأقل
• موضع صورة الخلفية: مركز اليسار

ثم أضف تراكب خلفية متدرجة عند التمرير.

يحوم

• لون الخلفية المتدرج الأيسر (تحوم): # 3e215b
• تدرج الخلفية اللون الأيمن (تحوم): rgba (0،0،0،0)
• اتجاه التدرج: 90 درجة
• وضع التدرج فوق صورة الخلفية: نعم

أيقونة

• لون الأيقونة: #ffffff
• وضع الصورة / الرمز: اليسار

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

العنوان والنص الأساسي

• خط العنوان: بوبينز
• وزن خط العنوان: شبه عريض
• لون نص العنوان: شفاف (سطح المكتب) ، #ffffff (تحوم)
• حجم نص العنوان: 22 بكسل
• لون النص الأساسي: شفاف (سطح المكتب) ، #ffffff (تحوم)

الارتفاع ومربع الظل

بعد تحديد نمط النص ، امنح الوحدة ارتفاعًا بنسبة 100٪ وظل مربع كما يلي:

• ارتفاع: 100٪
• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الأفقي: -12 بكسل
• مربع الظل الوضع الرأسي: 0 بكسل

Blurb Custom CSS

من أجل جعل لوحات الأكورديون (أو الوحدة النمطية) تتوسع وتتقلص مع بقية الوحدات ، نحتاج إلى إضافة بعض css المخصص لتغيير حجم الوحدة مع النمو المرن. نظرًا لأن لدينا إجمالي 5 وحدات تشكل الأكورديون ، فإننا نضيف "flex: 1" للحالة الافتراضية ثم نغيرها إلى "flex: 5" في حالة التمرير.

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

سطح المكتب

flex:1;
position: relative !important;
transition: flex 800ms !important;

لوح

flex:5;

ثم أضف css المخصص التالي إلى Blurb Content CSS:

سطح المكتب

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

لوح

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

الفائض والانتقال

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي
• مدة الانتقال: 400 مللي ثانية
• منحنى سرعة الانتقال: خطي

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

تكرار الدعاية لمزيد من لوحات الأكورديون

مرر مؤشر الماوس فوق الوحدة النمطية للدعاية والإعلان وانقر فوق رمز النسخ أربع مرات لإنشاء إجمالي خمس لوحات أكورديون (أو وحدات نمطية).

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

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

سطح المكتب

الجهاز اللوحي والهاتف

افكار اخيرة

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

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

هتافات!