كيفية تغيير المحتوى على Hover لإنشاء CTAs فريدة في Divi (3 طرق)

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

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

تحقق من ذلك!

نظرة خاطفة

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

# 1 كيفية تغيير المحتوى عند التمرير للأزرار

# 2 كيفية تغيير الخلفيات ومحتوى الجسم في وحدات النص

# 3 كيفية تغيير المحتوى عند التمرير لعناصر متعددة باستخدام وحدة الحث على اتخاذ إجراء

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

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

بعد ذلك ، أنت جاهز لبدء التصميم في Divi.

# 1 كيفية تغيير المحتوى عند التمرير للأزرار

بمجرد أن يتم تحميل تخطيط الصفحة الرئيسية لـ Cake Maker Landing Page إلى صفحتك ، ابحث عن الزر الرئيسي CTA في أعلى رأس الصفحة وافتح إعدادات تصميم وحدة الزر.

تغيير نص الزر عند التمرير

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

نص الزر: "تسوّق الآن"

ثم انشر خيار التمرير لنص الزر وأدخل نص زر الاستبدال ضمن علامة تبويب التمرير على النحو التالي:

نص الزر (التمرير): "لنبدأ"

سيحل النص الموجود أسفل نص زر التمرير محل نص الزر الافتراضي عند التمرير فوق الزر.

عرض الزر

ومع ذلك ، يكون الزر عبارة inline-block لذا سيتغير عرض الزر / الارتباط وفقًا لمقدار المحتوى (أحرف أو مسافات) الذي يحتوي عليه الزر. هذا لا يعمل بشكل جيد مع تأثير التمرير هذا لأنه مع النص البديل الأصغر ، سيصبح الزر أصغر في العرض ويخلق قفزة أو خللًا عند التمرير فوق حافة الزر. لإصلاح ذلك ، نحتاج إلى تطبيق عرض معين على الزر. هذا سهل مع مقتطف واحد من CSS. أضف CSS التالي إلى العنصر الرئيسي لوحدة الزر.

width: 200px;

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

تغييرات إضافية وتأثيرات تحوم

بالإضافة إلى تغيير المحتوى عند التمرير ، يمكننا أيضًا إضفاء مزيد من التوابل على الزر الخاص بنا بتركيبات مختلفة لتأثير التمرير.

الآن رمز الزر هو سهم لليمين يتم نشره عند التمرير. يعمل هذا بشكل جيد مع نص زر التمرير "Let's Go".

قلب أيقونة الزر عند التمرير

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

فقط إظهار الرمز عند التحويم للزر: لا

ثم أضف فئة CSS إلى وحدة الزر على النحو التالي:

فئة CSS: flip-button-icon

ثم افتح إعدادات الصفحة وأضف CSS المخصص التالي.

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

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

تغيير رمز الزر عند التمرير

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

قبل أن نضيف css ، دعنا أولاً نختار رمز زر مختلف لإظهاره في البداية ، ثم يمكننا تغييره إلى السهم الأيمن باستخدام CSS.

قم بتحديث رمز الزر برمز عربة التسوق نظرًا لأن عبارة CTA الخاصة بنا هي "Show Now".

ثم انتقل إلى علامة التبويب خيارات متقدمة وقم بتحديث خاصية تحويل CSS الحالية باستخدام دوران 180 درجة بدلاً من 360 درجة. وأضف رمز يونيكود جديد للمحتوى الذي يعرض السهم الأيسر ("\ 23").

سيبدو المقتطف الجديد على النحو التالي:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

نظرًا لأننا سنقوم بتدوير الرمز 180 درجة أيضًا ، فسيظهر هذا سهمًا لليمين كبديل لأيقونة عربة التسوق عند التمرير فوق الزر.

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

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

# 2 كيفية تغيير الخلفيات ومحتوى الجسم في وحدات النص

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

تحديث إعدادات العمود

ضمن إعدادات الصف ، افتح إعدادات العمود 1 وأضف صورة خلفية عند التمرير فوق العمود.

سيحل هذا محل الخلفية البيضاء الموجودة افتراضيًا.

أيضًا ، أضف تدرجًا فوق صورة الخلفية عند التمرير أيضًا.

تدرج الخلفية اللون الأيسر: rgba (255،255،255،0)
تدرج الخلفية اللون الأيمن: rgba (46،41،142،0.75)
موقف البداية: 30٪
وضع التدرج فوق صورة الخلفية: نعم

