استخدام الرسوم المتحركة الطية لديفي لجعل الدعاية المغروسة تتفتح

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

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

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

دعنا نتعمق!

فيما يلي نظرة خاطفة سريعة على ما سنبنيه في منشور اليوم

استخدام الرسوم المتحركة الطية لديفي لجعل الدعاية المغروسة تتفتح

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

قسم البناء 6

إضافة وتخصيص القسم الخاص بك

باستخدام Visual Builder ، لنبدأ بإضافة قسم عادي آخر إلى تخطيطنا. ثم أضف صفًا من ثلاثة أعمدة (نصف ربع وربع وربع) إلى القسم الخاص بك.

قبل أن نضيف الوحدة الأولى ، انتقل إلى إعدادات القسم وقم بتحديث ما يلي:

ضمن علامة التبويب "المحتوى" ...

لون الخلفية: # 00252d

ضمن علامة التبويب "تصميم" ...

الحشو المخصص: 80 بكسل للأعلى ، 80 بكسل للأسفل

احفظ التغييرات

إضافة رأس باستخدام وحدة النص

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

ضمن علامة التبويب "المحتوى" ...

أضف رأس h1 التالي في علامة تبويب النص في مربع المحتوى:

<h1>Build Like You Mean It</h1>

ضمن علامة التبويب "تصميم" ...

خط الرأس: لاتو ، غامق (B)
حجم خط الرأس: 38 بكسل
لون نص الرأس: #ffffff
ارتفاع خط الرأس: 1.3em

الهامش المخصص: 20 بكسل للأسفل

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: يسار
كثافة الرسوم المتحركة: 16٪

احفظ التغييرات

أضف نصًا باستخدام وحدة نصية أخرى

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

ضمن علامة التبويب "المحتوى" ...

المحتوى: "Lorem ipsum dolor sit amet، consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus، sagittis mi id، efficitur nisl. Sed nec purus tempus ، sagittis mi id ، efficitur nisl. "

ضمن علامة التبويب "تصميم" ...

لون النص: فاتح
حجم خط النص: 18 بكسل
لون نص النص: rgba (255،255،255،0.66)
ارتفاع خط النص: 1.9em
الهامش المخصص: 40 بكسل للأسفل

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: يسار
كثافة الرسوم المتحركة: 8٪

احفظ التغييرات

أضف زرًا

الآن دعنا نضيف وحدة زر أسفل الوحدتين النصيتين في العمود الأيسر. ثم قم بتحديث الإعدادات كما يلي:

ضمن علامة التبويب "المحتوى" ...

نص Buttom: تنزيل الكل
عنوان URL للزر [أدخل عنوان url]

ضمن علامة التبويب "تصميم" ...

استخدام الأنماط المخصصة للزر: نعم

حجم نص الزر: 15 بكسل
لون نص الزر: # 01254c
لون خلفية الزر: # ffcd1c
عرض حد الزر: 0 بكسل
نصف قطر حدود الزر: 65 بكسل
تباعد حرف الزر: 1 بكسل
خط الزر: غامق (B) ، وأحرف كبيرة (TT)

الحشو المخصص: 10 بكسل أعلى ، 30 بكسل يمين ، 10 بكسل أسفل ، 30 بكسل يسار

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: يسار
كثافة الرسوم المتحركة: 16٪

دعونا لا ننسى إضافة تأثير التوهج الرائع هذا باستخدام خاصية box shadow css. ابحث عن مربع العنصر الرئيسي ضمن CSS المخصص وأضف ما يلي:

box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

احفظ التغييرات

أضفك الوحدة النمطية الأولى دعاية

هذا كل شيء لعمودنا الأيسر. الآن دعنا نضيف Blurb Module إلى العمود الأوسط (وهو أول عمود من رابع).

قم بتحديث الإعدادات كما يلي:

ضمن علامة التبويب "المحتوى" ...

