استخدام الرسوم المتحركة للشرائح Divi لإظهار تقدم العملية

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

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

اليوم ، سنقوم بمعالجة القسم 5 الذي يستخدم رسومًا متحركة رائعة لعرض أربع وحدات Blurb Modules مذهلة. يكمل توقيت الرسوم المتحركة الدعائية خطوة بخطوة حقًا العملية خطوة بخطوة التي يتم فيها استخدام الدعاية المغلوطة.

دعنا نتعمق!

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

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

الشيء الوحيد الذي تحتاجه حقًا لهذا البرنامج التعليمي هو رموز الصور 4207 × 188 المستخدمة لوحدات Blurb Modules. ها هي الصور التي سأستخدمها.

استخدام الرسوم المتحركة للشرائح Divi لإظهار تقدم العملية

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

قسم البناء 5

باستخدام Visual Builder ، أضف قسمًا عاديًا (ضمن القسم 4 إذا كنت تتابع السلسلة). قبل أن تفعل أي شيء آخر ، أضف لون الخلفية # f5f9fc إلى قسمك واحفظ إعداداتك.

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

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

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

المحتوى: "الإعداد"

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

خط النص: غامق (B) ، أحرف كبيرة (TT)
حجم خط النص: 15 بكسل
لون نص النص: # 6a8091
تباعد حروف النص: 5 بكسل
ارتفاع خط النص: 1.9em
اتجاه النص: الوسط

التباعد: 20 بكسل في الأسفل

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

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

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

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

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

<h1>Say Hello to DIVI</h1>

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

خط الرأس: غامق (B)
محاذاة نص الرأس: الوسط
حجم خط الرأس: 39 بكسل
لون نص الرأس: # 2f3a54

ملاحظة: نظرًا لأن هذا هو رأس h1 ، فنحن بحاجة إلى تحرير إعدادات نص الرأس.

العرض: 600 بكسل (اكتب هذه القيمة)
محاذاة الوحدة: مركز
الهامش المخصص: 20 بكسل للأسفل

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

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

تصميم الدعاية الأربعة

نحن الآن جاهزون لإضافة وحدات Blurb Modules الخاصة بنا. أولاً ، قم بإنشاء صف بهيكل من أربعة أعمدة (1/4 1/4 1/4 1/4).

قم بإضافة نموذج Blurb Module إلى العمود الأول (أقصى اليسار).

ثم قم بتحديث إعدادات Blurb.

ضمن علامة التبويب "المحتوى" ...
أضف html التالي في علامة تبويب النص في Content Box:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p>
<p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>

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

عنوان URL: [أدخل عنوان url]
الصورة: [أدخل صورتك 207 × 188]
لون الخلفية: #ffffff

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

اتجاه النص: الوسط

خط الرأس: افتراضي ، غامق (B) ، أحرف كبيرة (TT)
لون نص الرأس: # 7969f4
تباعد حرف الرأس: 3 بكسل
ارتفاع خط الرأس: 3em

لون النص الأساسي: # 6a8091
ارتفاع خط الجسم: 1.9em

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

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: لأعلى
مدة الرسوم المتحركة: 700 مللي ثانية
كثافة الرسوم المتحركة: 4٪
صورة / أيقونة متحركة: لا توجد رسوم متحركة

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

أضف CSS المخصص التالي في المربع Main Element:

border-radius: 6px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);

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

الآن بعد أن أكملت إعلانًا دعاية إعلانيًا واحدًا ، يمكننا استخدامه كنموذج للدعاية الثلاثية التالية.

انطلق وانقر بزر الماوس الأيمن على الوحدة وحدد وحدة النسخ. ثم الصق (ctrl + v) الوحدة في كل من الأعمدة الثلاثة المتبقية.

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

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

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

العنوان: الخطوة 2
المحتوى: [تحديث النص وعنوان url اليدوي للرابط]
عنوان Url: [تحديث عنوان url للدعاية المبتكرة]
الصورة: [أضف صورة جديدة 207 × 188]

ضمن علامة التبويب "تصميم" ...
لون نص الرأس: # e944ff
تأخير الرسوم المتحركة: 50 مللي ثانية
كثافة الرسوم المتحركة: 12٪

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

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

العنوان: الخطوة 3
المحتوى: [تحديث النص وعنوان url اليدوي للرابط]
عنوان Url: [تحديث عنوان url للدعاية المبتكرة]
الصورة: [أضف صورة جديدة 207 × 188]

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

لون نص العنوان: # 3ebaef
تأخير الرسوم المتحركة: 100 مللي ثانية
كثافة الرسوم المتحركة: 20٪

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

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

العنوان: الخطوة 4
المحتوى: [تحديث النص وعنوان url اليدوي للرابط]
عنوان Url: [تحديث عنوان url للدعاية المبتكرة]
الصورة: [أضف صورة جديدة 207 × 188]

ضمن علامة التبويب "تصميم" ...
لون نص الرأس: # 95d624
تأخير الرسوم المتحركة: 150 مللي ثانية
كثافة الرسوم المتحركة: 30٪

بمجرد قيامك بتحديث جميع دعاية Blurbs الخاصة بك ، فلنقم بتحديث إعدادات الصف على النحو التالي:

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

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

نمط الرسوم المتحركة: تكبير
مدة الرسوم المتحركة: 700 مللي ثانية
بدء تعتيم الرسوم المتحركة: 100٪

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

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

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

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

يتمتع!

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

تغليف

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

قادم

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

حتى المرة القادمة!

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