كيفية إنشاء CTA ملفتة للنظر في Divi مع بعض تأثيرات التحويم البسيطة
نشرت: 2019-07-19يمكن أن تكون التفاعلات الدقيقة وتأثيرات التمرير مفيدة لإنشاء عبارة تحث المستخدم على اتخاذ إجراء (CTA) لافتة للنظر. الحيلة هي استخدام التأثيرات التي تجعل الحث على اتخاذ إجراء أكثر جاذبية وبديهية بحيث يكون المستخدمون أكثر عرضة لاتخاذ الإجراءات. ونظرًا لأن الهدف النهائي لمعظم CTAs هو النقر فوق ارتباط أو زر ، فمن المهم تحسين CTA بطريقة تجعل تلك العناصر القابلة للنقر في المقدمة.
في هذا البرنامج التعليمي ، سأوضح لك كيفية استخدام Divi لتحسين رؤية CTAs باستخدام تأثيرات التمرير المتعددة. سأوضح لك كيفية إضافة خلفيات مقسم القسم عند التمرير لعرض عبارات الحث على اتخاذ إجراء للحصول على تباين وقراءة أفضل. وسأوضح لك كيفية تكبير CTA ونقله إلى وسط الصفحة عند التمرير بحيث يصبح التركيز الرئيسي. ستكون تأثيرات التمرير هذه مفيدة لإبراز أي عبارة تحث المستخدم على اتخاذ إجراء ، ونأمل أن تحسن تجربة المستخدم.
هيا بنا نبدأ.
نظرة خاطفة
فيما يلي نظرة خاطفة على تأثيرات التحويم اللافتة للنظر التي سنبنيها في هذا البرنامج التعليمي.
قم بتنزيل مخطط تأثيرات التحويم لجذب انتباه العين مجانًا
لتضع يديك على التصميمات من هذا البرنامج التعليمي ، ستحتاج أولاً إلى تنزيلها باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.
تنزيل مجاني
انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.
لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!
اشترك في قناتنا على اليوتيوب
لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف json إلى Divi Builder.
دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟
ما تحتاجه للبدء
للبدء ، ستحتاج إلى ما يلي:
- موضوع Divi مثبت ونشط
- تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
- صورة خلفية لاستخدامها في بناء التصميم. سأستخدم واحدة من Veterinarian Layout Pack لهذا البرنامج التعليمي.
بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.
تنفيذ تأثيرات تحوم CTA اللافتة للنظر في Divi
بالنسبة لمثال التصميم هذا ، سنبدأ بوحدة دعوة للعمل تتم محاذاتها إلى اليسار أو اليمين. ثم سنقوم بإحضار الوحدة النمطية إلى وسط الصفحة ونقوم بقياسها (أو تكبيرها) عند التمرير فوق الصف. لجعل عبارة الحث على اتخاذ إجراء أكثر بروزًا في حالة تمرير الصفوف ، سنقوم بترتيبها بإضافة فواصل أقسام ستغلق خلف الوحدة النمطية للحصول على تباين أفضل.
هيريس كيفية القيام بذلك.
إنشاء القسم والصف
أولاً ، قم بإنشاء قسم عادي بصف من عمود واحد.
قبل إضافة وحدة نمطية ، افتح إعدادات القسم وقم بتحديث ما يلي:
أضف صورة خلفية مع النقطة المحورية للصورة إلى الجانب الأيمن بحيث تظل مرئية عند إضافة الوحدة النمطية الخاصة بنا على اليسار.
- العرض الأقصى: 1080 بكسل
- محاذاة القسم: المركز
هذا يعتني بالقسم في الوقت الحالي. سنعود إلى إعدادات القسم لاحقًا لإضافة تأثيرات تمرير مقسم القسم.
بعد ذلك ، افتح إعدادات الصف وقم بتحديث ما يلي:
- العرض: 100٪
- أقصى عرض: 100٪
- الحشو: 5٪ أعلى ، 5٪ أسفل ، 35٪ يمين
الحشو الأيمن هو مفتاح هذا التصميم لأنه يدفع المحتوى إلى اليسار. سنعود لاحقًا لإضافة خيارات التمرير الخاصة بنا لنقل محتوى الصف مرة أخرى إلى الوسط لاحقًا.
إضافة وحدة الدعوة إلى العمل
نحن الآن على استعداد لبناء وحدة Call to Action التي ستكون محور التركيز الرئيسي للحث على اتخاذ إجراء (CTA) اللافت للنظر.
انطلق وأضف وحدة دعوة للعمل إلى صف العمود الواحد.
ثم قم بتحديث إعدادات وحدة الحث على اتخاذ إجراء كما يلي:
المحتوى
- العنوان: خصم الزيارة الأولى
- الزر: تحديد موعد
- URL ارتباط الزر: #
تصميم
- لون الخلفية: #ffffff
- لون النص: غامق
- خط العنوان: نونيتو
- وزن خط العنوان: غامق
- حجم نص العنوان: 36 بكسل
- لون نص الزر: #ffffff
- لون خلفية الزر: # 154c87
- عرض حد الزر: 0 بكسل
- العرض الأقصى: 500 بكسل
- محاذاة الوحدة: مركز
- زوايا دائرية: 10 بكسل
الميزة الرئيسية لهذا التصميم هي 500 بكسل كحد أقصى للعرض. سيضمن هذا عدم تغيير عرض الوحدة عندما نقوم بضبط المساحة المتروكة الصحيحة للصف عند التمرير لاحقًا.
- Box Shadow: انظر لقطة الشاشة
- مربع الظل الرأسي: 30 بكسل
- مربع قوة طمس الظل: 100 بكسل
- قوة انتشار الظل المربع: -30 بكسل
تحجيم وتوسيط عبارة الحث على اتخاذ إجراء عند التمرير فوق الصف
نحن الآن على استعداد لبدء إضافة تأثيرات تحوم CTA اللافتة للنظر. في هذه المرحلة ، نريد تحقيق شيئين عند التمرير فوق الصف. أولاً ، نريد نقل CTA إلى المركز. ثم نريد زيادة حجم الوحدة (جعلها أكبر) لجعلها أكثر وضوحًا.
للقيام بذلك ، افتح إعدادات الصف وقم بتحديث ما يلي:
- المساحة المتروكة (تحوم): 0٪ يمين
ثم اضبط المساحة المتروكة لشاشة الجوال:
- الحشو (الكمبيوتر اللوحي): 0٪ صحيح
- الحشو (الهاتف): يسار 5٪ ، يمين 5٪
لتكبير CTA ، أضف خاصية التحويل التالية إلى الصف عند التمرير:
- مقياس التحويل (تحوم): 110٪
على الرغم من تطبيق خاصية مقياس التحويل على الصف ، فإن هذا ينطبق أيضًا بشكل غير مباشر على جميع العناصر الفرعية داخل الصف ، بما في ذلك الوحدة النمطية. لذلك ، سيتم تغيير حجم الوحدة إلى 110٪ عند التمرير فوق الصف.
تنظيم CTA على Hover مع فواصل الأقسام
أخيرًا ، نحن مستعدون لإضافة فواصل أقسام لتنظيم cta عند التمرير فوق القسم / الصف. المفتاح هنا هو التأكد من أن المقطع والصف لهما نفس الارتفاع والعرض بحيث يحوم المستخدم في نفس الوقت فوق القسم والصف دون أي فجوات. لذلك ، نحن بحاجة إلى إزالة أي جزء من الحشو. ثم نحتاج إلى إنشاء قسم علوي وسفلي مقسم يزيد في الارتفاع عند التمرير فوق القسم.
إليك ما يجب فعله.
افتح إعدادات القسم وقم بتحديث ما يلي:
المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
- نمط الفاصل العلوي (سطح المكتب): انظر الصورة
- نمط الفاصل العلوي (الجهاز اللوحي والهاتف): لا شيء
- لون الفاصل العلوي: rgba (21،76،135،0.61)
- ارتفاع الحاجز العلوي (افتراضي): 0٪
- ارتفاع الحاجز العلوي (تحوم): 120٪
- الوجه الفاصل العلوي: أفقي
- نمط الحاجز السفلي (سطح المكتب): انظر الصورة
- نمط الحاجز السفلي (الجهاز اللوحي والهاتف): لا شيء
- لون الفاصل السفلي: rgba (21،76،135،0.61)
- ارتفاع الحاجز السفلي (الافتراضي): 0٪
- ارتفاع الحاجز السفلي (تحوم): 120٪
- الفاصل السفلي: أفقي
للتأكد من عدم ظهور المقسمات خارج القسم ، قم بتحديث خيار الفائض الرأسي والأفقي إلى المخفي.
- الفائض الأفقي: مخفي
- الفائض العمودي: مخفي
الآن دعنا نتحقق من النتيجة النهائية.
النتيجة النهائية
وهنا التصميم على الجهاز اللوحي والهاتف.
تغيير موقف CTA
إذا كنت تريد تغيير الموضع الأولي لوحدة Call to Action قبل حالة التمرير ، فيمكنك بسهولة تحديث تباعد الصفوف.
من الجانب الأيمن
لنفترض أنك تريد أن تبدأ الوحدة على اليمين قبل التمرير. ما عليك سوى تحديث إعدادات الصف كما يلي:
- حشوة: اليسار 35٪
- المساحة المتروكة (تحوم): اليسار 0٪
سترغب في تحديث الصورة بحيث يكون لها نقطة بؤرية يسرى. بعد ذلك ، ها هي النتيجة.
من الأسفل
أو ، إذا كنت تريد ، يمكنك الحصول على نافذة CTA المنبثقة من أسفل الصف. للقيام بذلك ، ستحتاج إلى إضافة ارتفاع ثابت إلى القسم ثم خفض الوحدة مع بعض الحشوة العلوية.
افتح إعدادات القسم وقم بإعطاء القسم أقصى ارتفاع وقم بتعيين الفائض على مخفي.
- أقصى ارتفاع (سطح المكتب): 415 بكسل
- الفائض الأفقي: مخفي
- الفائض العمودي: مخفي
ثم افتح إعدادات الصف وقم بتحديث الحشوة لدفع الوحدة جزئيًا بعيدًا عن الرؤية أسفل القسم. ثم قم بإخراج الحشوة العلوية عند التمرير لإعادتها مرة أخرى.
- الحشو (سطح المكتب): 25٪ أعلى ، 5٪ أسفل
- الحشوة (تحوم): 5٪ في الأعلى
ها هي النتيجة ...
افكار اخيرة
تجعل Divi إضافة جميع أنواع تأثيرات التمرير إلى تصميمات صفحة الويب الخاصة بك أمرًا ممتعًا وسهلاً. أفضل تأثيرات التمرير هي تلك التي تهدف إلى تحسين تجربة المستخدم بالفعل. يجب أن تساعد تأثيرات التمرير البسيطة التي تمت تغطيتها في هذا المنشور في إنشاء بعض عبارات الحث على اتخاذ إجراء (CTA) الجذابة والتي تبدو رائعة ، وتحسن تجربة المستخدم ، ونأمل أن تؤدي إلى المزيد من التحويلات.
لمزيد من الأفكار ، راجع منشورنا حول 3 طرق يمكنك من خلالها استخدام خيارات التمرير للتأكيد على CTAs في Divi ومنشورنا حول إنشاء CTAs المنزلقة.
أتطلع إلى الاستماع منك في التعليقات.
هتافات!