كيفية إنشاء ألوان خلفية متحركة باستخدام Divi

يمكن لخيارات الرسوم المتحركة لـ Divi أن تحول بسرعة صفحة جميلة بالفعل إلى صفحة جذابة أيضًا. الآن ، اعتدنا جميعًا على الرسوم المتحركة المختلفة المضمنة في عناصر التصميم المختلفة التي توفرها لك Divi. لكن هل تعلم أنه يمكنك استخدام هذه الرسوم المتحركة لتسليط الضوء على خيار تصميم معين أيضًا؟

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل مخطط لون الخلفية المتحرك مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لنبدأ في إعادة التكوين!

اشترك في قناتنا على اليوتيوب

إضافة قسم جديد

تباعد

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

• الحشوة العلوية: 5vw
• الحشوة السفلية: 17vw

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واسمح للصف باحتلال عرض الشاشة بالكامل.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

أضف وحدة Divider Module # 1 إلى العمود

الرؤية

حان الوقت لبدء إضافة الوحدات المختلفة التي نحتاجها ، بدءًا من وحدة Divider. سيتم استخدام وحدة Divider Module هذه للحصول على لون الخلفية وحجمها ورسومها المتحركة. تأكد من تعطيل خيار "إظهار الحاجز".

• إظهار الحاجز:

لون الخلفية

انتقل إلى إعدادات الخلفية وأضف لون الخلفية التالي:

• لون الخلفية: # 212121

تباعد

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

• الحشو العلوي: 30vh
• الحشوة السفلية: 30vh

حيوية

نحن نسمح بتحريك لون الخلفية عن طريق إضافة رسوم متحركة مخصصة مع تأخير للرسوم المتحركة.

• نمط الرسوم المتحركة: شريحة
• كرر الرسوم المتحركة: مرة واحدة
• اتجاه الرسوم المتحركة: صحيح
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• كثافة الرسوم المتحركة: 88٪
• بدء تعتيم الرسوم المتحركة: 100٪

أضف وحدة نصية # 1 إلى العمود

إضافة محتوى

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

إعدادات النص

بعد ذلك ، انتقل إلى إعدادات النص وقم بتعديل القيم وفقًا لذلك:

• خط النص: Didact Gothic
• لون النص: #ffffff
• حجم النص: 1.1vw (سطح المكتب) ، 1.7vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 2.1em
• اتجاه النص: ضبط

إعدادات نص العنوان الافتراضي 2

قم بإجراء بعض التغييرات على إعدادات نص H2 بعد ذلك.

• خط العنوان 2: Abril Fatface
• لون نص العنوان 2: # 1c1c1c
• حجم نص العنوان 2: 3vw (سطح المكتب) ، 5vw (جهاز لوحي) ، 7vw (هاتف)
• ارتفاع خط العنوان 2: 1.8em

تحوم فوق إعدادات نص العنوان 2

نقوم أيضًا بتعديل لون النص عند التمرير.

• لون نص العنوان 2: #ffffff

استنساخ كلتا الوحدتين

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

تعديل Divider Module Duplicate

تغيير لون الخلفية

افتح وحدة Divider Module المكررة وقم بتغيير لون الخلفية.

• لون الخلفية: # 0bbfa1

تغيير الرسوم المتحركة

لإظهار الرسوم المتحركة في الخلفية من الجانب الآخر ، نقوم بتغيير اتجاه الرسوم المتحركة. سنضيف أيضًا تأخيرًا للرسوم المتحركة أعلى قليلاً لتحقيق النتيجة المرجوة.

• اتجاه الرسوم المتحركة: يسار
• تأخير الرسوم المتحركة: 1500 مللي ثانية

تعديل وحدة النص مكررة

تغيير المحتوى

تابع عن طريق فتح وحدة النص المكررة وتغيير المحتوى.

تغيير إعدادات نص العنوان 2

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات نص H2 أيضًا.

• العنوان 2 محاذاة النص: اليمين
• لون نص العنوان 2: # 0cc9ad

وضع الحاجز

وحدة المقسم # 1

للسماح لبعض المساحة البيضاء بالظهور على الجانب الأيمن من وحدة Divider الأولى ، سنضيف بعض الهامش الأيمن باستخدام وحدة عرض منفذ العرض.

• الهامش الأيمن: 20vw

وحدة المقسم # 2

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

• الهامش العلوي: 2vw
• الهامش الأيسر: 20vw

أضف تداخلات

وحدة النص # 1

الآن بعد أن قمنا بتخصيص جميع الوحدات في صفنا ، يمكننا البدء في إنشاء التداخلات ، بدءًا من الوحدة النمطية الأولى للنص. أضف قيم الهامش المخصصة التالية إلى إعدادات التباعد للوحدة النمطية:

• الهامش العلوي: -49vh
• الهامش الأيمن: 20vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 10vw (هاتف)

وحدة النص # 2

استخدم قيم الهامش المخصصة التالية لوحدة النص المكررة أيضًا:

• الهامش العلوي: -49vh
• الهامش الأيسر: 20vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 10vw (هاتف)

قم بإنهاء Visual Builder لعرض النتيجة

بمجرد إنشاء التداخلات ، ستحتاج إلى الخروج من Visual Builder لعرض النتيجة!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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