هل ترغب في عرض أيقونات الوسائط الاجتماعية على الصور التي يتم تمرير المؤشر عليها في Divi؟
عند إنشاء صفحة "نبذة عنا"، قد تفكر في إضافة أعضاء فريق شركتك المختلفين في عرض تقديمي.
عند بدء عملية التصميم هذه، ستلاحظ أن ثلاثة عناصر أساسية منذ البداية: صورة، واسم، ومنصب. ولكن إذا كنت ترغب في إبراز أعضاء فريقك بشكل أكبر، يمكنك أيضًا إضافة روابط حساباتهم على مواقع التواصل الاجتماعي إلى التصميم.
بالطبع، يمكنك القيام بذلك بالطريقة التقليدية وإضافة قسم "تابعنا على مواقع التواصل الاجتماعي" أسفل اسم الشخص وموقعه. ولكن يمكنك أيضاً إضافة لمسة تفاعلية من خلال عرض هذه الأيقونات بمجرد تمرير مؤشر الماوس فوق إحدى صور الشخص.
في درس اليوم، سنوضح لكم بالضبط كيفية القيام بذلك باستخدام Divi.
دعونا نذهب.
مسح
قبل الخوض في الشرح، دعونا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
نتيجة على الكمبيوتر المحمول
النتيجة على الهاتف المحمول
لنبدأ الإدراك مع Divi!
أضف القسم رقم 1
لون الخلفية
أضف قسمًا جديدًا إلى الصفحة التي تعمل عليها.
افتح إعدادات القسم وقم بتغيير لون الخلفية.
- الخلفية: # 0f0f0f
مباعدة
انتقل إلى علامة التبويب تصميم قم بتوسيع الخيار التباعد ثم اضبط إعدادات التباعد.
- المساحة المتروكة (أعلى وأسفل): 100 بكسل
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد باستخدام بنية العمود التالية:
أضف وحدة "النص" رقم 1 إلى العمود
أضف عنوانًا بالحجم H1
أضف الوحدة الأولى "نص" لصف العمود
أضف محتوى بحجم H1 (عنوان 1) حسب اختيارك.
إعدادات النص H1
انتقل إلى علامة التبويب تصميمقم بتوسيع الخيار نص العنوان وقم بتغيير إعدادات نص H1 وفقًا لذلك:
- خط العنوان: Alata
- لون نص العنوان: #ffffff
- حجم الخط:
- سطح المكتب: 50 بكسل
- الجهاز اللوحي: 45 بكسل
- الهاتف: 35 بكسل
- ارتفاع خط العنوان: 1,2 em
أضف وحدة "فاصل" إلى العمود
رؤية
بعد ذلك، سنضيف وحدة "فاصل". تأكد من تفعيل خيار "إظهار الفاصل".
- إظهار الحاجز: نعم
خط
انتقل إلى علامة التبويب تصميمقم بتوسيع الخيار لاين وتغيير لون الخط.
- لون الخط: #ffffff
التحجيم
قم بتوسيع الخيار التحجيم وتغيير إعدادات التحجيم أيضًا.
- وزن الحاجز: 2 بكسل
- العرض الأقصى: 100 بكسل
- الارتفاع: 2 بكسل
أضف وحدة "النص" رقم 2 إلى العمود
إضافة محتوى الوصف
الوحدة التالية والأخيرة التي نحتاجها في هذا السياق هي وحدة "نص" أخرى تحتوي على محتوى وصفي من اختيارك.
إعدادات النص
انتقل إلى علامة التبويب تصميمقم بتوسيع الخيار نص وقم بتغيير إعدادات النص كما يلي:
- خط النص: العاتا
- لون النص: # 7c7c7c
- الحجم: 17 بكسل
- ارتفاع خط النص: 1,9 م
مباعدة
قم أيضًا بإزالة الهامش السفلي الافتراضي.
- الهامش (السفلي): 0 بكسل
أضف القسم رقم 2
خلفية التدرج
أضف قسمًا آخر أسفل القسم السابق مباشرةً واستخدم خلفية متدرجة لهذا القسم.
- اللون الأيسر: # 0f0f0f
- اللون المناسب: # 000000
- المركز الأيسر: 10٪
- الموضع الصحيح: 90٪
مباعدة
انتقل إلى علامة التبويب تصميمقم بتوسيع الخيار التباعد ثم اضبط إعدادات التباعد.
- الحشو (أعلى): 0 بكسل
- الحشوة (أسفل): 200 بكسل
أضف سطرًا جديدًا
هيكل العمود
تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:
التحجيم
افتح إعدادات الخط وقم بتغيير إعدادات التحجيم كما يلي:
- استخدام عرض مزراب مخصص: نعم
- عرض الحضيض: 2 بكسل
أضف وحدة "متابعة وسائل التواصل الاجتماعي" إلى العمود 1
أضف الشبكات الاجتماعية التي تختارها
الوحدة الأولى التي نحتاجها في صفنا هي وحدة "متابعة وسائل التواصل الاجتماعي" في العمود 1. أضف شبكات التواصل الاجتماعي التي تختارها.
قم بإزالة اللون من كل شبكة اجتماعية على حدة
افتح كل شبكة اجتماعية على حدة
قم بإزالة لون الخلفية.
أضف رابطًا لكل شبكة اجتماعية على حدة
أضف أيضًا ارتباطًا يتوافق مع كل شبكة اجتماعية.
لون الخلفية الافتراضي
بعد ذلك ، ارجع إلى إعدادات الوحدة العامة وقم بتطبيق لون الخلفية التالي:
- الخلفية: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
لون الخلفية عند تمرير المؤشر
قم بتغيير لون الخلفية عند تمرير المؤشر فوقها.
- الخلفية (تحوم): # 494949
صورة الخلفية
بعد ذلك، قم بتحميل صورة خلفية.
- حجم صورة الخلفية: الغلاف
- مزيج صورة الخلفية: مضاعفة
انحياز
انتقل إلى علامة التبويب تصميم وقم بضبط المحاذاة.
- وحدة المحاذاة: المركز
أيقونة
قم أيضاً بتغيير لون الأيقونة.
- لون الأيقونة: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX)
مباعدة
ثم انتقل إلى إعدادات التباعد (التباعد ) وقم بتطبيق القيم التالية:
- الهامش (السفلي): 0 بكسل
- أعلى الحشو):
- سطح المكتب: 250 بكسل
- الجهاز اللوحي: 450 بكسل
- الهاتف: 200 بكسل
- الحشوة (أسفل): 20 بكسل
الحدود
نقوم أيضًا بتغيير إعدادات الحدود.
- الزوايا الدائرية: 100 بكسل
- عرض الحدود: 2 بكسل
- لون الحدود: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
الحدود عند المرور فوقها
استخدم لون حد آخر عند المرور بالماوس.
- لون الحدود (تحوم): #ffffff
فئة CSS
ثم انتقل إلى علامة التبويب متقدم وتطبيق فئة CSS مخصصة.
- فئة CSS: فرق اجتماعية
Css مخصص (قبل)
وأكمل إعدادات الوحدة النمطية بتفعيل خاصية التمرير على العنصر. "قبل" وعن طريق نسخ ولصق الأسطر التالية من كود CSS:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
أضف وحدة "شخص" إلى العمود 1
إضافة محتوى الوصف
الوحدة التالية والأخيرة التي نحتاجها في العمود 1 هي وحدة "الشخص". أضف محتوى وصفيًا من اختيارك.
إعدادات النص
انتقل إلى علامة التبويب تصميم وقم بتغيير إعدادات النص كما يلي:
- محاذاة النص: الوسط
- لون النص: فاتح
إعدادات نص العنوان
ثم قم بتخصيص نص العنوان.
- خط العنوان: Alata
- حجم نص العنوان للعنوان:
- سطح المكتب: 27 بكسل
- الجهاز اللوحي: 25 بكسل
- الهاتف: 22 بكسل
إعدادات نص الوصف الوظيفي
ثم قم بتحرير إعدادات نص الوصف الوظيفي.
- خط الموضع: Alata
- حجم نص الموضع:
- سطح المكتب: 17 بكسل
- الجهاز اللوحي والهاتف: 15 بكسل
مباعدة
قم بتعديل إعدادات التباعد كما يلي:
- المساحة المتروكة (أعلى وأسفل): 40 بكسل
الحدود
وأكمل إعدادات الوحدة من خلال تطبيق إعدادات الحدود التالية:
- عرض الحدود: 1 بكسل
- لون الحدود: #ffffff
إزالة الأعمدة المتبقية من الصف
بمجرد الانتهاء من الوحدات النمطية للعمود 1 ، يمكنك إزالة العمودين المتبقيين من الصف.
العمود استنساخ مرتين
أعد استخدام العمود 1 عن طريق استنساخه مرتين.
استنساخ الصف بأكمله
ثم استنساخ الصف بأكمله عدة مرات حسب الحاجة.
قم بتحرير كل المحتوى المكرر
أضف وحدة Code أسفل وحدة النص الأخيرة في السطر 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>
مسح
والآن بعد أن مررنا بجميع الخطوات، دعونا نلقي نظرة أخيرة على النتيجة على أحجام الشاشات المختلفة.
مكتب
تحميل DIVI Now !!!
الهاتف
تحميل DIVI Now !!!
خاتمة
في هذه المقالة ، أوضحنا لك كيفية الإبداع في تقديم أعضاء فريقك.
على وجه التحديد، أوضحنا لكم كيفية عرض أيقونات وسائل التواصل الاجتماعي عند تمرير مؤشر الماوس فوق صورة أحد أعضاء الفريق. ينتج عن ذلك تفاعل بسيط وممتع يمكنكم استخدامه في أي نوع من المواقع الإلكترونية التي تصممونها.
إذا كنت بحاجة إلى المزيد من العناصر لإكمال مشاريع إنشاء موقع الويب الخاص بك ، فتصفح أيضًا دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
لكن في غضون ذلك, شارك هذا المقال على الشبكات الاجتماعية المختلفة.