إن معرفة كيفية تغيير صورة عند تمرير مؤشر الفأرة عليها مفيدة لأي نوع من مواقع الويب التي تعمل عليها. كما أنها تساعدك على إضافة تفاعل بسيط إلى الصفحات. على سبيل المثال، يمكنك استخدامها لإضافة منظور إلى شهادات العملاء والصفحات وصفحات الفريق.
بفضل خيارات التمرير الجديدة في Divi، يمكنك تحرير صورة عند التمرير باستخدام الخيارات المضمنة فقط. من خلال الجمع بين خلفيات الأعمدة وفلتر التعتيم، ستصل إلى هدفك في أي وقت من الأوقات.
دعونا نذهب!
مسح
قبل الخوض في البرنامج التعليمي ، دعونا نلقي نظرة على الأمثلة الأربعة التي سنقوم بإعادة إنشائها من البداية.
خطوات عامة
إضافة قسم جديد
في الجزء الأول من هذا البرنامج التعليمي ، سنتخذ بضع خطوات عامة. ستساعدنا هذه الخطوات العامة في توفير الوقت عندما نركز على الأمثلة الثلاثة الأولى. افتح صفحة جديدة أو موجودة وأضف قسمًا عاديًا إليها.
أضف سطرًا جديدًا
هيكل العمود
ثم أضف صفًا جديدًا باستخدام بنية الأعمدة التالية:
1 عمود صورة الخلفية
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف صورة خلفية إلى العمود الأول. اختر الصورة التي تريد التحليق فوقها.
- العمود 1 صورة الخلفية التكرار: لا تكرار
أضف صورة إلى عمود 1
تحميل صورة
تابع عن طريق إضافة وحدة صورة إلى العمود الأول وتحميل الصورة التي تريد ظهورها قبل التمرير.
إضافة وحدة نمطية لنص العنوان إلى عمود 2
إضافة محتوى
في العمود الثاني، سنحتاج أولًا إلى عنوان وحدة نصية. أضف بعض محتوى H3.
إعدادات نص الرأس
ثم انتقل إلى إعدادات نص العنوان وإجراء بعض التغييرات.
- العنوان 3 الخط: Baloo Tamma
- العنوان 3 لون النص: # eda96a
- العنوان 3 حجم النص: 100 بكسل (سطح المكتب) ، 70 بكسل (لوحي) ، 50 بكسل (هاتف)
- تباعد عنوان رسائل 3: -4px
- عنوان 3 نص ظل طول أفقي: 0.04em
- العنوان 3 طول الظل الرأسي للنص: 0.04em
- العنوان 3 لون ظل النص: rgba (0,0,0,0,6)
مباعدة
أخيرًا ، أضف الهامش العلوي في إعدادات التباعد.
- الهامش العلوي: 50 (سطح المكتب) ، 50px (الجهاز اللوحي والهاتف)
إضافة وحدة تقسيم إلى عمود 2
إظهار الفاصل
إضافة وحدة نمطية للفصل أسفل عنوان وحدة النص مباشرةً في عمود 2.
- إظهار الحاجز: نعم
لون الفاصل
تغيير لون المقسوم بعد ذلك.
- لون الفاصل: # e25300
وسائط
وحدد نمط فصل آخر في إعدادات النمط.
- نمط الانفصال: منقط
التحجيم
أيضا زيادة الوزن الفاصل في المعلمات التحجيم.
- وزن الفاصل: 3px
إضافة وحدة نمطية للنص الأساسي إلى عمود 2
إضافة محتوى
لننتقل إلى الوحدة الأخيرة! أضف نصًا إلى العمود الثاني مع بعض المحتوى المختار.
إعدادات النص
تغيير إعدادات النص في وقت لاحق.
- حجم النص: 16px
- ارتفاع سطر النص: 2.3em
- اتجاه النص: ضبط
استنساخ القسم مرتين
بمجرد الانتهاء من جميع الخطوات العامة ، قم باستنساخ القسم الذي قمت بإنشائه. الآن سيكون لدينا قسم منفصل لكل مثال من الأمثلة الثلاثة الأولى.
إنشاء المثال رقم 1
قم بتطبيق إعدادات إضافية على وحدة الصورة
التعتيم الافتراضي
لنبدأ في إنشاء المثال الأول! الشيء الوحيد الذي سنفعله هنا هو إنشاء انتقال التمرير ، دون أي تأثيرات إضافية. للقيام بذلك ، افتح وحدة الصورة وانتقل إلى إعدادات المرشحات. تأكد من أن قيمة العتامة الافتراضية هي 100٪.
- التعتيم: 100٪
تحوم فوق التعتيم
غيّر التعتيم أثناء التحويم.
- التعتيم: 0٪
التحولات
أخيرًا ، قم بإنشاء انتقال سلس عن طريق زيادة مدة الانتقال.
- مدة الانتقال: 1200ms
إنشاء المثال رقم 2
قم بتطبيق إعدادات إضافية على وحدة الصورة
التباعد الافتراضي
دعنا ننتقل إلى المثال الثاني! افتح وحدة الصورة في العمود 1 وتأكد من عدم وجود تعبئة مخصصة افتراضية.
تباعد ثابت
تابع عن طريق إضافة القليل من هامش التمرير السفلي للسماح بزيادة حجم صورة التمرير.
- الحشو السفلي: 100px
صندوق الظل
نضيف أيضًا ظل صندوق افتراضي سيختفي عند التمرير.
- ظل المربع ، الموضع الأفقي: -55px
- Box Shadow الوضع الرأسي: -50px
- قوة انتشار ظل الصندوق: -10 بكسل
- لون الظل: # eda96a
التعتيم الافتراضي
بعد ذلك ، انتقل إلى إعدادات المرشحات وتأكد من أن التعتيم الافتراضي هو 100٪.
- التعتيم: 100٪
تحوم فوق التعتيم
قم بإزالة عتامة وضع التمرير. سيسمح هذا بعرض خلفية العمود وإنشاء تأثير "صورة التمرير".
- التعتيم: 0٪
التحولات
أخيرًا ، قم بزيادة مدة الانتقال في معلمات الانتقال لوحدة الصورة.
- مدة الانتقال: 1200ms
قم بإنشاء مثال 3
أضف خلفية متدرجة إلى عمود 1
بالنسبة للمثال الثالث ، نبدأ بفتح إعدادات الصف وإضافة خلفية متدرجة نصف قطرية إلى العمود الأول. سيعطي هذا الصورة التي تحوم شكلًا دائريًا.
- لون 1: rgba (43,135,218,0)
- لون 2: #ffffff
- عمود 1 نوع التدرج: نصف قطري
- Column 1 Radial Direction: Center
- عمود 1 موضع البداية: 60٪
- العمود 1 الوضع النهائي: 60٪
قم بتطبيق إعدادات إضافية على وحدة الصورة
التعتيم الافتراضي
تابع بفتح وحدة الصورة في عمود 1 والتأكد من أن العتامة الافتراضية هي 100٪.
- التعتيم: 100٪
تحوم فوق التعتيم
إزالة أي عتامة الجسر للكشف عن خلفية العمود.
- التعتيم: 0٪
إنشاء المثال رقم 4
أضف سطرًا جديدًا
هيكل العمود
في المثال الأخير! سنحتاج هنا إلى صف جديد به 6 أعمدة.
1 عمود صورة الخلفية
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف صورة الخلفية التي تريد تمرير مؤشر الماوس فوقها كصورة الخلفية للعمود 1.
- العمود 1 صورة الخلفية التكرار: لا تكرار
كرر جميع الأعمدة عبر الإنترنت
كرر الخطوة السابقة لكل عمود من الأعمدة في صفك.
التحجيم
بعد ذلك ، قم بالوصول إلى معلمات تغيير الحجم للصف وإزالة أي فجوات بين الأعمدة.
- جعل هذا الخط عرض كامل: نعم
- استخدم عرض مزراب مخصص: 1
أضف وحدة صورة إلى العمود 1
تحميل صورة
تابع بإضافة وحدة صورة إلى العمود الأول وتحميل الصورة التي تريد ظهورها افتراضيًا.
التعتيم الافتراضي
تأكد من أن التعتيم الافتراضي لهذه الوحدة هو 100٪.
- التعتيم: 100٪
تحوم فوق التعتيم
وقم بإزالة التعتيم على التمرير للسماح بعرض خلفية العمود بدلاً من ذلك.
- التعتيم: 0٪
التحولات
زيادة مدة الانتقال للانتقال السلس.
- مدة الانتقال: 800ms
وحدة Clone Image 3 مرة واحدة ووضع التكرارات في الأعمدة المتبقية
بمجرد الانتهاء من تحرير وحدة الصورة في العمود 1 ، يمكنك استنساخها ووضع التكرارات في الأعمدة المتبقية. تأكد من تغيير الصور أيضًا.
الأفكار النهائية
يمكن أن يساعد تغيير صورة التمرير في جلب هذا التفاعل الإضافي إلى أقسام الشهادات وحول الصفحات وصفحات الفريق.
في هذا البرنامج التعليمي، أظهرنا لك طريقة سهلة للحصول على أنواع مختلفة من صور التحويم باستخدام خيارات Divi المضمنة فقط! إذا كان لديك أي أسئلة أو اقتراحات، يرجى ترك تعليق في قسم التعليقات أدناه!