استخدام الرسوم المتحركة لديفي لتعويم وترتد الصورة

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

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

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

هيا بنا نبدأ.

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

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

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

الصورة الخلفية

صورة بطاقة الوصفة # 1

صورة بطاقة الوصفة # 2

صورة بطاقة الوصفة # 3

استخدام الرسوم المتحركة لديفي لتعويم وترتد الصورة

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

قسم البناء 8

قبل أن نبدأ عملية البناء ، إليك لمحة عن عرض الإطار الشبكي لتخطيط القسم الذي سننشئه باستخدام المنشئ المرئي.

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

تحديث إعدادات الصف

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

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

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

مساحة العمود 1 المخصصة: 6٪ على اليمين
مساحة العمود 3 المخصصة: اليسار 8٪

أضف خلفية إلى القسم الخاص بك

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

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

صورة الخلفية: [أدخل صورة 1280 × 936]
استخدام طريقة المنظر: نعم
طريقة المنظر: المنظر الحقيقي

أضف الصورة رقم 1

نقرأ الآن لإضافة وحداتنا إلى صفنا. في العمود الأول (الأيسر) ، أضف وحدة صورة.

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

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

عنوان URL للصورة: [أدخل صورة بطاقة الوصفة # 1]

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

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

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

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

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

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(2px) opacity(.75);

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

أضف وحدتي نص في العمود الأوسط

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

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

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

<h1>The Best Recipes for Success</h1>

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

خط الرأس: عرض Playfair ، غامق (B)
حجم خط الرأس: 60 بكسل
ارتفاع خط الرأس: 1.3em

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

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

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

أضف وحدة نصية أخرى ضمن الوحدة التي أنشأتها للتو وقم بتحديث الإعدادات على النحو التالي:

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

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

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

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

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

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

أضف الصورة رقم 2

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

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

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

عنوان URL للصورة: [أدخل صورة البطاقة رقم 2]

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

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

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

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

سنقوم هنا بإضافة CSS مخصص (على غرار صورة البطاقة الأولى باستثناء بدون تأثير التمويه) لإعطاء صورة البطاقة حافة مستديرة وظل مربع. أدخل CSS التالي في مربع العناصر الرئيسية:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);

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

أضف الصورة # 3

دعنا نضيف صورة البطاقة الثالثة والأخيرة إلى العمود الثالث (أو الأيمن) عن طريق إدخال وحدة صورة:

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

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

عنوان URL للصورة: [أدخل صورة البطاقة رقم 3]

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

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

الهامش المخصص: 20٪ أعلى

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

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

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

أضف CSS المخصص هذا في مربع العنصر الرئيسي:

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(8px) opacity(.4);

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

رائعة! بهذا ينتهي القسم 8 من صفحتنا التجريبية. تحقق من النتيجة النهائية.

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

قسم البناء 9 من العرض التوضيحي

في القسم الأخير ، سننشئ قسمًا بسيطًا لـ "فريقنا" مع القليل من الرسوم المتحركة التي "تنبثق" حرفيًا. هذا ما سنبنيه:

فيما يلي لمحة عن التخطيط من عرض الإطار السلكي.

أضف عنوان القسم

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

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

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

المحتوى: فريقنا

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

خط النص: Raleway ، Bold (B) ، Uppercase (TT)
حجم خط النص: 15 بكسل
لون نص النص: rgba (0،0،0،0.32)
تباعد حروف النص: 5 بكسل
ارتفاع خط النص: 1.9em

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

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأعلى
مدة الرسوم المتحركة: 500 مللي ثانية
تأخير الرسوم المتحركة: 1000 مللي ثانية

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

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

أضف وحدة نصية أخرى ضمن الوحدة التي أنشأتها للتو وقم بتحديث الإعدادات على النحو التالي:

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

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

<h1>Highly Skilled Ninjas</h1>

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

خط الرأس: Raleway Light
محاذاة نص الرأس: الوسط
حجم خط الرأس: 48 بكسل
لون نص الرأس: # 3a3830
ارتفاع خط الرأس: 1.3em

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

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

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

الآن لإضافة خط الفاصل الأخضر الصغير ، أضف وحدة Divider Module أسفل وحدة النص.

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

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

إظهار الحاجز: نعم

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

اللون: # 7cda24

وزن الحاجز: 3 بكسل
الارتفاع: 3 بكسل
العرض: 60 بكسل (اكتب هذا)
محاذاة الوحدة: المركز

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأسفل
مدة الرسوم المتحركة: 500 مللي ثانية
تأخير الرسوم المتحركة: 1000 مللي ثانية
كثافة الرسوم المتحركة: 200٪

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

اضافة صور الفريق الاربعة

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

أضف وحدة نمطية للشخص في العمود الأول وقم بتحديث الإعدادات على النحو التالي:

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

الاسم: نيك
عنوان URL للصورة: [أدخل صورتك مقاس 150 × 150]

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

خط الرأس: Raleway Light ، Bold (B) ، Uppercase (TT)
حجم خط الرأس: 13 بكسل
لون نص الرأس: rgba (0،0،0،0.71)
تباعد حرف الرأس: 3 بكسل

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

أضف CSS التالي في مربع صورة العضو:

border-radius: 100%;
overflow: hidden;
width: 180px;
margin: auto auto 20px auto;

هذا سيعطي صورتنا حدود دائرية جميلة.

أضف CSS المخصص التالي إلى وصف العضو:

text-align: center;
display: block;

هذا يوسيط الاسم.

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

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

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

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

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

الحشو المخصص: 60 بكسل أعلى

نمط الرسوم المتحركة: ترتد
مدة الرسوم المتحركة: 700 مللي ثانية
تأخير الرسوم المتحركة: 1000 مللي ثانية

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

اختتام المسلسل

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

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

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

يتمتع!

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

هتافات!