هل تريد إنشاء رسم متحرك مع Elementor ?

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

ندعوك لمشاهدة الفيديو التالي للحصول على فكرة عما نريد أن نعرضه لك.

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

في أدنى ارتفاع اضغط على VH ثم اسحب شريط التمرير إلى 100. دائما في علامة التبويب تصميم حدد 650 مثل عرض.

حدد العمود والشريط الجانبي في الحقل انحياز عمودي حدد محيط.

في علامة التبويب الطراز، قم بتغيير لون الخلفية بالنقر فوق منتقي الألوان والكتابة #D37636 ثم في القسم الحدود، دعونا ننتزع 20 لجميع كبح نصف القطر.

في علامة التبويب متقدم، قم بإيقاف تشغيل الحشو واكتبه 75 للهوامش الداخلية أوت et BAS et 25 للهوامش الداخلية غير لبق et Droite.

ثم في العمود اسحب القطعة القسم الداخلي. دعنا نزيل أحد الأعمدة من القسم الداخلي.

في عمود القسم الداخلي المتبقي ، قم بإسقاط ملف القطعة العنوان وتغيير العنوان إلى بيبسي لوف.

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

ثم في علامة التبويب الطراز، امنح النص لونًا أبيض وللطباعة اضبط حجم في 32، ارتفاع الصف في 1.2, تباعد الأحرف في 0.5.

تحت ال القطعة العنوان، أسقط أداة محرر النص وتحرير النص. في علامة التبويب الطراز، قم بتغيير لون النص إلى الأبيض و حجم تشغيل الطباعة 16، ارتفاع الصف في 1.5 وتباعد الأحرف في 0.5.

في علامة التبويب متقدم قم بتغيير الهامش BAS في -10.

في القسم وضع التبويب متقدم، تعديل عرض في Personnalisé و العرض مخصص تعيين الأخير إلى 310.

أسفل الفقرة سنضيف أ القطعة زر مع للنص اقرأ المزيد.

في علامة التبويب الطراز أعط الزر اللون أبيض ولون النص عيّنه على نوار.

الآن حدد عمود القسم الداخلي، في القسم متقدم التبويب متقدم أوقف تشغيل الرابط وانقر على النسبة المئوية ثم اضبط الهامش غير لبق في 20 وفي الهامش الداخلي تحديد ذلك من غير لبق في 20.

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

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

في علامة التبويب متقدم، اذهب إلى القسم الموقع الحالي في عرض حدد متصل بالإنترنت (تلقائي)في الموقع الحالي حدد مطلق و الاتجاه الأفقي حدد حق ثم عوض أدخل -9.9 وعلى عوض من الاتجاه العمودي أدخل -105.

اذهب إلى أسفل قسم التحويل حدد تغيير حجم في 0.5.

الآن حدد عمود القسم الداخلي وفي علامة التبويب متقدم أدخل اسم فصول css نص بيبسي.

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

/*Hover Animation CSS*/
selector{
    --transition: 0.5s;
    --circle-color: #313F69;
    --content-background: #D27838;
    --mobile-height: 670px;
    --mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
    transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
    content: "";
    background: var(--circle-color);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 20px;
    clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
    clip-path: circle(400px at center);
    background: var(--content-background);
}
selector:hover .elementor-widget-image{
    right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector .pepsi-text{
    opacity: 0;
    visibility: hiddin;
}
selector:hover .pepsi-text{
    opacity: 1;
    visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
    height: var(--mobile-height);
}  
selector .elementor-widget-image .elementor-widget-container{
    transform: scale(1);
}
selector:hover .elementor-widget-image{
    right: 68px !important;
    top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
    margin-top: -265px !important;
}
}

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

الآن إذا أردنا إزالة لون الخلفية من النص ، فسنحدد العمود الرئيسي وفي علامة التبويب "النمط" نقوم بإلغاء تنشيط لون الخلفية.

في هذا الوقت ، ستعمل الرسوم المتحركة بشكل طبيعي على المتصفح.

تبدو الرسوم المتحركة على الجهاز اللوحي مثالية أيضًا

ولكن على الهاتف الذكي، لا يتم عرضه بشكل طبيعي. دعونا نحل هذه المشكلة.

لنعرض المتصفح

في المتصفح ، حدد القسم (تأكد من أنك لا تزال في وضع الهاتف الذكي) وقم بخفض عرض في 320

ثم حدد العمود الرئيسي وفي علامة التبويب الخاصة به متقدم، اضبط جميع الهوامش الداخلية على 25

في المتصفح ، حدد الصورة وفي علامة التبويب الطراز، اضغط على PX de عرض وضبطها على 180.

في علامة التبويب متقدم du القطعة الصورة، هيا الموقع الحالي، واختر مطلقفي تعويض الأفقي أدخل 75 و في التحول العمودي أدخل 236. باختصار ، تأكد من توسيط صورتك في منتصف الدائرة باستخدام الإزاحات المختلفة.

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

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

وفي الختام

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

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

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

...