كيفية إنشاء صندوق إعلام Divi لتحديثات COVID-19 (تنزيل مجاني)

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

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

لا تقلق ، سنبين لك أيضًا كيفية بنائه من البداية وكيفية استخدامه.

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على صندوق الإشعارات وكيف يعمل.

قم بتنزيل تخطيط قسم Divi Notification Box مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد تخطيط القسم إلى مكتبة Divi الخاصة بك ، انتقل إلى مكتبة Divi.

انقر فوق الزر "استيراد".

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

ثم انقر فوق زر الاستيراد.

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

انظر أسفل المنشور لمعرفة كيفية إضافة تخطيط قسم مربع الإشعارات إلى صفحة أو قالب

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

الجزء 1: إضافة تخطيط قسم جديد إلى مكتبة Divi

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

أضف التخطيط

للبدء ، انتقل إلى Divi> Divi Library.

انقر فوق الزر "إضافة جديد" لإضافة تصميم جديد إلى المكتبة.

في النافذة المنبثقة Add New Layout ، امنح التخطيط اسمًا (مثل "قسم الإشعارات") واختر نوع التخطيط "القسم".

ثم انقر فوق إرسال.

الجزء 2: تصميم مخطط قسم مربع الإعلام

بناء على الواجهة الأمامية

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

خلفية القسم والحشو

افتح إعدادات القسم ، وقم بتحديث الخلفية والحشو كما يلي:

• اللون الأيسر للخلفية المتدرجة:
• خلفية متدرجة اللون الصحيح:
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

معرف القسم CSS

سيحتاج مربع الإشعارات إلى بعض CSS / JQuery المخصصة لتوفير وظيفة قابلة للنقر لإغلاق المربع / القسم. أضف معرف CSS التالي إلى القسم حتى نتمكن من استهدافه بالرمز لاحقًا.

• معرف CSS: قسم الإشعارات

أضف عرض الصف والصف

أضف صفًا من عمود واحد إلى القسم.

ثم قم بتحديث إعدادات الصف بأقصى عرض كما يلي:

• العرض الأقصى: 700 بكسل

أضف وحدة نصية لنص الإعلام

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

محتوى النص

قم بتحديث محتوى النص بالنص المطلوب للإشعار على النحو التالي:

<h2>COVID-19 Notice</h2>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.

تصميم نصي

ضمن علامة تبويب التصميم ، قم بتحديث نمط النص كما يلي:

• خط النص: المقصورة
• حجم نص النص: 18 بكسل
• محاذاة النص: مركز
• حجم نص العنوان 2: 46 بكسل (سطح المكتب) ، 38 بكسل (الجهاز اللوحي) ، 28 بكسل (الهاتف)
• ارتفاع خط العنوان 2: 1.3em

أضف صف عمودين

تحت الصف الذي يحتوي على وحدة النص ، أضف صفًا جديدًا من عمودين (1/2 - 1/2).

عرض الصف

قم بتحديث الصف باستخدام الحد الأقصى للعرض التالي:

• العرض الأقصى: 600 بكسل

أضف زر الحث على الشراء

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

لإنشاء الزر ، أضف وحدة زر جديدة إلى العمود 1.

محتوى الزر

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

تصميم زر

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

• محاذاة الزر: المركز
• استخدام الأنماط المخصصة للزر: نعم
• لون نص الزر: #ffffff
• لون خلفية الزر: # f6ae55
• عرض حد الزر: 0 بكسل
• خط الزر: المقصورة
• وزن خط الزر: غامق

من أجل جعل الزر يمتد بالعرض الكامل للعمود ، أضف CSS المخصص التالي إلى العنصر الرئيسي:

display: block !important;

إضافة زر الإغلاق

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

زر نسخ ولصق في العمود الأيمن

لبدء تصميم الزر ، انسخ الزر في العمود 1 والصقه في العمود 2.

المحتوى

تحديث نص الزر.

• نص الزر: حسنًا!

تصميم

ثم قم بتحديث لون نص الزر ولون الخلفية كما يلي:

• لون نص الزر: # 121212
• لون خلفية الزر: rgba (255،255،255،0.4)

فئة زر CSS

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

• فئة CSS: إشعار قريب

إنشاء رمز إغلاق مربع الإعلام ("x").

اضف سطر

من أجل إنشاء رمز الإغلاق في أعلى يمين مربع الإعلام ، صف جديد من عمود واحد.

