كيفية إنشاء صفحة فريق تحوم نابضة بالحياة لمشروع Divi التالي

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

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

معاينة

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

سطح المكتب

متحرك

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

1. ابدأ بقسم عادي + صف عمود واحد للعنوان

افتح صفحة جديدة واضبط سمات الصفحة على "صفحة فارغة". بمجرد القيام بذلك ، أدخل Divi Builder وأضف قسمًا به صف من عمود واحد.

أضف نصًا ووحدة فاصل.

2. إضافة محتوى إلى وحدة النص وتصميمها

أضف بعض محتوى H1 إلى وحدة النص.

انتقل إلى علامة تبويب التصميم وحدد إعدادات نص H1 وفقًا لذلك:

• خط العنوان: بوبينز
• وزن خط العنوان: خفيف
• محاذاة نص العنوان: الوسط
• لون نص العنوان: أسود # 000000
• حجم نص العنوان:
  • سطح المكتب = 6vw
  • قرص = 9vw
  • الهاتف = 11vw
• تباعد حروف العنوان: -0.4vw

3. نمط الحاجز

ننتقل إلى الوحدة التالية ، وهي وحدة التقسيم. قم بتغيير لون الحاجز إلى اللون الأسود وقم بتعديل إعدادات التحجيم.

• لون الفاصل: أسود #oooooo
• وزن الحاجز: 12 بكسل
• العرض: 14٪
• محاذاة الوحدة: المركز

4. قم بإنشاء السير الذاتية للفريق باستخدام قسم عادي + صف ثلاثي الأعمدة

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

5. ضبط إعدادات تحجيم الصفوف

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

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

6. ضبط إعدادات تباعد الصفوف

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

• الحشوة العلوية: 2vw
• الحشوة السفلية: 2vw

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

الوحدتان الرئيسيتان اللتان سنستخدمهما لإنشاء التأثير النهائي هما صورة ووحدة دعاية مغالى فيها. أولاً ، أضف وحدة الصورة ثم الدعاية المغلوطة.

8. قم بتحميل صورة وأسلوبها

تدور صفحة فريق التمرير حول عرض أعضاء الفريق. افتح وحدة الصورة وأضف صورة واحدة منها. سنستخدم إحدى صور مخزوننا من Divi. تأكد من أن أبعاد صورتك 612 بكسل × 612 بكسل.

انتقام

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

• محاذاة الصورة: المركز

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• العرض: 30٪
• محاذاة الوحدة: المركز

تباعد

وأضف بعض الهامش العلوي السلبي.

• هامش:
  • سطح المكتب = -3vw
  • الجهاز اللوحي والهاتف = -13vw

الحدود

لتحويل الصورة إلى دائرة ، سنقوم بتغيير إعدادات الحدود.

• الزوايا الدائرية: 20vw جميع الزوايا الأربع
• أنماط الحدود: الجوانب الأربعة
• عرض الحدود: 12 بكسل
• لون الحدود: أبيض #ffffff
• نمط الحدود: مزدوج

مربع الظل

نضيف أيضًا بعض العمق إلى الصورة من خلال تطبيق ظل مربع دقيق.

• ظل المربع: الخيار الأول
• مربع قوة طمس الظل: 50 بكسل

فهرس Z.

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

• الفهرس Z: 3

9. إضافة محتوى إلى دعاية وإضفاء لمسة أنيقة عليه

أضف CSS مخصص إلى إعدادات الصفحة

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

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

امنح Blurb فئة CSS

افتح وحدة blurb بعد ذلك وأضف فئة CSS المطابقة.

• فئة CSS: blurb-icon

إضافة محتوى

سنستخدم نص العنصر النائب ولكن يمكنك إدراج الاسم الفعلي ووصف أحد أعضاء الفريق.

اختر الرمز

اختر أيقونة زائد بعد ذلك.

• استخدام الأيقونة: نعم
• الرمز: علامة زائد داخل دائرة

نمط الخلفية

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

• الخلفية: أبيض #ffffff
• تحوم الخلفية: التدرج
• لون التدرج الأول: # 00ffa1
• لون التدرج الثاني: # 29c4a9
• نوع التدرج: خطي
• اتجاه التدرج: 154 درجة
• موقف البداية: 0
• موضع النهاية: 46٪

أيقونة النمط

قم بتطبيق إعدادات الرمز التالية بعد ذلك:

• لون الرمز:
  • الافتراضي: # 29c4a9
  • تحوم: شفاف rgba (255،255،255،0)
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز:
  • سطح المكتب = 2vw
  • قرص = 4vw
  • الهاتف = 6vw

انتقام

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

• محاذاة النص: الوسط

نص عنوان النمط

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

• العنوان: H4
• خط العنوان: بوبينز
• خط العنوان: غامق
• لون نص العنوان: أبيض #ffffff
• حجم نص العنوان:
  • سطح المكتب: 1.5vw
  • الجهاز اللوحي: 2.5vw
  • الهاتف: 3.5vw

