كيفية تنفيذ تبديل الوضع المظلم في موقع Divi الخاص بك

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

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

هيا بنا نبدأ!

نظرة خاطفة

فيما يلي نظرة سريعة على التصميم الذي سنقوم ببنائه في هذا البرنامج التعليمي.

هنا هو تبديل الوضع المظلم المخصص الذي سنقوم ببنائه.

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

وإليك وضع تبديل الوضع المظلم مضافًا إلى رأس عام. لاحظ كيف يظل الوضع الفاتح / المظلم أثناء التنقل في الموقع.

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

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

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

بمجرد الانتهاء من ذلك ، سيكون تخطيط القسم متاحًا في Divi Builder.

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

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

الجزء 1: بناء تبديل الوضع المظلم

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

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

أضف دعاية مغالى فيها

لبناء التبديل المخصص ، سنقوم بتصميم وحدة blurb مع القليل من CSS المخصص.

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

المحتوى

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

تصميم

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

• لون الأيقونة: # 666666
• محاذاة الصورة / الرمز: يسار
• حجم خط الأيقونة: 22 بكسل

• العرض: 50 بكسل
• محاذاة الوحدة: مركز
• الارتفاع: 25 بكسل

• الهامش: 0 بكسل للأسفل
• الزوايا الدائرية: 4 بكسل
• عرض الحدود: 2 بكسل
• لون الحدود: # 666666

لغة تنسيق ويب حسب الطلب

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

overflow: visible !important;

ثم أضف CSS المخصص التالي إلى العنصر After:

content: "light";
position: absolute;
left: -35px;
top:0px;

هذا يضيف تسمية إلى الوحدة النمطية التي دعاية مغالى فيها أننا سوف نتغير من "ضوء" إلى "داكن" عند النقر.

تصميم النص الأساسي

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

• خط الجسم: Roboto
• لون النص الأساسي: # 666666
• حجم النص الأساسي: 13 بكسل
• تباعد حروف الجسم: 1 بكسل

إضافة كود مخصص بوحدة كود

لإضافة الكود اللازم (CSS / JQuery) لجعل تبديل الوضع المظلم يعمل بسحره ، سنستخدم وحدة رمز.

أنشئ وحدة تعليمات برمجية جديدة ضمن وحدة blurb في نفس العمود.

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

<style>
/**
 * Dark Mode Toggle Styles
 */
.et-dark-mode {
  transition: all .5s;
  }
.et-dark-toggle {
  cursor: pointer;
  transition: all .5s;
  }
body.et-dark-mode .et-dark-toggle {
  border-color: #666666;
  }
body.et-dark-mode .et-dark-toggle:after {
  content:"dark";
  color: #666666;
  left: 54px;
  }
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
  text-align:right;
  }
body.et-dark-mode .et-dark-toggle .et-pb-icon {
  color: #666666;
  }
/**
 * Body Dark Mode Style
 */
body.et-dark-mode {
  background-color: #23282d !important;
  }
