قم بإنشاء Elementor popups في WooCommerce

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك القيام بالأشياء التالية في علامة تبويب النمط :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عدنا إلى مرحلة ADD NEW POPUP من العملية ، حيث يمكننا تحديد عنوان واختيار قالب مرة أخرى.

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

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

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

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

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

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

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

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

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

فكرتان حول "إنشاء العناصر المنبثقة في WooCommerce"

  1. Здравствуйте، вопрос таков. ри нажатии на кнопку в popup окне происходит переход на якорь (его мы указываем в сылке) кно происходит переход якорь (его мы указываем в сылке) аким и переход на якорь одновременно؟

اترك تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *