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

تعرف على كيفية استخدام Elementor Popup Builder لتصميم واستهداف النوافذ المنبثقة في ووردبريس كما لم يحدث من قبل.

احصل على Elementor Popup Builder

لقد أنشأنا Elementor Popup Builder لنقدم لعملائنا أفضل طريقة لإنشاء نوافذ منبثقة تبدو رائعة ومتسقة مع تصميم مواقعهم ، ولا تتطلب CSS مخصصًا في هذه العملية.

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

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

هل أنت جاهز لإنشاء أول نافذة منبثقة لك باستخدام Elementor؟ هيا نذهب اليها…

النافذة المنبثقة التي ستنشئها

في هذا الدليل ، سنوضح لك ما يلي:

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

كيفية إنشاء عنصر منبثق يتضمن نموذج اتصال

كيفية فتح النافذة المنبثقة عندما يقوم المستخدم بالتمرير لأسفل بعد 80٪ من الصفحة

كيفية إغلاق النافذة المنبثقة بعد قيام المستخدم بإرسال النموذج

كيفية تشغيل النافذة المنبثقة يدويًا عند النقر (عندما ينقر الزائر على زر)

الخطوة الأولى: البدء

لقطة شاشة 2019-02-04 الساعة 13.29.33

في Elementor ، يتم إنشاء النوافذ المنبثقة تمامًا مثل أي نوع آخر من القوالب.

إذا كنت معتادًا على Elementor  Theme Builder ، فقد صادفت قوالب مثل الرأس والتذييل والفردي والأرشيف.

تم إنشاء النوافذ المنبثقة بنفس الطريقة.

في لوحة معلومات ووردبريس ، انتقل إلى القوالب > النوافذ المنبثقة > إضافة جديد

لنقم بتسمية نموذجنا المنبثق My First Template  واضغط على “Create Template”.

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

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

الخطوة 2: تصميم النافذة المنبثقة ضمن الإعدادات المنبثقة

لقطة شاشة 2019-02-04 الساعة 13.30.21

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

راجع للشغل ، يمكن الوصول إلى هذه اللوحة دائمًا من خلال رمز الترس السفلي.

في علامة التبويب Layout ، سنقوم بتعيين عرض النافذة المنبثقة على 700 بكسل ، والارتفاع “ملائم للمحتوى”. سيتم وضع النافذة المنبثقة الخاصة بنا في المركز ، أفقيًا وعموديًا.

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

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

الخطوة 3: بناء الجزء الداخلي من النافذة المنبثقة

لقطة شاشة 2019-02-04 الساعة 13.30.57

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

ما عليك سوى ملاحظة أنه يمكن استخدام كل نوع من أنواع المحتوى والقالب لديك في Elementor في النوافذ المنبثقة.

يبدو التصميم النهائي للنافذة المنبثقة كما يلي:

لقطة شاشة 2019-02-04 الساعة 13.33.19

كيفية استهداف النوافذ المنبثقة باستخدام إعدادات النشر

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

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

شروط

لقطة شاشة 2019-02-04 الساعة 13.34.35

قم بتعيين  الشروط  التي تحدد مكان ظهور النافذة المنبثقة (على أي صفحات) في جميع أنحاء الموقع.

على سبيل المثال ، إذا اخترت “Entire Site” ، فسيتم عرض النافذة المنبثقة في كل مكان عبر الموقع! يمكنك الحصول على تفاصيل دقيقة أيضًا ، على سبيل المثال عن طريق تحديد فئة منشورات معينة.

إنه مشابه لمنشئ السمات ، لدينا بالفعل  فيديو تعليمي متعمق  حول هذا الموضوع.

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

محفزات

لقطة شاشة 2019-02-04 الساعة 13.37.01

باستخدام  المشغلات ، يمكننا ضبط النافذة المنبثقة لتظهر:

عند تحميل الصفحة

في التمرير

في قم بالتمرير إلى العنصر

عند النقر

بعد الخمول

وعلى  نية الخروج من الصفحة

في هذا البرنامج التعليمي ، سنستخدم نافذة منبثقة يدوية يتم تشغيلها عندما ينقر المستخدم على زر.

قواعد متقدمة

لقطة شاشة 2019-02-04 الساعة 13.37.50

ضمن القواعد المتقدمة ، يمكننا تعيين متطلبات محددة للغاية يجب تلبيتها حتى تظهر النافذة المنبثقة:

بعد عدد معين من مشاهدات الصفحة

بعد عدد معين من زيارات الموقع

عندما يصل الزوار من عنوان URL محدد

عند وصول الزوار من روابط خارجية / روابط داخلية

عند وصولهم من محركات البحث.

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

الخطوة 4: قم بتعيين النافذة المنبثقة للعرض في التمرير والإغلاق عند الإرسال

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

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

افتح نافذة منبثقة مع مشغل التمرير

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

ضمن المشغلات ، قم بتشغيل “On Scroll” واحتفظ بالاتجاه مضبوطًا على “Down” وأدخل 80 في الحقل “ضمن”.

إغلاق النافذة المنبثقة مع تقديم النموذج

انتقل إلى أداة النموذج داخل النافذة المنبثقة ، وضمن “الإجراءات بعد الإرسال” ، اختر “منبثقة”.

انقر فوق العنصر المنبثق الذي سيظهر الآن أدناه.

ضمن “الإجراء” ، اختر “إغلاق النافذة المنبثقة”.

الخطوة 5: توصيل النوافذ المنبثقة يدويًا بالارتباطات أو النماذج

سكرين شوت -2019-02-04-at-13.38.40 (1)

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

اضغط على CMD / CTRL + E لفتح أداة البحث ، واكتب “إضافة صفحة جديدة”.

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

في إعدادات الأزرار ، ضمن المحتوى ، انقر فوق الرمز الديناميكي بجوار حقل الارتباط.

ثم ، ضمن ارتباط> إجراءات ، اختر منبثقة.

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

اضغط على نشر واعرض صفحتك الحية. الآن ، سيؤدي النقر فوق الزر إلى فتح النافذة المنبثقة.

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

استنتاج

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

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

يشارك

انشر في الفيسبوك

حصة على التغريد

انشر على LinkedIn

شارك على الواتس اب

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

تبحث عن محتوى جديد؟