Cara Mengubah Tata Letak Divi menjadi Wireframe yang Dapat Digunakan Kembali

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda cara mengubah tata letak menjadi gambar rangka yang dapat digunakan kembali menggunakan Paket Tata Letak Katering Makanan Divi. Gambar rangka sangat bagus untuk proses awal membangun situs web. Mereka membantu Anda memutuskan keseluruhan struktur dan gaya desain situs web. Mereka juga dapat membantu mendapatkan pendapat klien tentang gaya desain tanpa harus menyesuaikan semuanya terlebih dahulu.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke dalamnya, mari kita lihat hasil akhir yang akan kita buat.

Ubah Tata Letak menjadi Wireframe

Buka Halaman Arahan Katering Makanan dengan Visual Builder

Silakan dan buka halaman arahan yang Anda buat menggunakan Paket Tata Letak Katering Makanan Divi.

Hapus Bagian & Gambar Latar Header Lebar Penuh, Warna Latar & Latar Belakang Gradien

Langkah pertama untuk membuat gambar rangka adalah menghapus semua gambar latar belakang, latar belakang gradien dan warna latar belakang dari bagian di halaman Anda dan Modul Header Lebar Penuh di bagian pahlawan.

Berikan Bagian Bergantian Warna Latar Belakang Abu-abu

Untuk membantu menentukan bagian yang berbeda dalam desain halaman Anda, lanjutkan dan beri warna latar '#f9f9fb' pada setiap bagian bergantian. Kemudian, saat Anda menggunakan gambar rangka untuk membuat halaman, Anda akan dapat menggunakan fitur Temukan & Ganti untuk menambahkan palet warna ke halaman Anda dengan mulus.

Hapus semua Warna dalam Elemen Desain menggunakan Filter Gaya yang Dimodifikasi

Aktifkan Filter Gaya yang Dimodifikasi pada Modul Tombol

Kita akan menyingkirkan palet warna yang digunakan juga. Dengan begitu, kita tidak akan terpengaruh olehnya saat membuat halaman. Buka salah satu Modul Tombol di halaman Anda dan aktifkan Filter Gaya yang Dimodifikasi untuk melihat semua pengaturan saat ini.

Berikan Modul Tombol Latar Belakang Gelap & Warna Perbatasan

Ubah Warna Latar Tombol dan Warna Tepi Tombol menjadi '#2b2b2b'.

Salin Gaya Tombol & Terapkan ke Tombol Lain

Lanjutkan dengan menyalin Gaya Tombol dengan mengklik kanan pengaturan tombol dan mengklik 'Salin Gaya Tombol'. Kemudian, tambahkan Gaya Tombol ke masing-masing Modul Tombol yang tersisa di halaman.

Hapus Pengaturan Desain Ekstra (Seperti Box Shadow)

Hapus Tombol Kotak Bayangan

Kami juga menghapus elemen tambahan, seperti Box Shadow. Buka Modul Tombol yang sama yang sedang Anda kerjakan dan hapus bayangan kotak sepenuhnya.

Salin Tombol Modul Kotak Pengaturan Bayangan

Salin Gaya Bayangan Kotak dari Modul Tombol ini dan tambahkan ke Modul Tombol yang tersisa juga.

Hapus Box Shadow Secara Manual di Bagian Pahlawan & Kontak

Hanya dua tombol yang perlu dihapus secara manual dari Box Shadow adalah yang disertakan dalam Modul Header Lebar Penuh dan Modul Kontak. Tombol-tombol ini adalah bagian dari modul dengan beberapa elemen desain, oleh karena itu kita perlu menghapusnya secara manual.

Berikan Bagian Yang Disorot Warna Latar Belakang yang Sama dengan CTA

Kemudian, gulir ke bawah hingga Anda menemukan bagian 'yang disorot'. Di sini, gunakan warna latar bagian '#2b2b2b'. Warna yang sama digunakan untuk CTA.

Tentukan Dimensi Gambar

Pergi ke Perpustakaan Media

Untuk menghapus topik tata letak tata letak kita sepenuhnya, kita akan mengganti semua Modul Gambar dengan placeholder yang berisi dimensi gambar yang dibutuhkan. Untuk menemukan dimensi ini, buka Media Library Anda.

Buka Gambar Bekas Secara Individual

Buka setiap gambar yang disertakan di halaman Anda secara terpisah.

Tuliskan Berbagai Dimensi Gambar di Halaman

Setelah melakukannya, Anda akan dapat melihat dimensi gambar itu secara khusus. Lacak semua dimensi yang Anda butuhkan di halaman Anda dengan menuliskannya di suatu tempat sebelum melanjutkan ke langkah berikutnya.

Buat Placeholder dengan Dimensi

Buka Photoshop

Saatnya membuat placeholder! Buka Photoshop atau perangkat lunak pengedit gambar lainnya.

