Cara Menggunakan Divi untuk Membuat Mockup Skema Warna Berbeda dari Halaman Anda

Membuat mockup skema warna untuk klien Anda adalah langkah penting dalam proses desain web. Terkadang, klien mungkin sudah memiliki palet warna merek perusahaan yang dapat Anda gunakan untuk situs. Tetapi sering kali, Anda perlu menawarkan beberapa skema warna yang disarankan yang menurut Anda akan sesuai dengan merek perusahaan dan terlihat bagus di situs web mereka.

Dengan Divi, Anda dapat dengan mudah mengubah skema warna dari setiap tata letak halaman tertentu menggunakan fitur desain seperti Temukan & Ganti dan saran Warna dalam pembuat visual. Dan Anda juga dapat membuat beberapa versi halaman (dengan skema warna berbeda) untuk klien Anda.

Dalam tutorial ini, saya akan memandu Anda melalui proses penggunaan Divi untuk membuat mockup skema warna baru untuk halaman beranda. Mudah-mudahan, Anda akan belajar beberapa trik di sepanjang jalan.

Mari kita mulai!

Siapkan Halaman Baru Anda

Saya akan menggunakan Tata Letak Beranda Pelatih Bisnis untuk tutorial ini. Jadi, jika Anda belum melakukannya, buat halaman baru, dan terapkan pembuat visual. Kemudian pilih “Pilih Tata Letak Premade”. Dari popup Tambahkan Dari Perpustakaan, pilih tata letak halaman Beranda Pelatih Bisnis.

Setelah tata letak dimuat ke halaman, jangan lupa untuk mempublikasikannya.

Kami akan menggunakan tata letak halaman beranda ini untuk membuat mockup skema warna yang berbeda. Tapi untuk saat ini, kita perlu memilih skema warna baru.

Memilih Skema Warna Anda

Anda mungkin sudah memiliki skema warna, tetapi jika tidak, Anda dapat menggunakan saran warna Divi atau generator skema warna pihak ketiga. Untuk inspirasi lebih lanjut, Anda dapat menelusuri web untuk skema warna yang sesuai untuk industri Anda.

Menggunakan Generator Skema Warna Pihak Ketiga untuk Membuat Skema Warna Anda

Ada beberapa generator skema warna pihak ketiga (dan gratis) yang bagus di web untuk membantu Anda memilih skema warna yang sempurna untuk situs Anda. Beberapa generator palet warna favorit saya berasal dari Coolers.co, Canva, dan Adobe.

Sebagian besar generator skema warna ini akan menghasilkan setidaknya lima warna. Pastikan Anda menyimpan semua warna yang Anda butuhkan untuk membuat skema warna baru Anda.

Membuat Skema Warna Menggunakan Saran Warna Bawaan Divi

Sejak peluncuran manajer warna baru dan saran warna ajaib Divi, Divi secara otomatis melacak warna yang Anda simpan dan baru-baru ini digunakan yang dapat diakses saat mengubah opsi warna di Divi Builder. Anda dapat melihat setiap palet dengan mengklik tab "Tersimpan" atau "Terbaru".

Divi juga memiliki alat saran warna yang sederhana dan cerdas yang dibangun langsung ke dalam pembuat visual. Saya tidak akan membahas semua detail algoritme yang digunakan (tidak yakin saya bisa melakukannya), tetapi secara umum, Divi akan menghasilkan palet warna pelengkap (dan analog) berdasarkan warna dasar saat ini (warna dipilih dalam opsi). Ini akan membantu Anda memilih kombinasi warna yang harmonis untuk desain Anda.

Untuk melihat saran warna (atau lanskap warna), cukup klik ikon lanskap warna (yang memiliki tiga titik) langsung di bawah opsi warna yang dipilih. Di sana Anda akan menemukan palet yang dihasilkan dari warna komplementer dan analog dari warna yang Anda simpan dan yang baru saja digunakan. Dan setiap baris memiliki skema warna baru yang diperluas untuk setiap warna dalam palet warna terbaru atau yang disimpan.

Meskipun alat saran warna ini dirancang untuk membantu pemilihan warna di tingkat bagian, baris, dan modul, Anda dapat dengan mudah menggunakan palet warna yang disarankan sebagai skema warna baru untuk setiap halaman.

Membuat Skema Warna untuk Tata Letak Halaman Beranda Pelatih Bisnis

Sekarang mari kita mulai membuat mockup skema warna baru untuk tata letak Halaman Beranda Pelatih Bisnis yang telah kita tambahkan ke halaman baru kita sebelumnya. Tata letak premade ini saat ini memiliki skema warna dasar. Warna utama jelas biru tua yang digunakan di seluruh. Ini juga memiliki beberapa nuansa abu-abu yang berbeda sebagai warna aksen juga. Mereka juga merupakan warna putih standar untuk latar belakang konten dan warna hitam yang digunakan untuk teks. Jadi Anda dapat membayangkan bahwa jika Anda mengganti setiap contoh dari satu warna biru tua primer dengan warna lain, Anda akan memiliki skema warna yang sama sekali baru.

