كيفية بناء نافذة منبثقة مع تفاعلات Divi 5 (تنزيل مجاني)

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

في هذا المنشور ، سنمشي بك من خلال إنشاء ميزة تفاعلات Divi 5. دعنا نغوص في!

ما هي تفاعلات Divi 5؟

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

اشترك في قناتنا على YouTube

المكونات الرئيسية لتفاعلات divi

يتكون كل تفاعل في Divi 5 من ثلاثة مكونات أساسية:

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

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

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

يوفر Divi 5 تفاعلات العديد من المزايا لبناء النوافذ المنبثقة:

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

دليل خطوة بخطوة لبناء نافذة منبثقة في Divi 5

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

1. قم بتثبيت حزمة تخطيط

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

عندما يظهر مربع الحوار ، اختر التخطيط الممتاز من الخيارات المتاحة.

انقر فوق Thumbnail Thumbnail Learning Learning Pack لتمييز الصفحات المتاحة.

حدد تصميم الصفحة المقصودة وانقر فوق استخدام هذا التصميم لتحميله في البناء المرئي.

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

2. قم بإنشاء قسم للنوافئ المنبثقة

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

انقر على الأيقونة لإدراج صف جديد. اختر الخيار الثاني تحت أعمدة الإزاحة .

3. تصميم المنبثقة

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

أدخل "تريد 15 ٪ خصم؟" في حقل العنوان ضمن علامة التبويب المحتوى.

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

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

تحت وحدة العنوان ، أضف وحدة نصية جديدة.

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

يمكنك إما إضافة النص الخاص بك إلى حقل النص أو استخدام Divi AI لإنشاءه لك.

بعد ذلك ، سنضيف وحدة إلكتروني عبر البريد الإلكتروني تحت وحدة النص.

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

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

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

4. إنشاء زر إغلاق

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

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

انقر لإضافة وحدة رمز إلى الصف.

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

قم بالتبديل إلى علامة تبويب التصميم وأدخل إعدادات التصميم التالية:

• رمز اللون: #5344B9
• حجم الرمز: 36 بكسل
• المحاذاة: صحيح

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

5. اضبط إعدادات القسم

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

في حقل العرض ، أدخل 80 ٪ للعرض. بعد ذلك ، قم بتعيين خيار محاذاة القسم إلى المركز .

تحت الحدود ، حدد نصف قطر الحدود 10 بكسل.

سنضيف أيضًا ظلًا مربعًا ، لذا يبرز المنبثقة على بقية المحتوى. حدد موقع القائمة المنسدلة لـ Box Shadow وتوسيعها. تحت Box Shadow ، اختر الإعداد المسبق 1 .

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

6. قم بإنشاء التفاعل لعرض المنبثقة

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

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

عندما يظهر مربع حوار تفاعل التحرير ، أدخل الإعدادات التالية وانقر فوق حفظ :

• تسمية المسؤول: التفاعل المنبثق
• حدث الزناد: تحميل
• الإجراء التأثير: عنصر إظهار
• الوحدة الهدف: القسم (المنبثقة)
• تأخير الوقت: 5 ثوان

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

• تسمية المسؤول: منبثقة عن قرب
• حدث الزناد: انقر
• إجراء التأثير: تبديل الرؤية
• الوحدة الهدف: القسم (المنبثقة)
• تأخير الوقت: 0

7. اختبار وصقل المنبثقة الخاصة بك مع نقاط التوقف المستجيبة القابلة للتخصيص Divi 5

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

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

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

8. تعيين خيارات العرض

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

انتقل إلى علامة التبويب المتقدمة للقسم المنبثق. حدد موقع القائمة المنسدلة الرؤية . انقر لتعطيل القسم على جميع المشاهدات (الهاتف ، الكمبيوتر اللوحي ، وسطح المكتب).

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

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

خيارات التخصيص المتقدمة المنبثقة

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

شروط العرض

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

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

الجمع بين الآثار

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

Divi AI تكامل

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

أفضل الممارسات للنواكب المنبثقة الفعالة

لضمان تحسين منبثق تجربة المستخدم ويحركها ، فكر في أفضل الممارسات:

1. اجعله سهل الاستخدام

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

قم بتعيين تأخير موقوت على المنبثقة الخاصة بك لتجنب فقدان مشاركة المستخدم.

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

2. تحسين للأداء

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

3. تصميم المنبثقة مع معايير إمكانية الوصول في الاعتبار

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

تساعد هذه الممارسات في ضمان الوصول إلى الجمهور المتنوع مع معايير إمكانية الوصول إلى الويب.

4. اختبار على جميع أحجام الشاشة

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

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

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

تنزيل مجانًا

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

تحميل

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

إنشاء المنبثقة مع تفاعلات Divi 5

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

هل أنت مستعد لتجرب Divi 5؟ قم بتنزيل أحدث Divi 5 Public Alpha ، وتجربة التفاعلات ، وشارك أفكارك في قسم التعليقات أدناه. يرجى مشاركة إبداعاتك معنا على قنوات التواصل الاجتماعي الخاصة بنا وزيارة مدونتنا لمزيد من البرامج التعليمية باستخدام ميزات Divi 5 المبتكرة. نتطلع إلى رؤية ما تنشئه!