هل ترغب في أن يتم تقديم أعضاء فريقك في شكل دائري به 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 واستخدم محتويات دي VOTRE CHOIX.
حذف صورة
ثم احذف الصورة. بدلاً من ذلك ، نستخدم صورة الخلفية للعمود.
الصورة الخلفية
بعد ذلك ، سنضيف تراكب صورة كصورة خلفية للوحدة.
- حجم صورة الخلفية: الغلاف
- موضع صورة الخلفية: المركز
إعدادات نص العنوان
التبديل إلى علامة التبويب تصميم الوحدة النمطية وتغيير إعدادات نص العنوان على النحو التالي:
- مستوى عنوان العنوان: 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. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
