كيفية تعزيز CTA الخاص بك مع تأثير التمرير "Winning Spin"

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

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

هيا بنا نبدأ.

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

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

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. حدد الخيار "اختيار تخطيط Premade".
   
4. حدد تخطيط الصفحة الرئيسية للمخابز وانقر لاستخدام التخطيط.
   

بعد ذلك ، ستكون جاهزًا لبدء إنشاء CTA بتأثير تمرير "الفوز بالدوران" في Divi.

الجزء 1: إنشاء تأثير التمرير "Winning Spin"

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

أضف المقطع والصف والأعمدة

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

داخل القسم ، أضف صفًا من عمودين.

إعدادات الصف

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

• عرض الحضيض: 1
• العرض: 94٪
• الحشو: 10 بكسل للأعلى ، 10 بكسل للأسفل
• عرض الحدود: 1 بكسل
• لون الحدود: rgba (0،0،0،0.12)

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

display:flex;
align-items: center;

العمود 1 الحدود

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

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: rgba (0،0،0،0.12)

إنشاء Spinner Arrow and Text باستخدام وحدة blurb

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

أضف الوحدة النمطية Blurb

أضف وحدة دعاية دعاية جديدة إلى العمود الأيسر.

محتوى دعاية

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

• العنوان: لقد ربحت أ
• الرمز: السهم الأيمن (انظر لقطة الشاشة)

تصميم دعاية

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

• لون الأيقونة: # a06d51
• وضع الصورة / الرمز: اليسار
• حجم خط الرمز: 80 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• خط العنوان: باتوا وان
• وزن خط العنوان: غامق
• حجم نص العنوان: 40 بكسل (سطح المكتب) ، 25 بكسل (جهاز لوحي) ، 20 بكسل (هاتف)
• تباعد حروف العنوان: 1 بكسل
• ارتفاع خط العنوان: 2em

Blurb Custom CSS

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

direction: rtl !important;

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

padding-bottom: 0px

إنشاء اختيارات الجائزة مع دعاية متعددة

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

إنشاء النبذة 1

لإنشاء أول دعاية دعاية في العمود 2 ، قم بتكرار الدعاية المغلوطة من العمود 1 واسحبه إلى العمود 2.

افتح إعدادات الدعاية المكررة في العمود 2 وأخرج CSS المخصص للعنصر الرئيسي:

سيؤدي هذا إلى إعادة الرمز الخاص بنا إلى اليسار.

تحديث العنوان والصورة

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

• العنوان: ملف تعريف الارتباط المجاني!
• الصورة: تحميل الصورة (حوالي 100 × 100 بكسل)

دعاية تصميم 1

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

• عرض الصورة: 80 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• عرض المحتوى: 92٪
• العرض: 100٪

أصل التحويل

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

قم بتحديث أصل التحويل للدعاية الدعائية كما يلي:

• أصل التحويل: يمين الوسط

يجب عليك إخراج الرسوم المتحركة للصورة / الأيقونة أيضًا.

الموقف المطلق

ضمن علامة التبويب "خيارات متقدمة" ، قم بإعطاء الدعاية المغامرة والموضع المطلق كما يلي:

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

إنشاء Blurb 2

لإنشاء الدعاية الدعائية الثانية ، قم بتكرار دعاية دعاية مغالى فيها 1.

الدلائل النبوية الدوارة 2

ثم أضف دوران التحويل كما يلي:

• تحويل دوران المحور Z: 25 درجة

ستلاحظ أن الدعاية المغلوطة قد تم تدويرها الآن خارج منطقة عرض الصف.

إنشاء دعاية مغالى فيها وتدويرها 3

لإنشاء دعاية دعاية ثالثة ، قم بتكرار دعاية دعاية 2. ثم قم بتحديث دوران التحويل على النحو التالي:

• تحويل دوران المحور Z: 50 درجة

إنشاء ودوران دعاية 4

لإنشاء إعلان دعاية رابع ، قم بتكرار 3. ثم قم بتحديث دوران التحويل على النحو التالي:

• تحويل دوران المحور Z: 75 درجة

تحديث عنوان النبذة والصور

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

عمود دوران التمرير

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

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

• أصل التحويل: يمين الوسط

ضمن علامة التبويب خيارات متقدمة ، افتح علامة تبويب تأثير التمرير الدوار وقم بتحديث ما يلي:

• تمكين التدوير: نعم
• بدء الدوران: -75٪ (عند 15٪)

ثم قم بتحديث مشغل تأثير الحركة إلى "Top of Element".

تحديث الصف مع تجاوز مخفي

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

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

الجزء 2: إنشاء CTA للجائزة

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

أضف الصف

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

أضف وحدة نصية

لإضافة محتوى CTA الخاص بنا ، سنقوم بنسخ وحدة نصية من التخطيط المسبق على الصفحة. ابحث عن وحدة النص وانسخها بعنوان "تسوق عبر الإنترنت".

ثم الصقه في الصف الذي أنشأته للتو.

تصميم نصي

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

• خط النص: PT Sans
• وزن خط النص: غامق
• حجم نص النص: 16 بكسل
• ارتفاع خط النص: 2em
• محاذاة النص: الوسط

أضف زر الحث على الشراء

بعد ذلك ، ابحث عن الزر الموجود أعلى تخطيط premade وانسخه.

ثم الصقها مباشرة أسفل وحدة النص.

تأثير تمرير الصف

لإظهار CTA بعد تحديد "الدوران الرابح" للجائزة ، افتح إعدادات الصف وقم بتحديث تأثير التمرير التالي:

تحت علامة تبويب الدخول والخروج ...

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 0٪ (عند 50٪)
• عتامة متوسطة: 100٪ (عند 55٪)

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

افكار اخيرة

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

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

هتافات!