كيفية إضافة التمرير المنبثق المنبثق إلى منشورات المدونة الخاصة بك في Divi

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

سننشئ في نافذة منبثقة للكشف عن منشور ذي صلة (حسب الفئة) كما هو موضح أدناه.

وسنوضح لك أيضًا كيفية إضافة اختيار بريد إلكتروني إلى النافذة المنبثقة كما هو موضح هنا.

قم بتنزيل Scroll Triggered Popup Divi Post Template مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

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

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

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

إنشاء التمرير المنبثق المشغل في نهاية منشورات مدونة Divi الخاصة بك

استيراد قالب منشور المدونة من الحزمة الرابعة منشئ القوالب

من لوحة معلومات WordPress ، انتقل إلى Divi> Theme Builder. ضمن أداة إنشاء السمات ، حدد رمز قابلية النقل في الجزء العلوي الأيمن من الصفحة. في نافذة النقل المنبثقة ، حدد علامة التبويب استيراد ، واختر ملف theme-builder-pack-4-post-template.json وانقر على زر الاستيراد. (سيكون ملف الاستيراد هذا داخل مجلد حزمة Theme Builder Pack الرابع)

يمكنك أيضًا تحديد خيار استيراد الرأس والتذييل العامين كتخطيطات ثابتة.

بعد استيراد القالب ، انقر فوق الرمز لتحرير منطقة النص المخصصة.

سينقلك هذا إلى محرر تخطيط قالب الجسم حيث سنضيف النوافذ المنبثقة التي تم تشغيلها.

تصميم التمرير المنبثق المشغل مع منشور مرتبط حسب الفئة

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

هيريس كيفية القيام بذلك.

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

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

إعدادات الصف

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

• لون الخلفية: #ffffff
• عرض الحضيض: 1
• العرض: 300 بكسل (سطح المكتب) ، 200 بكسل (هاتف)
• المساحة المتروكة: 20 بكسل للأعلى و 0 بكسل للأسفل
• Box Shadow: انظر لقطة الشاشة

أضف وحدة نصية

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

المحتوى

قم بتحديث محتوى النص بالنص "منشور ذو صلة".

تصميم

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

• خط النص: Heebo
• نمط خط النص: TT
• لون نص النص: # f94857
• محاذاة النص: مركز

أضف وحدة المدونة

ضمن وحدة النص ، أضف وحدة مدونة.

المحتوى

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

قم بتحديث ما يلي:

• عدد المشاركات: 1
• الفئات المشمولة: الفئة الحالية

عناصر

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

تصميم

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

• خط العنوان: Heebo
• وزن خط العنوان: غامق للغاية
• حجم نص العنوان: 16 بكسل
• ارتفاع خط العنوان: 1.4em
• الحشو: 5٪ أعلى ، 5٪ يسار ، 5٪ يمين

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

فئة CSS و CSS مخصص وفهرس Z.

ضمن علامة التبويب المتقدمة ، نحتاج إلى منح صفنا فئة CSS ، وقليلًا من CSS المخصص ، وتحديث فهرس z بحيث تظل النافذة المنبثقة أعلى المحتوى الآخر على الصفحة.

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

بمجرد الدخول في وضع العرض الشبكي ، افتح إعدادات الصف احتياطيًا وأضف فئة CSS التالية:

• فئة CSS: صف ما بعد

ثم أضف css المخصص التالي إلى العنصر الرئيسي:

position: fixed;
bottom: 0%;
right: -300px;

وتحديث الفهرس Z:

• الفهرس Z: 999

أضف المقسمات كنقاط تحريك التمرير

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

أضف نقطة انطلاق التمرير رقم 1

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

ثم أضف فئة CSS التالية:

• فئة CSS: ما بعد إحداثية

كان ذلك سهلا.

أضف نقطة انطلاق التمرير رقم 2

الآن لإضافة نقطة المشغل الثانية (النقطة التي ستخفي النافذة المنبثقة أسفل الصفحة) ، انسخ وحدة التقسيم التي تم إنشاؤها للتو.

ثم الصقها في مكان أبعد أسفل قالب المنشور حيث تريد إغلاق النافذة المنبثقة (أو إخفاؤها). في هذا المثال ، أقوم بإضافته أسفل وحدة مدونة المنشورات ذات الصلة وفوق قسم التعليقات في قالب المنشور مباشرةً.

إضافة رمز مخصص مع وحدة التعليمات البرمجية

كل ما تبقى لعمل هذا التمرير المنبثق الذي تم تشغيله هو رمز صغير.

انطلق وأضف وحدة رمز إلى قالب المنشور.

ثم الصق الكود التالي في مربع الشفرة:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

نتيجة

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

إضافة خيار بريد إلكتروني إلى قائمة التمرير المنبثقة المنبثقة

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

حفظ البريد الإلكتروني التذييل إلى مكتبة Divi

احفظ تخطيطك واخرج إلى منشئ السمة. ثم انقر لتحرير تخطيط قالب التذييل المخصص.

ابحث عن وحدة اختيار البريد الإلكتروني واحفظها في مكتبة divi.

أضف خيار البريد الإلكتروني المحفوظ إلى صف منبثق

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

نظرًا لأنك لا تستخدم وحدة النص والمدونة ، يمكنك تعطيل رؤيتها في الواجهة الأمامية.

إعدادات البريد الإلكتروني

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

• العنوان: "هل أعجبك هذا المقال؟"
• النص الأساسي: "انضم إلى نشرتنا الإخبارية!"

ثم أضف الحشوة التالية:

• المساحة المتروكة: 5٪ أسفل ، 20 بكسل يمينًا

نتيجة

تحقق الآن من النتيجة على منشور مباشر.

افكار اخيرة

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

أتطلع إلى تلقي رد منك في التعليقات أدناه.

هتافات!