วิธีการใช้ Dark Mode Toggle ในไซต์ Divi ของคุณ

โหมดมืดยังคงได้รับความนิยมเพิ่มขึ้นเรื่อยๆ โดยเป็นตัวเลือกที่สะดวกสบายสำหรับผู้ใช้ในการสัมผัสเว็บโดยไม่ต้องกังวลกับสายตา มาเถอะ เราทุกคนมักจะใช้เวลาดูหน้าจอมากกว่าที่ควรจะเป็น ดังนั้นความสะดวกสบายเพิ่มเติมสำหรับประสบการณ์ผู้ใช้ (เช่น โหมดมืด) สามารถไปได้ไกล ระบบปฏิบัติการ โปรแกรม และเบราว์เซอร์มักจะมีความสามารถโหมดมืดในตัว แต่นักพัฒนาบางคนกำลังพัฒนาไปสู่อีกระดับหนึ่งโดยการรวมประสบการณ์โหมดมืดแบบกำหนดเองสำหรับเว็บไซต์ของตน แนวคิดคือควบคุมรูปลักษณ์ของเว็บไซต์ในโหมดมืดได้มากขึ้นโดยไม่ต้องประนีประนอมกับการสร้างแบรนด์และ/หรือการออกแบบ

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างการสลับโหมดมืดแบบกำหนดเองใน Divi ตั้งแต่เริ่มต้นโดยไม่ต้องใช้ปลั๊กอิน ด้วยฟังก์ชันการสลับโหมดมืด คุณจะสามารถควบคุมการออกแบบโหมดมืดและมีประสบการณ์การใช้งานที่ดีขึ้นซึ่งปรับให้เหมาะกับแบรนด์ของคุณ

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

นี่คือการสลับโหมดมืดแบบกำหนดเองที่เราจะสร้าง

และนี่คือภาพก่อนและหลังสำหรับโหมดมืดที่ใช้กับหนึ่งในเลย์เอาต์ที่สร้างไว้ล่วงหน้าของเรา

และนี่คือการสลับโหมดมืดที่เพิ่มไปยังส่วนหัวส่วนกลาง สังเกตว่าโหมดแสง/ความมืดยังคงอยู่ในขณะที่คุณสำรวจไซต์

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

เข้าร่วมจดหมายข่าว Divi แล้วเราจะส่งอีเมลสำเนาชุดเค้าโครงหน้า Landing Page ของ Divi ที่ดีที่สุดให้คุณ พร้อมแหล่งข้อมูล เคล็ดลับ และลูกเล่นที่น่าตื่นตาตื่นใจและฟรีอีกมากมายของ Divi ทำตามแล้วคุณจะเป็นผู้เชี่ยวชาญ Divi ในเวลาไม่นาน หากคุณสมัครรับข้อมูลแล้ว เพียงพิมพ์ที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลดเพื่อเข้าถึงชุดเค้าโครง

ดาวน์โหลด

คุณสมัครสำเร็จแล้ว โปรดตรวจสอบที่อยู่อีเมลของคุณเพื่อยืนยันการสมัครของคุณและเข้าถึงชุดเค้าโครง Divi รายสัปดาห์ฟรี!

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

ตอนที่ 1: สร้าง Dark Mode Toggle

ในส่วนแรกของบทช่วยสอนนี้ เราจะสร้างการสลับโหมดมืดพร้อมหน้าใน Divi เมื่อสร้างการสลับด้วยโค้ดแล้ว คุณจะสามารถบันทึกลงใน Divi Library และเพิ่มลงในที่ใดก็ได้บนเว็บไซต์ของคุณ

ในการเริ่มต้น ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนเริ่มต้นในขณะที่สร้างด้วย Divi ที่ส่วนหน้าตั้งแต่ต้น

เพิ่มประกาศ

ในการสร้างการสลับแบบกำหนดเอง เราจะออกแบบโมดูลการนำเสนอด้วย CSS แบบกำหนดเองเล็กน้อย

เพิ่มโมดูลการนำเสนอใหม่ลงในแถว

เนื้อหา

นำเนื้อหาจำลองเริ่มต้นสำหรับชื่อและเนื้อหาออก จากนั้นเพิ่มไอคอนสี่เหลี่ยมจัตุรัสแทนรูปภาพ

ออกแบบ

ข้ามไปที่การตั้งค่าการออกแบบและอัปเดตสิ่งต่อไปนี้:

• ไอคอนสี: #666666
• การจัดตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ขนาดตัวอักษรของไอคอน: 22px

