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

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

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

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

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

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

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

في العمود الأيمن ، دعنا ندرج ملف القطعة العنوان بعنوان اختر الأفضل. في علامة التبويب الطراز دعنا نضغط طباعة وتعديل ارتفاع الصف عند 1.

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

دعنا نضيف أدناه عنصر واجهة المستخدم ، أ أداة محرر النص.

أعلى أداة العنوان، دعنا نسقط أداة فاصل في علامة التبويب الخاصة بها محتويات، دعونا ننتزع 270 للعرض. دعنا نضغط على Text for Add element ، ثم أدخل اتجاه كنص. في علامة التبويب الطراز، تعديل الشحوم و الفجوة في 2.

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

في قسم النص ، انقر فوق طباعة، دعونا نغير الخط ، و حجم في 18، شحم في 600.

أسفل أداة المحرر محتويات، دعونا ملف أ القسم الداخلي، حذف أحد أعمدة القسم الداخلي وإسقاط الأخير أ زر القطعة

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

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

دعنا نخصص لون الزر عن طريق تغيير لون الأخير بالنقر فوق كلاسيكي إلى نوع الخلفية ودعنا نغير اللون حسب لون التظليل على الصورة.

ثم انقر فوق علامة التبويب متقدم من زرنا ، ثم تشغيل وضع و عرض دعنا نختار مضمنة (تلقائي). في قسم متقدم منعلامة تبويب متقدمة، دعونا ننتزع 10 إلى الهامش الأيمن.

دعنا نكرر هذا الزر 4 مرات ونعدل ألوان هذه الأزرار.

بعد ذلك ، دعنا نكرر أداة الصورة 4 مرات ، ثم نعدل صورهم.

في'علامة التبويب "خيارات متقدمة"، دعونا ننتزع جميع الصور في الحقل فئات CSS من كل من صورنا.

ثم في الميدان معرف CSS أدخل صورة حمراء للصورة بإبراز أحمر ، وصورة خضراء للصورة بإبراز أخضر ، وصورة بنية للصورة بإبراز بني ، وهكذا.

دعنا نختار القسم وفيعلامة تبويب متقدمة، في الحقل Custom انسخ والصق مقتطف الشفرة التالي في CSS:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

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

بعد ذلك ، دعنا نسقط عنصر واجهة مستخدم HTML في صفحتنا ، وقم بنسخ ولصق مقتطف الشفرة التالي في قسم كود HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

لنحدد الزر الأول في الحقل السمات المخصصة من قسم السمات، انسخ والصق مقتطف الشفرة التالي:

data-showme|IMAGE-ID-NAME

دعنا نعدل جزء IMAGE-ID-NAME من خلال معرفات الأزرار ، فهذه هي معرفات الصورة الحمراء ، والصورة الخضراء ، والصورة الزرقاء ، وما إلى ذلك.

لذلك بالنسبة لكل زر ، دعنا نغير كود IMAGE-ID-NAME إلى لون الزر المناسب

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

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

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

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

وفي الختام

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

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

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

...