إعدادات الصف

ثم قم بتحديث عرض الصف والحشو كما يلي:

• العرض: 100٪
• العرض الأقصى: 100٪
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

إضافة وحدة / أيقونة دعاية مغالى فيها

داخل الصف ، أضف وحدة دعاية مغالى فيها جديدة.

المحتوى

ثم احذف المحتوى الوهمي في العنوان والنص ، حدد لاستخدام رمز "x" للدعاية الدعائية.

إعدادات دعاية وإعلان لإغلاق أيقونة

ضمن علامة تبويب التصميم ، قم بتحديث ما يلي:

• لون الأيقونة: #ffffff
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 40 بكسل
• العرض: 40 بكسل
• الارتفاع: 40 بكسل

موقف الرمز

لوضع الرمز في الجزء العلوي الأيمن من المربع ، افتح علامة التبويب خيارات متقدمة ، وقم بتحديث ما يلي:

• الموقف: مطلق
• الموقع: أعلى اليمين
• الإزاحة العمودية: 20 بكسل
• الإزاحة الأفقية: 20 بكسل

فئة Blurb / Icon CSS

أضف الآن فئة CSS نفسها إلى الدعاية الدعائية التي قدمتها لـ "حسنًا!" زر الإغلاق (سيتم استخدام كلاهما لإغلاق مربع الإعلام).

• فئة CSS: إشعار قريب

أضف رمز مخصص

بالنسبة لمربع الإشعارات هذا ، سنقوم بإضافة CSS / Javascript مخصص للقيام بما يلي:

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

لإضافة الوظيفة ، سنقوم بإضافة الرمز إلى وحدة التعليمات البرمجية. انطلق وأضف وحدة رمز جديدة ضمن وحدة زر الإغلاق (أو في أي مكان على الصفحة بالفعل).

ثم الصق الكود التالي في منطقة محتوى وحدة التعليمات البرمجية:

<style>
  .close-notice {
    cursor: pointer;
  }
  #notice-section {
    display:none;
  }
  .et-fb-post-content #notice-section {
    display: block !important;
  }
</style>
<script>
function storageAvailable(type) {
  try {
      var storage = window[type],
          x = '__storage_test__';
      storage.setItem(x, x);
      storage.removeItem(x);
      return true;
  }
  catch(e) {
      return e instanceof DOMException && (
          // everything except Firefox
          e.code === 22 ||
          // Firefox
          e.code === 1014 ||
          // test name field too, because code might not be present
          // everything except Firefox
          e.name === 'QuotaExceededError' ||
          // Firefox
          e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
          // acknowledge QuotaExceededError only if there's something already stored
          storage.length !== 0;
  }
}
jQuery(document).ready(function($) {
  var storageAvailable = window.storageAvailable('sessionStorage');
  $(".close-notice").click(function() {
    $("#notice-section").slideUp();
    if (storageAvailable) {
      sessionStorage.setItem('etNoticeState','hidden'); 
    }    
  });
  if (storageAvailable) {
    if ('hidden' !== sessionStorage.getItem('etNoticeState')){
      $("#notice-section").show();
    }
  } else {
    $("#notice-section").show();
  }
});
</script>

حول المدونة

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

#notice-section {display:none;} 

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

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

.et-fb-post-content #notice-section {display:none;} 

تقوم وظيفة JS “storageAvailable (type)” بفحص المتصفح للتخزين.

يقوم مقتطف jQuery بكل ما يلزم ...

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

بمجرد الانتهاء ، تأكد من حفظ تخطيط القسم.

إضافة مربع الإعلام (تخطيط القسم) إلى الصفحة

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

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

تأكد من وضع القسم أعلى الصفحة (أو في أي مكان آخر قد ترغب فيه) واحفظ الصفحة.

إضافة صندوق الإعلام (تخطيط القسم) إلى قالب Divi Theme

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

لإضافته إلى قالب ، افتح Divi Theme Builder.

ثم انقر لتحرير منطقة القالب حيث تريد إضافة تخطيط قسم مربع الإعلام.

في محرر تخطيط القالب ، انقر لإضافة قسم جديد وحدد تخطيط القسم المحفوظ من مكتبة Divi.

احفظ تخطيط القالب.

هذا كل شيء!

النتيجة النهائية

هذه هي النتيجة النهائية لمربع الإشعارات على صفحة مباشرة.

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!