عند إنشاء صفحة "حول" الخاصة بك ، قد ترغب أيضًا في تقديم أعضاء فريقك هناك. من خلال القيام بذلك ، فإنك تسمح لـ آخر التفاعل مع الأشخاص الذين يقفون وراء عملك. إذا كنت تبحث عن طريقة لتحريك قسم أعضاء فريقك عند التمرير ، فقد يكون هذا البرنامج التعليمي مناسبًا لك. سننشئ دائريًا لأعضاء الفريق بالتمرير التلقائي يتحرك عندما يكون ملف آخر قم بالتمرير في الصفحة.
برهنة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على النتيجة على أحجام الشاشات المختلفة.
بداية الحمل
إضافة قسم جديد
مباعدة
ابدأ بإضافة قسم عادي جديد إلى الصفحة التي تعمل عليها. افتح إعدادات القسم وأضف حشوة مخصصة على أحجام الشاشات المختلفة.
- المساحة المتروكة العلوية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
- المساحة السفلية: 200 بكسل (المكتب) ، 100 بكسل (الكمبيوتر اللوحي والهاتف)
الفيضانات
للتأكد من عدم ظهور شريط تمرير أفقي في تصميمنا ، سنخفي فائض القسم في علامة التبويب المتقدمة.
- تجاوز أفقي: مخفي
- تجاوز عمودي: مخفي
أضف السطر رقم 1
هيكل العمود
استمر في إضافة سطر جديد إلى القسم باستخدام بنية العمود التالي:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف ، وانتقل إلى علامة تبويب التصميم وقم بتغيير العرض والحد الأقصى للعرض في إعدادات تغيير الحجم.
- العرض: 90٪
- العرض الأقصى: 1580 بكسل
مباعدة
نضيف أيضًا الحشو العلوي والسفلي المخصص.
- الحشو العلوي: 100px
- الحشو السفلي: 100px
إضافة وحدة نمطية النص إلى العمود
أضف محتوى H2
حان الوقت لإضافة وحدات، بدءًا بوحدة النص الأولى. ادخال محتويات H2 من اختيارك.
إعدادات النص H2
انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص H2 كما يلي:
- عنوان الخط 2: Quicksand
- عنوان الخط 2: شبه الغامق
- لون نص العنصر 2: # 000000
- العنوان 2 حجم النص: 70 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي) ، 40 بكسل (الهاتف)
إضافة وحدة فصل إلى العمود
رؤية
ثم أضف وحدة فصل. تأكد من تمكين خيار "إظهار الفاصل".
- إظهار الفاصل: نعم
خط
ثم قم بإجراء بعض التغييرات على إعدادات الخط.
- لون الخط: # edf000
- نمط الخط: الصلبة
- موضع الخط: أعلى
التحجيم
وأكمل معلمات الوحدة بتعديل معلمات الأبعاد وفقًا لذلك:
- وزن المقسم: 20px
- العرض: 11٪
- محاذاة الوحدة: اليسار
- الارتفاع: 20px
أضف السطر رقم 2
هيكل العمود
إلى الصف التالي! استخدم هيكل العمود التالي:
التحجيم
بدون إضافة المزيد من الوحدات النمطية ، افتح معلمات الخط وقم بتعديل معلمات تغيير الحجم كما يلي:
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 2
- العرض: 100٪
- أقصى عرض: 100 ٪
مباعدة
ثم أضف المساحة المتروكة اليمنى واليسرى على الشاشات الصغيرة فقط.
- المساحة المتروكة اليسرى: 5٪ (الجهاز اللوحي والهاتف فقط)
- المساحة المتروكة لليمين: 5٪ (الجهاز اللوحي والهاتف فقط)
معلمات العمود (5x)
الآن ، في الخطوات الثلاث التالية من هذا البرنامج التعليمي ، سنقوم بإجراء بعض التغييرات على الأعمدة. طبِّق الخطوات الثلاث على كل عمود من الأعمدة في صفك.
خلفية التدرج
أولاً ، أضف خلفية متدرجة لكل عمود.
- لون 1: rgba (255,255,255,0)
- لون 2: rgba (0,0,0,0,84)
- نوع التدرج: الخطي
- موضع البدء: 25٪
- الموضع النهائي: 86٪
- ضع التدرج فوق صورة الخلفية: نعم
صورة الخلفية
ثم قم بتحميل صورة خلفية من اختيارك. تمثل صورة الخلفية هذه كل عضو في الفريق ، لذا استخدم صورة مختلفة لكل عمود.
- حجم صورة الخلفية: الغلاف
- موضع صورة الخلفية: المركز
العنصر الرئيسي
أكمل إعدادات العمود بإضافة CSS مخصص إلى عنصر الكمبيوتر اللوحي الرئيسي لكل عمود. ستساعدنا هذه الأسطر من كود CSS على وضع الأعمدة واحدًا أسفل الآخر على الجهاز اللوحي ، بدلاً من وجود عمودين جنبًا إلى جنب.
العرض: 100٪! مهم ؛ الهامش: 50 بكسل 0 بكسل 50 بكسل 0 بكسل! هام ؛
أضف وحدة شخص إلى العمود
إضافة محتوى
لمشاركة المعلومات حول أعضاء الفريق، سوف نستخدم وحدة الشخص. أضف وحدة الشخص الأولى إلى العمود 1 واستخدم محتويات دي VOTRE CHOIX.
حذف صورة
ثم احذف الصورة. بدلاً من ذلك ، نستخدم صورة الخلفية للعمود.
صورة الخلفية
سنضيف بعد ذلك تراكب صورة كصورة خلفية للوحدة. يمكنك العثور على الملف الذي نستخدمه عن طريق تنزيل المجلد في بداية هذا البرنامج التعليمي.
- حجم صورة الخلفية: الغلاف
- موضع صورة الخلفية: المركز
إعدادات نص العنوان
انتقل إلى علامة تبويب تصميم الوحدة النمطية وقم بتغيير إعدادات نص العنوان كما يلي:
- مستوى العنوان: H3
- خط العنوان: الرمال المتحركة
- وزن خط العنوان: غامق
- لون نص العنوان: #ffffff
- حجم نص العنوان: 230٪
إعدادات نص الجسم
أيضا تغيير إعدادات النص الأساسي.
- هيئة الخط: افتح Sans
- لون النص الأساسي: #ffffff
- ارتفاع خط الجسم: 2,2 م
إعدادات نص الموضع
ثم قم بإجراء بعض التغييرات على إعدادات نص الموضع.
- موضع الخط: افتح Sans
- لون نص الموضع: # edf000
مباعدة
وأكمل إعدادات الوحدة عن طريق إضافة قيم حشو مخصصة لإعدادات التباعد.
- الحشو العلوي: 70٪
- المساحة السفلية: 10٪
- المساحة المتروكة اليسرى: 10٪
- المساحة المتروكة لليمين: 10٪
قم بتكرار وحدة الشخص 4 مرات
بمجرد الانتهاء من وحدة الشخص ، يمكنك استنساخ الوحدة بأكملها أربع مرات.
ضع التكرارات في الأعمدة المتبقية
ضع الوحدات المكررة في الأعمدة الأربعة المتبقية من الصف. تأكد أيضًا من تغيير محتويات.
تحويل الصف إلى مكتبة دائرية ذاتية التمرير
تغيير حجم الخط رقم 2
الآن لتحويل هذا الصف إلى دائرة دائرية لأعضاء الفريق بالتمرير التلقائي ، نحتاج إلى إعادة فتح إعدادات الصف وتغيير العرض والحد الأقصى للعرض في إعدادات الحجم.
- العرض: 180٪
- الحد الأقصى للعرض: 220٪ (مكتب) ، 100٪ (كمبيوتر لوحي وهاتف)
إضافة حركة أفقية للخط رقم 2
أكمل إعدادات الخط عن طريق إضافة حركة أفقية إلى إعدادات تأثير التمرير في علامة التبويب المتقدمة ، وقد انتهيت!
- تنشيط الحركة الأفقية: نعم
- تعويض البداية:
- المكتب: 2,5
- الجهاز اللوحي والهاتف: 0
- متوسط الإزاحة: 0 (بنسبة 40 ٪)
- تعويض النهاية:
- المكتب: -25 (بنسبة 62٪)
- الجهاز اللوحي والهاتف: 0
- تأثير حركة الزناد: منتصف العنصر
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
مكتب
الأفكار النهائية
في هذا البرنامج التعليمي ، أوضحنا لك كيفية الإبداع باستخدام تأثيرات التمرير المضمنة لـ Divi. على وجه التحديد، قمنا بإعادة إنشاء دائرة جميلة لأعضاء الفريق ذات التمرير التلقائي. عندما آخر قم بتمرير الصفحة، وسيظهر جزء آخر من الرف الدائري.
