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

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

قم بتنزيل قالب صفحة Divi Call to Action من Slide-In مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

بعد ذلك ، أنت على استعداد للذهاب.

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

إنشاء قالب جديد

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

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

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

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

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

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

أضف صف عمود واحد

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

أضف وحدة محتوى النشر

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

إعدادات الصف

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

• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

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

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

إضافة قسم

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

أضف قسمًا عاديًا جديدًا إلى تخطيط القالب.

أضف صف عمود واحد

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

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

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

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

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

• فئة CSS: slide-in-cta
• الفهرس Z: 999

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

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

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

إعدادات الصف

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

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

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

داخل الصف ، أضف Call to Action Module.

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

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

المحتوى

• العنوان: [أدخل نص الاختيار]
• الزر: [أدخل نص الاختيار]
• نص: [أدخل نص الاختيار]
• عنوان URL لارتباط الزر: [أدخل عنوان url الفعلي أو #]

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

إعدادات التصميم (نص وزر وحشو)

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

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

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

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

إعدادات دعاية

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

المحتوى

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

تصميم

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

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

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

• فئة CSS: slide-in_target

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

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

أضف CSS المخصص التالي إلى Blurb Image.

margin-bottom: 0px;

نتيجة

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

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

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

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

قسم مكرر

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

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

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

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

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

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

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

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

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

نتيجة

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

إنشاء دعوة إلى اتخاذ إجراء من الشريحة السفلية اليسرى

قسم مكرر

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

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

ثم افتح إعدادات القسم لتحديث عنصر CSS الرئيسي باستبدال "top: 80px" بـ "bottom: 0px". هنا هو المقتطف النهائي:

position: fixed;
bottom: 0px;
left: -320px;

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

ثم قم بتحديث CSS العنصر الرئيسي لوحدة Blurb Module باستبدال "bottom: 0px" بـ "top: 0px". هنا هو المقتطف النهائي:

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

نتيجة

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

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

قسم مكرر

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

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

افتح إعدادات القسم وقم بتحديث CSS للعنصر الرئيسي باستبدال "top: 80px؛" مع "أسفل: 0 بكسل". هنا هو المقتطف النهائي:

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

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

ثم افتح إعدادات وحدة blurb وقم بتحديث CSS للعنصر الرئيسي باستبدال "bottom: 0px؛" مع "أعلى: 0 بكسل". هنا هو المقتطف النهائي:

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

نتيجة

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

إضافة Custom jQuery و CSS Code Snippets باستخدام وحدة التعليمات البرمجية

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

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

هتافات!