Loncat ke Konten Utama

Bagaimana menerapkan mode gelap di situs Anda dengan Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Mode Gelap terus mendapatkan popularitas sebagai opsi yang nyaman bagi pengguna untuk menjelajahi web dengan lebih sedikit ketegangan pada mata. Mari kita hadapi itu, kita semua cenderung menghabiskan lebih banyak waktu untuk menatap layar daripada yang seharusnya, jadi kenyamanan tambahan apa pun pada pengalaman pengguna (seperti mode gelap) bisa sangat bermanfaat. 

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 lebih banyak kendali atas tampilan situs web mereka dalam mode gelap tanpa harus berkompromi dengan 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 fitur 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!

penelitian

Berikut adalah pratinjau desain yang akan kami buat dalam tutorial ini.

Ini adalah mode kustom gelap toggle yang akan kita buat.

Alihkan mode gelap

Dan inilah sebelum dan sesudah untuk mode gelap yang diterapkan ke salah satu tata letak kami yang telah ditentukan.

Dan inilah tombol mode gelap yang ditambahkan ke header global. Perhatikan bagaimana mode terang / gelap tetap ada saat Anda menjelajahi situs.

Bagian 1: Membangun saklar dari mode gelap

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

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

Bagian Divi

Tambahkan Modul Ringkasan

Untuk membangun custom toggle, kita akan merancang modul Blurb dengan sedikit CSS khusus.

Tambahkan modul teks presentasi baru ke baris.

Isi

Hapus konten dummy default untuk judul dan badan. Kemudian tambahkan ikon persegi di tempat gambar.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Modul ringkasan Divi

Pembuahan

Buka pengaturan desain dan perbarui yang berikut:

  • Warna Ikon: # 666666
  • Penjajaran gambar / ikon: kiri
  • Ukuran font ikon: 22 piksel
Konfigurasi ikon Divi
  • Lebar: 50px
  • Penyelarasan modul: pusat
  • Tinggi: 25px
Konfigurasi ukuran Divi
  • Margin: 0px rendah
  • Sudut membulat: 4px
  • Lebar perbatasan: 2px
  • Warna tepi: # 666666
Konfigurasi perbatasan Divi

CSS khusus

Setelah desain dipasang, beralih ke tab lanjutan. Di bawah CSS Khusus, tambahkan CSS khusus berikut ke elemen utama untuk memastikan luapan tidak terhalang oleh gaya sudut membulat.

overflow: terlihat! penting;

Kemudian tambahkan CSS khusus berikut ke elemen After:

konten: "light"; posisi: absolut; kiri: -35px; atas: 0px;

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

Tombol sakelar Divi

Desain teks tubuh

Karena teks elemen semu posting mewarisi gaya teks tubuh, kita dapat menambahkan gaya teks tubuh menggunakan opsi Divi sebagai berikut:

  • Jenis Huruf Tubuh: Roboto
  • Warna teks isi: # 666666
  • Ukuran teks isi: 13px
  • Spasi huruf-huruf tubuh: 1px
Tombol alih font

Menambahkan kode khusus dengan modul kode

Untuk menambahkan kode yang diperlukan (CSS / JQuery) untuk mengoperasikan mode gelap toggle, kita akan menggunakan modul kode.

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

Tambahkan modul kode

Kemudian rekatkan kode berikut di area kode:

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

Menambahkan kelas CSS khusus

Kode kustom mengharuskan Anda untuk menambahkan kelas CSS kustom ke modul atau sakelar Blurb. Ini akan memungkinkan uraian untuk memicu fungsi beralih mode gelap dan saat diklik.

Blurb kelas modul

Buka pengaturan modul Blurb dan tambahkan kelas CSS khusus sebagai berikut:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

  • Kelas CSS: et-dark-toggle
Kode css divi

Kelas mampu mode gelap

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

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

Buka parameter bagian dan tambahkan kelas CSS berikut:

  • CSS Class: et-dark-mode-able
Bagian divi pemilih css

Bagian 2: Menambahkan Fitur Mode Gelap ke Halaman Divi

Sekarang setelah kita memiliki kode dan kelas CSS, kita siap untuk menerapkan fungsionalitas dan desain Mode Gelap ke seluruh halaman di Divi. Untuk melakukan ini, kami akan menggunakan tata letak Premade dari 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 tab Tata Letak Standar.

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

Pilih tata letak divi 1

Karena gaya mode gelap hanya akan berlaku untuk elemen dengan kelas CSS "mampu dan-mode-gelap", kita dapat memilih untuk menambahkan ke halaman dengan cara yang berbeda.

  1. Kami dapat menambahkan kelas CSS ke setiap elemen halaman secara individual.
  2. Kita bisa memperluas kelas CSS ke elemen di seluruh halaman (itu akan lebih cepat daripada melakukannya secara manual). Misalnya, kita dapat membuka pengaturan bagian untuk bagian atas dan memperluas kelas CSS untuk bagian tersebut ke semua bagian halaman.
  3. Kita dapat menambahkan kelas CSS ke default global elemen. 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 mengubah default bagian global. Kemudian kita dapat menambahkan kelas CSS dan mendaftarkannya sebagai kelas CSS untuk semua bagian situs.

Menambahkan kelas CSS ke elemen halaman

Untuk contoh ini, kami akan memperbarui elemen halaman dengan menambahkan kelas CSS ke default global untuk bagian dan modul teks. Dan kami juga akan membuat beberapa penambahan ke elemen lain di halaman saat kami melanjutkan.

Semua bagian

Untuk menambahkan kelas CSS ke semua bagian, buka pengaturan bagian atas yang berisi sakelar mode gelap. Kemudian ubah bagian default global dan tambahkan kelas CSS berikut ke bagian default global:

  • CSS Class: et-dark-mode-able

Semua bagian khusus

Juga tambahkan kelas CSS ke default global di bagian khusus.

Tambahkan ke semua bagian khusus

Modul teks

Kemudian buka pengaturan untuk salah satu modul teks di halaman dan tambahkan kelas CSS yang sama ke default teks global.

Tambahkan ke modul teks

Untuk menguji hasilnya, buka halaman langsung dan klik pada mode gelap untuk beralih di bagian atas halaman.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Inilah tampilan halaman seharusnya dalam mode jernih.

Mode jelas

Dan inilah tampilan halaman seharusnya dalam mode gelap.

Mode gelap

Sumber Daya Tambahan

Berikut ini beberapa sumber lain yang mungkin menarik bagi Anda.

final pikiran

Melengkapi situs Divi Anda dengan sakelar mode gelap khusus bisa menjadi cara yang bagus untuk meningkatkan pengalaman pengguna dan membuat desain baru yang menyenangkan dan memanjakan mata. Semoga bermanfaat bagi Anda.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register