Cara Menerapkan Mode Gelap Beralih di Situs Divi Anda

Mode gelap terus tumbuh dalam popularitas sebagai opsi yang nyaman bagi pengguna untuk merasakan web dengan lebih sedikit ketegangan pada mata. Mari kita hadapi itu, kita semua cenderung menghabiskan lebih banyak waktu melihat layar daripada yang seharusnya, jadi kenyamanan tambahan apa pun untuk pengalaman pengguna (seperti mode gelap) bisa sangat membantu. Sistem Operasi, program, dan browser biasanya menyertakan kemampuan mode gelap bawaan, tetapi beberapa pengembang membawanya ke level lain dengan menyertakan pengalaman mode gelap khusus untuk situs web mereka. Idenya adalah untuk mengambil kendali lebih besar atas tampilan situs web mereka dalam mode gelap tanpa harus berkompromi pada branding dan/atau desain.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat sakelar mode gelap khusus di Divi dari awal tanpa plugin. Dengan fungsi sakelar mode gelap ini, Anda akan memiliki kendali atas desain mode gelap dan memiliki pengalaman pengguna yang lebih baik yang disesuaikan dengan merek Anda.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Ini adalah sakelar mode gelap khusus yang akan kami buat.

Dan ini adalah sebelum dan sesudah untuk mode gelap yang diterapkan ke salah satu tata letak yang telah dibuat sebelumnya.

Dan ini adalah sakelar mode gelap yang ditambahkan ke header global. Perhatikan bagaimana mode terang/gelap tetap ada saat Anda menavigasi situs.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.

Klik tombol Impor.

Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.

Kemudian klik tombol impor.

Setelah selesai, tata letak bagian akan tersedia di Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Membangun Toggle Mode Gelap

Di bagian pertama tutorial ini, kita akan membuat sakelar mode gelap dengan halaman di Divi. Setelah sakelar dibuat dengan kode, Anda akan dapat menyimpannya ke Perpustakaan Divi dan menambahkannya ke tempat mana pun di situs web Anda.

Untuk memulai, tambahkan baris satu kolom ke bagian default saat membangun dengan Divi di ujung depan dari awal.

Tambahkan Blurb

Untuk membuat sakelar khusus, kita akan mendesain modul uraian dengan sedikit CSS khusus.

Tambahkan modul uraian baru ke baris.

Isi

Keluarkan konten tiruan default untuk judul dan isi. Kemudian tambahkan ikon persegi di tempat gambar.

Desain

Lompat ke pengaturan desain dan perbarui yang berikut:

• Warna Ikon: #666666
• Penjajaran Gambar/Ikon: Kiri
• Ukuran Font Ikon: 22px

• Lebar: 50px
• Penyelarasan Modul: tengah
• Tinggi: 25px

• Margin: 0px bawah
• Sudut Bulat: 4px
• Lebar Perbatasan: 2px
• Warna Perbatasan: #666666

CSS khusus

Setelah desain terpasang, lompat ke tab lanjutan. Di bawah CSS khusus, tambahkan CSS khusus berikut ke elemen utama untuk memastikan luapan tidak disembunyikan dari gaya sudut membulat.

overflow: visible !important;

Kemudian tambahkan CSS khusus berikut ke elemen After:

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

Ini menambahkan label ke modul uraian yang akan kita ubah dari "terang" menjadi "gelap" saat diklik.

Desain Teks Tubuh

Karena teks dalam elemen semu setelah mewarisi gaya teks isi, kita dapat menambahkan gaya teks isi menggunakan opsi Divi sebagai berikut:

• Font Tubuh: Roboto
• Warna Teks Tubuh: #666666
• Ukuran Teks Tubuh: 13px
• Spasi Huruf Tubuh: 1px

Menambahkan Kode Kustom dengan Modul Kode

Untuk menambahkan Kode yang diperlukan (CSS/JQuery) untuk membuat sakelar mode gelap berfungsi dengan baik, kami akan menggunakan modul kode.

Buat modul kode baru di bawah modul uraian di kolom yang sama.

Kemudian tempelkan kode berikut di kotak kode:

<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>

Menambahkan Kelas CSS Kustom

