كيفية إضافة تأثير التحويم إلى سير أعضاء الفريق في Divi

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

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

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

معاينة

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

سطح المكتب

متحرك

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

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

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

تباعد

أنشئ صفحة جديدة أو افتح صفحة موجودة وأضف قسمًا جديدًا باستخدام قيم المساحة المتروكة التالية:

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

أضف الصف رقم 1

هيكل العمود

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

أضف وحدة نصية

أضف محتوى H2

أضف وحدة نص عنوان إلى العمود مع بعض نسخ H2 من الاختيار.

إعدادات نص H2

بعد ذلك ، انتقل إلى إعدادات نص H2 وقم بإجراء بعض التغييرات على مظهر النسخة.

• خط العنوان 2: Cinzel
• نمط خط العنوان 2: حروف كبيرة صغيرة
• العنوان 2 محاذاة النص: الوسط
• حجم نص العنوان 2: 70 بكسل

إضافة وحدة المقسم

الرؤية

تابع عن طريق إضافة وحدة Divider Module جديدة أسفل العنوان Text Module مباشرة.

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

لون المقسم

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

• لون الفاصل: # 333333

تحجيم

بعد ذلك ، سنقلل حجم الحاجز ونضعه في المنتصف.

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

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام العرض المخصص: نعم
• الوحدة: PX
• العرض المخصص: 2000 بكسل
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

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

• الهامش الأعلى: 50 بكسل
• الهامش السفلي: 50 بكسل
• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشوة اليسرى: 5 بكسل
• الحشوة اليمنى: 5 بكسل
• الحشوة اليسرى للعمود 1 و 2 و 3: 5 بكسل
• الحشوة اليمنى للعمود 1 و 2 و 3: 5 بكسل

مربع الظل

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

• مربع قوة طمس الظل: 80 بكسل
• قوة انتشار الظل المربع: -14 بكسل
• لون الظل: rgba (0،0،0،0.3)

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

تحميل الصورة إلى وحدة الصورة

حان الوقت لبدء إضافة الوحدات! لتحقيق تأثير bio hover ، سنحتاج إلى وحدتين إجمالاً ؛ وحدة صورة ووحدة دعاية مغالى فيها. ستحمل وحدة الصورة صورة عضو الفريق الذي تريد عرضه. من ناحية أخرى ، سيتم استخدام الوحدة النمطية Blurb لإضافة الرمز إلى الزاوية السفلية اليسرى والسيرة الذاتية عند التمرير. أضف وحدة صورة إلى العمود الأول باستخدام صورة مربعة الحجم.

المرشحات

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

• التشبع: 0٪

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

إضافة محتوى

تابع عن طريق إضافة وحدة Blurb Module جديدة أسفل وحدة Image Module في العمود 1. أضف اسم عضو الفريق إلى حقل العنوان وأدخل المزيد من المعلومات حول عضو الفريق في مربع المحتوى.

اختر الرمز

الشيء التالي الذي سنفعله هو اختيار رمز من اختيارك سيُظهر للزائرين أن هناك ما هو أكثر من مجرد صورة.

لون الخلفية الافتراضي

بعد ذلك ، سنختار لون خلفية شفاف بالكامل.

• لون الخلفية: rgba (255،255،255،0)

لون الخلفية تحوم

وسنغير هذا اللون عند المرور فوق.

• لون الخلفية: rgba (255،255،255،0.88)

إعدادات الرمز الافتراضية

نريد رمزًا ملحوظًا يساعد الزائرين على فهم أنه يمكنهم تحريكه. قم بتغيير إعدادات الرمز لتحقيق رمز مثل هذا.

• لون الأيقونة: #ffffff
• رمز الدائرة: نعم
• لون الدائرة: # 000000
• وضع الرمز: اليسار
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 50 بكسل

إعدادات رمز التمرير

ومع ذلك ، لا نريد ظهور الرمز عند التمرير. لهذا السبب سنستخدم لونًا شفافًا تمامًا بدلاً من ذلك.

• لون الأيقونة: rgba (255،255،255،0)
• لون الدائرة: rgba (255،255،255،0)

الإعدادات الافتراضية لنص العنوان

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

• خط العنوان: Cinzel
• وزن خط العنوان: غامق
• نمط خط العنوان: حروف كبيرة صغيرة
• لون نص العنوان: # 000000
• حجم نص العنوان: 0 بكسل

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

قم بتعديل حجم النص عند التمرير.

• حجم نص العنوان: 30 بكسل

الإعدادات الافتراضية للنص الأساسي

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

• خط النص الأساسي: Open Sans
• لون النص الأساسي: # 000000
• حجم النص الأساسي: 0 بكسل
• ارتفاع خط الجسم: 1.8em

تحوم إعدادات النص الأساسي

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

• حجم النص الأساسي: 14 بكسل

التباعد الافتراضي

أخيرًا وليس آخرًا ، سنحتاج إلى إنشاء تداخل بين Blurb Module و Image Module باستخدام الهامش العلوي السلبي.

• الهامش العلوي: -3.7vw (سطح المكتب) ، -9vw (الجهاز اللوحي والهاتف)
• الهامش السفلي: 1.5vw (Tablet) ، 2vw (Phone)

تحوم التباعد

قم بتغيير قيم الهوامش المخصصة والمساحة المتروكة عند التمرير.

• الهامش العلوي: -11.38vw
• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليمنى: 50 بكسل

استنساخ كلتا الوحدتين مرتين ووضع التكرارات في الأعمدة المتبقية

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

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

تذكر تغيير الصورة في Image Module والنسخة في Blurb Module لإنهاء قسم أعضاء الفريق!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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