قم بتنزيل Carousel مجاني لأعضاء فريق التمرير الذاتي المصنوع من تأثيرات Divi's Scroll

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

دعنا نذهب اليها.

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل The Team Member Carousel Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لنبدأ في إعادة التكوين!

إضافة قسم جديد

تباعد

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

• الحشوة العلوية: 200 بكسل (سطح المكتب) ، 100 بكسل (الجهاز اللوحي والهاتف)
• الحشو السفلي: 200 بكسل (سطح المكتب) ، 100 بكسل (الجهاز اللوحي والهاتف)

فيضانات

للتأكد من عدم ظهور شريط تمرير أفقي في تصميمنا ، سنخفي فائض القسم في علامة التبويب "خيارات متقدمة".

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتعديل العرض والحد الأقصى للعرض في إعدادات التحجيم.

• العرض: 90٪
• العرض الأقصى: 1580 بكسل

تباعد

نحن نضيف بعض المساحة المتروكة العلوية والسفلية المخصصة أيضًا.

• الحشوة العلوية: 100 بكسل
• الحشو السفلي: 100 بكسل

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

أضف محتوى H2

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

إعدادات نص H2

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات نص H2 على النحو التالي:

• خط العنوان 2: الرمال المتحركة
• وزن خط العنوان 2: شبه عريض
• لون نص العنوان 2: # 000000
• حجم نص العنوان 2: 70 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)

إضافة وحدة Divider إلى العمود

الرؤية

ثم أضف وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

قم بإجراء بعض التغييرات على إعدادات الخط بعد ذلك.

• لون الخط: # edf000
• نمط الخط: صلب
• موقف الخط: الأعلى

تحجيم

وأكمل إعدادات الوحدة عن طريق تغيير إعدادات التحجيم وفقًا لذلك:

• وزن الحاجز: 20 بكسل
• العرض: 11٪
• محاذاة الوحدة: يسار
• الارتفاع: 20 بكسل

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي! استخدم هيكل العمود التالي:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض المزراب: 2
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشو الأيسر: 5٪ (الجهاز اللوحي والهاتف فقط)
• الحشو الأيمن: 5٪ (الجهاز اللوحي والهاتف فقط)

إعدادات العمود (5x)

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

خلفية متدرجة

أولاً ، أضف خلفية متدرجة لكل عمود.

• اللون 1: rgba (255،255،255،0)
• اللون 2: rgba (0،0،0،0.84)
• نوع التدرج: خطي
• موقف البداية: 25٪
• مركز النهاية: 86٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

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

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز

العنصر الرئيسي

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

width: 100% !important;
margin: 50px 0px 50px 0px !important;

إضافة وحدة الشخص إلى العمود

إضافة محتوى

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

إزالة الصورة

ثم قم بإزالة الصورة. نحن نستخدم صورة خلفية العمود بدلاً من ذلك.

الصورة الخلفية

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

• حجم صورة الخلفية: الغلاف
• موقف صورة الخلفية: المركز

إعدادات نص العنوان

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

• مستوى عنوان العنوان: H3
• خط العنوان: الرمال المتحركة
• وزن خط العنوان: غامق
• لون نص العنوان: #ffffff
• حجم نص العنوان: 230٪

إعدادات النص الأساسي

قم بتعديل إعدادات النص الأساسي أيضًا.

• خط النص الأساسي: Open Sans
• لون النص الأساسي: #ffffff
• ارتفاع خط الجسم: 2.2em

إعدادات نص الموضع

بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات نص الموضع.

• خط الموضع: Open Sans
• لون نص الموضع: # edf000

تباعد

وأكمل إعدادات الوحدة بإضافة بعض قيم الحشو المخصصة لإعدادات التباعد.

• حشوة علوية: 70٪
• حشوة سفلية: 10٪
• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

وحدة استنساخ الشخص 4x

بمجرد الانتهاء من وحدة الشخص ، يمكنك استنساخ الوحدة بأكملها أربع مرات.

ضع التكرارات في الأعمدة المتبقية

ضع الوحدات المكررة في الأعمدة الأربعة المتبقية من الصف. تأكد من تغيير المحتوى أيضًا.

تحويل الصف إلى دائري ذاتي التمرير

تعديل حجم الصف رقم 2

الآن ، لتحويل هذا الصف إلى دائرة دائرية لأعضاء الفريق ذاتية التمرير ، سنحتاج إلى إعادة فتح إعدادات الصف وتغيير العرض والحد الأقصى للعرض في إعدادات التحجيم.

• العرض: 180٪
• أقصى عرض: 220٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

أضف حركة أفقية للصف رقم 2

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

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة:
  • سطح المكتب: 2.5
  • الجهاز اللوحي والهاتف: 0
• تعويض متوسط: 0 (عند 40٪)
• إزاحة النهاية:
  • سطح المكتب: -25 (بنسبة 62٪)
  • الجهاز اللوحي والهاتف: 0
• مشغل تأثير الحركة: منتصف العنصر

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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