قم بإنشاء النوافذ المنبثقة Elementor في WooCommerce

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

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

• تكوين النافذة المنبثقة
• يمكنك أيضًا إنشاء النوافذ المنبثقة باستخدام المُنشئ المرئي في Elementor
• تفضيلات النشر

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

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

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

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

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

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

بمجرد النقر فوق ADD NEW POPUP (وهو أمر واضح بذاته)، سيُطلب منك إعطائه اسمًا ثم تحديد قالب من amp المعروضة مسبقًا. تتوفر قوالب مختلفة لأغراض متعددة؛ بعضها مناسب للإعلانات، والبعض الآخر للترويج للخصم، والبعض الآخر مثالي لتشجيع المستخدمين على الاشتراك في شيء ما. بل إن هناك amp لتحذير المستخدمين من استخدام ملفات تعريف الارتباط أو إشعارات القانون العام لحماية البيانات الأخرى. بمجرد العثور على شيء يعجبك، انقر عليه لرؤية معاينة أكبر، ثم اضغط على الزر "إدراج".

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

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

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

تكوين النافذة المنبثقة

 هذا هو الوقت الذي يجب أن تشاهد فيه معاينة للنافذة المنبثقة – إما قائمة فارغة أو القالب الذي اخترته.

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

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

• النوافذ المنبثقة المشروطة هي نوع من النوافذ المشروطة.
• الشرائح الإضافية وأشرطة الإشعارات وما إلى ذلك.

بالإضافة إلى ذلك، يمكنك تخصيص العديد من الإعدادات المهمة الأخرى.

تتوفر الخيارات التالية في "الإعدادات" :

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

يمكنك القيام بالأمور التالية في "النمط" :

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

وأخيرًا، تحتوي علامة التبويب خيارات متقدمة على بعض إعدادات الاستيراد المتنوعة التي تتيح لك القيام بأشياء مثل ما يلي:

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

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

لإعطائك فكرة عن كيفية تأثير هذه الإعدادات على النافذة المنبثقة، إليك ما تبدو عليه عند تغيير الموضع إلى الزاوية السفلية اليمنى من النافذة:

ألقِ نظرة على كيفية تثبيت النافذة المنبثقة بشكل دائم في الزاوية اليمنى السفلية. باستخدام مشغل التمرير بالتزامن مع الرسوم المتحركة للمدخل، يمكنك تحقيق تأثير انزلاق لطيف وسري.

يمكنك أيضًا إنشاء النوافذ المنبثقة باستخدام المُنشئ المرئي في Elementor

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

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

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

علاوة على ذلك، أنصحك بشدة بالتعرف على جميع عناصر واجهة المستخدم وخيارات التصميم الخاصة بـ Elementor.

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

تفضيلات النشر

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

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

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

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

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

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

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

لقد عدنا إلى مرحلة "إضافة نافذة منبثقة جديدة" من العملية، حيث يمكننا تحديد عنوان واختيار قالب مرة أخرى.

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

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

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

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

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

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

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

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

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