Dark Mode به عنوان گزینه ای راحت که به کاربران امکان می دهد وب را با فشار کمتری در چشم تجربه کنند ، همچنان محبوبیت خود را کسب می کند. بیایید این واقعیت را بپذیریم که همه ما بیشتر از آنچه که احتمالاً باید داشته باشیم وقت خود را صرف خیره شدن به صفحه نمایش می کنیم ، بنابراین هرگونه راحتی بیشتر به تجربه کاربر (مانند حالت تاریک) می تواند تا حد زیادی کمک کند.
سیستمهای عامل، برنامهها و مرورگرها معمولاً دارای قابلیتهای حالت تاریک داخلی هستند، اما برخی از توسعهدهندگان با گنجاندن یک تجربه حالت تاریک سفارشی برای خود، آن را به سطح دیگری میبرند. وب سایت. ایده این است که کنترل بیشتری بر ظاهر آنها داشته باشیم وب سایت در حالت تاریک بدون نیاز به مصالحه در برند و/یا طراحی.
در این آموزش ، ما به شما نشان خواهیم داد که چگونه یک حالت تاریک سفارشی بدون نیاز به افزونه از ابتدا در Divi ایجاد کنید. با استفاده از این ویژگی ضامن حالت تاریک ، شما می توانید بر طراحی حالت تاریک کنترل داشته باشید و تجربه کاربری مطابق با مارک خود را داشته باشید.
بیایید شروع کنیم!
بررسی
در اینجا پیش نمایش طرحی که در این آموزش خواهیم ساخت وجود دارد.
در اینجا حالت ضعیف حالت تاریکی را که می خواهیم ایجاد کنیم ، آورده شده است.
و این حالت قبل و بعد از حالت تاریک است که به یکی از طرح های از پیش تعریف شده ما اعمال می شود.
و در اینجا ضامن حالت تاریک است که به یک عنوان جهانی اضافه می شود. توجه داشته باشید که هنگام مرور سایت ، حالت تاریک / روشن چگونه باقی می ماند.
قسمت 1: ساخت سوئیچ از حالت تاریک
در این قسمت اول آموزش، یک ضامن حالت تاریک با صفحه ای در Divi می سازیم. هنگامی که ضامن با کد ایجاد شد، میتوانید آن را در کتابخانه Divi ذخیره کنید و آن را در هر کجای خود اضافه کنید. وب سایت.
برای شروع ، هنگام ساختن از ابتدا با Divi در قسمت جلویی ، یک ردیف یک ستون به قسمت پیش فرض اضافه کنید.
ماژول خلاصه را اضافه کنید
برای ساخت تغییر کاربری سفارشی ، ما قصد داریم یک ماژول Blurb را با کمی CSS سفارشی طراحی کنیم.
ماژول متن ارائه جدید را به خط اضافه کنید.
محتویات
را حذف کنید محتویات ساختگی پیش فرض برای عنوان و بدنه. سپس نماد مربع را به جای تصویر اضافه کنید.
تصور
به تنظیمات طراحی بروید و موارد زیر را به روز کنید:
- رنگ نماد: # 666666
- تراز تصویر / آیکون: سمت چپ
- اندازه قلم نماد: 22 پیکسل
- عرض: 50px
- ترتیب ماژول: مرکز
- ارتفاع: 25px
- حاشیه: 0px کم است
- گوشه های گرد: 4px
- عرض مرز: 2px
- رنگ حاشیه: # 666666
CSS سفارشی
هنگامی که طرح در محل قرار گرفت ، به برگه Advanced بروید. در بخش CSS سفارشی ، CSS سفارشی زیر را به عنصر اصلی اضافه کنید تا مطمئن شوید سرریز با یک ظاهر طراحی شده گوشه های گرد پوشیده نیست.
سرریز: قابل مشاهده! مهم؛
سپس CSS سفارشی زیر را به عنصر After اضافه کنید:
محتوای: "نور" ؛ موقعیت: مطلق ؛ سمت چپ: -35px؛ top: 0px؛
این یک برچسب به ماژول Blurb اضافه می کند که ما از کلیک بر روی "نور" به "تاریک" تغییر می دهیم.
طراحی متن بدن
از آنجا که متن عنصر شبه 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
کلاس قادر به حالت تاریک است
همچنین باید به هر عنصر Divi که می خواهیم قابلیت حالت تاریک را داشته باشد ، یک کلاس CSS سفارشی اضافه کنیم. هنگامی که عنصر کلاس CSS را پیدا کرد ، آن عنصر CSS "حالت تاریک" سفارشی را در کدی که پس از فعال شدن حالت تاریک اضافه کردیم ، به ارث می برد. این روش به ما امکان کنترل بیشتر بر طراحی حالت تاریک ما را می دهد ، زیرا برخی از عناصر ممکن است به حالت دهی در حالت تاریک نیاز نداشته باشند.
برای شروع می توانیم حالت تاریک را به بخش حاوی ضامن حالت تاریک اضافه کنیم.
پارامترهای بخش را باز کرده و کلاس CSS زیر را اضافه کنید:
- کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است
قسمت 2: اضافه کردن ویژگی های حالت تاریک به صفحه Divi
اکنون که کد و کلاس های CSS در دسترس ما قرار دارد ، آماده استفاده از قابلیت و حالت تاریک حالت در کل صفحه در Divi هستیم. برای این کار ، ما می خواهیم از طرح Premade صفحه فرود برنامه تلفن همراه استفاده کنیم.
برای افزودن طرح ، منوی تنظیمات را در پایین سازنده ویژوال باز کنید و روی نماد افزودن طرح جدید کلیک کنید.
سپس طرح بندی صفحه فرود برنامه تلفن همراه را از برگه طرح های از پیش تعیین شده انتخاب کنید.
مطمئن شوید که گزینه “Replace محتویات موجود» انتخاب نشده است. شما نمی خواهید بخش را با تغییر حالت تاریک پاک کنید.
از آنجا که سبک حالت تاریک فقط برای عناصری با کلاس CSS "قادر و حالت تاریک" اعمال خواهد شد ، می توانیم به روش های مختلف افزودن به صفحه را انتخاب کنیم.
- می توانیم کلاس CSS را به طور جداگانه به هر عنصر صفحه اضافه کنیم.
- ما می توانیم کلاس CSS را به عناصر موجود در صفحه گسترش دهیم (این سرعت نسبت به انجام دستی آن سریعتر است). به عنوان مثال ، ما می توانیم تنظیمات بخش را برای بخش بالا باز کنیم و کلاس CSS را برای آن بخش به تمام بخشهای صفحه گسترش دهیم.
- ما می توانیم کلاس CSS را به پیش فرض های جهانی عنصر اضافه کنیم. این کلاس CSS را به تمام عناصر در سراسر سایت اعمال می کند و قابلیت حالت تاریک را در سایت اضافه می کند. به عنوان مثال ، می توانیم تنظیمات بخش را باز کرده و بر روی نماد پیش فرض جهانی کلیک کنیم تا پیش فرض های بخش جهانی را تغییر دهیم. سپس می توانیم کلاس CSS را اضافه کرده و به عنوان کلاس CSS برای تمام بخشهای سایت ثبت کنیم.
اضافه کردن کلاس CSS به عناصر صفحه
برای این مثال ، ما می خواهیم با اضافه کردن کلاس CSS به پیش فرض های جهانی به بخشها و ماژول های متن ، عناصر صفحه را به روز کنیم. و همچنین در ادامه کار برخی از عناصر دیگر صفحه را اضافه خواهیم کرد.
همه بخش ها
برای افزودن کلاس CSS به همه بخش ها ، تنظیمات قسمت بالا را که شامل ضامن حالت تاریک است باز کنید. سپس بخش جهانی پیش فرض ها را تغییر دهید و کلاس CSS زیر را به بخش پیش فرض های جهانی اضافه کنید:
- کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است
کلیه بخش های تخصصی
همچنین کلاس CSS را در بخش تخصصی به پیش فرض های جهانی اضافه کنید.
ماژول های متن
سپس تنظیمات یکی از ماژول های متن را در صفحه باز کرده و همان کلاس CSS را به پیش فرض های متن جهانی اضافه کنید.
برای آزمایش نتیجه ، به صفحه زنده بروید و بر روی حالت تاریک ضامن در بالای صفحه کلیک کنید.
در اینجا آنچه صفحه باید در حالت واضح به نظر برسد ، آمده است.
و این همان چیزی است که صفحه باید در حالت تاریک به نظر برسد.
منابع اضافی
در اینجا دیگران است ressources که ممکن است برای شما جالب باشد
- چگونگی سفارشی کردن تایپوگرافی و طرح بندی در Divi
- نحوه اضافه کردن یک تماس کشویی قابل جابجایی برای اقدام به Divi
- چگونه می توان عناصر را در یک خط در Divi هم تراز کرد
- نحوه ایجاد بخش های متحرک با کلیک روی Divi Builder
آخرین افکار
تجهیز سایت Divi خود به یک حالت تغییر حالت تیره و سفارشی می تواند راهی عالی برای تقویت تجربه کاربر و ایجاد یک طراحی کاملاً جدید باشد که هم چشم را خشنود و هم راحت کند. امیدوارم این برای شما مفید باشد.