• ความกว้าง: 50px
• การจัดตำแหน่งโมดูล: ศูนย์
• ส่วนสูง: 25px

• ระยะขอบ: 0px ด้านล่าง
• มุมโค้งมน: 4px
• ความกว้างของเส้นขอบ: 2px
• สีขอบ: #666666

CSS ที่กำหนดเอง

เมื่อออกแบบเรียบร้อยแล้ว ให้ข้ามไปที่แท็บขั้นสูง ภายใต้ CSS ที่กำหนดเอง ให้เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบหลักเพื่อให้แน่ใจว่าไม่มีการซ่อนโอเวอร์โฟลว์จากการจัดรูปแบบมุมโค้งมน

overflow: visible !important;

จากนั้นเพิ่ม CSS ที่กำหนดเองต่อไปนี้ในองค์ประกอบ After:

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

สิ่งนี้จะเพิ่มป้ายกำกับให้กับโมดูลการนำเสนอที่เราจะเปลี่ยนจาก "สว่าง" เป็น "มืด" เมื่อคลิก

การออกแบบข้อความเนื้อหา

เนื่องจากข้อความในองค์ประกอบเทียมหลังรับช่วงลักษณะข้อความเนื้อหา เราจึงสามารถเพิ่มรูปแบบข้อความเนื้อหาโดยใช้ตัวเลือก Divi ได้ดังนี้:

• แบบอักษรของร่างกาย: Roboto
• สีข้อความ: #666666
• ขนาดข้อความเนื้อหา: 13px
• ระยะห่างระหว่างตัวอักษร: 1px

การเพิ่มรหัสที่กำหนดเองด้วยโมดูลรหัส

ในการเพิ่มโค้ดที่จำเป็น (CSS/JQuery) เพื่อให้การสลับโหมดมืดทำงานได้อย่างมหัศจรรย์ เราจะใช้โมดูลโค้ด

สร้างโมดูลโค้ดใหม่ภายใต้โมดูลประกาศในคอลัมน์เดียวกัน

จากนั้นวางรหัสต่อไปนี้ในกล่องรหัส:

<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

เปิดการตั้งค่าโมดูลการนำเสนอและเพิ่มคลาส CSS ที่กำหนดเองดังนี้:

• CSS Class: et-dark-toggle

คลาสที่มีความสามารถโหมดมืด

เรายังต้องเพิ่มคลาส CSS แบบกำหนดเองให้กับทุกองค์ประกอบ Divi ที่เราต้องการให้มีความสามารถของโหมดมืด เมื่อองค์ประกอบมีคลาส CSS แล้ว องค์ประกอบนั้นจะสืบทอด CSS แบบกำหนดเอง "โหมดมืด" ในโค้ดที่เราเพิ่มเมื่อเปิดโหมดมืดแล้ว วิธีนี้ทำให้เราควบคุมการออกแบบโหมดมืดได้มากขึ้น เนื่องจากองค์ประกอบบางอย่างอาจไม่ต้องการรูปแบบโหมดมืดใดๆ

ในการเริ่มต้น เราสามารถเพิ่มโหมดมืดลงในส่วนที่มีการสลับโหมดมืดของเรา

เปิดการตั้งค่าส่วนและเพิ่มคลาส CSS ต่อไปนี้:

• CSS Class: et-dark-mode-capable

ส่วนที่ 2: การเพิ่มฟังก์ชัน Dark Mode ให้กับเพจ Divi

ตอนนี้เรามีโค้ดและคลาส CSS แล้ว เราก็พร้อมที่จะใช้ฟังก์ชันและการออกแบบโหมดมืดกับทั้งเพจใน Divi ในการดำเนินการนี้ เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าของหน้า Landing Page ของแอพมือถือ

ในการเพิ่มเลย์เอาต์ ให้เปิดเมนูการตั้งค่าที่ด้านล่างของตัวสร้างวิชวลแล้วคลิกไอคอน เพิ่มเลย์เอาต์ใหม่

จากนั้นเลือกเลย์เอาต์หน้า Landing Page ของแอพมือถือจากใต้แท็บเลย์เอาต์ที่สร้างไว้ล่วงหน้า

ตรวจสอบให้แน่ใจว่าไม่ได้เลือกตัวเลือก "แทนที่เนื้อหาที่มีอยู่" คุณไม่ต้องการลบส่วนนี้ด้วยการสลับโหมดมืด