Dari pembuat visual, buka pengaturan header lebar penuh di bagian atas tata letak dan temukan Tombol Satu Warna Teks. Ini adalah warna biru utama yang digunakan tata letak ini. Sekarang klik ikon color-scape untuk melihat saran warna untuk warna biru saat ini. Mereka akan ditemukan di palet warna dari baris paling atas.

Pada titik ini Anda dapat memilih warna apa saja dari palet untuk melihat skema warna baru, tetapi untuk contoh ini, saya akan tetap menggunakan yang pertama dibuat.

Menyimpan Skema Warna Anda ke Palet Warna Default

Untuk membuat segalanya jauh lebih nyaman di jalan, Anda akan ingin memperbarui warna palet warna baru Anda untuk menggantikan palet default pemilih warna dalam opsi tema. Dengan cara itu warna Anda akan tersedia di bawah palet warna yang disimpan dalam Visual Builder selama sisa perubahan warna Anda.

Di tab baru, navigasikan ke Divi > Opsi Tema. Anda akan melihat opsi palet warna default di bawah tab General. Tidak ada cara mudah untuk menyalin palet warna yang dihasilkan dari saran warna untuk warna biru kita. Saya sarankan membuka halaman Anda dengan pembuat visual aktif di satu jendela dan opsi Tema Divi di jendela lain. Kemudian salin setiap kode warna ke palet warna default.

Simpan Pengaturan.

Tip: Anda mungkin tidak ingin mengganti dua warna default pertama (hitam dan putih) untuk kenyamanan mengedit teks dan latar belakang di kemudian hari, tetapi jika Anda membutuhkan semua slot warna, jangan ragu untuk menggunakannya.

Palet warna default tidak akan diperbarui pada halaman Anda saat ini karena telah mewarisi palet warna default sebelumnya. Anda perlu membuat halaman baru dengan tata letak lagi untuk melihat palet warna baru yang disimpan di pengaturan Anda.

Jika ini terlalu merepotkan, Anda dapat memilih untuk memperbarui palet warna default untuk halaman Anda saat ini saja. Untuk melakukannya, buka menu pengaturan dan klik ikon Pengaturan Halaman. Kemudian perbarui palet di bawah tab desain.

Ini akan memperbarui palet warna untuk seluruh halaman tanpa harus membuat halaman lain.

Alasan saya memilih untuk memperbarui palet warna default untuk tema (bukan hanya halaman) adalah untuk menghindari penambahan palet warna baru ke setiap mockup halaman baru yang akan saya buat.

Menggunakan Temukan dan Ganti untuk Memperbarui Warna Halaman Anda

Sekarang kembali ke tata letak halaman beranda dengan pembuat visual Anda aktif dan buka opsi Tombol Satu Warna Teks di bawah pengaturan Header lebar penuh (tempat yang sama dengan Anda sebelumnya). Sekarang tata letak yang Anda simpan belum muncul, tetapi tidak apa-apa. Pastikan warna biru tua asli dipilih dan kemudian klik ikon lanskap warna untuk menyebarkan saran warna. Ini akan menunjukkan skema warna yang sama di baris atas.

