Dark Mode به عنوان گزینه ای راحت که به کاربران امکان می دهد وب را با فشار کمتری در چشم تجربه کنند ، همچنان محبوبیت خود را کسب می کند. بیایید این واقعیت را بپذیریم که همه ما بیشتر از آنچه که احتمالاً باید داشته باشیم وقت خود را صرف خیره شدن به صفحه نمایش می کنیم ، بنابراین هرگونه راحتی بیشتر به تجربه کاربر (مانند حالت تاریک) می تواند تا حد زیادی کمک کند. 

سیستم‌های عامل، برنامه‌ها و مرورگرها معمولاً دارای قابلیت‌های حالت تاریک داخلی هستند، اما برخی از توسعه‌دهندگان با گنجاندن یک تجربه حالت تاریک سفارشی برای خود، آن را به سطح دیگری می‌برند. وب سایت. ایده این است که کنترل بیشتری بر ظاهر آنها داشته باشیم وب سایت در حالت تاریک بدون نیاز به مصالحه در برند و/یا طراحی.

در این آموزش ، ما به شما نشان خواهیم داد که چگونه یک حالت تاریک سفارشی بدون نیاز به افزونه از ابتدا در Divi ایجاد کنید. با استفاده از این ویژگی ضامن حالت تاریک ، شما می توانید بر طراحی حالت تاریک کنترل داشته باشید و تجربه کاربری مطابق با مارک خود را داشته باشید.

بیایید شروع کنیم!

بررسی

در اینجا پیش نمایش طرحی که در این آموزش خواهیم ساخت وجود دارد.

در اینجا حالت ضعیف حالت تاریکی را که می خواهیم ایجاد کنیم ، آورده شده است.

تغییر حالت تاریک

و این حالت قبل و بعد از حالت تاریک است که به یکی از طرح های از پیش تعریف شده ما اعمال می شود.

مقایسه حالت روشنایی حالت تاریک

و در اینجا ضامن حالت تاریک است که به یک عنوان جهانی اضافه می شود. توجه داشته باشید که هنگام مرور سایت ، حالت تاریک / روشن چگونه باقی می ماند.

قسمت 1: ساخت سوئیچ از حالت تاریک

در این قسمت اول آموزش، یک ضامن حالت تاریک با صفحه ای در Divi می سازیم. هنگامی که ضامن با کد ایجاد شد، می‌توانید آن را در کتابخانه Divi ذخیره کنید و آن را در هر کجای خود اضافه کنید. وب سایت.

برای شروع ، هنگام ساختن از ابتدا با Divi در قسمت جلویی ، یک ردیف یک ستون به قسمت پیش فرض اضافه کنید.

بخش Divi

ماژول خلاصه را اضافه کنید

برای ساخت تغییر کاربری سفارشی ، ما قصد داریم یک ماژول Blurb را با کمی CSS سفارشی طراحی کنیم.

ماژول متن ارائه جدید را به خط اضافه کنید.

محتویات

را حذف کنید محتویات ساختگی پیش فرض برای عنوان و بدنه. سپس نماد مربع را به جای تصویر اضافه کنید.

ماژول خلاصه Divi

تصور

به تنظیمات طراحی بروید و موارد زیر را به روز کنید:

  • رنگ نماد: # 666666
  • تراز تصویر / آیکون: سمت چپ
  • اندازه قلم نماد: 22 پیکسل
پیکربندی نماد Divi
  • عرض: 50px
  • ترتیب ماژول: مرکز
  • ارتفاع: 25px
پیکربندی اندازه Divi
  • حاشیه: 0px کم است
  • گوشه های گرد: 4px
  • عرض مرز: 2px
  • رنگ حاشیه: # 666666
پیکربندی مرز Divi

CSS سفارشی

هنگامی که طرح در محل قرار گرفت ، به برگه Advanced بروید. در بخش CSS سفارشی ، CSS سفارشی زیر را به عنصر اصلی اضافه کنید تا مطمئن شوید سرریز با یک ظاهر طراحی شده گوشه های گرد پوشیده نیست.

سرریز: قابل مشاهده! مهم؛

سپس CSS سفارشی زیر را به عنصر After اضافه کنید:

محتوای: "نور" ؛ موقعیت: مطلق ؛ سمت چپ: -35px؛ top: 0px؛

این یک برچسب به ماژول Blurb اضافه می کند که ما از کلیک بر روی "نور" به "تاریک" تغییر می دهیم.

دکمه ضامن Divi

طراحی متن بدن

از آنجا که متن عنصر شبه post سبک های متن متن را به ارث می برد ، می توانیم سبک های متن بدن را با استفاده از گزینه های Divi به شرح زیر اضافه کنیم:

  • قلم بدنه: Roboto
  • رنگ متن بدن: # 666666
  • اندازه متن بدن: 13px
  • فاصله حروف بدن: 1px
دکمه جابجایی قلم

اضافه کردن کد دلخواه با ماژول کد

برای اضافه کردن کد لازم (CSS / JQuery) برای عملکرد ضامن حالت تاریک ، از ماژول کد استفاده خواهیم کرد.

در همان ستون یک ماژول کد جدید را در زیر ماژول Blurb ایجاد کنید.

ماژول کد را اضافه کنید

سپس کد زیر را در قسمت کد قرار دهید:

