Buat Anda yang sering lembur mengurus konten website, pasti sangat paham nih bagaimana lelahnya mata melihat layar di malam hari. Ini juga nih yang dirasakan oleh para pengunjung website Anda.
Cahaya terang dari layar PC di malam hari, bisa membuat pengunjung jadi tidak nyaman saat mengakses website Anda.
Sebagai pemilik website, Anda tentu harus menjamin kenyamanan pengunjung dong. Nah, satu-satunya cara untuk mengatasi hal ini adalah dengan membuat website supaya bisa switch menjadi dark mode.
Tenang saja, caranya sangat amat mudah, kok. Apalagi Anda menggunakan WordPress, tidak perlu ngoding sendiri, tinggal install plugin saja.
Untuk membantu Anda, kami sudah membagikan nih cara membuat website dark mode di WordPress dalam artikel ini. Kalau begitu, langsung simak saja pembahasannya, yuk!
Cara Membuat Website Dark Mode di WordPress
Seperti yang sudah disinggung di atas nih, untuk membuat website dark mode di WordPress kita akan menggunakan plugin.
Di WordPress sendiri, ada berbagai plugin dark mode yang bisa Anda gunakan. Misalnya seperti WP Dark Mode, Night Mode For WordPress dan Droit Dark Mode.
Hampir semua plugin ini menyediakan versi gratis, kok. Anda bisa pilih plugin dark mode manapun sesuai dengan kebutuhan Anda.
Tapi, dalam tutorial berikut ini, kami akan menggunakan plugin WP Dark Mode. Jadi, Anda bisa sesuaikan dengan plugin yang Anda install saja, ya.
Yuk, langsung ke tahapannya!
Langkah 1 – Install Plugin WP Dark Mode di WordPress
Untuk membuat website menjadi dark mode, tentunya langkah pertama yang harus dilakukan adalah meng-install plugin WP Dark Mode di WordPress.
- Login ke akun administrator WordPress Anda.
- Pilih menu Plugins > Add New pada menu bar di sebelah kiri.
- Pada search bar, cari plugin WP Dark Mode. Lalu, klik Install Now > Activate.
- Akan muncul halaman setting WP Dark Mode.
Langkah 2 – Setting Website Dark Mode di WordPress
Sebetulnya, sesaat setelah Anda meng-install plugin WP Dark Mode, website Anda sudah ter-setting menjadi dark mode secara otomatis.
Namun, karena ini masih dalam setting-an default, kami akan membagikan cara untuk mengubah setting-annya supaya lebih sesuai. Yuk, langsung ke tahapannya!
- Di bagian General Settings, atur di mana saja Anda ingin mengaktifkan dark mode. Anda bisa mengaktifkan di frontend, backend (admin WordPress) dan block editor.
- Di bagian Advanced Settings, Anda bisa atur dark mode sebagai default website. Anda juga bisa setting dark mode menjadi time based dan sunset untuk versi pro.
- Di bagian Color Settings, aktifkan fitur Color presets untuk memilih warna preset untuk dark mode website.
- Di bagian Switch Settings, pilih floating switch style yang Anda inginkan. Lalu, atur ukuran icon, position dan attention effect sesuai keinginan.
- Di bagian Inclueds/Excludes, masukkan code CSS untuk mengaktifkan dark mode pada bagian tertentu untuk versi pro.
- Di bagian Triggers, Anda bisa exclude dark mode di halaman, posting-an, kategori, tag atau post types untuk versi pro.
- Di bagian Performance, Anda bisa mengaktifkan performance mode untuk versi pro.
- Di bagian Accessibility Settings, Anda bisa mengatur aksesibilitas website untuk dark mode.
- Di bagian WooCommerce, Anda bisa exclude kategori dan produk di WooCommerce untuk versi pro.
- Di bagian Image Settings, atur gambar untuk low brightness atau grayscale saat website dark mode.
- Di bagian Video Settings, atur video mana yang link-nya akan muncul saat light atau dark mode untuk versi pro.
- Di bagian Custom CSS, tambahkan CSS untuk custom dark mode di website untuk versi pro.
- Di bagian Animation, aktifkan animasi untuk toggle dark mode di website.
- Di bagian Analytics & Reporting, Anda bisa mengaktifkan analytics tool untuk melihat penggunaan dark mode oleh pengunjung untuk versi pro.
Keuntungan Membuat Website Dark Mode
Dalam membuat website, user experience jadi aspek pertama nih yang betul-betul harus Anda perhatikan. Kenapa begitu?
Ketika pengunjung memiliki user experience yang baik saat menjelajahi website Anda, mereka bisa memberikan traffic, konversi dan bahkan menjadikan sebagai referensi.
Nah, seperti yang sudah disebutkan di awal nih, mengaktifkan dark mode membuat pengunjung jadi lebih nyaman saat menjelajahi website Anda.
Yang mana, ini salah satu faktor user experience yang baik nih. Tapi, ini bukanlah satu-satunya keuntungan dari membuat website dark mode.
Ada beberapa keuntungan lainnya nih yang bisa dirasakan oleh para pengunjung maupun Anda sendiri dari membuat website dark mode.
Baca juga: Begini Cara Meningkatkan UX Website Anda, Dijamin Ampuh!
1. Mengurangi Kelelahan Mata di Malam Hari
Saat malam hari, cahaya yang ada sudah pasti lebih redup dibandingkan siang hari. Ini akhirnya juga membuat penglihatan di malam hari lebih terbatas.
Nah, ketika mata dipaksa untuk melihat layar di malam hari, ini akan membuat mata menjadi cepat lelah karena harus menangkap cahaya yang terang.
Itulah mengapa fitur dark mode ini dibuat untuk menurunkan cahaya yang dipancarkan. Tapi, tanpa mengurangi rasio kontras warna lebih dari minimum.
Sehingga, pengunjung masih bisa membaca konten website nih tanpa kesulitan ataupun mengalami kelelahan mata.
Yang mana, ini jadi salah satu faktor yang bisa meningkatkan user experience para pengunjung saat menjelajahi website Anda.
2. Menghemat Penggunaan Baterai
Terkadang, dark mode banyak diaktifkan di berbagai aplikasi bukan hanya untuk mengurangi kelelahan mata, lho.
Tapi, dark mode seringkali diaktifkan juga untuk menghemat penggunaan baterai perangkat saat menjelajahi aplikasi maupun website.
Dalam smartphone dengan OLED screen, dark mode dapat menghemat tenaga sebanyak 3 sampai 9% dengan 50% brightness.
Ini karena dark mode membuat OLED screen hanya memerlukan aktivasi pixel yang lebih sedikit daripada light mode.
Inilah mengapa saat dark mode, perangkat – terutama smartphone – bisa lebih hemat dalam menggunakan tenaga.
3. Pengunjung Bisa Lebih Fokus Melihat Konten
Salah satu kekurangan dari penggunaan light mode pada website di malam hari adalah seringkali pengunjung – atau malah Anda sendiri – tidak fokus nih saat membaca konten.
Ini karena ada beberapa visual yang tampak terang – seperti gambar – yang membuat tidak fokus akibat latar yang juga berwarna terang.
Membuat website menjadi dark mode bisa jadi cara yang efektif supaya pengunjung bisa lebih fokus saat melihat konten.
Kenapa begitu? Ini karena elemen atau teks dalam website yang terang dapat lebih menonjol karena latar belakang yang berwarna gelap.
Sehingga, hierarki visual dari website Anda pun lebih meningkat nih. Selain itu, ini juga dapat meminimalkan gangguan akibat latar website yang terang.
Jadinya, pengunjung bisa lebih nyaman saat menjelajahi website Anda dan dapat menyimak konten dengan baik meski di malam hari.
4. Tampilan Website Jadi Lebih Menarik
Keuntungan terakhir dari membuat website menjadi dark mode adalah ini dapat membuat tampilan website Anda jadi lebih menarik.
Tidak sedikit lho website yang mengusung tema dark mode. Apalagi website yang mengangkat topik tentang desain grafis maupun web design.
Tema dark mode dapat memberikan kesan modern dan elegan pada website Anda. Yang tentunya dapat meningkatkan user experience para pengunjung.
Selain itu, dengan menambahkan fitur dark mode, ini akan semakin membuat desain website Anda lebih menarik.
Hal ini karena pengunjung bisa diberikan kebebasan nih untuk menjelajahi website Anda dalam dark atau light mode.
Yuk, Tambahkan Fitur Dark Mode ke Website Anda!
Dark mode memang bisa membuat mata menjadi lebih nyaman saat menjelajahi website. Selain itu, ada banyak keuntungan lainnya dari membuat website menjadi dark mode.
Misalnya seperti konten yang lebih terfokus, baterai perangkat yang lebih hemat hingga tampilan website yang lebih menarik.
Cara membuat website dark mode ini juga tidak sulit sama sekali. Apalagi jika Anda menggunakan WordPress, cukup install plugin dan website secara otomatis menjadi dark mode.
Selain menambahkan fitur dark mode, jangan lupa pula pastikan tampilan serta fitur lainnya dalam website Anda sudah user-friendly dan mobile-friendly, ya.
Kalau belum, Anda tidak perlu khawatir karena tim Bikin.Website siap untuk membantu Anda memaksimalkan tampilan dan fungsi website.
Hubungi Tim Bikin.Website Di Sini!
Nah, sampai di sini dulu artikel kami kali ini, ya. Semoga cara yang kami bagikan bisa membantu Anda untuk membuat website menjadi dark mode. Selamat mencoba!
