شريط التمرير الأكورديوني طريقة ممتعة وجذابة لعرض المحتوى في مساحة صغيرة. يتكون عادةً من عدة عناصر (أو لوحات) متراصة أفقيًا، مثل طيات الستارة. عند تمرير مؤشر الماوس فوق إحدى اللوحات، تتمدد لتكشف عن المحتوى بينما تنكمش اللوحات الأخرى. هكذا يتحقق تأثير الأكورديوني من التمدد والانكماش.
في هذا الدرس، سأشرح لكم كيفية إنشاء شريط تمرير أكورديون متجاوب في Divi باستخدام CSS فقط. سنستخدم عدة وحدات Divi كلوحات أكورديون. يمكن استخدام أي وحدة، ولكن في هذا المثال، سنستخدم وحدة blurb بطريقة إبداعية لإنشاء شريط تمرير أكورديون جميل المظهر (والعمل) بشكل رائع على كل من أجهزة الكمبيوتر المكتبية والهواتف المحمولة.
التحقق من ذلك!
مسح
فيما يلي نظرة عامة على ما سنبنيه في هذا البرنامج التعليمي.
دعنا نبدأ البرنامج التعليمي
ما تحتاجه للبدء
للبدء ، سوف تحتاج إلى القيام بما يلي:
- إذا لم تقم بذلك بالفعل، فقم بتثبيت وتفعيل قالب Divi المثبت (أو إضافة Divi Builder إذا كنت لا تستخدم قالب 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;
تُتيح خاصية "flex" محاذاة لوحات الأكورديون أفقيًا على أجهزة سطح المكتب وعموديًا على الأجهزة اللوحية والهواتف. كما أن تحديد ارتفاع بنسبة 100% يسمح لأي وحدات إضافية نضيفها باستخدام ارتفاع بنسبة 100% أيضًا.
إنشاء لوحة الأكورديون مع ملخص الوحدات
يمكن بناء شريط التمرير القابل للطي باستخدام أي نوع من الوحدات البرمجية. إذا أردنا، يمكننا استخدام مزيج من وحدات برمجية مختلفة لتشكيل لوحة التمرير. ولكن في هذا التصميم، سنستخدم وحدات Blurb البرمجية.
ابدأ بإضافة وحدة عرض تقديمي إلى السطر.
تصميم وحدة مجردة
افتح إعدادات وحدة الملخص وقم بتحديث ما يلي:
اجعل العنوان ومحتوى النص خياليين. يمكننا دائمًا تغيير ذلك لاحقًا.
ثم قم بتحديث رمز العرض التقديمي كما يلي:
- أيقونة (سطح المكتب): أيقونة تمثل خط سهم أفقي (انظر لقطة الشاشة)
- أيقونة (عند تمرير المؤشر): أيقونة علامة صح (انظر لقطة الشاشة)
- الأيقونة (للأجهزة اللوحية والهواتف): أيقونة تمثل خط سهم عمودي (انظر لقطة الشاشة)
السياق
ثم امنح صورة الخلفية وصورة تراكب متدرجة كما يلي:
- أضف صورة خلفية بعرض 1000 بكسل على الأقل
- موضع صورة الخلفية: وسط اليسار
ثم أضف تراكب خلفية متدرجة.
عوامة
- خلفية التدرج الأيسر (التحويم): # 3e215b
- التدرج الخلفي للون الصحيح (التحويم): rgba (0,0,0,0)
- اتجاه التدرج: 90deg
- ضع التدرج اللوني فوق صورة الخلفية: نعم
أيقونة
- لون الأيقونة: #ffffff
- صورة / موقع الرموز: اليسار
بعد ذلك، انتقل إلى علامة التبويب "التصميم" وقم بتحديث العناصر التالية:
عنوان النص ونصه
- خط العنوان: بوبينس
- عنوان الخط: Semi Bold
- لون عنوان النص: شفاف (سطح المكتب) ، #ffffff (التحويم)
- حجم عنوان النص: 23px
- لون نص الجسم: شفاف (سطح المكتب) ، #ffffff (التحويم)
الارتفاع وصندوق الظل
بمجرد أن يصبح النص أنيقًا ، قم بتعيين الوحدة النمطية على 100٪ وارتفاع مربع الظل كما يلي:
- الارتفاع: 100٪
- ظل الصندوق: انظر لقطة الشاشة
- ظل المربع الوضع الأفقي: -12px
- ظل المربع الوضع الرأسي: 0px
Blurb Custom CSS
لجعل لوحات الأكورديون (أو وحدات العرض) تتمدد وتتقلص مع الوحدات الأخرى، نحتاج إلى إضافة CSS مخصص لتغيير حجم الوحدة باستخدام خاصية flex-grow. بما أن لدينا 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
- منحنى سرعة الانتقال: خطي
رائع! لقد كان ذلك تعديلاً جذرياً لوحدة العرض التقديمي. لكن الخبر السار هو أن كل ما علينا فعله هو تكرارها لإنشاء لوحات الأكورديون المتبقية.
قم بتكرار النصوص للحصول على المزيد من اللوحات القابلة للطي
مرر مؤشر الماوس فوق وحدة العرض التقديمي وانقر على أيقونة التكرار أربع مرات لإنشاء ما مجموعه خمس لوحات (أو وحدات) قابلة للطي.
ثم قم بتحديث صور الخلفية لكل نص من نصوص العرض التقديمي الجديدة التي قمت بنسخها.
نتيجة نهائية
الأفكار النهائية
يتميز هذا الشريط المنزلق التفاعلي القابل للطي بعناصر فريدة تجعل استخدامه ممتعًا. تتمدد وتتقلص الألواح المنزلقة بسلاسة تامة عند تمرير المؤشر فوقها. كما تتغير أيقونات العرض عند تمرير المؤشر فوقها، وعلى الأجهزة المحمولة تحديدًا، لتحسين تجربة المستخدم. نأمل أن يكون هذا التصميم مفيدًا لمشروعك القادم.