Buat Proyek Baru untuk Dimensi

Buat proyek baru untuk setiap set dimensi yang Anda miliki di halaman Anda. Dalam kasus kami, kami memerlukan proyek terpisah untuk masing-masing dimensi berikut:

• 800x1029
• 400x400
• 48x48

Pilih Warna Abu-abu

Pilih '#e7e8ed' sebagai warna Anda.

Buka Kunci Lapisan Latar Belakang

Buka kunci layer Background Anda juga.

Pilih Paint Bucket Tool & Tambahkan Warna ke Layer

Kemudian, gunakan Paint Bucket Tool untuk mewarnai kanvas Anda menjadi abu-abu.

Tambahkan Teks dengan Dimensi

Untuk membantu Anda melacak dimensi gambar, Anda juga dapat menambahkan dimensi di tengah placeholder Anda. Dengan begitu, Anda akan tahu dimensi gambar mana yang Anda perlukan untuk halaman Anda setelah Anda mengedit gambar yang akan Anda ganti.

Simpan untuk Web

Setelah selesai, simpan placeholder gambar Anda untuk web.

Ulangi untuk Masing-masing Dimensi Gambar di Halaman

Ulangi langkah-langkah ini untuk setiap satu set dimensi pada halaman Anda. Untuk halaman ini, Anda memerlukan total tiga set berbeda:

• 800 x 1029 (bagian tentang kami
• 400 x 400 (bagian galeri)
• 48 x 48 (ikon)

Ganti Gambar dengan Placeholder

Setelah Anda mengekspor semua placeholder gambar Anda, lanjutkan dan ganti gambar.

Membuat Wireframe Mudah Digunakan Kembali

Buat Peta Wireframe di Komputer

Setelah selesai membuat wireframe, sebaiknya simpan tampilannya di suatu tempat. Buat folder baru di suatu tempat di komputer Anda.

Tata Letak Tangkapan Layar & Simpan Secara Lokal

Kemudian, gunakan add-on/ekstensi tangkapan layar pilihan Anda untuk menangkap halaman Anda. Pada gambar di bawah, kami telah menggunakan add-on FireShot untuk Mozilla Firefox. Pastikan bahwa saat Anda menyimpan tangkapan layar, Anda memberinya nama yang tepat.

Simpan Tata Letak ke Perpustakaan dengan Nama yang Sama

Gunakan nama yang sama dengan yang Anda gunakan untuk tangkapan layar untuk menyimpan tata letak gambar rangka ke Perpustakaan Divi Anda. Ini memungkinkan Anda untuk melihat gambar rangka di komputer Anda sebelum mengunggahnya ke salah satu halaman Anda.

Ubah Pengaturan Desain untuk Personalized Wireframed

Tambahkan Pembagi Bagian

Anda tidak dibatasi untuk membuat satu gambar rangka per halaman. Anda dapat dengan mudah mengubah pengaturan desain untuk membuat gambar rangka baru. Anda dapat bermain-main dengan pembagi bagian, misalnya, untuk membuat desain yang unik.

Bermain-main dengan Tipografi

Aktifkan Temukan & Ganti di Heading Font

Atau, Anda juga bisa bermain-main dengan tipografi. Buka Modul Header Lebar Penuh di bagian pahlawan Anda dan klik kanan pada Font Judul. Lanjutkan dengan mengaktifkan fitur Temukan & Ganti.

Ubah Font

Ubah font yang sedang digunakan di halaman Anda ke yang lain dan Anda memiliki gambar rangka baru!

Simpan Elemen Desain Terpisah Menggunakan Kategori

Klik Ikon 'Tambahkan ke Perpustakaan'

Hal lain yang dapat Anda lakukan adalah menyimpan elemen desain tertentu di halaman Anda secara terpisah. Katakanlah, misalnya, Anda ingin membuat kumpulan bagian pahlawan, Anda dapat dengan mudah menambahkan bagian pahlawan Anda ke Perpustakaan Divi Anda.

Tambahkan Kategori Baru & Beri Nama Elemen Desain

Untuk memiliki struktur yang lebih terorganisir, lanjutkan dengan menambahkan kategori baru bagian yang disebut 'Bagian Pahlawan' sehingga Anda dapat dengan mudah menemukan bagian pahlawan pilihan Anda dan menjelajahi semua desain yang Anda miliki di toko.

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.

Pikiran Akhir

Dalam posting blog kasus penggunaan ini, kami telah menunjukkan kepada Anda cara mengubah tata letak Divi menjadi gambar rangka yang dapat digunakan kembali. Mengubah tata letak menjadi gambar rangka membantu Anda mempertahankan tampilan keseluruhan tentang bagaimana Anda ingin struktur situs web terlihat. Mereka juga sangat baik untuk memberikan pengarahan tentang gaya desain kepada klien pada tahap pertama proses pembuatan situs web. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar!