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 mereka. situs jaringan. Idenya adalah untuk mengambil kendali lebih besar atas penampilan mereka situs jaringan dalam mode gelap tanpa harus berkompromi pada merek 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.
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 tombol mode gelap dengan halaman di Divi. Setelah sakelar dibuat dengan kode, Anda akan dapat menyimpannya di perpustakaan Divi dan menambahkannya di mana saja di perangkat Anda situs jaringan.
Untuk memulai, tambahkan satu baris kolom ke bagian default saat membangun dari awal dengan Divi di ujung depan.
Tambahkan Modul Ringkasan
Untuk membangun custom toggle, kita akan merancang modul Blurb dengan sedikit CSS khusus.
Tambahkan modul teks presentasi baru ke baris.
Isi
pensiun isi Boneka default untuk judul dan isi. Kemudian tambahkan ikon persegi sebagai pengganti gambar.
Pembuahan
Buka pengaturan desain dan perbarui yang berikut:
- Warna Ikon: # 666666
- Penjajaran gambar / ikon: kiri
- Ukuran font ikon: 22 piksel
- Lebar: 50px
- Penyelarasan modul: pusat
- Tinggi: 25px
- Margin: 0px rendah
- Sudut membulat: 4px
- Lebar perbatasan: 2px
- Warna tepi: # 666666
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.
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
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.
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:
- Kelas CSS: et-dark-toggle
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 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 isi yang ada” TIDAK dipilih. Anda tidak ingin menghapus bagian dengan tombol mode gelap.
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.
- Kami dapat menambahkan kelas CSS ke setiap elemen halaman secara individual.
- 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.
- 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.
Modul teks
Kemudian buka pengaturan untuk salah satu modul teks di halaman dan tambahkan kelas CSS yang sama ke default teks global.
Untuk menguji hasilnya, buka halaman langsung dan klik pada mode gelap untuk beralih di bagian atas halaman.
Inilah tampilan halaman seharusnya dalam mode jernih.
Dan inilah tampilan halaman seharusnya dalam mode gelap.
Sumber Daya Tambahan
Ini yang lain ressources yang mungkin menarik bagi Anda.
- Cara menyesuaikan tipografi dan tata letak di Divi
- Bagaimana cara menambahkan panggilan geser yang dapat ditarik kembali ke aksi pada Divi
- Cara menyelaraskan elemen pada baris yang sama di Divi
- Cara membuat bagian animasi dengan mengklik Divi Builder
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.
