كيفية استخدام أشرطة تمرير متعددة لعرض الخدمات باستخدام الرسوم المتحركة التلقائية

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم باستخدام منزلقات متعددة لعرض الخدمات واحدة تلو الأخرى.

قم بتنزيل خدمات العرض مع تخطيط متعدد المتزلجون مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

اشترك في قناتنا على اليوتيوب

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي

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

إنشاء خدمات العرض مع تصميم متعدد المتزلجون في Divi

قم بإنشاء القسم والصف 1

للبدء ، أنشئ قسمًا عاديًا بصف عمود واحد.

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

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

العرض الأقصى: 80٪

أضف نص الرأس مع وحدة نصية

لإضافة نص العنوان للتصميم ، دعنا نستخدم وحدة نصية. انطلق وأضف وحدة نصية إلى الصف.

ثم قم بتحديث محتوى نص الوحدة النمطية باستخدام HTML التالي:

<h1>How can we help?</h1>

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

خط العنوان: مونتسيرات
لون نص العنوان: #ffffff
حجم نص العنوان: 6vw
الحشو: 5٪ أعلى ، 5٪ أسفل

أضف الصف الثاني

بعد ذلك ، أضف صفًا آخر بتخطيط ثلاثة أعمدة.

ثم قم بتحديث إعدادات الصف بعرض 80٪ كحد أقصى.

العرض الأقصى: 80٪

أضف شريط تمرير إلى العمود 1

نحن الآن جاهزون لبدء إضافة أشرطة التمرير الخاصة بنا إلى كل عمود من الأعمدة الخارجية. ابدأ بإضافة وحدة شريط تمرير إلى العمود 1.

احذف الشريحة الافتراضية الثانية بحيث تبقى شريحة واحدة فقط.

ثم قم بتحديث ما يلي:

عرض الأسهم:
إظهار الضوابط:
لون الخلفية: rgba (0،0،0،0)

محاذاة النص: يسار
خط العنوان: مونتسيرات
وزن خط العنوان: شبه عريض
لون خلفية الزر: # 38b3cb
عرض حدود الزر: 0 بكسل

ثم اضبط خيارات الرسوم المتحركة التلقائية على النحو التالي:

الرسوم المتحركة التلقائية: تشغيل
سرعة الحركة التلقائية: 3000
متابعة التمرير التلقائي عند التمرير: ON

بشكل افتراضي ، ستضيف Divi رسمًا متحركًا خافتًا دقيقًا بين الشرائح. نريد تعطيل هذا حتى لا يكون هناك تغيير ملحوظ بين الشرائح. للقيام بذلك ، أضف CSS المخصص التالي إلى وصف الشرائح:

animation: none !important;

هذا يعتني بإعدادات شريط التمرير. الآن نحن بحاجة إلى تحديث الشرائح الفردية الخاصة بنا.

إنشاء الشرائح لشريط التمرير 1

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

لنبدأ بإنشاء ثلاث شرائح للشرائح 1.

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

احفظ الآن إعدادات الشريحة الفردية وقم بتكرار الشريحة مرتين بحيث يكون لديك إجمالي ثلاث شرائح. تذكر ، بالنسبة لهذا التصميم ، يجب أن يكون لديك نفس عدد الشرائح كما هو الحال في المنزلقات / الأعمدة.

نسخ ولصق شريط التمرير في كل عمود متبقٍ

مع وجود ثلاث شرائح في مكانها في Slider 1 ، يمكننا نسخ وحدة شريط التمرير ولصقها في العمود 2 والعمود 3.

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

تحديث كل شريط تمرير بشريحة عرض

للقيام بذلك ، سنقوم بتغيير تصميم الشريحة الأولى في شريط التمرير 1 ، والشريحة الثانية في شريط التمرير 2 ، والشريحة الثالثة في شريط التمرير 3. وهذا سيبرز كل خدمة تلقائيًا (كل 3000 مللي ثانية) بدءًا من العمود الأيسر وتنتهي بـ العمود الثالث على اليمين. ثم ستستمر في تكرار هذه الرسوم المتحركة التلقائية.

تحديث Slider 1 Showcase Slide

ابدأ بفتح إعدادات شريط التمرير 1 ثم فتح الإعدادات للشريحة الفردية الأولى.

لتسليط الضوء على الخدمة ، سنقوم بتحديث الشريحة بلون الخلفية (الذي يتطابق مع الزر) وصورة الخلفية التي يتم مزجها مع لون الخلفية باستخدام وضع المزج المضاعف.

للقيام بذلك ، قم بإضافة تحديث ما يلي:

لون الخلفية: # 00b2ca
صورة الخلفية: [تحميل صورة من اختيارك]
مزيج صورة الخلفية: مضاعفة

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

لون نص الزر: # 00b2ca
لون خلفية الزر: #ffffff

احفظ التغييرات.

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

تحديث Slider 2 Showcase Slide

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

افتح إعدادات وحدة شريط التمرير لشريط التمرير في العمود 2 وقم بتغيير لون خلفية الزر.

لون خلفية الزر: # 1d4e89

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

لون الخلفية: # 1d4e89
صورة الخلفية: [تحميل الصورة المختارة]
مزيج صورة الخلفية: ضوء ناعم (أو يتضاعف للحصول على تأثير أغمق)

ثم قم بتحديث نمط الزر للشريحة.

لون نص الزر: # 1d4e89
لون خلفية الزر: #ffffff

تحديث Slider 3 Showcase Slide

بالنسبة إلى Slider 3 (في العمود 3) ، سنحتاج إلى تحديث الشريحة الثالثة كشريحة عرض لدينا بحيث تظهر مباشرة بعد شريحة عرض شريط التمرير الثانية.

أولاً ، قم بتغيير لون زر شريط التمرير 3 كما يلي:

لون خلفية الزر: # ef476f

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

لون الخلفية: # ef476f
صورة الخلفية [أدخل الصورة المختارة]
مزيج صورة الخلفية: مضاعفة

ثم قم بتحديث نمط الزر للشريحة كما يلي:

لون نص الزر: # ef476f
لون خلفية الزر: #ffffff

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

دعنا نتحقق من النتيجة النهائية.

وإليك كيفية تكديس التصميم على الجهاز اللوحي والهاتف.

افكار اخيرة

يبدو عرض الخدمات باستخدام منزلقات متعددة مع الرسوم المتحركة التلقائية أمرًا صعبًا بعض الشيء. لكنها في الواقع سهلة للغاية بمجرد أن تفهم المفهوم.

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

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

أنا شخصياً أحب الإعداد الحالي لأنه يظهر تقدمًا ويمكن استخدامه لإظهار عملية للزوار. لكني أحب أن أسمع أفكاركم وأفكاركم.

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

هتافات!