/*** 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;}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 Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.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");}});

افزودن کلاسهای CSS سفارشی

کد سفارشی ایجاب می کند که یک کلاس CSS سفارشی به ماژول یا سوئیچ Blurb اضافه کنید. این اجازه می دهد تا علامت گذاری باعث تغییر حالت تاریک و قابلیت کلیک کردن شود.

کلاس ماژول را مبهم کنید

تنظیمات ماژول Blurb را باز کرده و یک کلاس CSS سفارشی را به شرح زیر اضافه کنید:

  • کلاس CSS: et-dark-toggle
کد css divi

کلاس قادر به حالت تاریک است

همچنین باید به هر عنصر Divi که می خواهیم قابلیت حالت تاریک را داشته باشد ، یک کلاس CSS سفارشی اضافه کنیم. هنگامی که عنصر کلاس CSS را پیدا کرد ، آن عنصر CSS "حالت تاریک" سفارشی را در کدی که پس از فعال شدن حالت تاریک اضافه کردیم ، به ارث می برد. این روش به ما امکان کنترل بیشتر بر طراحی حالت تاریک ما را می دهد ، زیرا برخی از عناصر ممکن است به حالت دهی در حالت تاریک نیاز نداشته باشند.

برای شروع می توانیم حالت تاریک را به بخش حاوی ضامن حالت تاریک اضافه کنیم.

پارامترهای بخش را باز کرده و کلاس CSS زیر را اضافه کنید:

  • کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است
بخش تقسیم انتخابگر CSS

قسمت 2: اضافه کردن ویژگی های حالت تاریک به صفحه Divi

اکنون که کد و کلاس های CSS در دسترس ما قرار دارد ، آماده استفاده از قابلیت و حالت تاریک حالت در کل صفحه در Divi هستیم. برای این کار ، ما می خواهیم از طرح Premade صفحه فرود برنامه تلفن همراه استفاده کنیم.

برای افزودن طرح ، منوی تنظیمات را در پایین سازنده ویژوال باز کنید و روی نماد افزودن طرح جدید کلیک کنید.

سپس طرح بندی صفحه فرود برنامه تلفن همراه را از برگه طرح های از پیش تعیین شده انتخاب کنید.

مطمئن شوید که گزینه “Replace محتویات موجود» انتخاب نشده است. شما نمی خواهید بخش را با تغییر حالت تاریک پاک کنید.

طرح divi 1 را انتخاب کنید

از آنجا که سبک حالت تاریک فقط برای عناصری با کلاس CSS "قادر و حالت تاریک" اعمال خواهد شد ، می توانیم به روش های مختلف افزودن به صفحه را انتخاب کنیم.

  1. می توانیم کلاس CSS را به طور جداگانه به هر عنصر صفحه اضافه کنیم.
  2. ما می توانیم کلاس CSS را به عناصر موجود در صفحه گسترش دهیم (این سرعت نسبت به انجام دستی آن سریعتر است). به عنوان مثال ، ما می توانیم تنظیمات بخش را برای بخش بالا باز کنیم و کلاس CSS را برای آن بخش به تمام بخشهای صفحه گسترش دهیم.
  3. ما می توانیم کلاس CSS را به پیش فرض های جهانی عنصر اضافه کنیم. این کلاس CSS را به تمام عناصر در سراسر سایت اعمال می کند و قابلیت حالت تاریک را در سایت اضافه می کند. به عنوان مثال ، می توانیم تنظیمات بخش را باز کرده و بر روی نماد پیش فرض جهانی کلیک کنیم تا پیش فرض های بخش جهانی را تغییر دهیم. سپس می توانیم کلاس CSS را اضافه کرده و به عنوان کلاس CSS برای تمام بخشهای سایت ثبت کنیم.

اضافه کردن کلاس CSS به عناصر صفحه

برای این مثال ، ما می خواهیم با اضافه کردن کلاس CSS به پیش فرض های جهانی به بخشها و ماژول های متن ، عناصر صفحه را به روز کنیم. و همچنین در ادامه کار برخی از عناصر دیگر صفحه را اضافه خواهیم کرد.

همه بخش ها

برای افزودن کلاس CSS به همه بخش ها ، تنظیمات قسمت بالا را که شامل ضامن حالت تاریک است باز کنید. سپس بخش جهانی پیش فرض ها را تغییر دهید و کلاس CSS زیر را به بخش پیش فرض های جهانی اضافه کنید:

  • کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است
کد css را به همه بخش ها اضافه کنید

کلیه بخش های تخصصی

همچنین کلاس CSS را در بخش تخصصی به پیش فرض های جهانی اضافه کنید.

به همه بخشهای تخصصی اضافه کنید

ماژول های متن

سپس تنظیمات یکی از ماژول های متن را در صفحه باز کرده و همان کلاس CSS را به پیش فرض های متن جهانی اضافه کنید.

اضافه کردن به ماژول های متن

برای آزمایش نتیجه ، به صفحه زنده بروید و بر روی حالت تاریک ضامن در بالای صفحه کلیک کنید.

در اینجا آنچه صفحه باید در حالت واضح به نظر برسد ، آمده است.

حالت پاک کردن

و این همان چیزی است که صفحه باید در حالت تاریک به نظر برسد.

حالت تاریک

منابع اضافی

در اینجا دیگران است ressources که ممکن است برای شما جالب باشد

آخرین افکار

تجهیز سایت Divi خود به یک حالت تغییر حالت تیره و سفارشی می تواند راهی عالی برای تقویت تجربه کاربر و ایجاد یک طراحی کاملاً جدید باشد که هم چشم را خشنود و هم راحت کند. امیدوارم این برای شما مفید باشد.