Pilih warna coklat tua (#54381c).

Kemudian buka pemilih warna untuk melihat kode warna dan salin kode warna ke clipboard Anda dengan menyorotnya dan menekan ctrl + C (atau Cmd + C).

Karena kita sebenarnya belum ingin melakukan perubahan, klik tombol ungu undo di bagian bawah modal pengaturan untuk mengembalikan warna biru asli yang perlu kita ganti.

Sekarang klik kanan pada warna biru asli dan klik opsi Find & Replace.

Di popup Temukan & Ganti, rekatkan dalam warna cokelat di bawah "Ganti dengan". Karena kami ingin mengganti warna di seluruh halaman, Anda dapat menyimpan opsi "Dalam" sebagai "Halaman Ini". Pastikan dan pilih opsi “Replace All” agar cakupan perubahan warna tidak terbatas hanya pada Button One Text Colors. Kemudian klik Ganti.

Jangan lupa untuk menyimpan pengaturan Anda.

Sekarang periksa skema warna baru.

Sekarang lanjutkan dan simpan tata letak ke Perpustakaan Divi Anda dengan membuka menu pengaturan dan mengklik ikon Simpan ke Perpustakaan. Beri nama tata letak seperti "Brown" dan kemudian klik Simpan ke Perpustakaan.

Ini akan memungkinkan Anda untuk menerapkan versi tata letak Anda di halaman baru.

Tambahkan Tata Letak Skema Warna Baru Anda ke Halaman Baru

Untuk menambahkan tata letak tersimpan Anda dengan skema warna cokelat baru ke halaman baru, pertama-tama Anda harus membuat halaman baru. Kemudian beri judul halaman Anda (Sesuatu seperti "Cokelat") dan gunakan pembuat visual. Kemudian pilih Pilih tata letak Premade. Di popup Muat dari Perpustakaan, klik tab "Tata Letak Tersimpan Anda" dan pilih tata letak baru yang baru saja Anda simpan ke perpustakaan Anda.

Jangan lupa untuk mempublikasikan halaman Anda.

Sekarang ulangi proses yang sama untuk membuat halaman baru dan menambahkan tata letak yang disimpan ke halaman. Kali ini beri nama halaman Anda "Ungu".

Setelah tata letak ditambahkan ke halaman, pastikan Anda mempublikasikannya. Kemudian buka visual builder dan buka pengaturan Fullwidth Header dan temukan Button One Text Color (seperti sebelumnya). Sekarang Anda akan melihat bahwa palet warna tema yang disimpan telah diperbarui dengan warna baru Anda. Ini akan berguna. Klik kanan pada pilihan warna (saat ini berwarna coklat tua) lalu klik find & replace. Buka pemilih warna di bawah "Ganti Dengan" untuk memilih warna baru dari palet warna yang disimpan. Kali ini pilih warna ungu (#5a5ae2). Kemudian pilih opsi ganti semua. Dan jangan lupa untuk menyimpan pengaturan Anda.

Dan seperti sulap, Anda memiliki skema warna ungu untuk halaman Anda!

Membuat Mockup Halaman Skema Warna Tingkat Lanjut

Dengan skema warna baru yang tersedia, Anda mungkin ingin bereksperimen dengan beberapa warna di halaman Anda. Misalnya, Anda dapat memilih untuk memiliki warna yang berbeda untuk setiap bagian halaman Anda. Ini dapat dengan mudah dilakukan dengan fitur "Temukan & Ganti" juga.

Untuk mockup berikutnya, buat halaman baru dan beri nama halaman Anda seperti "Multicolor". Kemudian gunakan pembuat visual, pilih "Pilih Tata Letak yang sudah jadi" dan impor tata letak yang disimpan (coklat) yang sama ke halaman (seperti yang Anda lakukan sebelumnya). Di pembuat visual, buka pengaturan Fullwidth Header dan temukan Tombol Satu Warna Teks (seperti sebelumnya). Klik kanan pada Tombol Satu Warna Teks dan pilih "Temukan & Ganti". Kemudian perbarui yang berikut ini:

Dalam: Bagian Ini
Ganti Dengan: #0f1f2e
Pilih Ganti Semua

Kemudian klik tombol Ganti.

Jangan lupa untuk menyimpan pengaturan.

Pembaruan ini di bagian header atas dengan skema warna biru tua.

Sekarang lewati bagian kedua (dapat menjaga skema warna coklat) dan pergi ke bagian ketiga. Temukan tombol di bagian bawah bagian dengan judul “Masih Tidak Yakin? Berhubungan". Buka pengaturan tombol, klik kanan pada warna latar belakang tombol, dan pilih "Temukan & Ganti".

Kemudian perbarui Find & Replace sebagai berikut:

Dalam: Bagian Ini
Ganti Dengan: #366ba2
Pilih Ganti Semua

Kemudian klik tombol ganti. Dan jangan lupa untuk menyimpan pengaturan.

Lewati bagian kelima. Kemudian ulangi proses yang sama untuk mengganti warna coklat di bagian 6 (yang bertuliskan “Perusahaan & Orang yang Pernah Bekerja Dengan Saya”) dengan warna biru tua yang sama di bagian pertama. Anda dapat melakukan ini dengan membuka modul teks dengan teks kutipan besar di bawah opsi Warna Teks Teks.

Di bagian terakhir, temukan modul teks di kolom kanan dan buka pengaturan modul teks. Klik kanan pada warna latar belakang dan pilih opsi Cari & Ganti. Perbarui berikut ini:

Dalam: Bagian Ini
Ganti Dengan: #5a5ae2 (warna ungu)
Pilih Ganti Semua

Kemudian klik tombol Ganti dan simpan pengaturan.

Sekarang Anda memiliki mockup halaman beranda dengan banyak warna di setiap bagian.

Membuat Menu untuk Mempratinjau Setiap Mockup Skema Warna

Langkah terakhir adalah membuat menu utama baru untuk memudahkan klien melihat pratinjau setiap mockup skema warna. Dari Dashboard WordPress Anda, navigasikan ke Appearance > Menus. Kemudian beri Anda judul menu, klik buat menu, dan tambahkan halaman yang Anda buat ke menu baru Anda. Kemudian pastikan Anda memilih Menu Utama sebagai lokasi tampilan Anda. Dan klik Simpan Menu.

Sekarang Anda memiliki situs yang siap untuk menampilkan maket skema warna Anda.

Pikiran Akhir

Dengan opsi desain Divi, Anda dapat dengan mudah menerapkan skema warna yang sama sekali baru untuk tata letak halaman Anda menggunakan saran warna bawaan dan opsi "Temukan dan Ganti" dengan Visual Builder. Ini akan membuatnya nyaman untuk menampilkan mockup skema warna yang berbeda untuk klien Anda. Saya harap tutorial ini akan membantu Anda menemukan skema warna yang sempurna untuk proyek Anda berikutnya. Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!