เนื่องจากรูปแบบโหมดมืดจะใช้กับองค์ประกอบที่มี CSS Class "et-dark-mode-capable" เท่านั้น เราจึงสามารถเลือกเพิ่มในหน้าได้หลายวิธี

1. เราสามารถเพิ่ม CSS Class ให้กับแต่ละองค์ประกอบในหน้าทีละรายการ
2. เราสามารถขยาย CSS Class ไปยังองค์ประกอบต่างๆ ทั่วทั้งหน้า (ซึ่งจะเร็วกว่าการทำทีละอย่างด้วยตนเอง) ตัวอย่างเช่น เราสามารถเปิดการตั้งค่าส่วนสำหรับส่วนบนสุด และขยายคลาส CSS สำหรับส่วนนั้นไปยังทุกส่วนทั่วทั้งหน้า
   
3. เราสามารถเพิ่มคลาส CSS ให้กับ Global Defaults ขององค์ประกอบได้ สิ่งนี้จะใช้คลาส CSS กับองค์ประกอบทั้งหมดทั่วทั้งไซต์ เพิ่มความสามารถของโหมดมืดทั่วทั้งไซต์ ตัวอย่างเช่น เราสามารถเปิดการตั้งค่าส่วนและคลิกไอคอนเริ่มต้นส่วนกลางเพื่อแก้ไขค่าเริ่มต้นของส่วนส่วนกลาง จากนั้น เราสามารถเพิ่มคลาส CSS และบันทึกเป็นคลาส CSS สำหรับทุกส่วนทั่วทั้งไซต์
   

การเพิ่มคลาส CSS ให้กับองค์ประกอบหน้า

สำหรับตัวอย่างนี้ เราจะอัปเดตองค์ประกอบของหน้าโดยเพิ่มคลาส CSS ให้กับ Global Defaults ในส่วนและโมดูลข้อความ และเรายังจะเพิ่มองค์ประกอบอื่นๆ ในหน้าต่อไปอีกด้วย

ทุกส่วน

หากต้องการเพิ่มคลาส CSS ให้กับทุกส่วน ให้เปิดการตั้งค่าสำหรับส่วนบนที่มีปุ่มสลับโหมดมืด จากนั้นแก้ไขค่าเริ่มต้นส่วนกลางสำหรับส่วนและเพิ่มคลาส CSS ต่อไปนี้ในค่าเริ่มต้นส่วนกลางของส่วน:

• CSS Class: et-dark-mode-capable

แผนกพิเศษทั้งหมด

เพิ่มคลาส CSS ให้กับค่าเริ่มต้นส่วนกลางของส่วนพิเศษเช่นกัน

โมดูลข้อความ

ถัดไป เปิดการตั้งค่าสำหรับโมดูลข้อความตัวใดตัวหนึ่งบนหน้า และเพิ่มคลาส CSS เดียวกันลงใน Text Global Defaults

Blurbs

ถัดไป เปิดการตั้งค่าสำหรับหนึ่งในการนำเสนอในรูปแบบหน้าและเพิ่ม CSS Class ให้กับ Blurb Global Defaults

คอลัมน์รับรอง

ด้านล่างเค้าโครงหน้ามีข้อความรับรองสองสามฉบับ แต่ละคอลัมน์มีพื้นหลังสีขาวที่กำหนดเอง หากต้องการลบล้างสไตล์คอลัมน์ในโหมดมืด ให้เพิ่มคลาส CSS ลงในคอลัมน์ใดคอลัมน์หนึ่งแล้วขยายไปยังคอลัมน์อื่นภายในแถว

หมายเหตุ: ไม่ใช่ความคิดที่ดีที่จะเพิ่มคลาส CSS ให้กับค่าเริ่มต้นส่วนกลางของคอลัมน์เพราะจะทำให้องค์ประกอบการออกแบบบางส่วนเสียหาย (เช่น ไม่ควรให้คอลัมน์ทั้งหมดมีพื้นหลังสีเข้มเมื่อส่วนใหญ่พื้นหลังคอลัมน์ มีความโปร่งใส)

หากต้องการทดสอบผลลัพธ์ ให้ข้ามไปที่หน้าสดแล้วคลิกสลับโหมดมืดที่ด้านบนของหน้า

นี่คือลักษณะของหน้าในโหมดสว่าง

และนี่คือสิ่งที่หน้าควรมีลักษณะในโหมดมืด

ส่วนที่ 3: การเพิ่มการสลับโหมดมืดไปยังส่วนหัวส่วนกลาง

