إنشاء رسوم متحركة لصورة الخلفية المتحركة باستخدام Free Elementor Page Builder

يبدو إنشاء رسوم متحركة متحركة لصورة الخلفية المتحركة باستخدام أداة إنشاء صفحات Free Elementor أمرًا سهلاً للغاية بالنسبة لي الآن. هنا تحتاج إلى إضافة بعض أكواد CSS داخل الصفحة. هناك طريقة لإضافة Elementor مجاني لكود CSS أيضًا.

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

ما هي الرسوم المتحركة المتحركة لصورة الخلفية المتحركة؟

أ الرسوم المتحركة لصورة الخلفية المتحركة عبارة عن رسوم متحركة CSS متكررة تقوم ببطء بتحريك صورة خلفية واسعة خلف محتوى صفحتك، بحيث يبدو القسم حيًا دون تحميل ملف فيديو. في Elementor، يمكنك إنشاؤه بقسم كامل الارتفاع، وهما فاصلان يحملان معرفات CSS ب.ج و تراكب، وكتلة قصيرة من CSS @keyframes التعليمات البرمجية التي تم لصقها في عنصر واجهة مستخدم HTML لا تتطلب ترخيص Elementor Pro ولا تتطلب JavaScript. إنها واحدة من الأخف تأثيرات الرسوم المتحركة العنصر يمكنك الإضافة، لأن المتصفح يقوم بتحريك تحويل واحد بدلاً من تشغيل الوسائط.

أولاً دعونا نرى كيف يبدو الأمر تمامًا في الفيديو التالي.

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

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

يفحص كيفية تثبيت البرنامج المساعد Master Addons وتنشيطه

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

انقر على مكتبة MA Tempalte وانتظر بضع ثوانٍ لتحميل البيانات. سترى “Ready Page” و“Sections”. انقر على علامة تبويب الأقسام وانتظر بضع ثوانٍ. الآن سترى الرسوم المتحركة لصورة الخلفية المتحركة “Moving. 

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

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

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

تحريك الخلفية صورة الرسوم المتحركة البرنامج التعليمي

إجابة مختصرة: قم بإنشاء قسم عنصر مكون من عمود واحد تم تعيينه على “Fit لفحص”، وأضف فاصلًا بمعرف CSS ب.ج فوق المحتوى الخاص بك وفاصل ثانٍ بالمعرف تراكب أسفله، ثم الصق رمز الرسوم المتحركة CSS أدناه في عنصر واجهة مستخدم HTML وقم بتبديل عناوين URL للصور الخاصة بك. تحتاج إلى ثلاثة أصول مثل صورة خلفية واسعة وتراكب PNG وتراكب SVG over، ويستغرق البناء بأكمله حوالي عشر دقائق على أداة إنشاء صفحات Elementor المجانية.

الأصول التي تحتاجها: 

1. صورة بأبعاد 1500 في 500 بكسل
2. صورة تراكب PNG
3. صورة تراكب SVG

أضف الآن بنية عمود واحد واجعل ارتفاعه “Fit لفحص”. 

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

العنوان (عنصر العنوان الافتراضي للعنصر المستخدم): عائلة الخطوط: Source Sans Pro، حجم الخط: 120px، وزن الخط: 900، ارتفاع الخط: 140، تباعد الحروف: -5، اللون: أسود

النص (عنصر محرر النص الافتراضي للعنصر المستخدم): عائلة الخطوط: Source Sans Pro، حجم الخط: 30px، وزن الخط: 400، ارتفاع الخط: 40، اللون: أسود

اجتماعي (عنصر اجتماعي افتراضي مستخدم)الشكل: الدائرة، المحاذاة: المركز، اللون: مخصص، أسود أساسي: rgba(175،175،175،0)، اللون الثانوي: أسود، الحجم: 40، المساحة: 30، نوع الحدود: صلب، عرض الحدود: 2، لون الحدود: أسود

ألقِ نظرة على الرسوم المتحركة التالية لـ GIF وستفهم كيفية تطبيق كل هذه الخصائص داخل العنصر أو العنصر الخاص بك. 

ضع z-index=1 على كل عنصر باستخدام علامة التبويب المتقدمة. ما عليك سوى النقر على كل عنصر والانتقال إلى علامة التبويب "متقدم". تحقق من الصورة التالية. 

(إذا فاتك هذا، فسوف تواجه مشكلة في تحرير محتوى العناصر بعد إضافة رمز CSS لصورة الخلفية المتحركة. يجب عليك استخدام نظام Elementor Navigator لتحرير المحتوى إذا لم تضع z-index هنا.)

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

ضع “BG” كمعرف في المباعد العلوي. ووضع “overlay” كمعرف في المباعد السفلي. 

إضافة معرف BG في المباعد العلوي

إضافة معرف التراكب في المباعد السفلي

أضف الـ“HTMLعنصر URL أسفل أيقونة الوسائط الاجتماعية أو في الجزء العلوي من المباعد الثاني. 

تغيير رابط صورة BG وتراكب الصورة

هل تتذكر أصول الرسوم المتحركة لصور Moving BG الخاصة بنا؟ حان الوقت الآن لتحميلها على موقع الويب الخاص بك. قم بتحميل صورة الخلفية وتراكب PNG وصورة تراكب SVG. ثم انسخ هذه الروابط الثلاثة وقم بإدراجها في محرر التعليمات البرمجية أو المفكرة. 

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

انقر على كل صورة لرؤية الإصدار عالي الدقة. 

تغيير عنوان URL لصورة الخلفية

تغيير عنوان URL لصور التراكب

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

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

دعونا نغير لون النص ولون وسائل التواصل الاجتماعي إلى اللون الأبيض لنرى الشكل الدقيق الذي أظهرته لك.

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

لا تتردد في التعليق هنا إذا واجهت أي مشكلة. سأرشدك لتخصيص الرسوم المتحركة المتحركة لصورة BG المتحركة.

الأسئلة المتداولة