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

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل The Layout مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

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

أضف القسم رقم 1

لون الخلفية

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

• لون الخلفية: # 0f0f0f

تباعد

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

• الحشو العلوي
  • سطح المكتب والكمبيوتر اللوحي: 100 بكسل
  • الهاتف: 50 بكسل
• الحشوة السفلية:
  • سطح المكتب والكمبيوتر اللوحي: 100 بكسل
  • الهاتف: 50 بكسل

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

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

أضف محتوى H1

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

إعدادات نص H1

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

• خط العنوان: Alata
• لون نص العنوان: #ffffff
• حجم نص العنوان:
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي: 45 بكسل
  • الهاتف: 35 بكسل
• ارتفاع خط العنوان: 1.2em

إضافة وحدة Divider إلى العمود

الرؤية

بعد ذلك ، سنضيف وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

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

خط

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

• لون الخط: #ffffff

تحجيم

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

• وزن الحاجز: 2 بكسل
• العرض الأقصى: 100 بكسل
• الارتفاع: 2 بكسل

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

إضافة وصف المحتوى

الوحدة التالية والأخيرة التي نحتاجها في هذا الصف هي وحدة نصية أخرى مع بعض محتوى الوصف الذي تختاره.

إعدادات النص

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

• خط النص: العاتا
• لون النص: # 7c7c7c
• حجم النص: 17 بكسل
• ارتفاع خط النص: 1.9em

تباعد

قم بإزالة الهامش السفلي الافتراضي أيضًا.

• الهامش السفلي: 0 بكسل

أضف القسم رقم 2

خلفية متدرجة

أضف قسمًا آخر أسفل القسم السابق مباشرةً واستخدم خلفية متدرجة له.

• اللون 1: # 0f0f0f
• اللون 2: # 000000
• موقف البداية: 10٪
• موضع النهاية: 10٪

تباعد

عدّل إعدادات التباعد بعد ذلك.

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

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

افتح إعدادات الصف وقم بتغيير إعدادات التحجيم كما يلي:

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 2 بكسل

أضف وحدة متابعة الوسائط الاجتماعية إلى العمود 1

أضف الشبكات الاجتماعية المفضلة

الوحدة الأولى التي نحتاجها في صفنا هي وحدة متابعة الوسائط الاجتماعية في العمود 1. أضف الشبكات الاجتماعية التي تختارها.

قم بإزالة كل لون خلفية للشبكات الاجتماعية على حدة

بعد ذلك ، افتح كل شبكة اجتماعية على حدة وقم بإزالة لون الخلفية.

أضف رابطًا لكل شبكة اجتماعية على حدة

أضف رابطًا مطابقًا لكل شبكة اجتماعية أيضًا.

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

بعد ذلك ، ارجع إلى إعدادات الوحدة العامة وقم بتطبيق لون الخلفية التالي:

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

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

قم بتغيير لون الخلفية عند التمرير.

• لون خلفية التمرير: # 494949

الصورة الخلفية

ثم قم بتحميل صورة الخلفية.

• حجم صورة الخلفية: الغلاف
• مزيج صورة الخلفية: مضاعفة

انتقام

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

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

أيقونة

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

• لون الأيقونة: rgba (0،0،0،0)

تباعد

بعد ذلك ، انتقل إلى إعدادات التباعد وقم بتطبيق القيم التالية:

• الهامش السفلي: 0 بكسل
• الحشوة العلوية:
  • سطح المكتب: 250 بكسل
  • الجهاز اللوحي: 450 بكسل
  • الهاتف: 200 بكسل
• الحشو السفلي: 20 بكسل

الحدود

نحن نقوم بتغيير إعدادات الحدود أيضًا.

• جميع الزوايا: 100 بكسل
• عرض الحدود: 2 بكسل
• لون الحدود: rgba (255،255،255،0)

تحوم الحدود

استخدم لون حد آخر عند المرور بالماوس.

• لون حدود التمرير: #ffffff

فئة CSS

بعد ذلك ، انتقل إلى علامة التبويب خيارات متقدمة وقم بتطبيق فئة CSS مخصصة.

• فئة CSS: فريق اجتماعي

تحوم قبل العنصر

وأكمل إعدادات الوحدة عن طريق تمكين إعداد التمرير على العنصر before ونسخ ولصق الأسطر التالية من كود CSS:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

أضف وحدة الشخص إلى العمود 1

إضافة محتوى

الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة الشخص. أضف بعض المحتوى من اختيارك.

إعدادات النص

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

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

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

صمم نص العنوان بعد ذلك.

• خط العنوان: Alata
• حجم نص العنوان:
  • سطح المكتب: 27 بكسل
  • الجهاز اللوحي: 25 بكسل
  • الهاتف: 22 بكسل

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

بعد ذلك ، قم بتعديل إعدادات نص الموضع.

• خط الموضع: Alata
• حجم نص الموضع:
  • سطح المكتب: 17 بكسل
  • الجهاز اللوحي والهاتف: 15 بكسل

تباعد

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

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

الحدود

وأكمل إعدادات الوحدة من خلال تطبيق إعدادات الحدود التالية:

• عرض الحدود: 1 بكسل
• لون الحدود: #ffffff

إزالة أعمدة الصف المتبقية

بمجرد الانتهاء من الوحدات النمطية في العمود 1 ، يمكنك إزالة العمودين المتبقيين من الصف.

عمود الاستنساخ مرتين

أعد استخدام العمود 1 عن طريق استنساخه مرتين.

استنساخ صف كامل

بعد ذلك ، قم باستنساخ الصف بأكمله عدة مرات حسب حاجتك.

تغيير كل المحتوى المكرر

روابط متابعة مواقع التواصل الاجتماعي

بالطبع ، ستحتاج إلى تعديل كل المحتوى المكرر ، بدءًا من روابط الشبكة الاجتماعية في كل وحدة متابعة وسائط اجتماعية مكررة.

وسائل التواصل الاجتماعي اتبع صور الخلفية

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

محتوى وحدة الشخص

وأكمل التغييرات بتعديل المحتوى في كل وحدة شخصية.

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

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

أضف كود CSS

انسخ والصق الأسطر التالية من كود CSS ، وبذلك تكون قد انتهيت:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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