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

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

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

دعنا نذهب اليها!

معاينة

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

سطح المكتب

متحرك

تثبيت بلوم البرنامج المساعد

تحميل بلوم

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

قم بتحميل وتثبيت Bloom

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

ثم قم بتحميل الملف المضغوط وانقر فوق "التثبيت الآن".

لا تنس تنشيط المكون الإضافي بمجرد تحميله أيضًا.

قم بإعداد نموذج Bloom Optin

أضف نموذج محتوى مقفل جديد

يمكننا الآن البدء في إنشاء نموذج المحتوى المقفل الذي سنستخدمه لاحقًا في هذا المنشور في تصميم Divi الخاص بنا! انتقل إلى لوحة معلومات WordPress الخاصة بك > Bloom> Optin Forms وأنشئ نموذج اختيار جديد.

تابع عن طريق تحديد نوع اختيار "المحتوى المقفل" وانتقل إلى إعدادات الإعداد.

إعدادات الإعداد

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

إعدادات التصميم

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

• اتجاه الصورة: لا توجد صورة

قم بالتمرير لأسفل الصفحة وقم بإجراء بعض التغييرات الإضافية على نمط optin وإعداد النموذج.

• لون الخلفية: #ffffff
• اتجاه النموذج: النموذج في الأسفل

نحن أيضًا نغير إعدادات تصميم النموذج.

• اتجاه حقل النموذج: حقول نموذج مكدسة
• لون خلفية النموذج: # f4f4f4
• لون الزر: #ffffff
• لون نص الزر: غامق
• اختر Form Edge Style: الخيار الثاني

إنشاء تصميم مع Divi

أضف صفًا جديدًا

هيكل العمود

يمكننا الآن التبديل إلى Divi Builder! انطلق وأنشئ صفحة جديدة باستخدام الصفحة الرئيسية لـ Resort Layout Pack. بمجرد تحميل التخطيط ، تابع بإضافة صف جديد أعلى القسم الثاني باستخدام بنية العمود التالية:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بإجراء بعض التغييرات على إعدادات التحجيم.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

انتقل إلى إعدادات التباعد التالية وأضف "0 بكسل" إلى الحشوة العلوية والسفلية للصف. سيحد هذا من المساحة التي يشغلها الصف الجديد الذي أضفناه.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

أضف وحدة نصية

أضف محتوى H3

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

أضف رمزًا قصيرًا لنموذج Optin Content مغلقًا

بعد ذلك ، ارجع إلى المكون الإضافي Bloom وانسخ الرمز المختصر لنموذج optin الذي أنشأته في الجزء السابق من هذا البرنامج التعليمي.

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

لون الخلفية

انتقل إلى إعدادات الخلفية للوحدة بعد ذلك وأضف لونًا للخلفية أبيض تمامًا.

• لون الخلفية: #ffffff

إعدادات النص

انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات النص بعد ذلك.

• خط النص: Open Sans
• لون النص: # 0f87ff
• حجم النص: 15 بكسل

إعدادات نص H3

قم بتغيير الخط المستخدم لنسخة H3 أيضًا.

• خط العنوان 3: عرض Gilda

تباعد

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

• الهامش العلوي: -17vw
• الهامش الأيسر: 65vw (سطح المكتب) ، 37vw (كمبيوتر لوحي) ، 3vw (هاتف)
• الهامش الأيمن: 0 بكسل
• الحشوة العلوية: 5vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 13vw (هاتف)
• الحشوة السفلية: 5vw ، 11vw (Tablet) ، 13vw (Phone)
• الحشو الأيسر: 6vw (سطح المكتب) ، 11vw (كمبيوتر لوحي) ، 16vw (هاتف)
• الحشو الأيمن: 6vw (سطح المكتب) ، 11vw (Tablet) ، 16vw (Phone)

الحدود

استمر بالانتقال إلى إعدادات الحدود لوحدة النص وأضف "500vw" إلى كل ركن من الزوايا ، باستثناء الزاوية اليمنى السفلية.

مربع الظل

أضف ظل مربع بجانب جعل وحدة النص منبثقة.

• مربع قوة طمس الظل: 150 بكسل
• لون الظل: rgba (0،0،0،0.3)

حيوية

أخيرًا ، نضيف أيضًا رسمًا متحركًا ينتقل من اليمين إلى اليسار لإنشاء التأثير المنبثق.

• كرر الرسوم المتحركة: مرة واحدة
• اتجاه الرسوم المتحركة: يسار
• مدة الرسوم المتحركة: 500 مللي ثانية
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• كثافة الرسوم المتحركة: 16٪

صف استنساخ

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

ضع الصف المكرر هنا:

إزالة الحشوة السفلية للقسم

قم بإزالة الحشوة السفلية للقسم الذي وضعت فيه الصف.

• الحشو السفلي: 0 بكسل

تغيير إعدادات تباعد وحدة النص

ثم افتح إعدادات Text Module وقم بتغيير قيم الهوامش المخصصة.

• الهامش الأيسر: 0vw
• الهامش الأيمن: 65vw (سطح المكتب) ، 37vw (كمبيوتر لوحي) ، 3vw (هاتف)

تغيير زوايا مدورة لوحدة النص

تأكد من تغيير الزوايا الدائرية أيضًا. نحن نستخدم "500vw" لكل ركن من الزوايا باستثناء الزاوية اليسرى السفلية.

تغيير إعدادات حركة وحدة النص

أخيرًا وليس آخرًا ، قم بتغيير اتجاه الرسوم المتحركة إلى اليمين وأنت انتهيت!

• اتجاه الرسوم المتحركة: صحيح

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة!

سطح المكتب

متحرك

افكار اخيرة

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