Kode khusus mengharuskan Anda memiliki Kelas CSS khusus yang ditambahkan ke modul uraian atau sakelar. Ini akan memungkinkan uraian untuk memicu sakelar dan fungsionalitas mode gelap saat diklik.

Kelas Modul Blurb

Buka pengaturan modul uraian dan tambahkan Kelas CSS khusus sebagai berikut:

• Kelas CSS: et-dark-toggle

Kelas Mampu Mode Gelap

Kita juga perlu menambahkan Kelas CSS khusus ke setiap elemen Divi yang kita inginkan untuk memiliki kemampuan mode gelap. Setelah elemen memiliki Kelas CSS, elemen tersebut akan mewarisi CSS kustom "mode gelap" dalam kode yang kami tambahkan setelah mode gelap diaktifkan. Metode ini memberi kita lebih banyak kontrol atas desain mode gelap karena beberapa elemen mungkin tidak memerlukan gaya mode gelap apa pun.

Untuk memulai, kita dapat menambahkan mode gelap ke bagian yang berisi sakelar mode gelap kita.

Buka pengaturan bagian dan tambahkan Kelas CSS berikut:

• Kelas CSS: et-dark-mode-mampu

Bagian 2: Menambahkan Fungsi Mode Gelap ke Halaman Divi

Sekarang setelah kami memiliki kode dan Kelas CSS, kami siap untuk menerapkan fungsionalitas dan desain mode gelap ke seluruh halaman di Divi. Untuk melakukan ini, kita akan menggunakan Tata Letak Premade Halaman Landing Aplikasi Seluler.

Untuk menambahkan tata letak, buka menu pengaturan di bagian bawah pembuat visual dan klik ikon Tambahkan Tata Letak Baru.

Kemudian pilih tata letak Halaman Landing Aplikasi Seluler dari bawah tab tata letak yang dibuat sebelumnya.

Pastikan opsi "Ganti konten yang ada" TIDAK dipilih. Anda tidak ingin menghapus bagian dengan sakelar mode gelap.

Karena gaya mode gelap hanya akan berlaku untuk elemen dengan Kelas CSS “et-dark-mode-capable”, kita dapat memilih untuk menambahkan ke halaman dengan beberapa cara berbeda.

1. Kita dapat menambahkan Kelas CSS ke setiap elemen pada halaman satu per satu.
2. Kami dapat memperluas Kelas CSS ke elemen di seluruh halaman (ini akan lebih cepat daripada melakukan masing-masing secara manual). Misalnya, kita bisa membuka pengaturan bagian untuk bagian atas dan memperluas Kelas CSS untuk bagian itu ke semua bagian di seluruh halaman.
   
3. Kita dapat menambahkan Kelas CSS ke Default Global dari elemen tersebut. Ini akan menerapkan Kelas CSS ke semua elemen di seluruh situs, menambahkan kemampuan mode gelap di seluruh situs. Misalnya, kita dapat membuka pengaturan bagian dan mengklik ikon default global untuk mengedit Default Bagian Global. Kemudian kita dapat menambahkan Kelas CSS dan menyimpannya sebagai Kelas CSS untuk semua bagian di seluruh situs.
   

Menambahkan Kelas CSS ke Elemen Halaman

Untuk contoh ini, kita akan memperbarui elemen halaman dengan menambahkan Kelas CSS ke Default Global ke bagian dan modul teks. Dan kami juga akan membuat beberapa tambahan pada elemen lain di halaman saat kami pergi.

Semua Bagian

Untuk menambahkan Kelas CSS ke semua bagian, buka pengaturan untuk bagian atas yang berisi sakelar mode gelap. Kemudian edit default global untuk bagian tersebut dan tambahkan Kelas CSS berikut ke Bagian Default Global:

• Kelas CSS: et-dark-mode-mampu

Semua Bagian Khusus

Tambahkan Kelas CSS ke default global dari bagian khusus juga.

Modul Teks

Selanjutnya, buka pengaturan untuk salah satu modul teks di halaman dan tambahkan Kelas CSS yang sama ke Default Global Teks.

mengaburkan