หากคุณต้องการขยายฟังก์ชันการทำงานของโหมดมืดทั่วทั้งไซต์ จะเป็นความคิดที่ดีที่จะเพิ่มการสลับโหมดมืดให้กับ Divi Global Header วิธีนี้จะทำให้ผู้ใช้ทั่วทั้งไซต์ใช้งานได้สะดวกในที่เดียว

การบันทึกการสลับโหมดมืดและรหัสไปยังไลบรารี Divi

แต่ก่อนที่คุณจะทำอย่างนั้น เราต้องบันทึกการสลับโหมดมืดและโค้ดลงใน Divi Library ซึ่งจะทำให้ง่ายต่อการเพิ่มไปยังส่วนอื่นๆ ของไซต์ของเรา รวมถึงส่วนหัวส่วนกลาง

กลับไปที่เลย์เอาต์ที่เราสร้างด้วย Divi ที่ปรับใช้ที่ส่วนหน้า จากนั้นเปิดเมนูสำหรับโมดูลการนำเสนอที่ใช้สร้างการสลับโหมดมืดและเลือกบันทึกลงในไลบรารี ตั้งชื่อเค้าโครงและบันทึกลงในไลบรารี

ถัดไป บันทึกโมดูลโค้ดลงใน Divi Library ด้วย

การนำเข้าเทมเพลตส่วนหัวทั่วโลกที่สร้างไว้ล่วงหน้า

หากคุณยังไม่มีส่วนหัวส่วนกลาง คุณจะต้องสร้างของคุณเองหรือใช้ชุดตัวสร้างธีมที่สร้างไว้ล่วงหน้าชุดใดชุดหนึ่งของเรา

สำหรับบทช่วยสอนนี้ เราจะใช้ส่วนหัวส่วนกลางที่รวมอยู่ในแพ็กตัวสร้างธีมที่ห้า ในการเพิ่มส่วนหัวส่วนกลางโดยใช้ตัวสร้างธีม คุณจะต้องดาวน์โหลดชุดตัวสร้างธีม จากนั้นใช้ตัวเลือกการพกพาเพื่อนำเข้าไฟล์ JSON ชื่อ “dvi-theme-builder-pack-5-default-website-template.json” .

เมื่อโหลดเทมเพลตแล้ว คลิกเพื่อแก้ไข Global Header

จากนั้นเพิ่มการสลับโหมดมืดจากไลบรารีไปที่คอลัมน์ 1 ในแถวที่สองของส่วนหัว

ภายใต้โมดูลสลับโหมดมืด/เบลอ ให้เพิ่มโมดูลโค้ดที่คุณบันทึกไว้ในไลบรารีโดยตรงภายใต้การสลับโหมดมืด

เนื่องจากเรามีคลาส CSS "et-dark-mode-capable" เป็นค่าเริ่มต้นสำหรับทุกส่วน ส่วนต่างๆ ภายในส่วนหัวจะมีค่าเริ่มต้นด้วยเช่นกัน หากต้องการปิดใช้งานสิ่งนี้ ให้กำหนดคลาส CSS ที่แทนที่

ผลลัพธ์สุดท้าย

นี่คือผลลัพธ์สุดท้ายของหน้าสลับโหมดมืดของเรา

และนี่คือการสลับโหมดมืดบนส่วนหัว โหมดที่เลือก (มืดหรือสว่าง) จะยังคงอยู่เมื่อคุณไปยังหน้าอื่นๆ ในเว็บไซต์

การปรับสไตล์ CSS Dark Mode แบบกำหนดเอง

หากคุณต้องการปรับรูปแบบโหมดมืดขององค์ประกอบการสลับหรือ Divi คุณจะต้องดำเนินการดังกล่าวในโค้ดภายในโมดูลโค้ด

ปัจจุบันโค้ดมีรูปแบบโหมดมืดพื้นฐานที่ใช้กับแต่ละองค์ประกอบเพียงครั้งเดียวในโหมดมืด ประกอบด้วยสีพื้นหลังสีเข้มและสีข้อความอ่อน

ความคิดสุดท้าย

การเตรียมไซต์ Divi ของคุณด้วยปุ่มสลับโหมดมืดแบบกำหนดเองอาจเป็นวิธีที่ดีในการเพิ่ม UX และสร้างการออกแบบใหม่ที่ทั้งพอใจและสบายตา หวังว่าจะมีประโยชน์สำหรับคุณ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!