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

هل ترغب في تمرير صورة عند التمرير باستخدام Elementor?

إذا كان الأمر كذلك ، فلنكتشف معًا في هذا البرنامج التعليمي كيفية الوصول إلى هناك بفضل منشئ الصفحة Elementor.

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

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

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

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

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

في علامة التبويب الطراز، دعنا نحدد الصورة الخلفية من خلال تحديد صورة من مكتبتك ، فلنقم بتعيين موضعها على متفوقة تتمحور و الحجم على الغلاف.

اذهب الحدود و مربع الظل غيره طمس على 40 وجميع أشعة الحدود في 20

دعونا نضيف ملف القطعة العنوان تحت ال القسم الداخليمع العنوان تصميم أوي / أوكس وقم بمحاذاة العنوان مع مركز. في علامة التبويب الطراز، فلنعدّل أسلوب الطباعة باستخدام لـ حجم 20، التحول على الأحرف الكبيرة.

في علامة التبويب متقدم، دعنا نحدد ال الهامش الأعلى 20

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

/*Effet de défilement d'Image*/
selector{
    -webkit-transition: ease-in-out 4s !important;
    transition: ease-in-out 4s !important;
}
selector:hover{
    background-position: center bottom !important;
}

والآن بمجرد أن تحوم فوق الصورة يتم تمريرها.

نص العنوان أبيض ، يمكنك وضعه باللون الأسود.

الآن قم بتكرار العمود مرتين ، ثم احذف الأعمدة الأخرى

دعنا نغير صورة الخلفية للأقسام الداخلية في العمودين الآخرين ونغير عناوين ودجات العنوان أدناه.

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

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

وفي الختام

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

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

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

...