Cara Beralih ke Tata Letak Gelap dalam 5 Langkah Menggunakan Fitur Efisiensi Divi

Saat mendesain situs web, salah satu keputusan pertama yang Anda buat secara sadar atau tidak sadar adalah gaya warna yang akan Anda berikan ke situs web Anda. Yang berani di antara kita akan berani menggunakan palet warna cerah yang lengkap, tetapi jujur ​​​​saja, itu sangat sulit dilakukan. Itulah mengapa biasanya lebih aman menggunakan tata letak terang atau gelap. Di bagian Tata Letak Premade di Perpustakaan Divi, Anda dapat menemukan banyak tata letak terang dan gelap yang bebas Anda gunakan saat membangun semua jenis situs web. Tetapi bagaimana jika Anda menyukai tata letak, tetapi lebih suka memiliki palet warna yang lebih gelap atau sebaliknya?

Dengan fitur efisiensi Divi, beralih dari paket tata letak terang ke gelap, dan sebaliknya, lebih mudah dari sebelumnya. Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat mengubah tata letak terang menjadi gelap hanya dalam 5 langkah. Jumlah waktu yang dibutuhkan untuk membuat transisi ini sangat rendah jika Anda menggunakan teknik yang tepat. Ketahuilah bahwa jumlah langkah yang perlu Anda ambil akan selalu bergantung pada tata letak yang sedang Anda kerjakan, tetapi begitu Anda mendapatkan pendekatan keseluruhan, Anda akan dapat membuatnya berfungsi untuk tata letak apa pun yang Anda hadapi.

Mari kita lakukan!

Pratinjau

Hanya dalam 5 langkah, kita akan mengubah halaman landing terang dari Web Freelancer Layout Pack menjadi gelap.

Unggah Halaman Arahan Freelancer Web

Tambahkan Halaman Baru & Aktifkan Pembuat Visual

Mulailah dengan menambahkan halaman baru, beri judul halaman Anda dan beralih ke Visual Builder.

Unggah Paket Tata Letak Freelancer Web

Dari tiga opsi yang muncul di layar Anda, pilih untuk mengunggah tata letak yang sudah jadi.

Temukan halaman arahan Paket Tata Letak Freelancer Web dalam daftar paket tata letak gratis dan unggah dengan mengeklik tombol hijau yang bertuliskan 'Gunakan Tata Letak Ini'.

Langkah 1: Ubah Warna Latar Belakang Keseluruhan

Ubah Warna Latar Belakang Bagian dari Bagian Pertama

Saatnya untuk memulai! Langkah pertama yang kami sarankan untuk Anda ambil adalah mengubah warna latar belakang semua bagian di halaman Anda. Setelah Anda melakukannya, Anda akan segera dapat melihat elemen desain mana yang perlu diubah agar sesuai dengan warna latar belakang yang gelap. Buka bagian pertama halaman dan pilih '#0c0c0c' sebagai warna latar bagian.

Perluas Gaya ke Semua Bagian

Segera setelah Anda menambahkan warna latar belakang, klik kanan padanya dan klik opsi 'Perpanjang Warna Latar Belakang'.

Setelah Anda melakukannya, pilih untuk memperluas warna latar belakang ke semua bagian pada halaman.

Langkah 2: Ubah Warna Teks

Buka Modul Header Lebar Penuh & Ubah Warna Teks

Langkah selanjutnya yang perlu Anda lakukan adalah mengubah warna teks yang sedang digunakan. Seperti yang mungkin atau mungkin tidak Anda ketahui, ada opsi default di Divi yang memungkinkan Anda memilih palet warna terang atau gelap untuk teks di halaman Anda. Namun, setelah Anda memilih warna khusus, opsi ini akan diganti dengan warna khusus yang Anda pilih. Alih-alih memeriksa setiap elemen untuk melihat apakah ada warna khusus di sana, lanjutkan dan pilih 'Light' sebagai warna teks di Modul Header Lebar Penuh.

Perluas Gaya ke Semua Modul

Kemudian, perluas warna teks terang ini dengan mengklik kanan dan memilih opsi 'Perpanjang Warna Teks'.

Perluas warna baru ini ke semua modul di seluruh halaman.

Ubah Warna Kustom Menggunakan Fitur Multi Select

Seperti yang disebutkan sebelumnya, langkah sebelumnya tidak berlaku untuk warna yang sudah dipilih sebelumnya. Modul Toggle, misalnya, memiliki warna teks judul khusus. Alih-alih memodifikasi masing-masing sakelar satu per satu, pilih semuanya sekaligus menggunakan tombol kontrol/perintah pada keyboard Anda dan klik masing-masing modul satu per satu. Setelah Anda memilih semuanya, klik ikon pengaturan.

