رفتن به محتوای اصلی

نحوه اجرای حالت تاریک در سایت خود با Divi

Divi: ساده ترین تم وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

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

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

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

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

بررسی

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

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

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

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

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

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

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

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

بخش Divi

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

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

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

محتویات

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

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

ماژول خلاصه 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 سفارشی را به شرح زیر اضافه کنید:

آیا شما به دنبال بهترین تم ها و پلاگین های وردپرس هستید؟

بهترین پلاگین ها و تم های وردپرس را در Envato دانلود کنید و به راحتی وب سایت خود را ایجاد کنید. در حال حاضر بیش از 49.720.000 دریافت می کند. [EXCLUSIVE]

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

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

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

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

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

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

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

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

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

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

اطمینان حاصل کنید که گزینه "جایگزینی محتوای موجود" انتخاب نشده باشد. شما نمی خواهید بخش را با تغییر حالت تاریک پاک کنید.

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

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

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

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

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

همه بخش ها

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

  • کلاس CSS: دارای حالت تاریک و دارای حالت تاریک است

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

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

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

ماژول های متن

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

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

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

به راحتی فروشگاه آنلاین خود را ایجاد کنید

دانلود رایگان WooCommerce، بهترین پلاگین تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتال خود را در وردپرس. [توصیه میشود]

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

حالت پاک کردن

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

حالت تاریک

منابع اضافی

در اینجا منابع دیگری وجود دارد که ممکن است مورد توجه شما قرار گیرند.

آخرین افکار

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

این مقاله حاوی نظرات 0

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

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

بازگشت به بالا
0 سهام
سهم
صدای جیر جیر
ثبات