العنوان: Divi
استخدام الأيقونة: نعم
الرمز: [رمز التحديد]

ألوان تدرج الخلفية: # 8b56ff ، # 5d3dff
نوع التدرج: خطي
اتجاه التدرج: 140 درجة

ضمن علامة التبويب "تصميم" ...

لون الأيقونة: #ffffff
لون النص: فاتح
اتجاه النص: الوسط
خط الرأس: غامق (B) ، أحرف كبيرة (TT)
تباعد حرف الرأس: 10 بكسل

الهامش المخصص: 12٪ سفلي
الحشو المخصص: 40 بكسل أعلى ، 30 بكسل يمين ، 30 بكسل أسفل ، 30 بكسل يسار

نمط الرسوم المتحركة: أضعاف
اتجاه الرسوم المتحركة: يسار
تأخير الرسوم المتحركة: 200 مللي ثانية

ضمن علامة التبويب خيارات متقدمة ...

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

أضف CSS التالي إلى مربع العنصر الرئيسي:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);

أضف CSS التالي إلى مربع Blurb Title:

text-indent: 10px;

احفظ التغييرات

قم بتكرار وحدة Blurb لبناء الدلالات الثلاثة التالية

الآن بعد أن تم تصميم وتحريك أول وحدة Blurb Module لدينا ، يمكننا تكرار الوحدة لإنشاء الدلالات المتبقية.

مرر مؤشر الماوس فوق Blurb Module وانقر فوق رمز الوحدة المكررة. في الوحدة المكررة الجديدة التي تظهر أدناه ، قم بتحديث الإعدادات على النحو التالي:

ضمن علامة التبويب "المحتوى" ...

العنوان: بلوم
الرمز: [حدد رمزًا جديدًا]
ألوان تدرج الخلفية: # ff56f9، # c43dff

ضمن علامة التبويب "تصميم" ...

اتجاه الرسوم المتحركة: لأسفل

ضمن علامة التبويب خيارات متقدمة ...

استبدل CSS في مربع العنصر الرئيسي بما يلي:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);

احفظ التغييرات

قم بعمل نسخة مكررة أخرى من وحدة blurb واسحب تلك النسخة المكررة إلى العمود الأيمن الأقصى. ثم قم بتحديث وحدة Blurb هذه بالإعدادات التالية:

ضمن علامة التبويب "المحتوى" ...

العنوان: إضافي
الرمز: [حدد رمزًا جديدًا]
ألوان التدرج الخلفية: # 56ffda ، # 38d5ea

ضمن علامة التبويب "تصميم" ...

اتجاه الرسوم المتحركة: لأعلى

ضمن علامة التبويب خيارات متقدمة ...

استبدل CSS في مربع العنصر الرئيسي بما يلي:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);

قم بعمل نسخة مكررة أخرى من الوحدة النمطية التي قمت بتحديثها للتو في العمود الأيمن بحيث تظهر أسفلها مباشرةً. ثم قم بتحديث وحدة Blurb هذه بالإعدادات التالية:

ضمن علامة التبويب "المحتوى" ...

العنوان: العاهل
الرمز: [حدد رمزًا جديدًا]
ألوان تدرج الخلفية: # f2743a ، # ff5656

ضمن علامة التبويب "تصميم" ...

اتجاه الرسوم المتحركة: صحيح

ضمن علامة التبويب خيارات متقدمة ...

استبدل CSS في مربع العنصر الرئيسي بما يلي:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);

احفظ التغييرات

الآن دعنا نحصل على التباعد الصحيح عن طريق تحديث إعدادات الصف على النحو التالي:

ضمن علامة التبويب "تصميم" ...

استخدام العرض المخصص: نعم
العرض المخصص: 1366 بكسل
استخدام عرض مزراب مخصص: نعم
عرض المزراب: 2

الحشو المخصص: 80 بكسل أعلى ، 0 بكسل يمين ، 160 بكسل أسفل ، 0 بكسل يسار
Coumn 1 Custom Padding: 140 بكسل أعلى

ابني الصف الثاني

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

أولاً ، دعنا نضيف صفًا جديدًا مكونًا من عمود واحد إلى قسمنا. ثم قم بتحديث إعدادات الصف بما يلي:

استخدام العرض المخصص: نعم
العرض المخصص: 1366 بكسل
استخدام عرض مزراب مخصص: نعم
عرض المزراب: 2

احفظ التغييرات

قم بعد ذلك بنسخ أول وحدة نصية في الصف الأول الذي قمت بإنشائه والذي يحتوي على عنوان h1. ثم قم بتحديث الإعدادات كما يلي:

ضمن علامة التبويب "المحتوى" ...

استبدل علامة h1 الحالية بما يلي:

<h1>Don't Settle for Less</h1>

ضمن علامة التبويب "تصميم" ...

اتجاه النص: الوسط
نمط الرسوم المتحركة: قلب
كثافة الرسوم المتحركة: 70٪

احفظ التغييرات

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

ضمن علامة التبويب "المحتوى" ...

نص الزر: انضم اليوم

ضمن علامة التبويب "تصميم" ...

محاذاة الزر: الوسط

نمط الرسوم المتحركة: قلب
كثافة الرسوم المتحركة: 70٪

احفظ التغييرات

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

ضمن علامة التبويب "تصميم" ...

استخدام عرض مزراب مخصص: نعم
عرض المزراب: 2

احفظ التغييرات

بعد ذلك ، انسخ وحدة Blurb "Divi" الأرجواني من صفك السابق والصقها في العمود الأيسر من صفك الجديد. ثم قم بتحديث الإعدادات التالية:

ضمن علامة التبويب "المحتوى" ...

العنوان: Builder
الرمز: [حدد رمزًا جديدًا]
ألوان تدرج الخلفية: # ff568e ، # ff3d5d

ضمن علامة التبويب خيارات متقدمة ...

استبدل CSS في مربع العنصر الرئيسي بما يلي:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);

احفظ التغييرات

بعد ذلك ، انسخ وحدة blurb "Extra" باللون الأزرق في أعلى العمود الأيمن الأقصى في الصف الأول الذي أنشأته. ثم الصقه في العمود الأيمن من صفك الثالث الجديد.

ثم قم بتحديث إعدادات الدعاية الدعاية كالتالي:

ضمن علامة التبويب "المحتوى" ...

العنوان: سيرين
الرمز: [حدد رمزًا جديدًا]
ألوان التدرج في الخلفية: # 3da4ff ، # 385eea

ضمن علامة التبويب خيارات متقدمة ...

استبدل CSS في مربع العنصر الرئيسي بما يلي:

border-radius: 6px;
box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);

احفظ التغييرات

هذا كل شيء.

المكافأة: قم بتنزيل هذه الأقسام للاستيراد السهل

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

يتمتع!

قم بتنزيل حزمة التخطيط

تنزيل مجاني

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

تحميل

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

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

تأثيرات الرسوم المتحركة الجزء 4 (القسم 1). json

تأثيرات الرسوم المتحركة الجزء 4 (القسم 2). json

انتقل في مسؤول WordPress الخاص بك إلى Divi> مكتبة Divi> استيراد وتصدير. عندما ينبثق شكل قابلية النقل ، انقر فوق علامة التبويب استيراد والزر المسمى اختر ملفًا.

حدد ملف json الذي تفضله وانقر فوق "استيراد تخطيطات Divi Builder". بمجرد اكتمال الاستيراد ، انتقل إلى المنشور أو الصفحة التي ترغب في إضافة أحد الأقسام أعلاه إليها.

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

تغليف

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

قادم

في الجزء الخامس ، سأوضح لك كيفية دمج نمط الرسوم المتحركة Roll بنجاح في الهواتف المحمولة داخل أقسامك.

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!