هل تريد إنشاء شريط تمرير Divi الأكورديون المستجيب؟
يُعد شريط التمرير القابل للطي طريقة ممتعة وجذابة لعرض المحتوى في مساحة صغيرة.
تتكون أشرطة التمرير الأكورديونية عادةً من عدة عناصر (أو لوحات) مكدسة أفقيًا مثل طيات الستارة. عند تمرير مؤشر الماوس فوق إحدى اللوحات، تتمدد لتكشف عن المحتوى بينما تنكمش لوحات الأكورديون الأخرى. هذا ما يخلق تأثير التمدد والانكماش الشبيه بالأكورديون.
في هذا الدرس، سنوضح لك كيفية إنشاء شريط تمرير أكورديون متجاوب في Divi باستخدام CSS فقط. سنستخدم عدة وحدات Divi كلوحات أكورديون لتحقيق ذلك.
مسح
فيما يلي نظرة عامة سريعة على ما سنحققه في هذا البرنامج التعليمي.
تحميل DIVI Now !!!
إنشاء صفحة جديدة باستخدام Divi Builder
للبدء ، سوف تحتاج إلى القيام بما يلي:
- من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
- أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
- ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
إنشاء شريط تمرير أكورديون سريع الاستجابة في Divi
إنشاء الخط
للبدء ، أضف صفًا من عمود واحد إلى القسم العادي.
ثم افتح إعدادات الخط وقم بتحديث ما يلي:
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 1
- العرض: 100٪
- العرض الأقصى: 800 بكسل
- الارتفاع: 400 بكسل (سطح المكتب) ؛ 700 بكسل (جهاز لوحي وهاتف)
يمكن تعديل قيم العرض والعرض الأقصى لتناسب احتياجاتك. سيتكيف الأكورديون ويعمل مع أي عرض للسطر.
معلمات العمود
الآن وقد حددنا ارتفاع الصف، افتح إعدادات العمود وأضف CSS التالي إلى العنصر الرئيسي:
الحاسوب
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
لوحة
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
إنشاء لوحة الأكورديون بوحدات Blurb النمطية
يمكن بناء شريط التمرير القابل للطي باستخدام أي نوع من الوحدات البرمجية. إذا أردنا، يمكننا استخدام مزيج من وحدات برمجية مختلفة ليكون بمثابة لوحة قابلة للطي. ولكن في هذا التصميم، سنستخدم وحدات Blurb البرمجية.
ابدأ بإضافة وحدة Blurb إلى السطر.
دعاية تصميم وزارة الدفاع
افتح إعدادات وحدة العرض التقديمي وقم بتحديث ما يلي:
احتفظ بالعنوان والنص الأصليين. يمكننا دائمًا تغيير ذلك لاحقًا.
بعد ذلك، قم بتحديث أيقونة العرض التقديمي على النحو التالي:
- الأيقونة (سطح المكتب): أيقونة خط سهم أفقي (انظر لقطة الشاشة)
- أيقونة (عند التمرير): (انظر لقطة الشاشة)
- الأيقونة (للأجهزة اللوحية والهواتف): (انظر لقطة الشاشة)
خلفية
بعد ذلك، قم بإضافة صورة خلفية وتراكب متدرج للنص التمهيدي عند تمرير المؤشر فوقه كما يلي:
- أضف صورة خلفية بعرض 1000 بكسل على الأقل
- موضع صورة الخلفية: مركز اليسار
ثم أضف تراكب خلفية متدرجة.
رفرفة
- تدرج لون الخلفية على اليسار (عند تمرير المؤشر): #3e215b
- تدرج لون الخلفية إلى اليمين (عند التمرير): rgba (0,0,0,0)
- اتجاه التدرج: 90 درجة
- مربع التدرج فوق صورة الخلفية: نعم
أيقونة
- لون الأيقونة: #ffffff
- وضع الصورة / الرمز: صحيح
بعد ذلك، انتقل إلى علامة التبويب "التصميم" وقم بتحديث العناصر التالية:
عنوان النص ونصه
- خط العنوان: بوبينز
- وزن الخط: شبه عريض
- لون نص العنوان: شفاف (سطح المكتب) ، #ffffff (تحوم)
- حجم نص العنوان: 22 بكسل
- لون النص الأساسي: شفاف (سطح المكتب) ، #ffffff (تحوم)
ارتفاع الصندوق والظل
بمجرد تخصيص النص ، امنح الوحدة ارتفاعًا بنسبة 100٪ وظل مربع كما يلي:
- ارتفاع: 100٪
- ظل الصندوق: انظر لقطة الشاشة
- الوضع الأفقي: -12 بكسل
- الوضع الرأسي: 0 بكسل
عرف المغلق
لكي تتوسع وتتقلص لوحات الأكورديون الخاصة بنا (أو وحدة Blurb) مع بقية الوحدات، نحتاج إلى إضافة CSS مخصص لتغيير حجم الوحدة باستخدام flex-grow.
بما أننا سنمتلك ما مجموعه 5 وحدات تشكل الأكورديون، فإننا نضيف "flex: 1" للحالة الافتراضية، ثم نغيرها إلى "flex: 5" في حالة التمرير.
ضمن علامة التبويب "متقدم"، أضف CSS المخصص التالي إلى عنصر Blurb الرئيسي:
مكتب
flex:1;
position: relative !important;
transition: flex 800ms !important;
على التحويم
flex:5;
position: relative !important;
transition: flex 800ms !important;
ثم أضف 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 مللي ثانية
- منحنى سرعة الانتقال: خطي
رائع! لقد كان ذلك تعديلاً جذرياً لوحدة Blurb. لكن الخبر السار هو أن كل ما علينا فعله هو تكرارها لإنشاء لوحات الأكورديون المتبقية.
قم بتكرار التخطيطات لمزيد من الألواح القابلة للطي
مرر مؤشر الماوس فوق وحدة العرض التقديمي وانقر أربع مرات على الأيقونة المزدوجة لإنشاء ما مجموعه خمس لوحات (أو وحدات) على شكل أكورديون.
بعد ذلك، قم بتحديث صور الخلفية لكل نص من نصوص العرض التقديمي الجديدة التي قمت بنسخها.
نتيجة نهائية
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نرى النتيجة النهائية.
تحميل DIVI Now !!!
خاتمة
يتميز شريط التمرير الأكورديوني التفاعلي هذا بخصائص فريدة تجعل استخدامه ممتعًا. تتمدد ألواح الأكورديوني وتتقلص بسلاسة عند تحريك مؤشر الماوس فوقها، دون أي مشاكل غير متوقعة.
وتتغير أيقونات العرض التقديمي عند تمرير المؤشر عليها وعلى الأجهزة المحمولة لتحسين تجربة المستخدم. نأمل أن يلهمك هذا الشرح لمشاريعك القادمة على منصة Divi. إذا كانت لديك أي مشاكل أو اقتراحات، تواصل معنا. قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...