كيفية تغيير صورة على Hover with Divi

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

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

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة على الأمثلة الأربعة التي سنقوم بإعادة إنشائها من البداية

خطوات عامة

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

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

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

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

العمود 1 صورة الخلفية

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف صورة خلفية إلى العمود الأول. اختر الصورة التي تريد أن تظهر عند التمرير.

• تكرار صورة الخلفية للعمود 1: لا يوجد تكرار

أضف صورة إلى العمود 1

تحميل الصور

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

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

إضافة محتوى

في العمود الثاني ، سنحتاج إلى عنوان وحدة نصية أولاً. انطلق وأضف بعض محتوى H3.

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

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

• خط العنوان 3: بالو تاما
• لون نص العنوان 3: # eda96a
• حجم نص العنوان 3: 100 بكسل (سطح المكتب) ، 70 بكسل (جهاز لوحي) ، 50 بكسل (هاتف)
• العنوان 3 تباعد الأحرف: -4 بكسل

• العنوان 3 ظل النص الأفقي الطول: 0.04em
• العنوان 3 طول ظل النص الرأسي: 0.04em
• لون ظل نص العنوان 3: rgba (0،0،0،0.6)

تباعد

أخيرًا ، أضف بعض الهامش العلوي في إعدادات التباعد.

• الهامش العلوي: 100 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

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

إظهار المقسم

أضف وحدة Divider مباشرةً أسفل العنوان Text Module في العمود 2.

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

لون المقسم

قم بتغيير لون الفاصل بعد ذلك.

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

الأنماط

وحدد نمط فاصل آخر في إعدادات الأنماط.

• نمط المقسم: منقط

تحجيم

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

• وزن الحاجز: 3 بكسل

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

إضافة محتوى

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

إعدادات النص

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

• حجم النص: 16 بكسل
• ارتفاع خط النص: 2.3em
• اتجاه النص: ضبط

قسم استنساخ مرتين

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

قم بإنشاء المثال رقم 1

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

التعتيم الافتراضي

لنبدأ في إنشاء المثال الأول! الشيء الوحيد الذي سنفعله هنا هو إنشاء انتقال التمرير ، دون أي تأثيرات إضافية. للقيام بذلك ، افتح وحدة الصورة وانتقل إلى إعدادات المرشحات. تأكد من أن قيمة العتامة الافتراضية هي 100٪.

• العتامة: 100٪

تحوم عتامة

غيّر التعتيم عند التمرير.

• العتامة: 0٪

الانتقالات

أخيرًا ، قم بإنشاء انتقال سلس عن طريق زيادة مدة الانتقال.

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

قم بإنشاء المثال رقم 2

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

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

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

تحوم التباعد

تابع بإضافة بعض المساحة المتروكة السفلية عند التمرير للسماح بزيادة حجم الصورة عند التمرير.

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

مربع الظل

نضيف أيضًا ظل مربع افتراضيًا سيختفي عند التمرير.

• مربع الظل الوضع الأفقي: -55 بكسل
• مربع الظل الوضع الرأسي: -50 بكسل
• قوة انتشار الظل المربع: -10 بكسل
• لون الظل: # eda96a

التعتيم الافتراضي

بعد ذلك ، انتقل إلى إعدادات المرشحات وتأكد من أن التعتيم الافتراضي هو 100٪.

• العتامة: 100٪

تحوم عتامة

قم بإزالة عتامة الوحدة عند التمرير. سيسمح هذا بخلفية العمود بالظهور وإنشاء تأثير "الصورة عند التمرير".

• العتامة: 0٪

الانتقالات

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

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

أنشئ المثال رقم 3

أضف خلفية متدرجة إلى العمود 1

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

• اللون 1: rgba (43،135،218،0)
• اللون 2: #ffffff
• العمود 1 نوع التدرج: شعاعي
• العمود 1 اتجاه شعاعي: المركز
• موضع البداية للعمود 1: 60٪
• موضع نهاية العمود 1: 60٪

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

التعتيم الافتراضي

استمر بفتح وحدة الصورة في العمود 1 وتأكد من أن التعتيم الافتراضي هو 100٪.

• العتامة: 100٪

تحوم عتامة

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

• العتامة: 0٪

أنشئ المثال رقم 4

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

هيكل العمود

إلى المثال الأخير! هنا ، سنحتاج إلى صف جديد به 6 أعمدة.

العمود 1 صورة الخلفية

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف صورة الخلفية التي تريد أن تظهر عند التمرير كصورة خلفية العمود 1.

• تكرار صورة الخلفية للعمود 1: لا يوجد تكرار

كرر لجميع الأعمدة في الصف

كرر الخطوة السابقة لكل عمود من الأعمدة في صفك.

تحجيم

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

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: 1

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

تحميل الصور

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

التعتيم الافتراضي

تأكد من أن التعتيم الافتراضي لهذه الوحدة هو 100٪.

• العتامة: 100٪

تحوم عتامة

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

• العتامة: 0٪

الانتقالات

قم بزيادة مدة الانتقال من أجل انتقال سلس.

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

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

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

معاينة

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

افكار اخيرة

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

صورة مميزة بواسطة LovArt / shutterstock.com