سيوفر هذا تراكبًا لطيفًا سيجعل النص البديل عند التمرير أكثر قابلية للقراءة.

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

تخصيص وحدة النص في العمود 1

بمجرد تحديث العمود ، احفظ الإعدادات وافتح إعدادات وحدة النص لوحدة النص في العمود 1. ثم قم بتحديث محتوى نص الوحدة النمطية للنص عند المرور بالماوس باستخدام ما يلي:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

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

بعد ذلك ، قم بتحديث الخلفية على النحو التالي:

لون الخلفية: #ffffff ؛
لون الخلفية (تحوم): rgba (255،255،255،0) ؛

هذا يضيف عنصر انتقال لطيف للكشف عن صورة الخلفية في العمود تدريجيًا.

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

الارتفاع: 260 بكسل

المساحة المتروكة: 30 بكسل للأعلى ، 30 بكسل لليسار ، 30 بكسل لليمين
المساحة المتروكة (تحوم): 90 بكسل في الأعلى

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

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

لون نص الرابط: #ffffff
لون نص العنوان 3 (تحوم): #ffffff

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

مدة الانتقال: 500 مللي ثانية

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

الآن تحقق من النتيجة النهائية.

# 3 كيفية تغيير المحتوى عند التمرير لعناصر متعددة باستخدام وحدة الحث على اتخاذ إجراء

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

إضافة دعوة جديدة وحدة نمطية

ثم أضف وحدة دعوة إلى اتخاذ إجراء جديدة تحت زر "تسوق الآن" في الصف العلوي من قسم التخصص.

قم بتحديث CTA مع تغيير المحتوى على Hover

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

العنوان: "عرض خاص"
العنوان (التمرير): "خصم 10٪"
نص الزر: "تسوق الآن"
نص الزر (التمرير): "الحصول على صفقة"
Body: "Custom Cupcakes"
URL ارتباط الزر: #

حفظ الإعداد الآن.

نسخ ولصق أنماط زر التخطيط

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

ثم افتح قائمة الخيارات الأخرى في وحدة الدعوة إلى العمل التي نقوم بتصميمها وتحديد "لصق أنماط الأزرار".

ثم افتح إعدادات وحدة الحث على اتخاذ إجراء وقم بتحديث المساحة المتروكة للأزرار:

حشوة الزر: 15 بكسل للأعلى ، 15 بكسل للأسفل ، 40 بكسل لليسار ، 40 بكسل لليمين

تحديث أنماط النص

بعد ذلك ، قم بتحديث العنوان وتصميم النص الأساسي.

مستوى عنوان العنوان: H4
خط العنوان: باسيفيكو
حجم نص العنوان: 9vw
ارتفاع خط العنوان: 1.3em
خط النص الأساسي: Open Sans
وزن خط الجسم: غامق
حجم النص الأساسي: 18 بكسل
تباعد حروف الجسم: 1 بكسل

الإعدادات النهائية

بعد ذلك ، قم بتحديث المساحة المتروكة.

المساحة المتروكة: 0 بكسل لليسار و 0 بكسل لليمين

ثم امنح الوحدة فئة CSS مخصصة.

فئة CSS: fade-cta-title

اجعل زر cta بالعرض الكامل عن طريق إضافة CSS المخصص التالي إلى مربع إدخال Promo Button CSS.

وتحديث مدة الانتقال.

مدة الانتقال: 800 مللي ثانية

أخيرًا ، قم بتحديث لون الخلفية بحيث يكون شفافًا افتراضيًا ويغير اللون عند التمرير.

لون الخلفية: لا شيء (حذف)
لون الخلفية (تحوم): rgba (247،78،72،0.86)

بعد ذلك ، احذف الوحدتين في الصف أعلى وحدة Call to Action الخاصة بنا بحيث تحل محل cta الأصلي من التخطيط.

النتيجة حتى الآن

ها هي النتيجة حتى الآن. لاحظ كيف يتغير نص العنوان ونص الزر عند التمرير فوق وحدة الحث على اتخاذ إجراء.

تليين المحتوى يتغير بالرسوم المتحركة

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

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

الآن دعنا نتحقق من النتيجة النهائية.

وها هو على الهاتف المحمول.

افكار اخيرة

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

هل تريد المزيد؟ لدينا الكثير من المنشورات الرائعة التي ستساعد في نقل CTA إلى المستوى التالي.

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

هتافات!