نمط النص الأساسي

افعل الشيء نفسه لإعدادات النص الأساسي.

• لون نص النص: أبيض #ffffff
• حجم النص الأساسي:
  • سطح المكتب = 0.8vw
  • الكمبيوتر اللوحي = 1.9vw
  • الهاتف = 2.6vw
• ارتفاع خط الجسم:
  • سطح المكتب = 2vw
  • الكمبيوتر اللوحي + الهاتف = 3vw

تحجيم

بعد ذلك ، سنقوم بتغيير إعدادات التحجيم لوحدة blurb الخاصة بنا.

• عرض المحتوى: 100٪
• العرض: 81٪
• محاذاة الوحدة: المركز

تباعد

سنطبق بعض قيم الهامش والحشو المخصصة عبر أحجام الشاشات المختلفة أيضًا.

• الهامش العلوي:
  • سطح المكتب = -4vw
  • الكمبيوتر اللوحي + الهاتف = -9vw
• الهامش السفلي:
  • سطح المكتب = 3.5vw
  • الكمبيوتر اللوحي + الهاتف = 10vw
• الحشوة العلوية والسفلية:
  • سطح المكتب = 7.1vw
  • قرص = 30vw
  • الهاتف = 28vw
• الحشو الأيسر والأيمن
  • سطح المكتب = 2vw
  • الكمبيوتر اللوحي + الهاتف = 8vw

الحدود

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

• الزوايا الدائرية: 50vw جميع الزوايا الأربع

مربع الظل

وأكمل تصميم الوحدة النمطية للدعاية والإعلان عن طريق إضافة ظل مربع يظهر عند التمرير.

• Box Shadow: النمط الخامس
• مربع الظل الأفقي: 0vw
• مربع الظل الوضع الرأسي:
  • سطح المكتب + تحوم = -14vw
  • قرص = -44vw
  • الهاتف = -46vw
• قوة انتشار الظل المربع:
  • سطح المكتب + تحوم = -6vw
  • الكمبيوتر اللوحي + الهاتف = -19vw
• لون ظل الصندوق:
  • تحوم = rgba (0،0،0،0.05)

10. نمط العمود الأول

الآن بعد أن أضفنا جميع الوحدات التي نحتاجها في العمود الأول ، حان الوقت لتصميم العمود.

خلفية

افتح إعدادات الخلفية للعمود الأول وقم بتطبيق الخلفية المتدرجة التالية:

• نمط الخلفية: التدرج
• لون التدرج الأول: # 00ffa1
• لون التدرج الثاني: # 29c4a9
• نوع التدرج: بطانة
• اتجاه التدرج: 282deg

الحدود

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

• زوايا مدورة: 50vw

تجاوز

للتأكد من ظهور الصورة أعلى العمود ، سنقوم بتغيير التدفقات الأفقية والرأسية في إعدادات الرؤية.

• تدفق أفقي ورأسي: مرئي

11. حذف الأعمدة الفارغة & تكرار العمود الأول مرتين

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

حذف العمودين الثاني والثالث

ارجع إلى إعدادات الصف الرئيسي وانقر على أيقونة سلة المهملات للأعمدة الثاني والثالث.

العمود مكرر مرتين

بعد حذف العمودين الثاني والثالث ، سيبدو العمود الأول غريبًا لثانية واحدة ، لكن كل هذا يتغير بمجرد استنساخ العمود مرتين.

12. تغيير محتوى وألوان العمود الثاني

حان الوقت الآن لتصميم الأعمدة الجديدة لعضوي الفريق الآخرين.

العمود الثاني

افتح إعدادات العمود الثاني وقم بتغيير خلفية التدرج

• لون التدرج للخلفية واحد: # 00eeff
• لون الخلفية المتدرج الثاني: # 309ce5

قم بتحميل صورة مختلفة أيضًا.

استمر بفتح الوحدة النمطية للدعاية والإعلان وتغيير الخلفية المتدرجة.

• تحوم لون الخلفية رقم واحد: # 00eeff
• تحوم لون الخلفية الثاني: # 309ce5

قم بتغيير لون الرمز أيضًا.

• لون الأيقونة الافتراضي: # 309ce5

العمود الثالث

افتح إعدادات العمود الثالث وقم بتغيير خلفية التدرج.

• لون التدرج للخلفية واحد: # ff91ec
• لون التدرج للخلفية الثاني: # a500ff

قم بتغيير الخلفية المتدرجة الدعاية بعد ذلك.

• لون الخلفية رقم واحد: # ff91ec
• تحوم فوق لون الخلفية الثاني: # a500ff

جنبا إلى جنب مع لون الأيقونة.

• لون الرمز الافتراضي: # a500ff

معاينة

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

سطح المكتب

متحرك

انها التفاف!

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