Selanjutnya, buka pengaturan untuk salah satu uraian di tata letak halaman dan tambahkan Kelas CSS ke Blurb Global Defaults.

Kolom Kesaksian

Lebih jauh ke bawah tata letak halaman, ada beberapa testimonial, masing-masing di dalam kolom dengan latar belakang putih khusus. Untuk mengganti gaya kolom dalam mode gelap, tambahkan kelas CSS ke salah satu kolom dan perluas ke kolom lain di dalam baris.

CATATAN: Bukan ide yang bagus untuk menambahkan Kelas CSS ke default global kolom karena itu akan merusak beberapa elemen desain (yaitu bukan ide yang baik untuk memberikan semua kolom latar belakang gelap ketika sebagian besar waktu latar belakang kolom transparan).

Untuk menguji hasilnya, lompat ke halaman langsung dan klik sakelar mode gelap di bagian atas halaman.

Berikut adalah tampilan halaman dalam mode terang.

Dan inilah tampilan halaman dalam mode gelap.

Bagian 3: Menambahkan Toggle Mode Gelap ke Header Global

Jika Anda ingin memperluas fungsionalitas mode gelap di seluruh situs, sebaiknya tambahkan sakelar mode gelap ke Divi Global Header Anda. Dengan cara itu akan tersedia untuk pengguna di seluruh situs di satu tempat yang nyaman.

Menyimpan Toggle Mode Gelap dan Kode ke Perpustakaan Divi

Tetapi sebelum Anda melakukannya, kita perlu menyimpan sakelar dan kode mode gelap ke Perpustakaan Divi. Ini akan memudahkan untuk menambahkan ke area lain dari situs kami, termasuk header global.

Kembali ke tata letak yang kami buat dengan Divi dikerahkan di ujung depan. Kemudian buka menu modul blurb yang digunakan untuk membangun mode gelap beralih dan pilih simpan ke perpustakaan. Beri nama tata letak dan simpan ke perpustakaan.

Selanjutnya, simpan modul kode ke Perpustakaan Divi juga.

Mengimpor Template Header Global Premade

Jika Anda belum memiliki tajuk global, Anda harus membuatnya sendiri atau menggunakan salah satu paket pembuat tema siap pakai kami.

Untuk tutorial ini, kita akan menggunakan header global yang disertakan dalam paket pembuat tema kelima. Untuk menambahkan header global menggunakan pembuat tema, Anda perlu mengunduh paket pembuat tema dan kemudian menggunakan opsi portabilitas untuk mengimpor file JSON yang disebut "divi-theme-builder-pack-5-default-website-template.json" .

Setelah template dimuat, klik untuk mengedit Global Header.

Kemudian tambahkan sakelar mode gelap dari perpustakaan ke kolom 1 di baris kedua header.

Di bawah modul sakelar / blurb mode gelap, tambahkan modul kode yang telah Anda simpan ke perpustakaan langsung di bawah sakelar mode gelap.

Karena kita memiliki Kelas CSS “et-dark-mode-capable” sebagai default untuk semua bagian, bagian di dalam header juga akan memilikinya secara default. Untuk menonaktifkan ini, cukup berikan Kelas CSS utama.

Hasil Akhir

Berikut adalah hasil akhir dari halaman sakelar mode gelap kami.

Dan inilah sakelar mode gelap di header. Mode yang dipilih (gelap atau terang) akan tetap ada saat Anda menavigasi ke halaman lain di situs.

Menyesuaikan Gaya Mode Gelap CSS Kustom

Jika Anda ingin menyesuaikan gaya mode gelap dari sakelar atau elemen Divi, Anda harus melakukannya di dalam kode di dalam modul kode.

Kode saat ini hanya memiliki gaya mode gelap dasar yang diterapkan ke setiap elemen sekali dalam mode gelap. Ini terdiri dari warna latar belakang gelap dan warna teks terang.

Pikiran Akhir

Melengkapi situs Divi Anda dengan sakelar Mode Gelap khusus dapat menjadi cara yang bagus untuk meningkatkan UX dan membuat desain baru yang menyenangkan dan memudahkan mata. Mudah-mudahan, itu berguna untuk Anda.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!