وجدنا أفضل 12 تصميمًا منبثقًا يمكنك نسخها اليوم

تعد النوافذ المنبثقة طريقة مؤكدة لإطلاق النار لتنمية قائمة بريدك الإلكتروني وزيادة معدلات تحويل التجارة الإلكترونية. لقد رأينا أفضل العلامات التجارية في التجارة الإلكترونية تستخدم النوافذ المنبثقة لتحسين معدلات التحويل بنسبة تصل إلى 37٪ وتقليل معدل التخلي عن سلة التسوق بنسبة 20٪ على الأقل .

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

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

هيا بنا نبدأ!

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

1. تقبيل بلدي كيتو

تبدأ نافذة الترحيب المنبثقة هذه عملية بناء علاقة دائمة مع العملاء من خلال التعرف عليهم بشكل أفضل.

يشجع السؤال البسيط ونسخة الزر البسيطة بنفس القدر الزائرين على التفاعل مع النافذة المنبثقة (ناهيك عن الوعد بخصم 10٪ على الرمز الترويجي).

استخدمت Kiss My Keto أيضًا صورة عالية الجودة تعرض منتجاتها وتعزز هوية علامتها التجارية المرحة الخالية من الهموم.

2. كريستوفر كلوس

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

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

وأخيرًا ، فيما أصبح موضوعًا ، اختار فريق تصميم كريستوفر كلوس صورة تمثل تمامًا "شعور" نظارتهم الشمسية.

3. Obvi

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

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

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

4. بليند جيت

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

تأتي التباينات الوحيدة في لوحة الألوان من الصور التي توضح العرض (ما سيحصل عليه العملاء مجانًا). المنتجات تخرج من الصفحة ، وهذا هو الهدف بالضبط.

5. The Oodie

هناك العديد من النقاط التي يجب توضيحها حول هذا المثال الرائع لتصميم النوافذ المنبثقة من The Oodie.

أولاً ، طريقة دمج الصورة مع النافذة المنبثقة مذهلة بصريًا وتدعم النسخة: "هل ترغب في عناق؟"

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

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

6. شركة الكركم.

تستخدم شركة الكركم عنصر تصميم دائري بارز لتسليط الضوء على عرضها.

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

لا تُظهر الصورة الصغيرة المنتج فحسب ، بل تلتقط أيضًا الصورة النشطة والصحية للعلامة التجارية.

7. سحابة جوز الهند

يضع Coconut Cloud كل التركيز على منتجاتهم. وهذا منطقي ... تبدو لذيذة!

تم تطوير هذا التصميم المنبثق لدعم هدايا الهالوين. من خلال إظهار كل شيء للزوار يمكنهم الفوز به ، يجذبهم Coconut Cloud ويشجعهم على المشاركة.

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

8. TheSTEMKids

النسخة الذكية في مثال تصميم TheSTEMKids المنبثقة هذا تسرق العرض حقًا.

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

9. Bibado

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

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

10. سؤال

يعد تصميم Qure المنبثق مثالًا جيدًا على كيفية تقديم عرضين في وقت واحد.

يتم تمييز العنوان الرئيسي (خصم 5٪) بنص كبير ، ولكن يتم إعطاء العرض الإضافي مربع خاص به للتأكيد. هناك صورة صغيرة لطيفة تظهر لك الهدية المجانية التي ستحصل عليها.

تقوم الصورة الأكبر بعمل رائع في إرساء الاستمرارية مع العلامة التجارية الجديدة والمستقبلية لـ Qure.

11. نعم الرجاء الصحة

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

تساعد Yes Please Health عملائها على الشعور بالإثارة تجاه العرض من خلال صورة ملونة لشخص يبتسم ويعرض المنتج.

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

أخيرًا ، يستخدمون نسخة مرحة ومرحة لجذب العميل.

12. تقليب فولر

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

يعد استخدام الرموز التعبيرية المرساة لمسة لطيفة أيضًا ، حيث يقترن جيدًا بوعدهم بجلب بعض "أسلوب هامبتونز الساحلي".

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

يجب أن يتوافق نهجك الخاص مع شخصية علامتك التجارية وتصميم موقع الويب الخاص بك والرسالة التي تحاول إيصالها. من المؤكد أنك ستجد نموذجًا يحدد جميع المربعات الثلاثة في مكتبة النماذج القوية 300+ الخاصة بـ OptiMonk !

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