هل ترغب في عرض أعضاء فريقك بتنسيق دائري باستخدام Divi؟
عند إنشاء صفحة "نبذة عنا"، يُرجَّح أن تُضيف أعضاء فريقك أيضًا. يتيح ذلك للزوار التواصل مع القائمين على عملك.
إذا كنت تبحث عن طريقة لتحريك قسم أعضاء فريقك في التمرير ، فستحب هذا البرنامج التعليمي.
سنعيد إنشاء دائرة أعضاء الفريق الجميلة التي تتحرك تلقائيًا أثناء قيام زوارك بالتمرير لأسفل الصفحة.
دعونا نذهب.
مسح
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
حاسوب مكتب
اصدار المحمول
لنبدأ التصميم مع Divi
اقرأ أيضا: Divi: كيفية الكشف عن المحتوى عند المرور فوق مقسم القسم
إضافة قسم جديد
السحراء الداخلية
ابدأ بإضافة قسم عادي جديد إلى الصفحة التي تعمل عليها. افتح إعدادات القسم وأضف حشوة مخصصة على أحجام الشاشات المختلفة.
- المساحة المتروكة (أعلى وأسفل): 200 بكسل (سطح المكتب) ، 100 بكسل (جهاز لوحي وهاتف)
رؤية
لضمان عدم ظهور أي أشرطة تمرير أفقية في تصميمنا ، سنخفي فائض القسم في علامة التبويب المتقدمة.
- الفائض الأفقي: مخفي
- الفائض العمودي: مخفي
أضف السطر رقم 1
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
عرض
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الخط ، وانتقل إلى علامة التبويب تصميم وتغيير العرض والحد الأقصى للعرض في إعدادات التحجيم.
- العرض: 90٪
- العرض الأقصى: 1 بكسل
مباعدة
نضيف أيضًا الحشو العلوي والسفلي المخصص.
- المساحة المتروكة (أعلى وأسفل): 100 بكسل
أضف وحدة نصية إلى العمود
أضف محتوى بحجم H2
حان وقت إضافة الوحدات، بدءًا بوحدة النص. أدخل أي محتوى بتنسيق H2 تريده.
إعدادات النص H2
التبديل إلى علامة التبويب تصميم الوحدة النمطية وتعديل معلمات نص H2 على النحو التالي:
- الخط: الرمال المتحركة
- وزن الخط: شبه عريض
- لون النص: # 000000
- حجم النص: 70 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)
أضف وحدة "Divider" إلى العمود
رؤية
ثم أضف وحدة نمطية مقسم. تأكد من تمكين خيار "إظهار الحاجز".
- إظهار الحاجز: نعم
خط
ثم قم بإجراء بعض التغييرات على إعدادات الخط.
- لون الخط: # edf000
- النمط: صلب
- موقف الخط: الأعلى
التحجيم
وأكمل معلمات الوحدة بتعديل معلمات التحجيم وفقًا لذلك:
- وزن الحاجز: 20 بكسل
- العرض: 11٪
- وحدة المحاذاة: يسار
- الارتفاع: 20 بكسل
أضف السطر 2
هيكل العمود
الصف التالي! استخدم هيكل العمود التالي:
التحجيم
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بتغيير إعدادات التحجيم على النحو التالي:
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 2
- العرض: 100٪
- العرض الأقصى: 100٪
التباعد (الجهاز اللوحي والهاتف فقط)
بعد ذلك ، أضف المساحة المتروكة اليسرى واليمنى فقط على أحجام الشاشات الصغيرة.
- الحشو (يسار ويمين): 5٪ (الجهاز اللوحي والهاتف فقط)
معلمات العمود (5x)
الآن ، في الخطوات الثلاث التالية من هذا البرنامج التعليمي ، سنقوم ببعض التغييرات على الأعمدة. طبِّق الخطوات الثلاث على كل عمود من الأعمدة في صفك.
تدرج الخلفية
أولاً ، أضف خلفية متدرجة لكل عمود.
- توقف التدرج (25٪): rgba (255,255,255,0،XNUMX،XNUMX)
- توقف التدرج (86٪): rgba (0,0,0,0.84،XNUMX،XNUMX)
- النوع: خطي
- مربع التدرج فوق صورة الخلفية: نعم
الصورة الخلفية
ثم قم بتحميل صورة خلفية من اختيارك. تمثل صورة الخلفية هذه كل عضو في الفريق ، لذا استخدم صورة مختلفة لكل عمود.
- حجم صورة الخلفية: الغلاف
- موقف صورة الخلفية: المركز
تمت إضافة CSS مخصص (الجهاز اللوحي فقط)
أكمل إعدادات العمود بإضافة CSS مخصص إلى العنصر الرئيسي (For view الأجهزه اللوحيه فقط) من كل عمود.
ستساعدنا هذه الأسطر من كود CSS على وضع الأعمدة واحدة تحت الأخرى على الجهاز اللوحي ، بدلاً من وجود عمودين جنبًا إلى جنب.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
أضف وحدة "شخص" إلى العمود
إضافة محتوى
لمشاركة معلومات أعضاء الفريق ، سنستخدم وحدة نمطية شخص.
أضف وحدة الشخص الأول إلى العمود 1 واستخدم أي محتوى تريده.
حذف صورة
ثم احذف الصورة. بدلاً من ذلك ، نستخدم صورة الخلفية للعمود.
الصورة الخلفية
بعد ذلك ، سنضيف تراكب صورة كصورة خلفية للوحدة.
- حجم صورة الخلفية: الغلاف
- موضع صورة الخلفية: المركز
إعدادات نص العنوان
التبديل إلى علامة التبويب تصميم الوحدة النمطية وتغيير إعدادات نص العنوان على النحو التالي:
- مستوى عنوان العنوان: H3
- خط العنوان: الرمال المتحركة
- وزن الخط: عريض
- لون نص العنوان: #ffffff
- حجم نص العنوان: 230٪
إعدادات نص الجسم
أيضا تغيير إعدادات النص الأساسي.
- خط النص الأساسي: Open Sans
- لون النص: #ffffff
- ارتفاع الخط: 2,2 م
إعدادات نص موقف عضو الفريق
بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات النص للوظيفة التي يشغلها عضو الفريق.
- خط الموضع: فتح بدون
- لون نص الموضع: # edf000
مباعدة
وأكمل إعدادات الوحدة عن طريق إضافة قيم حشو مخصصة لإعدادات التباعد.
- الحشو: 70٪ (علوي) ، 10٪ (سفلي ، يسار ويمين)
استنساخ وحدة "الشخص" أربع مرات
بمجرد الانتهاء من وحدة الشخص ، يمكنك استنساخ الوحدة بأكملها أربع مرات.
ضع التكرارات في الأعمدة المتبقية
ضع وحدات مكررة في الأعمدة الأربعة المتبقية من الصف.
تأكد أيضًا من تعديل المحتوى.
تحويل أحد الصفوف إلى دائرة دوارة بالتمرير التلقائي
انظر أيضا: Divi: كيفية إنشاء شبكة عمود السوائل عند المرور فوقها
تغيير حجم الصف # 2
الآن ، لتحويل هذا الخط إلى دائرة دوارة للتمرير التلقائي ، سنحتاج إلى إعادة فتح إعدادات الخط وتغيير العرض والحد الأقصى للعرض في إعدادات تغيير الحجم.
- العرض: 180٪
- أقصى عرض: 220٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)
أضف الحركة الأفقية إلى الخط 2
أكمل إعدادات الخط عن طريق إضافة حركة أفقية لتمرير إعدادات التأثير في علامة التبويب متقدم تحت الخيار تأثيرات التمرير وانت انتهيت!
- تمكين الحركة الأفقية: نعم
- بداية الإزاحة:
- سطح المكتب: 2,5
- الجهاز اللوحي والهاتف: 0
- تعويض متوسط: 0 (إلى 40٪)
- إزاحة النهاية:
- سطح المكتب: -25 (حتى 62٪)
- الجهاز اللوحي والهاتف: 0
- مشغل تأثير الحركة: منتصف العنصر
مسح
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على كيفية ظهورها على أحجام الشاشات المختلفة.
حاسوب مكتب
تحميل DIVI Now !!!
واجهه جوال
تحميل DIVI Now !!!
الخاتمة
في هذه المقالة، أظهرنا لك كيفية إظهار إبداعك باستخدام تأثيرات التمرير المضمنة في Divi.
على وجه التحديد، أعدنا تصميم دائرة عرض جميلة، متحركة تلقائيًا، تُظهر أعضاء الفريق. عندما يتصفح الزوار الصفحة، يظهر جزء آخر من الدائرة.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...