كيفية وميض خطوات العملية تدريجياً باستخدام تأثيرات التمرير لديفي

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

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

نظرة خاطفة

قم بتنزيل Layout مجانًا

لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

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

كيفية وميض خطوات العملية تدريجياً باستخدام تأثيرات التمرير لديفي

لإنشاء تخطيطنا لتفليش الخطوات لعملية ما في التمرير ، يجب أن نبدأ بإضافة صف جديد.

إنشاء صف من أربعة أعمدة

للبدء ، أضف صفًا من أربعة أعمدة إلى القسم.

قبل أن نبدأ في إضافة وحدات / محتوى إلى الأعمدة ، افتح إعدادات الصف وقم بتحديث ما يلي:

• عرض المزراب: 2
• العرض الأقصى: 80٪

بسيطة بما يكفي حتى الآن. لنبدأ الآن بإضافة بعض المحتوى.

إضافة المحتوى (الخطوات) إلى كل عمود

نظرًا لأن هذا التصميم يتميز بتأثير التمرير الذي يضيء الخطوات لعملية ما ، سيحتوي كل عمود من أعمدةنا على إحدى الخطوات. سيحتوي العمود 1 على محتوى لتوضيح الخطوة 1. وسيحتوي العمود 2 على محتوى للخطوة 2. وهكذا.

أضف وحدة نصية إلى العمود 1

أضف وحدة نصية جديدة إلى العمود 1.

محتوى وحدة النص والتصميم

ثم قم بتحديث محتوى النص كما يلي:

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

• خط النص: لاتو
• وزن خط النص: غامق
• لون نص النص: # fc6d71
• خط العنوان 2: أوزوالد
• وزن خط العنوان 2: خفيف
• حجم نص العنوان 2: 32 بكسل
• العنوان 2 تباعد الأحرف: 1 بكسل
• ارتفاع خط العنوان 2: 1.3em
• الهامش: 0 بكسل للأسفل
• الحشو: 10٪ أعلى ، 10٪ أسفل
• عرض الحدود: 1 بكسل
• لون الحدود: rgba (166،166،166،0.16)

أضف وحدة الصورة النمطية إلى العمود 1

بمجرد وضع وحدة النص في مكانها ، أضف وحدة صورة أسفل وحدة النص في العمود 1.

ثم قم بتحديث هامش الصورة على النحو التالي:

نسخ ولصق محتوى العمود 1

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

تحديث المحتوى للوحدات النمطية المكررة

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

بمجرد الانتهاء من ذلك ، يجب أن يبدو التصميم الخاص بك مثل هذا.

إضافة تأثيرات التمرير إلى كل عمود

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

لإنشاء تأثير التمرير الوامض ، سنستخدم تأثير التمرير Fading In and Out لكل عمود. تكمن الفكرة في بدء التأثير بالبدء بـ 0٪ عتامة ، والاستمرار حتى 100٪ عتامة ، ثم الرجوع إلى 0٪.

تأثيرات التمرير للعمود 1

في إعدادات الصف ، افتح إعدادات العمود 1 وأضف تأثير التمرير التالي:

ضمن علامة تبويب خيارات التلاشي والداخل:

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 0٪ (عند 20٪ منفذ عرض)
• تعتيم متوسط: 100٪ (عند 25٪ -45٪ منفذ عرض)
• إنهاء التعتيم: 0٪ (عند 50٪ منفذ عرض)

العمود 2 آثار التمرير

افتح إعدادات العمود 2 وأضف تأثير التمرير التالي:

ضمن علامة تبويب خيارات التلاشي والداخل:

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 0٪ (عند 35٪ منفذ عرض)
• تعتيم متوسط: 100٪ (عند 40٪ -60٪ منفذ عرض)
• إنهاء التعتيم: 0٪ (عند 65٪ منفذ عرض)

العمود 3 آثار التمرير

العمود 4 آثار التمرير

إضافة عنوان

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

ثم أضف وحدة نصية إلى الصف بالمحتوى التالي:

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• محاذاة النص: لاتو
• وزن خط العنوان 2: خفيف
• نمط خط العنوان 2: TT
• لون نص العنوان 2: # fc6d71
• حجم نص العنوان 2: 70 بكسل (سطح المكتب) ، 40 بكسل (جهاز لوحي) ، 24 بكسل (هاتف)
• العنوان 2 تباعد الأحرف: 0.5em

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

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

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

افكار اخيرة

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

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

هتافات!