يعد شريط تمرير الأكورديون طريقة ممتعة وجذابة للعرض محتويات في مساحة محدودة. عادةً ما تكون منزلقات الأكورديون مصنوعة من عدة عناصر (أو ألواح) مكدسة أفقيًا، مثل طيات الستارة. وعندما تقوم بالتمرير فوق إحدى اللوحات، فإنها تتوسع لتكشف عن محتويات بينما تتقلص لوحات الأكورديون الأخرى. هذا هو المكان الذي يتحقق فيه تأثير الأكورديون للتوسع والانكماش.
في هذا البرنامج التعليمي ، سأوضح لك كيفية إنشاء شريط تمرير أكورديون سريع الاستجابة في Divi باستخدام CSS فقط. للقيام بذلك ، سوف نستخدم عدة وحدات Divi لتكون بمثابة لوحات الأكورديون. يمكن استخدام أي وحدة نمطية ، ولكن في هذا المثال ، سنستخدم وحدات دعاية مضحكة بطريقة مبتكرة للغاية لإنشاء شريط تمرير أكورديون جميل يبدو (ويعمل) بشكل رائع سواء على سطح المكتب أو على الهاتف المحمول.
التحقق من ذلك!
مسح
فيما يلي نظرة عامة على ما سنبنيه في هذا البرنامج التعليمي.
دعنا نبدأ البرنامج التعليمي
ما تحتاجه للبدء
للبدء ، سوف تحتاج إلى القيام بما يلي:
- إذا لم تكن قد قمت بذلك بالفعل ، فقم بتثبيت وتنشيط ملف موضوع ديفي مثبتة (أو البرنامج المساعد Divi منشئ إذا كنت لا تستخدم امتداد موضوع ديفي).
- أنشئ صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة في الواجهة الأمامية (مُنشئ بصري).
- قم بتنزيل 5 من الصور المختلفة في المكتبة لاستخدامها كصور خلفية مطلوبة للبرنامج التعليمي.
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
قم بإنشاء شريط تمرير باستخدام أكورديون سريع الاستجابة على Divi
إنشاء الخط
للبدء ، أضف صفًا من العمود إلى القسم العادي.
ثم افتح الإعدادات للخط وقم بتحديث ما يلي:
- عرض مزراب: 1
- العرض: 100٪
- أقصى عرض: 800px
- الارتفاع: 400 بكسل (سطح المكتب) ؛ 700 بكسل (الجهاز اللوحي والهاتف)
يمكن تغيير قيم العرض والحد الأقصى للعرض وفقًا لاحتياجاتك. سيتم تحجيم الأكورديون وسيعمل في أي عرض صف. أيضًا ، يعد تحديد ارتفاع ثابت أمرًا مهمًا جدًا حتى يعمل التصميم. سيكون ارتفاع العناصر الفرعية (العمود والوحدات النمطية) 100٪. لذلك ، إذا لم تقم بتعيين الارتفاع الثابت للصف ، فلن يكون للعناصر التابعة ارتفاع.
معلمات العمود
الآن بعد أن تم تعيين ارتفاع الصف ، افتح إعدادات العمود وأضف كود CSS التالي إلى العنصر الرئيسي:
مكتب
display:flex;flex-direction: row;align-items:center;height: 100%;
لوحة
flex-direction: column;
ستعمل خاصية المرن على محاذاة لوحات الأكورديون أفقيًا على سطح المكتب وعموديًا على الجهاز اللوحي والهاتف. سيسمح الارتفاع بنسبة 100٪ للوحدات النمطية التي سنضيفها لاستخدام قيمة الارتفاع بنسبة 100٪ أيضًا.
إنشاء لوحة الأكورديون مع ملخص الوحدات
يمكن بناء منزلق الأكورديون باستخدام أي نوع من الوحدات النمطية. إذا أردنا ، يمكننا استخدام مجموعة من الوحدات المختلفة لتكون بمثابة لوحة أكورديون. ولكن بالنسبة لهذا التصميم ، سنستخدم Blurb Mods.
ابدأ بإضافة وحدة عرض تقديمي إلى السطر.
تصميم وحدة مجردة
افتح إعدادات وحدة الملخص وقم بتحديث ما يلي:
احتفظ بالعنوان وهميًا و محتويات من الجسم. يمكننا دائمًا تغيير هذا لاحقًا.
ثم قم بتحديث رمز العرض التقديمي كما يلي:
- رمز (سطح المكتب): رمز يمثل خط سهم أفقي (انظر لقطة الشاشة)
- أيقونة (تحوم): تحقق من أيقونة (انظر لقطة الشاشة)
- الرمز (الجهاز اللوحي والهاتف): رمز يمثل خط سهم عمودي (انظر لقطة الشاشة)
السياق
ثم امنح صورة الخلفية وصورة تراكب متدرجة كما يلي:
- أضف صورة خلفية بعرض 1000 بكسل على الأقل
- موضع صورة الخلفية: يسار الوسط
ثم أضف تراكب خلفية متدرجة.
عوامة
- خلفية التدرج الأيسر (التحويم): # 3e215b
- التدرج الخلفي للون الصحيح (التحويم): rgba (0,0,0,0)
- اتجاه التدرج: 90deg
- ضع التدرج فوق صورة الخلفية: نعم
أيقونة
- لون الأيقونة: #ffffff
- صورة / موقع الرموز: اليسار
ثم انتقل إلى علامة التبويب "التصميم" وقم بتحديث ما يلي:
عنوان النص ونصه
- خط العنوان: بوبينس
- عنوان الخط: Semi Bold
- لون عنوان النص: شفاف (سطح المكتب) ، #ffffff (التحويم)
- حجم عنوان النص: 23px
- لون نص الجسم: شفاف (سطح المكتب) ، #ffffff (التحويم)
الارتفاع وصندوق الظل
بمجرد أن يصبح النص أنيقًا ، قم بتعيين الوحدة النمطية على 100٪ وارتفاع مربع الظل كما يلي:
- الارتفاع: 100٪
- Box Shadow: انظر لقطة الشاشة
- ظل المربع الوضع الأفقي: -12px
- ظل المربع الوضع الرأسي: 0px
Blurb Custom CSS
من أجل توسيع لوحات الأكورديون (أو وحدة العرض التقديمي) الخاصة بنا والتعاقد مع بقية الوحدات ، نحتاج إلى إضافة CSS مخصص لتغيير حجم الوحدة مع النمو المرن. نظرًا لأنه سيكون لدينا إجمالي 5 وحدات تشكل الأكورديون ، فإننا نضيف "flex: 1" للحالة الافتراضية ، ثم نغيرها إلى "flex: 5" في حالة التمرير.
ضمن علامة التبويب خيارات متقدمة ، أضف CSS المخصص التالي ، عنصر Blurb الرئيسي:
مكتب
flex:1;position: relative !important;transition: flex 800ms !important;
لوحة
flex:5;
ثم أضف css المخصص التالي إلى CSS Blurb Content:
مكتب
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
لوحة
width: 100%;height: 100%;position: relative !important;
الفائض والانتقال
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
- مدة الانتقال: 400ms
- منحنى سرعة الانتقال: خطي
حسن! لقد كان تخصيصًا خطيرًا لوحدة العرض التقديمي. لكن الخبر السار هو أن كل ما يتعين علينا القيام به هو تكرارها لإنشاء لوحات الأكورديون المتبقية.
كرر Blurbs لمزيد من لوحات الأكورديون
مرر مؤشر الماوس فوق وحدة العرض التقديمي وانقر فوق رمز النسخ أربع مرات لإنشاء إجمالي خمس لوحات أكورديون (أو وحدات).
ثم قم بتحديث صور الخلفية لكل من الدعاية الجديدة التي قمت بنسخها.
نتيجة نهائية
الأفكار النهائية
يحتوي شريط تمرير الأكورديون سريع الاستجابة هذا على بعض العناصر الفريدة التي تجعل استخدامه ممتعًا. تتوسع ألواح الأكورديون وتتقلص أثناء التحليق دون مشاكل غير متوقعة. وتتغير أيقونات العرض في التمرير والجوال لتعزيز تجربة المستخدم. آمل أن يكون هذا التصميم مفيدًا لمشروعك التالي.
