Elementor: كيفية تغيير صورة عند المرور فوق النص

هل تريد تغيير صورة عند المرور فوق نص بامتداد منشئ الصفحة Elementor ? في هذا البرنامج التعليمي الجديد ، سنوضح لك كيفية القيام بذلك.

إذا لم تكن لديك فكرة عما نريد التحدث عنه اليوم ، فنحن ندعوك لمشاهدة الفيديو التالي:

ثم دعنا نعود إلى سبب وجودنا هنا.

اكتشف أيضًا دليلنا على:  كيفية إنشاء بطاقة تأثير المحفظة باستخدام Elementor

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

لنقم بإنشاء قسم به عمودين ، ثم في اللوحة الجانبية ، دعنا نحدد الامتداد الإستكبار في ارتفاع الحد الأدنىثم أدنى ارتفاع دعنا نضغط VH واضبط شريط التمرير على 100.

في علامة التبويب الطراز دعنا نختاره نوع الخلفية إن كليكونت سور كلاسيكي، ثم قم بتعديل ملف COULEUR في# F9F9F9

في علامة التبويب متقدم، قم بتعديل جميع ملفات الهوامش الداخلية في 25

الآن دعنا نغير عرض العمود إلى 40% للعمود الأيسر و 60% للعمود الأيمن.

في العمود الأيسر ، دعنا نسقط a أداة محرر النص، ثم الصق نصًا فيه وقم بتعديل ملف حجم العنوان نص على العنوان 3.

في علامة التبويب متقدم، أدخل باسم الهوامش الداخلية 10-25-10-30 على التوالي ل الهوامش الداخلية العلوية واليمنى والسفلية واليسرى

في القسم خلفية التبويب متقدم، انقر فوق نظرة عامة، ثم حدد ملف نوع الخلفية في كلاسيكي، دعنا ندخله اللون # DFF5FF et مدة الانتقال في 0.5.

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

الآن دعنا نذهب إلى القسم الحدود، وانقر فوق نظرة عامة، ثم حدد اتبع الدورة إلى نوع الحد et دعونا نلغي تفعيل الرابط بين الحدود للدخول 4 إلى الحد الأيسر. دعنا نختار اللون # 002FA7 وإضافة مدة انتقالية إلى 0.5

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

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

إذا مررنا بالماوس فوق النص مرة أخرى ، فسنرى انتقالًا سلسًا للغاية.

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

دعونا نكرر هذا النص مرتين ونغير نصوص كل منهما محتويات هكذا.

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

سنقوم بإنشاء مساحة حول هذه الصورة بالذهاب إلى علامة تبويب متقدمة من العمود وأدخل 10 - 10 - 10 - 50 لجميع الهوامش الداخلية للأعلى ، واليمين ، والسفلي ، واليسار.

دعنا نختار الصورة وفي علامة التبويب متقدم من الأخير ، دعنا ننتقل إلى القسم تأثيرات الحركة ثم رسم الدخول، تحديد تتلاشى في

دعنا نذهب إلى القسم متقدم من علامة التبويب خيارات متقدمة وأضف بعض أسماء الفئات في حقل فئات CSS. لذلك دعونا نحصل الكل-img img-1

دعونا نكرر صورتنا مرتين.

لنحدد الصورة الثانية ونغير img-1 إلى img-2 ، ثم نغير الصورة إلى صورة جديدة.

انظر أيضا: كيفية إنشاء معرض صور باستخدام Elementor

بالنسبة للصورة الثالثة ، دعنا نغير img-1 إلى img-3 ، ثم نغير الصورة إلى صورة جديدة.

دعنا نختار قسمنا وننتقل إلى علامة التبويب الخاصة به متقدم. في القسم CSS مخصصة، انسخ والصق مقتطف الشفرة التالي:

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

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

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

data-showme|img-1

افعل ذلك مع برامج تحرير النصوص الأخرى أثناء تغيير img-1 إلى img-2 أو إلى img-3

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>

الآن احفظ أو قم بتحديث صفحتك ثم قم بمعاينتها.

ها أنت ذا ، لقد قمت للتو بهذه المهمة بسهولة.

احصل على Elementor Pro الآن!

وفي الختام

ذلك هو ! هذا كل شيء في هذه المقالة التي توضح لك كيفية تغيير صورة عند التمرير فوق النص. إذا كانت لديك أية مخاوف بشأن كيفية الوصول ، فأخبرنا بذلك تعليقات.

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...