8 الرسوم المتحركة للأزرار المؤجلة للحث على اتخاذ إجراء Divi المخصص الخاص بك

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة خاطفة على الرسوم المتحركة للأزرار المؤجلة الثمانية التي سنضيفها إلى رأس CTA المخصص في Divi:

قم بتنزيل مخطط الرسوم المتحركة لأزرار الرأس المؤجلة الثمانية مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى تثبيت وتفعيل Divi Theme. تأكد من أن لديك أحدث إصدار من Divi.

ستحتاج إلى تنزيل حزمة Second Theme Builder Pack لأننا سنستخدم الرأس المخصص في قالب صفحة 404 من تلك الحزمة لهذا البرنامج التعليمي.

بعد ذلك ، أنت على استعداد للذهاب.

استيراد القالب من Second Theme Builder Pack

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ضمن أداة إنشاء السمات ، حدد رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة. في نافذة قابلية النقل المنبثقة ، حدد علامة التبويب استيراد ، واختر ملف theme-builder-pack-2-404-page-template.json وانقر فوق زر الاستيراد. (سيكون ملف الاستيراد هذا داخل مجلد Second Theme Builder Pack)

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

بعد استيراد القالب ، انقر فوق الرمز لتحرير منطقة الرأس المخصصة.

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

8 رسوم متحركة للأزرار المتأخرة للحث على اتخاذ إجراء مخصص لرأسك

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

ها هم…

# 1 المنسدلة ترتد

إعدادات الزر:

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

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

# 2 قلب عمودي ثلاثي الأبعاد

لإنشاء الرسوم المتحركة ثلاثية الأبعاد للزر العمودي المتأخر ، يجب عليك أولاً إضافة خاصية المنظور إلى العمود الأصل للزر (العمود 2).

إعدادات العمود

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

perspective: 150px

إعدادات الزر:

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

# 3 قلب أفقي ثلاثي الأبعاد

الرسوم المتحركة لزر الانقلاب الأفقي ثلاثي الأبعاد المتأخر مشابهة للانعكاس العمودي. الاختلاف الحقيقي الوحيد هو اتجاه الرسوم المتحركة.

إعدادات العمود:

أولاً ، تأكد من إضافة المنظور إلى العمود 2 عن طريق إضافة CSS المخصص التالي إلى العنصر الرئيسي:

perspective: 150px

إعدادات الزر:

افتح إعدادات وحدة الزر وقم بتحديث ما يلي:

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

يعمل هذا على التأكد من أن الانعكاس الأفقي يتم توسيطه مع خاصية المنظور الأصلية.

• نمط الرسوم المتحركة: أضعاف
• اتجاه الرسوم المتحركة: المركز
• مدة الرسوم المتحركة: 1000 مللي ثانية
• تأخير الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 400٪
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: خطي

# 4 المنسدلة Bounce + 3D Vertical Flip

يتم إنجاز هذه الرسوم المتحركة للأزرار المؤجلة من خلال الجمع بين رسم متحرك للارتداد (يُضاف إلى العمود) وقلب حركة (يُضاف إلى الزر).

إليك كيفية بنائه.

إعدادات العمود:

افتح إعدادات الصف ، وقم بتحديث إعدادات العمود 2 بما يلي:

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

ثم أضف منظور css إلى العنصر الرئيسي كما يلي:

perspective: 150px;

إعدادات الزر:

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

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

الحيلة هنا هي التأكد من تأخير عملية الانقلاب للبدء بعد اكتمال حركة العمود.

# 5 انقض لأسفل (اسحب لأسفل + تدوير)

للحصول على الرسوم المتحركة "الانقضاض لأسفل" لهذه الحركة التالية ، سنحتاج إلى دمج رسم متحرك للشريحة (يُضاف إلى العمود) ورسم متحرك (يضاف إلى الزر).

لنفعلها.

إعدادات العمود:

افتح إعدادات الصف وقم بتحديث إعدادات العمود 2 على النحو التالي:

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

ثم أضف css المخصص التالي إلى العنصر الرئيسي:

perspective: 150px

إعدادات الزر:

ثم قم بتحديث إعدادات الزر على النحو التالي:

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

# 6 تكبير (تكبير + مقياس تحويل)

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

هيريس كيفية القيام بذلك.

إعدادات الزر:

افتح إعدادات وحدة الزر وقم بتحديث ما يلي:

• مقياس التحويل: 175٪
• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: المركز
• مدة الرسوم المتحركة: 1500 مللي ثانية
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪

# 7 نبضة (تكبير + تصغير)

يتم إنشاء حركة النبض المؤجلة هذه من خلال الجمع بين رسم متحرك للتصغير (يضاف إلى العمود) وتكبير في الرسوم المتحركة (يضاف إلى الزر).

لنفعلها.

إعدادات العمود:

افتح إعدادات الصف وقم بتحديث إعدادات العمود 2 على النحو التالي:

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

لاحظ أننا أضفنا قيمة سالبة (-100٪) لكثافة الرسوم المتحركة. يؤدي هذا إلى أن يكون للعمود تأثير معاكس مما يؤدي إلى تقليص العمود / الزر (أو التصغير).

إعدادات الزر:

ثم قم بتحديث إعدادات الزر على النحو التالي:

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

لاحظ أنه تم تعيين تأخير الرسم المتحرك ليحدث 1000 مللي ثانية قبل حركة العمود بحيث يتم تكبير الزر قبل تصغيره.

# 8 حلزوني (انزلق إلى اليسار + تدور)

تجمع هذه الرسوم المتحركة النهائية للزر المؤجل بين رسم متحرك للشريحة (تمت إضافته إلى العمود) ورسم حركة انعكاس 720 درجة (يُضاف إلى الزر).

هيريس كيفية القيام بذلك.

إعدادات العمود:

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

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

إعدادات الزر:

ثم قم بتحديث إعدادات وحدة الزر على النحو التالي:

• نمط الرسوم المتحركة: قلب
• اتجاه الرسوم المتحركة: المركز
• مدة الرسوم المتحركة: 2000 مللي ثانية
• تأخير الرسوم المتحركة: 2000 مللي ثانية
• كثافة الرسوم المتحركة: 800٪
• بدء تعتيم الرسوم المتحركة: 100٪

لاحظ هنا أن كثافة الرسوم المتحركة مضبوطة على 800٪. سيؤدي هذا إلى قلب الزر ثلاث مرات لإنشاء تأثير الدوران.

النتائج النهائية

دعنا نلقي نظرة أخيرة على الرسوم المتحركة للأزرار الثمانية المتأخرة.

افكار اخيرة

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

هل لديك مفضل؟

أتطلع إلى الاستماع منك في التعليقات.

هتافات!