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

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

دعونا نبدأ!

مسح

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

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

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

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

إنشاء عبارة تحث المستخدم على اتخاذ إجراء منزلق، باستخدام قالب صفحة في Divi

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

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

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

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

بعد ذلك، حدد خيار "الإنشاء من الصفر".

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

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

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

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

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

ثم قم بإضافة وحدة محتوى المنشور إلى الصف.

إعدادات الخط

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

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

أنشئ عبارة الحث على اتخاذ إجراء في الزاوية العلوية اليسرى

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

إضافة قسم

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

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

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

بعد ذلك، قم بتخصيص صف واحد وعمود واحد للقسم.

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

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

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

بعد ذلك، انتقل إلى علامة التبويب "متقدم" وأضف فئة CSS التالية وقيمة Z index:

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

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

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

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

إعدادات الخط

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

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

أضف وحدة دعوة للعمل

أضف داخل السطر وحدة "دعوة للعمل".

معلمات دعوة للعمل

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

محتويات

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

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

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

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

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

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

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

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

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

محتويات

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

تصور

• لون الأيقونة: #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". سنضيف الكود بعد إنشاء زر دعوة للعمل في كل زاوية من زوايا القالب الأربع.

أنشئ عبارة الحث على اتخاذ إجراء في الزاوية العلوية اليمنى

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

قسم مكرر

قم بتفعيل وضع عرض الإطار السلكي، ثم قم بتكرار قسم CTA في الزاوية العلوية اليسرى.

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

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

• الهامش: 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 مخصصين حتى نتمكن من الحصول على وظيفة الفتح والإغلاق لكل من أزرار CTA في الشريحة.

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

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

الصق الكود

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

<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، أصبح إنشاء عبارة تحث المستخدم على اتخاذ إجراء في غاية السهولة. وبما أنه يمكنك استخدام أداة إنشاء القوالب لإضافة عبارة تحث المستخدم على اتخاذ إجراء إلى قالب الصفحة، فسيكون لديك تحكم أكبر في الصفحات التي تعرض هذه العبارات.