هل ترغب في إنشاء شريط تمرير أكورديون 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،XNUMX،XNUMX،XNUMX)
- اتجاه التدرج: 90 درجة
- مربع التدرج فوق صورة الخلفية: نعم
أيقونة
- لون الأيقونة: #ffffff
- وضع الصورة / الرمز: صحيح
بعد ذلك ، قم بالتبديل إلى علامة التبويب "تصميم" وقم بتحديث ما يلي:
عنوان النص ونصه
- خط العنوان: بوبينز
- وزن الخط: شبه عريض
- لون نص العنوان: شفاف (سطح المكتب) ، #ffffff (تحوم)
- حجم نص العنوان: 22 بكسل
- لون النص الأساسي: شفاف (سطح المكتب) ، #ffffff (تحوم)
ارتفاع الصندوق والظل
بمجرد تخصيص النص ، امنح الوحدة ارتفاعًا بنسبة 100٪ وظل مربع كما يلي:
- ارتفاع: 100٪
- Box Shadow: انظر لقطة الشاشة
- الوضع الأفقي: -12 بكسل
- الوضع الرأسي: 0 بكسل
عرف المغلق
لكي تنمو لوحات الأكورديون الخاصة بنا (أو وحدة Blurb) وتتعاقد مع بقية الوحدات ، نحتاج إلى إضافة CSS مخصص لتغيير حجم الوحدة مع النمو المرن.
نظرًا لأنه سيكون لدينا إجمالي 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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