/**
 * Divi Element Dark Mode Styles
 *
 * Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
 */
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  background-blend-mode: overlay;
  transition: opacity .5s ease-in-out;
  color: #dddddd !important;
  }
 /* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
  background-color: #23282d !important;
  color: #dddddd !important;
  }
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
  background-color: transparent !important;
  color: #dddddd !important;
  }
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !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');
      $(".et-dark-toggle").click(function() {
          $(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
          if ( storageAvailable ) {
              $("body").hasClass("et-dark-mode") ?
              sessionStorage.setItem('etDarkModeEnabled','1'):
              sessionStorage.removeItem('etDarkModeEnabled');
          }
      });
      if (storageAvailable) {
          '1' == sessionStorage.getItem('etDarkModeEnabled') ?
          $(".et-dark-mode-capable,body").addClass("et-dark-mode"):
          $(".et-dark-mode-capable,body").removeClass("et-dark-mode");
      }
  });
</script>

إضافة فئات CSS المخصصة

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

فئة الوحدة النمطية Blurb

افتح إعدادات وحدة blurb وأضف فئة CSS مخصصة كما يلي:

• فئة CSS: et-dark-toggle

فئة قادرة على الوضع الداكن

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

للبدء ، يمكننا إضافة الوضع المظلم إلى القسم الذي يحتوي على تبديل الوضع المظلم.

افتح إعدادات القسم وأضف فئة CSS التالية:

• فئة CSS: قادر على الوضع المظلم

الجزء 2: إضافة وظائف الوضع الداكن إلى صفحة Divi

الآن بعد أن أصبح لدينا الكود وفئات CSS في مكانها الصحيح ، نحن مستعدون لتطبيق وظائف الوضع المظلم والتصميم على صفحة كاملة في Divi. للقيام بذلك ، سنستخدم تخطيط الصفحة المقصودة لتطبيق الجوال الخاص بنا.

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

ثم حدد تخطيط الصفحة المقصودة لتطبيق الهاتف المحمول من علامة تبويب التخطيطات المعدة مسبقًا.

تأكد من عدم تحديد الخيار "استبدال المحتوى الموجود". لا تريد مسح القسم باستخدام تبديل الوضع المظلم.

نظرًا لأن نمط الوضع المظلم لن يتم تطبيقه إلا على العناصر التي تحتوي على "إمكانية وضع الظلام" من فئة CSS ، يمكننا اختيار إضافة بضع طرق مختلفة إلى الصفحة.

1. يمكننا إضافة فئة CSS لكل عنصر في الصفحة على حدة.
2. يمكننا توسيع فئة CSS لتشمل العناصر في جميع أنحاء الصفحة (سيكون هذا أسرع من القيام بكل عنصر يدويًا). على سبيل المثال ، يمكننا فتح إعدادات القسم للقسم العلوي وتوسيع فئة CSS لهذا القسم لجميع الأقسام في جميع أنحاء الصفحة.
   
3. يمكننا إضافة فئة CSS إلى الإعدادات الافتراضية العامة للعنصر. سيؤدي هذا إلى تطبيق فئة CSS على جميع العناصر على مستوى الموقع ، مما يضيف إمكانية الوضع المظلم في جميع أنحاء الموقع بأكمله. على سبيل المثال ، يمكننا فتح إعدادات القسم والنقر فوق الرمز الافتراضي العام لتحرير الإعدادات الافتراضية للقسم العام. ثم يمكننا إضافة فئة CSS وحفظها كفئة CSS لجميع الأقسام على مستوى الموقع.
   

إضافة فئة CSS إلى عناصر الصفحة

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

جميع الأقسام

لإضافة فئة CSS إلى جميع الأقسام ، افتح الإعدادات للقسم العلوي الذي يحتوي على تبديل الوضع المظلم. ثم قم بتحرير الإعدادات الافتراضية العامة للقسم وأضف فئة CSS التالية إلى قسم الإعدادات الافتراضية العامة:

• فئة CSS: قادر على الوضع المظلم

جميع الاقسام التخصصية

أضف فئة CSS إلى الإعدادات الافتراضية العالمية لقسم التخصص أيضًا.

وحدات النص

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

دعاية

بعد ذلك ، افتح الإعدادات الخاصة بأحد الدعاية المغلوطة في تخطيط الصفحة وأضف فئة CSS إلى Blurb Global Defaults.

أعمدة التزكية

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

ملاحظة: ليس من الجيد إضافة فئة CSS إلى الإعدادات الافتراضية العامة للعمود لأن ذلك سيؤدي إلى كسر بعض عناصر التصميم (على سبيل المثال ، ليس من الجيد إعطاء جميع الأعمدة خلفية داكنة عندما تكون معظم الخلفيات الأعمدة الزمنية شفافة).

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

هذا هو الشكل الذي يجب أن تبدو عليه الصفحة في الوضع الخفيف.

وإليك ما يجب أن تبدو عليه الصفحة في الوضع المظلم.

الجزء 3: إضافة تبديل الوضع المظلم إلى رأس عام

إذا كنت ترغب في توسيع وظيفة الوضع المظلم على مستوى الموقع ، فسيكون من الجيد إضافة تبديل الوضع المظلم إلى Divi Global Header. بهذه الطريقة سيكون متاحًا للمستخدمين على مستوى الموقع في مكان واحد مناسب.

حفظ الوضع المظلم تبديل وكود إلى مكتبة Divi

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

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

بعد ذلك ، احفظ وحدة الرمز في مكتبة Divi أيضًا.

استيراد قالب رأس عام مُجهز مسبقًا

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

في هذا البرنامج التعليمي ، سنستخدم الرأس العام المضمّن في حزمة منشئ السمات الخامسة. لإضافة الرأس العام باستخدام منشئ السمات ، ستحتاج إلى تنزيل حزمة منشئ القوالب ثم استخدام خيارات قابلية النقل لاستيراد ملف JSON المسمى "divi-theme-builder-pack-5-default-website-template.json" .

بمجرد تحميل القالب ، انقر لتحرير الرأس العام.

ثم أضف الوضع المظلم للتبديل من المكتبة إلى العمود 1 في الصف الثاني من الرأس.

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

نظرًا لأن لدينا فئة CSS "et-dark-mode-enabled" باعتبارها الفئة الافتراضية لجميع الأقسام ، فإن الأقسام الموجودة داخل الرأس ستحتوي عليها أيضًا بشكل افتراضي. لتعطيل هذا ، ما عليك سوى إعطائه فئة CSS متجاوزة.

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

فيما يلي النتائج النهائية لصفحة تبديل الوضع المظلم الخاصة بنا.

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

ضبط أنماط CSS Dark Mode المخصصة

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

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

افكار اخيرة

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

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

هتافات!