كيفية إنشاء تأثير تمرير الصورة في العنصر

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

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

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

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

إنشاء تأثير تمرير الصورة في Elementor

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

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

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

انقر الآن على أيقونة تحرير القسم وفي علامة تبويب التخطيط ، اضبط الحد الأدنى للارتفاع على 500.

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

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

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

انتقل الآن إلى علامة التبويب متقدم لإضافة CSS مخصص. في حقل CSS المخصص ، أضف الكود التالي:

المحدد {-webkit-transfer: easy-in-out 3s! الانتقال: سهولة الدخول إلى الخارج 3 ثوانٍ! } selector: hover {background-position: center bottom! important؛ }

يمكنك تغيير قيمة الانتقال لتغيير تأثير التمرير للصور. إذا كنت ترغب في إضافة صور متعددة بنفس التأثير ، يمكنك تكرار العمود ثم تغيير صورة الخلفية.

وفي الختام

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

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