كيفية استبدال شعارات العميل بشهادات عند التمرير / انقر فوق Divi

هل تبحث عن طريقة لإضافة التفاعل إلى شعارات العميل ومطابقة الشهادات؟ مع ميزة المحتوى المتجاوب من Divi ، أصبح الآن أسهل من أي وقت مضى إظهار محتوى مختلف في الحالة الافتراضية للوحدة النمطية وعند التمرير فوقها. في برنامج Divi التعليمي اليوم ، سنبين ذلك من خلال توضيح كيفية استبدال شعارات العميل بشهادات عند التمرير (سطح المكتب) والنقر فوق (الكمبيوتر اللوحي والهاتف). سنستخدم الوحدة النمطية Blurb لمساعدتنا في الوصول إلى هناك! ستتمكن من تنزيل ملف JSON الخاص بالتخطيط مجانًا أيضًا!

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط شعارات العميل مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

لون الخلفية

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

• لون الخلفية: # 000000

تباعد

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

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

الحدود

أكمل إعدادات القسم بإضافة حد أبيض.

• عرض الحدود: 1vw
• لون الحدود: #ffffff

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض الأقصى: 1500 بكسل

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

أضف محتوى H2 سريع الاستجابة

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

• سطح المكتب: قم بتمرير شعارات العميل لمعرفة ما سيقوله!
• الجهاز اللوحي والهاتف: انقر فوق شعارات العميل لمعرفة ما سيقوله!

إعدادات نص H2

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

• خط العنوان 2: Work Sans
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2: 40 بكسل (سطح المكتب) ، 30 بكسل (جهاز لوحي) ، 25 بكسل (هاتف)

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

الرؤية

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

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

خط

ثم قم بتغيير لون خط الوحدة.

• لون الخط: #ffffff

تحجيم

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

• وزن الحاجز: 4 بكسل
• العرض: 10٪
• محاذاة الوحدة: المركز

تباعد

أكمل إعدادات الوحدة بإضافة بعض الهامش العلوي.

• الهامش الأعلى: 100 بكسل

أضف الصف رقم 2

هيكل العمود

أضف صفًا آخر أسفل الصف السابق مباشرةً واستخدم بنية العمود التالية له:

تحجيم

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

• معادلة ارتفاعات العمود: نعم
• العرض: 100٪ (سطح المكتب) ، 80٪ (الجهاز اللوحي والهاتف)
• العرض الأقصى: 1500 بكسل
• الحد الأدنى للارتفاع: 500 بكسل (سطح المكتب) ، تلقائي (الجهاز اللوحي والهاتف)

العنصر الرئيسي

لتوسيط محتوى العمود في صفك ، ستحتاج إلى 1) تمكين خيار "Equalize Column Heights" (الخطوة السابقة) و 2) إضافة السطر التالي من كود CSS إلى العنصر الرئيسي للصف الخاص بك:

align-items: center;

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

اترك المحتوى الافتراضي فارغًا

الآن ، لاستبدال شعارات العميل عند التمرير ، سنستخدم وحدات Blurb Modules. ابدأ بالأول في العمود 1. تأكد من ترك العنوان الافتراضي ومحتوى النص فارغين ولكن استمر في تمكين خيار التمرير على كلاهما.

أضف محتوى على Hover

أدخل بعض المحتوى المكتوب الذي تختاره في كلا حقلي التمرير.

الصورة الافتراضية

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

إزالة الصورة من Hover

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

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

كما تلاحظ في معاينة هذا المنشور ، نقوم أيضًا بتغيير لون خلفية الوحدة عند التمرير فوقها. لا تستخدم لون الخلفية الافتراضي وأضف رمز اللون التالي عند التمرير:

• لون الخلفية: # 191919

إعدادات الصورة / الرمز

انتقل إلى علامة تبويب تصميم الوحدة وتأكد من تطبيق محاذاة الصورة / الرمز التالية:

• محاذاة الصورة / الرمز: الوسط

إعدادات النص

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

• لون النص: فاتح

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

بعد ذلك ، قم بتعديل إعدادات نص العنوان وفقًا لذلك:

• مستوى عنوان العنوان: H3
• خط العنوان: Work Sans
• حجم نص العنوان: 24 بكسل
• ارتفاع خط العنوان: 1.4em

إعدادات النص الأساسي

قم بإجراء بعض التغييرات على إعدادات النص الأساسي أيضًا.

• خط النص الأساسي: Open Sans
• لون نص الجسم: # 8c8c8c
• ارتفاع خط الجسم: 2.5em

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

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

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة اليسرى: 0 بكسل
• الحشوة اليمنى: 0 بكسل

تحوم التباعد

ومع ذلك ، عند التمرير ، نقوم بإنشاء مساحة بيضاء لشهادتنا باستخدام القيم التالية:

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 50 بكسل
• الحشو الأيسر: 50 بكسل
• الحشوة اليمنى: 50 بكسل

انتقال

أكمل إعدادات الوحدة بإزالة مدة الانتقال الافتراضية. سيسمح هذا للشهادة بالظهور على الفور عند التمرير / النقر فوق الشعار.

• مدة الانتقال: 0 مللي ثانية

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

بمجرد الانتهاء من أول وحدة Blurb Module في العمود 1 ، يمكنك استنساخ الوحدة مرتين ووضع التكرارات في الأعمدة المتبقية في الصف.

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

يمكنك الآن استنساخ هذا الصف حتى عدد المرات الذي تريده ، اعتمادًا على عدد شعارات العميل التي تريد عرضها.

تغيير محتوى التمرير لكل نسخة من وحدة Blurb مكررة

تأكد من تغيير شعار العميل في كل وحدة Blurb Module مكررة.

تغيير شعار كل نسخة من وحدة Blurb مكررة

قم بتغيير محتوى التمرير لكل وحدة مكررة أيضًا وتكون قد انتهيت!

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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