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

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

دعونا نبدأ!

مسح

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

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

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

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

إنشاء دعوة منزلقة للعمل ، مع قالب صفحة في Divi

إنشاء نموذج جديد

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme generator. ثم انقر فوق مربع "إضافة نموذج جديد" لإنشاء نموذج جديد.

قم بتعيين القالب إلى الصفحة أو الصفحات التي تريد عرض الشريط الترويجي عليها.

في النموذج الجديد ، انقر على منطقة "إضافة جسم مخصص" ثم حدد "إنشاء جسم مخصص".

ثم حدد خيار "البناء من الصفر".

إنشاء قسم محتوى المنشور

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

أضف صفًا إلى عمود

للبدء ، أضف صفًا من العمود إلى القسم العادي.

إضافة وحدة نمطية للنشر

ثم قم بإضافة وحدة محتويات النشر على السطر.

إعدادات الخط

بعد ذلك قم بتحديث معلمات الخط كما يلي:

• العرض: 100٪
• أقصى عرض: 100 ٪
• الحشو: 0px عالية ، 0px منخفضة

إنشاء دعوة للعمل أعلى اليسار

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

إضافة قسم

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

إضافة قسم منتظم جديد إلى تخطيط القالب.

أضف صفًا إلى عمود

ثم امنح القسم صفًا من العمود.

إعدادات القسم

اسحب (أو انقل) القسم الموجود أعلى قسم محتوى المنشور وقم بتحديث إعدادات القسم كما يلي:

• تدرج خلفية اللون الأيسر:
• تدرج الخلفية الأيمن:
• عرض التدرج فوق الصورة: نعم
• صورة الخلفية: [إدراج الصورة]
• العرض: 320px
• الهامش: 320 بكسل اليسار
• الحشو: 0px عالية ، 0px منخفضة
• نمط الرسوم المتحركة: شريحة
• اتجاه الحركة: صحيح
• تأخير الحركة: 2000 مللي ثانية

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

• CSS class: slide in in cta
• مؤشر Z: 999

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

position: fixed;top: 80px;left: -320px;

هناك حاجة إلى فئة CSS حتى نتمكن من استهداف القسم بالشفرة لاحقًا. سيضع CSS المخصص القسم الأيسر العلوي من قالب الصفحة في موضع ثابت (أو ثابت). يجب أن يحرك موضع "اليسار: -320 بكسل" القسم بأكمله (الذي يبلغ عرضه 320 بكسل) خارج نافذة المتصفح (لذلك خارج نطاق رؤيتنا). لكن لدينا الهامش الأيسر 320 بكسل لإعادته إلى العرض. والسبب في بنائه بهذه الطريقة هو أنه يمكننا تشغيل قيمة الهامش أو إيقاف تشغيلها عند النقر فوق أيقونة "x". سيؤدي ذلك إلى انزلاق CTA للداخل وبعيدًا عن الأنظار.

إعدادات الخط

الآن ، قم بتحديث معلمات السطر كما يلي:

• استخدم عرض مزراب مخصص: نعم
• عرض مزراب: 1
• العرض: 100٪
• الحشو: 0px عالية ، 0px منخفضة

إضافة وحدة دعوة للعمل

داخل الصف ، أضف وحدة Call to Action.

إعدادات عبارة الحث على اتخاذ إجراء

ثم قم بتحديث إعدادات الحث على اتخاذ إجراء.

محتويات

• العنوان: [أدخل النص الذي تختاره]
• زر: [أدخل النص الذي تختاره]
• الجسم: [أدخل النص الذي تختاره]
• عنوان URL لرابط الزر: [أدخل عنوان URL الفعلي أو #]

ثم قم بإزالة لون الخلفية الافتراضي للكشف عن خلفية القسم الذي أضفناه سابقًا.

معلمات التصميم (نص وزر وملء)

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

• خط العنوان: لاتو
• عنوان الخط الوزن: ثقيل
• ارتفاع سطر العنوان: 1,3 م
• هيئة الشرطة: لاتو
• وزن خط الجسم: جريئة
• استخدم الأنماط المخصصة للزر: نعم
• حجم نص الزر: 15px
• عرض حد الزر: 0px
• تباعد حرف زر: 1px
• خط الزر: لاتو
• وزن خط الزر: ثقيل
• نمط خط الزر: TT
• حشوة الأزرار: 12 بكسل في الأعلى ، 12 بكسل في الأسفل ، 32 بكسل في اليسار ، 32 بكسل في اليمين
• الحشو: 40 بكسل في الأعلى ، 40 بكسل في الأسفل ، 40 بكسل في اليسار ، 40 بكسل في اليمين

أضف أيقونة فتح وإغلاق مع وحدة Blurb

بمجرد الانتهاء من عبارة الحث على اتخاذ إجراء ، نحتاج إلى إنشاء زر الرمز المستخدم لفتح وإغلاق عبارة الحث على اتخاذ إجراء. لإنشاء هذا ، أضف وحدة blurb ضمن وحدة call to action.

إعدادات نص العرض

تحديث معلمات التصميم التالية.

محتويات

• إزالة العنوان الافتراضي والنص الأساسي
• استخدم الأيقونة: نعم
• الرمز: المزيد (انظر لقطة الشاشة)

تصور

• لون الأيقونة: # 000000
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 40 بكسل
• العرض: 40px
• الارتفاع: 40px
• زوايا مدورة: 50٪
• تحويل محور دوران Z: 135 درجة

الإعدادات المتقدمة

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

• فئة CSS: slide-in_target

ثم أضف CSS المخصص هذا إلى العنصر الرئيسي.

position: absolute;bottom: 0px;right: -40px;

أضف CSS المخصص التالي إلى صورة Blurb.

margin-bottom: 0px;

نتيجة

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

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

إنشاء دعوة للعمل أعلى اليمين

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

قسم مكرر

انشر وضع العرض الشبكي ، ثم كرر قسم الحث على الشراء في أعلى اليسار.

تحديث إعدادات القسم

ثم قم بتحديث معلمات القسم الجديد كما يلي:

• الهامش: 320 بكسل الأيمن
• اتجاه الحركة: يسار

ثم قم بتحديث CSS المخصص في العنصر الرئيسي عن طريق استبدال "left" بكلمة "right". هذا هو المقتطف الكامل:

position: fixed;top: 80px;right: -320px;

تحديث معلمات وحدة Blurb

ثم افتح إعدادات الوحدة النمطية Blurb وقم بتحديث مقتطف CSS المخصص في العنصر الرئيسي عن طريق استبدال "right" بـ "left". هذا هو المقتطف الكامل:

position: absolute;bottom: 0px;left: -40px;

نتيجة

سترى الآن دعوة للعمل كشريحة أعلى يمين قالب الصفحة.

قم بإجراء نفس العمليات لبقية أقسام "اليمين السفلي" و "اليسار السفلي". ستحتاج أيضًا إلى ضبط كود CSS لكل وحدة للحصول على نتيجة مماثلة لما يلي.

إضافة مقتطفات jQuery و CSS مخصصة باستخدام وحدة التعليمات البرمجية

في الخطوة الأخيرة ، نحتاج إلى إضافة jQuery و CSS مخصصين حتى نتمكن من الحصول على وظيفة فتح وإغلاق كل من CTAs للشريحة.

إضافة وحدة رمز

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

الصق الكود

ثم افتح إعدادات الكود والصق الكود التالي في منطقة الكود.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

الأفكار النهائية

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