Sekarang, Anda dapat membuat perubahan yang berlaku untuk setiap modul yang dipilih secara bersamaan. Dalam hal ini, kami mengubah warna teks judul menjadi '#848484'.

Langkah 3: Ubah Tombol

Buka Tombol Satu Pengaturan Header Lebar Penuh

Penting untuk memastikan bahwa ajakan bertindak di halaman Anda tetap cocok dengan palet warna tata letak. Dalam hal ini, kami memiliki Modul Tombol yang terlihat bagus pada tata letak terang dan gelap. Itu sebabnya kami akan memperluasnya ke tombol lain di halaman juga. Silakan dan buka Modul Header Lebar Penuh dan buka pengaturan Tombol Satu.

Perluas Gaya Tombol ke Semua Tombol di Halaman

Kemudian, klik kanan pengaturan Button One dan pilih opsi 'Extend Button One Styles'.

Perluas gaya tombol ke semua tombol di seluruh halaman.

Ubah Warna Teks Tombol 2 di Bagian Pahlawan

Fitur perluasan tidak mencapai tombol kedua Modul Header Lebar Penuh karena ini bukan modul yang berdiri sendiri. Itu sebabnya kita akan membuka pengaturan Tombol Dua dan mengubah warna teks menjadi '#ffffff'.

Perluas Gaya ke Semua Header Lebar Penuh di Halaman

Untuk memastikan warna teks ini diterapkan ke semua Modul Header Lebar Penuh pada halaman, kami juga akan memperluasnya.

Setelah Anda mengklik kanan warna teks dan memilih opsi 'Perpanjang Tombol Dua Warna Teks', lanjutkan dan buat itu berlaku untuk semua Header Lebar Penuh di seluruh halaman.

Langkah 4: Hapus Margin Kustom & Ganti dengan Padding Kustom

Hapus Margin Kustom

Saat beralih ke tata letak gelap, penting juga untuk menghapus semua nilai margin khusus yang membawa spasi putih ke halaman Anda.

Gunakan Padding Kustom Sebagai gantinya

Namun, Anda dapat menjaga jarak yang ada sebelumnya dengan menambahkan margin khusus sebagai bantalan khusus.

Langkah 5: Cari & Ubah Pengaturan Desain Khusus

Tentukan Pengaturan Desain Khusus

Langkah terakhir yang harus Anda ambil sangat spesifik untuk setiap tata letak. Elemen desain yang unik untuk tata letak perlu diubah juga. Ini dapat mencakup, tetapi tidak terbatas pada, beberapa pengaturan berikut:

• Bayangan Kotak
• Latar Belakang Kolom
• Warna Ikon
• Warna Pembagi
• …

Gunakan Temukan & Ganti pada Warna Bayangan Kotak Baris

Untuk tata letak khusus ini, salah satu hal yang perlu kita ubah adalah warna bayangan kotak baris yang sedang digunakan. Buka pengaturan baris dan klik kanan bayangan kotak tanpa mengubahnya. Kemudian, pilih opsi 'Temukan & Ganti'.

Menggunakan fitur Temukan & Ganti adalah cara terbaik jika Anda ingin mengubah kode warna tertentu di seluruh halaman. Anda dapat dengan mudah menggantinya dengan kode warna lain, dalam hal ini '#33302f'. Ini akan memastikan bahwa Anda tidak perlu menjelajahi semua elemen desain untuk melihat dengan tepat di mana warna telah digunakan.

Ubah Pengaturan Satu Kali Terjadi Secara Manual

Namun, ada juga pengaturan desain berulang satu kali dalam tata letak. Untuk mengubahnya, Anda harus melakukannya secara manual. Baris di layar cetak di bawah, misalnya, memiliki warna bayangan kotak yang belum pernah digunakan di tempat lain pada halaman. Itu sebabnya kami secara manual mengubahnya menjadi '#33302f'.

Pratinjau

Mari kita lihat hasil akhirnya setelah melalui lima langkah.

Pikiran Akhir

Dalam posting ini, kami telah memandu Anda mengubah paket tata letak terang menjadi gelap hanya dalam 5 langkah. Jumlah langkah yang perlu Anda ambil akan selalu bergantung pada tata letak yang sedang Anda kerjakan, tetapi secara keseluruhan, pendekatannya tetap sama. Jika Anda memiliki pertanyaan atau saran, beri tahu kami di bagian komentar di bawah!