قم بتنزيل قسم بطل الرسوم المتحركة الملون الملون مجانًا لـ Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط قسم The Spatter Animation Hero مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

خلفية متدرجة

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

• اللون 1: # 070a49
• اللون 2: # 6f00f7
• نوع التدرج: خطي
• اتجاه التدرج: 148 درجة

تحجيم

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

• ارتفاع الحد الأدنى: 100vh

تباعد

نقوم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

الرؤية

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف الصف رقم 1

هيكل العمود

بمجرد أن تصبح إعدادات القسم في مكانها الصحيح ، أضف الصف الأول باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف واسمح للصف بلمس كلا الجانبين الأيسر والأيمن من حاوية القسم عن طريق تعديل إعدادات التحجيم على النحو التالي:

• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

العنصر الرئيسي CSS

وللتأكد من ظهور الوحدات النمطية بجانب بعضها البعض على شاشات أصغر حجمًا ، سنضيف سطرًا واحدًا من كود CSS إلى العنصر الرئيسي للصف.

display: flex;

العمود 1 للرسوم المتحركة

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

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: المركز
• كثافة الرسوم المتحركة: 100٪

العمود 2 للرسوم المتحركة

أضف الرسوم المتحركة إلى العمود الثاني التالي.

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: المركز
• تأخير الرسوم المتحركة: 250 مللي ثانية
• كثافة الرسوم المتحركة: 100٪

العمود 3 للرسوم المتحركة

ونستخدم الرسوم المتحركة للعمود الثالث أيضًا.

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: المركز
• تأخير الرسوم المتحركة: 500 مللي ثانية
• كثافة الرسوم المتحركة: 100٪

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

تحميل صورة ترشيش

حان الوقت لإضافة وحدات نمطية ، بدءًا من وحدة Image Module في العمود 1. قم بتحميل صورة Spatter التي يمكنك العثور عليها في مجلد التنزيل الذي تمكنت من تنزيله في بداية هذا البرنامج التعليمي.

تحجيم

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

• فرض عرض كامل: نعم

المرشحات

بعد ذلك ، قم بتغيير ألوان الوحدة باستخدام إعدادات المرشحات.

• هوى: 303deg
• التشبع: 200٪

مقياس التحويل

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

• القاع: 150٪
• اليمين: 150٪

تأثير التمرير الرأسي للحركة

بعد ذلك ، انتقل إلى علامة التبويب المتقدمة وقم بتمكين بعض الحركة العمودية.

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 0
• تعويض متوسط:
  • سطح المكتب: 0 (بنسبة 50٪)
  • الكمبيوتر اللوحي: 0 (بنسبة 70٪)
  • الهاتف: 0 (بنسبة 85٪)
• إزاحة النهاية: 2
• مشغل تأثير الحركة: الجزء السفلي من العنصر

تأثير التمرير الأفقي للحركة

نحن نستخدم بعض الحركة الأفقية أيضًا.

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة:
  • سطح المكتب: -10
  • الجهاز اللوحي والهاتف: 0
• الإزاحة المتوسطة: 0
• إزاحة النهاية: 4
• مشغل تأثير الحركة: الجزء السفلي من العنصر

تحجيم تأثير التمرير لأعلى ولأسفل

جنبًا إلى جنب مع تأثير التصغير والتصغير.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 100٪
• مقياس متوسط: 150٪
• مقياس النهاية: 200٪
• مشغل تأثير الحركة: الجزء السفلي من العنصر

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

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

تغيير وحدة الصورة في العمود 2

تباعد

افتح وحدة الصورة في العمود 2 وأضف بعض الهامش العلوي على الجهاز اللوحي والهاتف.

• الهامش العلوي: 50٪ (الجهاز اللوحي والهاتف فقط)

المرشحات

قم بتغيير اللون في إعدادات المرشحات أيضًا.

• هوى: 55 درجة

تغيير وحدة الصورة في العمود 3

المرشحات

بعد ذلك ، افتح وحدة الصورة في العمود الثالث وقم بتغيير إعدادات المرشحات وفقًا لذلك:

• هوى: 309 درجة
• السطوع: 0٪

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي. استخدم هيكل العمود التالي:

موقع

افتح إعدادات الصف وقم بتغيير إعدادات موضع الصف في علامة التبويب خيارات متقدمة.

• الموقف: مطلق
• الموقع: المركز

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

أضف محتوى H1

حان الوقت لإضافة وحدات ، بدءًا من وحدة نصية تحتوي على بعض محتوى H1 من اختيارك.

إعدادات نص H1

قم بتغيير إعدادات نص H1 للوحدة كما يلي:

• خط العنوان: روبيك
• لون نص العنوان: #ffffff
• حجم نص العنوان: 80 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 35 بكسل (هاتف)

• طول ظل نص العنوان العمودي: 0.08em
• نص العنوان قوة تمويه الظل: 0em
• لون ظل نص العنوان: # 1a005b

أضف وحدة نصية رقم 2 إلى العمود

إضافة محتوى

ثم أضف وحدة نصية أخرى مع بعض محتوى الوصف.

إعدادات النص

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

• خط النص: مولي
• لون النص: #dddddd
• حجم النص: 15 بكسل (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• ارتفاع خط النص: 2.1em

• لون ظل النص: # 1a005b

تحجيم

قم بتعديل عرض الوحدة بعد ذلك.

• العرض: 60٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

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

• الهامش العلوي: 6٪ (كمبيوتر مكتبي) ، 10٪ (جهاز لوحي) ، 14٪ (هاتف)
• الهامش السفلي: 6٪ (كمبيوتر مكتبي) ، 10٪ (جهاز لوحي) ، 14٪ (هاتف)

أضف وحدة الزر إلى العمود

أضف نسخة

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

إعدادات الزر

بعد ذلك ، انتقل إلى علامة تبويب التصميم وحدد الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 17 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # ea01a6
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل

• خط الزر: Rubik
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

تباعد

أضف بعض قيم الحشو المخصصة في إعدادات التباعد أيضًا.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل
• الحشوة اليسرى: 60 بكسل
• الحشوة اليمنى: 60 بكسل

مربع الظل

وأكمل إعدادات الوحدة بإضافة ظل الصندوق.

• مربع الظل الأفقي: 5 بكسل
• مربع الظل الرأسي: 5 بكسل
• لون الظل: # 30005 ب

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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