Chế độ tối tiếp tục trở nên phổ biến như một tùy chọn tiện lợi cho phép người dùng trải nghiệm web mà ít mỏi mắt hơn. Hãy đối mặt với nó, tất cả chúng ta có xu hướng dành nhiều thời gian nhìn chằm chằm vào màn hình hơn chúng ta có thể nên làm, vì vậy bất kỳ sự tiện lợi bổ sung nào cho trải nghiệm người dùng (như chế độ tối) có thể đi một chặng đường dài. 

Hệ điều hành, chương trình và trình duyệt thường bao gồm các tính năng chế độ tối được tích hợp sẵn, nhưng một số nhà phát triển đưa nó lên một cấp độ khác bằng cách đưa vào trải nghiệm chế độ tối tùy chỉnh cho Website. Ý tưởng là kiểm soát nhiều hơn sự xuất hiện của Website ở chế độ tối mà không phải ảnh hưởng đến thương hiệu và / hoặc thiết kế.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo chế độ tối tùy chỉnh trong Divi từ đầu mà không cần plugin. Với tính năng chuyển đổi chế độ tối này, bạn sẽ có quyền kiểm soát thiết kế chế độ tối và có trải nghiệm người dùng tốt hơn phù hợp với thương hiệu của bạn.

Hãy bắt đầu!

khảo sát

Dưới đây là bản xem trước của thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.

Đây là chế độ tối tùy chỉnh để chuyển đổi chúng tôi sẽ tạo.

Chuyển đổi chế độ tối

Và đây là phần trước và sau cho chế độ tối được áp dụng cho một trong các bố cục được xác định trước của chúng tôi.

Chế độ ánh sáng chế độ tối so sánh

Và đây là nút chuyển đổi chế độ tối được thêm vào tiêu đề chung. Chú ý chế độ sáng / tối vẫn duy trì như thế nào khi bạn duyệt trang web.

Phần 1: Xây dựng công tắc từ chế độ tối

Trong phần đầu tiên của hướng dẫn này, chúng tôi sẽ xây dựng nút chuyển đổi chế độ tối bằng một trang trong Divi. Sau khi nút chuyển đổi được tạo bằng mã, bạn sẽ có thể lưu nó vào thư viện Divi và thêm nó vào bất kỳ đâu trong thiết bị của bạn. Website.

Để bắt đầu, hãy thêm một hàng một cột vào phần mặc định khi xây dựng từ đầu với Divi ở giao diện người dùng.

Phần Divi

Thêm mô-đun tóm tắt

Để xây dựng chuyển đổi tùy chỉnh, chúng tôi sẽ thiết kế một mô-đun Blurb với một chút CSS tùy chỉnh.

Thêm một mô-đun văn bản trình bày mới vào dòng.

Nội dung

Gỡ bỏ nội dung Hình nộm mặc định cho tiêu đề và nội dung. Sau đó thêm biểu tượng hình vuông vào vị trí của hình ảnh.

Mô-đun tóm tắt Divi

Conception

Chuyển đến cài đặt thiết kế và cập nhật các thông tin sau:

  • Màu biểu tượng: # 666666
  • Căn chỉnh hình ảnh / biểu tượng: bên trái
  • Kích thước phông chữ biểu tượng: 22 pixel
Cấu hình biểu tượng Divi
  • Chiều rộng: 50px
  • Sắp xếp mô-đun: trung tâm
  • Chiều cao: 25px
Cấu hình định cỡ Divi
  • Ký quỹ: thấp 0px
  • Các góc được làm tròn: 4px
  • Độ rộng đường viền: 2px
  • Màu viền: # 666666
Cấu hình đường viền Divi

CSS tùy chỉnh

Khi thiết kế đã sẵn sàng, hãy chuyển sang tab nâng cao. Trong CSS tùy chỉnh, hãy thêm CSS tùy chỉnh sau vào phần tử chính để đảm bảo phần tràn không bị che khuất bởi kiểu dáng của các góc tròn.

tràn: nhìn thấy! quan trọng;

Sau đó, thêm CSS tùy chỉnh sau vào phần tử After:

nội dung: "ánh sáng"; vị trí: tuyệt đối; trái: -35px; top: 0px;

Điều này thêm nhãn vào mô-đun Blurb mà chúng ta sẽ thay đổi từ "sáng" sang "tối" khi nhấp.

Nút chuyển đổi Divi

Thiết kế văn bản cơ thể

Vì văn bản phần tử giả của bài đăng kế thừa các kiểu văn bản nội dung, chúng tôi có thể thêm các kiểu văn bản nội dung bằng cách sử dụng các tùy chọn Divi như sau:

  • Phông chữ cơ thể: Roboto
  • Màu văn bản cơ thể: # 666666
  • Kích thước văn bản cơ thể: 13px
  • Khoảng cách các chữ cái của cơ thể: 1px
Nút chuyển đổi phông chữ

Thêm mã tùy chỉnh với một mô-đun mã

Để thêm mã cần thiết (CSS / JQuery) để vận hành chuyển đổi chế độ tối, chúng tôi sẽ sử dụng mô-đun mã.

Tạo một mô-đun mã mới dưới mô-đun Blurb trong cùng một cột.

Thêm mô-đun mã

Sau đó dán đoạn mã sau vào vùng mã:

/*** 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");}});

Thêm các lớp CSS tùy chỉnh

Mã tùy chỉnh yêu cầu bạn phải thêm một lớp CSS tùy chỉnh vào mô-đun hoặc công tắc Blurb. Điều này sẽ cho phép phần nổi bật kích hoạt chức năng chuyển đổi chế độ tối và khi nhấp vào.

Lớp mô-đun Blurb

Mở cài đặt mô-đun Blurb và thêm một lớp CSS tùy chỉnh như sau:

  • Lớp CSS: et-dark-toggle
Mã css divi

Lớp có khả năng chế độ tối

Chúng tôi cũng cần thêm một lớp CSS tùy chỉnh vào mỗi phần tử Divi mà chúng tôi muốn có khả năng chế độ tối. Khi phần tử có lớp CSS, phần tử đó sẽ kế thừa CSS "chế độ tối" tùy chỉnh trong mã mà chúng tôi đã thêm sau khi bật chế độ tối. Phương pháp này cho phép chúng tôi kiểm soát nhiều hơn thiết kế chế độ tối của chúng tôi, vì một số yếu tố có thể không yêu cầu tạo kiểu ở chế độ tối.

Để bắt đầu, chúng ta có thể thêm chế độ tối vào phần chứa chuyển đổi chế độ tối.

Mở các tham số phần và thêm lớp CSS sau:

  • Lớp CSS: et-dark-mode có khả năng
Phần divi bộ chọn css

Phần 2: Thêm các tính năng Chế độ tối cho Trang Divi

Bây giờ chúng ta đã có mã CSS và các lớp, chúng ta đã sẵn sàng áp dụng thiết kế và chức năng Chế độ tối cho toàn bộ trang trong Divi. Để làm điều này, chúng tôi sẽ sử dụng bố cục Tạo sẵn của trang đích ứng dụng dành cho thiết bị di động.

Để thêm bố cục, hãy mở menu cài đặt ở cuối trình tạo trực quan và nhấp vào biểu tượng Thêm bố cục mới.

Sau đó, chọn bố cục của trang đích của ứng dụng dành cho thiết bị di động từ tab Bố cục được xác định trước.

Đảm bảo tùy chọn “Thay thế nội dung hiện tại” KHÔNG được chọn. Bạn không muốn xóa phần bằng cách chuyển đổi chế độ tối.

Chọn bố cục divi 1

Vì kiểu chế độ tối sẽ chỉ áp dụng cho các phần tử có lớp CSS "có khả năng và chế độ tối", chúng tôi có thể chọn thêm vào trang theo các cách khác nhau.

  1. Chúng ta có thể thêm lớp CSS vào từng thành phần của trang.
  2. Chúng tôi có thể mở rộng lớp CSS cho các phần tử trên toàn trang (điều đó sẽ nhanh hơn so với làm thủ công). Ví dụ: chúng tôi có thể mở cài đặt phần cho phần trên cùng và mở rộng lớp CSS cho phần đó cho tất cả các phần của trang.
  3. Chúng ta có thể thêm lớp CSS vào mặc định chung của phần tử. Điều này sẽ áp dụng lớp CSS cho tất cả các phần tử trên toàn trang web, thêm khả năng chế độ tối trên toàn bộ trang web. Ví dụ: chúng tôi có thể mở cài đặt phần và nhấp vào biểu tượng mặc định chung để thay đổi mặc định phần chung. Sau đó, chúng ta có thể thêm lớp CSS và đăng ký nó như một lớp CSS cho tất cả các phần của trang web.

Thêm lớp CSS vào các phần tử trang

Đối với ví dụ này, chúng tôi sẽ cập nhật các phần tử trang bằng cách thêm lớp CSS vào mặc định chung cho các phần và mô-đun văn bản. Và chúng tôi cũng sẽ thực hiện một số bổ sung cho các phần tử trang khác khi chúng tôi tiếp tục.

Tất cả các phần

Để thêm lớp CSS vào tất cả các phần, hãy mở cài đặt của phần trên cùng có chứa chế độ tối. Sau đó, thay đổi mặc định chung của phần và thêm lớp CSS sau vào mặc định chung của phần:

  • Lớp CSS: et-dark-mode có khả năng
Thêm mã css vào tất cả các phần

Tất cả các phần chuyên ngành

Đồng thời thêm lớp CSS vào mặc định toàn cục trong phần chuyên biệt.

Thêm vào tất cả các phần chuyên biệt

Mô-đun văn bản

Sau đó, mở cài đặt của một trong các mô-đun văn bản trên trang và thêm cùng một lớp CSS vào mặc định văn bản chung.

Thêm vào mô-đun văn bản

Để kiểm tra kết quả, hãy truy cập trang trực tiếp và nhấp vào chế độ tối để chuyển đổi ở đầu trang.

Đây là những gì trang sẽ trông giống như trong chế độ rõ ràng.

Chế độ xóa

Và đây là những gì trang sẽ trông giống như trong chế độ tối.

Chế độ tối

Tài nguyên bổ sung

Đây là những người khác ressources điều đó có thể khiến bạn quan tâm.

cuối cùng suy nghĩ

Trang bị cho trang web Divi của bạn chế độ chuyển đổi chế độ tối tùy chỉnh có thể là một cách tuyệt vời để nâng cao trải nghiệm người dùng và tạo ra một thiết kế hoàn toàn mới vừa hài lòng vừa dễ chịu. Tôi hy vọng điều này sẽ hữu ích cho bạn.