Cara tercepat untuk memperbarui desain halaman Anda dengan Divi 5

Divi 5 memperkenalkan beberapa alat baru yang cerdas untuk membantu Anda bekerja lebih cepat dan merancang lebih bebas. Tetapi dengan begitu banyak kekuatan di ujung jari Anda, mudah untuk merasa tidak yakin dari mana harus memulai, terutama saat memperbarui tata letak yang ada.

Anda mungkin sudah tahu cara mengubah jarak, menyesuaikan warna, dan membersihkan tata letak, jadi posting ini bukan tentang mempelajari kembali dasar -dasarnya. Ini tentang melakukannya lebih cepat dengan Divi 5. Dalam langkah -langkah di bawah ini, kami berjalan melalui alur kerja pembaruan praktis yang dapat Anda ikuti pada halaman yang ada. Dan jika perubahan baru -baru ini terasa luar biasa, mulailah di sini. Anda akan memudahkan dengan kejelasan dan kepercayaan diri.

8 Langkah untuk memperbarui desain halaman Anda dengan Divi 5

Untuk tutorial ini, kami menggunakan halaman pendaratan CV Business dari perpustakaan Paket Tata Letak Divi.

Berlangganan saluran YouTube kami

Kami akan berjalan melalui cara memperbarui halaman menggunakan alat baru Divi 5, seperti menemukan dan mengganti, variabel desain, dan memperluas atribut, untuk mempercepat alur kerja Anda dan mengurangi pengeditan berulang. Mari kita mulai.

1. Optimalkan dasbor Anda untuk pengeditan bebas gangguan

Bahkan gangguan kecil dapat melanggar fokus Anda saat Anda memperbarui tata letak. Anda mungkin melompat di antara bagian -bagian, berulang kali membuka pengaturan, dan kehilangan jejak di mana Anda tinggalkan. Penundaan semacam ini bertambah dengan cepat, terutama pada halaman yang lebih lama atau lebih kompleks.

Divi 5 membantu mengurangi gesekan dengan lingkungan pengeditan yang lebih fleksibel. Anda dapat merangkai panel untuk menjaga pengaturan kunci terlihat, membuka beberapa modul di tab, dan menggunakan panel Layers untuk menavigasi tata letak Anda tanpa pengguliran yang tak ada habisnya. Alih -alih mengklik masuk dan keluar dari modul, Anda dapat menjaga semuanya tetap terbuka dan dapat diakses saat Anda bergerak.

Panel Layers memberi Anda gambaran struktural lengkap dari tata letak, sehingga Anda dapat langsung melompat ke bagian mana pun, baris, atau modul hanya dengan mengklik. Ini sangat berguna untuk melompat melintasi halaman besar tanpa menggulir.

Sebelumnya, alur kerja sering berarti membuka modul, menyimpannya, menggulir lagi, membuka yang berikutnya, dan mengulangi siklus itu. Divi 5 melewatkan semua itu. Anda dapat membuka beberapa modul kembali ke belakang; Masing -masing tetap terlihat sebagai tab di panel pengeditan Anda. Ini membuat membandingkan pengaturan atau beralih antar elemen lebih mudah tanpa berulang kali menutup dan membuka kembali pengaturan elemen.

Mungkin perlu beberapa penyesuaian untuk membiasakan diri dengan alur kerja baru. Karena panel berperilaku berbeda, maka beralih di antara modul tidak akan merasakan sifat kedua segera. Tapi berikan sedikit latihan, dan perubahan kecil ini mulai bertambah.

Saat Anda mengikuti langkah -langkah di bawah ini, cobalah bekerja dengan panel secara berbeda, merapat beberapa, menumpuk pasangan di tab, atau menjaga panel Layers tetap terbuka. Anda akan mulai merasakan apa yang paling cocok untuk arus Anda.

2. Atur variabel desain global Anda terlebih dahulu

Saat Anda mengelola tata letak penuh, hal terakhir yang Anda inginkan adalah mengulangi diri sendiri. Tapi itulah yang terjadi ketika setiap gaya diatur secara manual di dalam setiap modul. Ini mungkin bekerja pada awalnya, tetapi seiring waktu, halaman Anda berubah menjadi tambalan pilihan yang terputus. Akhirnya, sesuatu selalu dirindukan.

Variabel desain membantu Anda menghindarinya. Mereka memberi Anda tempat sentral untuk mendefinisikan bahasa desain Anda. Anda mendefinisikan nilai yang dapat digunakan kembali untuk font, warna, jarak, gambar, URL, atau tautan. Setelah diterapkan, nilai -nilai ini tetap terhubung ke setiap modul yang menggunakannya.

Inilah contoh sederhana. Katakanlah Anda ingin semua judul Anda menggunakan font Lato. Alih -alih memilih Lato di setiap modul, Anda membuat variabel font . Beri nama, pilih Lato, dan simpan. Setiap judul yang Anda ikat ke variabel itu sekarang akan tetap sinkron.

Jika Anda ingin beralih ke font yang berbeda nanti, cukup perbarui variabel. Setiap modul yang terhubung akan secara otomatis mencerminkan perubahan.

Dan itu hanya satu kasus penggunaan. Anda juga dapat mengatur variabel untuk bantalan bagian yang konsisten, gaya tombol, warna latar belakang, atau apa pun yang Anda gunakan berulang kali. Anda tidak perlu mendefinisikan semuanya sekaligus jika rasanya terlalu berlebihan. Mulailah dengan gaya yang Anda tahu Anda akan menggunakan kembali, dan memperluas sistem desain Anda dari sana.

3. Ganti nilai statis dengan variabel desain

Kadang-kadang tata letak memiliki gaya yang keras, jadi memperbaruinya secara manual membuat prosesnya tidak konsisten. Itu sebabnya kami mengganti nilai statis dengan variabel global yang baru saja kami tentukan.

Anda tidak perlu memburu mereka secara individual. Alat Temukan dan Ganti Divi memudahkan untuk menukar nilai statis untuk variabel hanya dalam beberapa klik. Katakanlah semua judul Anda menggunakan font yang dipilih secara manual. Buka modul heading apa pun, klik pada bidang font, dan pilih Temukan & Ganti.

Di panel Nilai Ganti , arahkan kursor ke lapangan dan buka manajer variabel . Pilih semua variabel font utama Anda dan konfirmasi perubahan.

Anda akan segera melihat keajaiban: Setiap contoh font di seluruh tata letak diganti segera. Metode yang sama ini berfungsi untuk warna, jarak, gaya tombol, dan apa pun yang telah Anda atur variabel.

Dan Anda tidak perlu mengubah semuanya sekaligus. Mulailah kecil, pilih gaya yang akan Anda gunakan kembali, seperti bagian bantalan atau latar belakang tombol, dan beralih terlebih dahulu. Saat Anda pergi, tata letak Anda bergeser dari tambalan suntingan manual ke sistem yang sepenuhnya terhubung. Dan ketika sistem itu ada, setiap perubahan di masa depan menjadi lebih mudah, lebih cepat, dan lebih konsisten secara default.

4. Gunakan atribut Perpanjangan untuk menerapkan pembaruan dalam hitungan detik

Setelah nilai -nilai global Anda ada, langkah selanjutnya adalah penyempurnaan. Anda akan sering menemukan diri Anda membuat tweak kecil ke bagian individual dan berharap Anda dapat membawa perubahan itu ke sisa tata letak tanpa mengulangi pekerjaan. Dimungkinkan dengan atribut Perluasan.

Ini memungkinkan Anda secara instan menyalin gaya, konten, atau preset dari satu elemen dan menerapkannya kepada orang lain. Ini juga berfungsi bahkan jika modul bukan tipe yang sama. Misalnya, jika Anda telah merancang perbatasan dan bayangan khusus untuk satu gambar, Anda dapat menggunakannya sebagai referensi untuk setiap gambar di bagian tersebut.

Klik kanan pada gambar yang ditata dan pilih Extope Atribut.

Saat panel Extle terbuka, dock ke samping, karena Anda kemungkinan akan kembali ke sana. Di dropdown, atur ruang lingkup ke bagian induk dan jenis elemen ke gambar, lalu konfirmasi.

Satu tindakan itu menerapkan pembaruan Anda untuk setiap gambar di bagian itu, tanpa perlu menyentuhnya secara individual.

Dan di situlah atradat atribut benar -benar mendapatkan tempatnya. Dibutuhkan apa yang akan menjadi serangkaian manual, suntingan berulang dan mengubahnya menjadi satu gerakan yang konsisten. Anda dapat menggunakannya untuk bagian dengan beberapa kolom atau modul serupa, seperti galeri gambar atau uraian. Ini adalah cara tercepat untuk membawa rasa poles ke desain Anda tanpa membakar waktu di setiap modul.

5. Simpan edit yang dapat digunakan kembali sebagai preset grup opsi

Saat Anda memperbaiki tata letak Anda, kemungkinan besar Anda akan mengubah jarak, perbatasan, atau warna latar belakang untuk mendapatkan hasil yang tepat. Alih -alih mengulangi penyesuaian tersebut setiap saat, simpan sebagai preset grup opsi.

Katakanlah Anda telah menyesuaikan jarak, perbatasan, dan latar belakang kolom. Anda menyukai tampilannya dan ingin menggunakannya kembali di tempat lain. Buka pengaturan untuk kolom itu, gulir ke grup gaya yang Anda modifikasi (seperti jarak atau perbatasan), dan klik ikon preset untuk menyimpannya.

Untuk menerapkan preset ke kolom lain, klik kanan yang asli dan pilih Extope Atribut> Extopt Preset Kolom . Di panel, atur ruang lingkup Anda ke baris induk, pilih kolom sebagai jenis elemen, dan tekan atribut Extand.

Preset yang sekarang berlaku untuk setiap kolom di baris dalam satu gerakan. Ini sangat berguna untuk tata letak dengan elemen berulang seperti tabel penetapan harga, uraian, kesaksian, atau di mana pun Anda menginginkan konsistensi visual tanpa upaya manual. Dan karena preset disimpan ke paket tata letak, Anda akan menyiapkannya di halaman lain juga.

6. Gunakan salin/tempel untuk perubahan satu kali cepat

Setelah Anda memperluas gaya ke bagian atau baris penuh, Anda mungkin masih ingin membuat tweak kecil dan bertarget. Mungkin hanya satu kolom atau modul membutuhkan tampilan yang sedikit berbeda. Alih -alih memperluas preset lagi, gunakan fitur manajemen atribut.

Misalnya, jika Anda telah menyesuaikan perbatasan dan bayangan kolom dan hanya ingin satu atau dua orang lain untuk mencocokkan, klik kanan kolom bergaya dan pilih Salin Gaya Item . Kemudian, klik kanan kolom yang ingin Anda perbarui dan pilih Tempel Gaya Item .

Ini tidak akan menimpa pengaturan lain dan bekerja secara instan, menjadikannya ideal untuk situasi di mana Anda ingin tetap fleksibel. Anda dapat menyalin dan menempel gaya dari hampir semua elemen dan memutuskan dengan tepat apa yang harus disalin, apakah itu jarak, warna, perbatasan, atau tweak desain lainnya.

Perpanjang atribut menangani pengeditan curah, dan salin/tempel menangani detailnya. Ini sempurna untuk menyempurnakan tata letak yang sebagian besar dilakukan tetapi masih membutuhkan beberapa sentuhan pribadi.

7. Beralih di antara breakpoint khusus untuk menyempurnakan tampilan responsif

Pastikan tata letak desktop Anda terlihat bagus di setiap ukuran layar. Breakpoint yang dapat disesuaikan divi 5 membuat ini mudah dengan membiarkan Anda beralih di antara tablet, telepon, dan bahkan lebar layar khusus dengan satu klik. Ikon perangkat berada tepat di dalam pembangun, sehingga Anda dapat dengan cepat mempratinjau bagaimana bagian Anda berperilaku di layar yang lebih kecil.

Jika perlu, Anda juga dapat menentukan breakpoint Anda sendiri untuk kontrol lebih lanjut.

Ini adalah waktu yang tepat untuk memeriksa jarak, ukuran font, dan penyelarasan gambar. Hanya perlu beberapa menit tetapi menyelamatkan Anda dari masalah tata letak yang lebih besar nanti, terutama pada halaman yang berat atau fokus pada konten. Dan Anda tidak perlu mengubah alur kerja Anda. Alat Divi bekerja sama lancar dalam tampilan yang responsif, jadi buat tweak Anda, pratinjau tata letak, dan lanjutkan.

8. Perbarui variabel desain Anda untuk menyegarkan seluruh tata letak secara instan

Sebelumnya, kami mengatur variabel desain global Anda dan mengganti nilai statis menggunakan Temukan dan Ganti. Dan sekarang tata letak Anda sepenuhnya terhubung ke sistem desain terpusat.

Variabel desain membuat pembaruan di seluruh situs web menjadi sangat mudah. Katakanlah merek Anda memperbarui tipografi atau warna utamanya. Alih -alih menggali setiap modul untuk membuat perubahan yang sama berulang kali, Anda cukup memperbarui variabel yang disimpan. Satu perubahan itu berlaku secara instan di seluruh tata letak Anda.

Untuk melihat ini beraksi, lihatlah perbandingan berdampingan ini. Struktur tata letak tetap sama, tetapi proses di belakangnya menjadi lebih sederhana dan lebih cepat.

Sekarang pikirkan bagaimana skala ini. Bayangkan seluruh situs web Anda, setiap halaman dan bagian, dibangun di atas sistem yang sama. Anda tidak lagi menelusuri kembali langkah -langkah Anda untuk setiap perubahan. Satu tweak ke variabel memperbarui semuanya. Anda mengelola seluruh merek Anda dengan mengelola nilai melalui Variable Manager.

Fleksibilitas semacam ini persis seperti apa Divi 5 dirancang. Ini bukan hanya tentang pengeditan yang lebih cepat tetapi tentang mengurangi pengulangan, meningkatkan akurasi, dan memberi Anda lebih banyak kontrol dengan sedikit usaha.

Kustomisasi alur kerja Divi 5 Anda

Sekarang, Anda telah melihat bagaimana alat seperti variabel desain, memperluas atribut, dan preset grup opsi dapat membentuk kembali cara Anda memperbarui tata letak. Tapi tidak ada cara tunggal untuk menggunakannya.

Panduan ini hanyalah satu versi proses. Anda dapat mengikuti langkah -langkah dalam urutan yang berbeda, melewatkan beberapa, atau mencampurnya ke dalam rutinitas Anda sendiri. Dan itu benar -benar baik -baik saja, karena tujuannya bukan untuk mengikuti formula tetapi untuk menemukan ritme yang terasa alami dan sesuai dengan cara Anda ingin bekerja.

Bereksperimen sedikit. Semakin banyak Anda bermain -main dengan alat, semakin banyak Anda akan mulai mengenali apa yang paling cocok untuk aliran Anda. Jika semuanya terasa lebih halus, pembaruan Anda lebih cepat, dan desain Anda tetap konsisten, itulah tanda Anda bahwa itu berhasil.

Dan jika Anda bertanya -tanya apakah alat -alat ini dapat mengikuti perkembangan alur kerja Anda, mereka benar -benar bisa karena ...

Divi 5 dirancang untuk beradaptasi dengan cara kerja Anda

Itulah pemikiran di balik setiap fitur yang telah kami bahas. Apakah Anda suka mendefinisikan setiap gaya di muka atau membuat perubahan saat Anda membangun, alat beradaptasi dengan cara Anda lebih suka bekerja.

Anda dapat bergerak cepat atau meluangkan waktu. Mulailah dari halaman kosong atau perbaiki tata letak yang ada. Pembangun tidak memaksa Anda ke alur kerja yang kaku. Ini dibangun untuk mengurangi pekerjaan sibuk, melewatkan suntingan berulang, dan membantu Anda fokus pada apa yang sebenarnya penting: merancang dengan kejelasan, kecepatan, dan kepercayaan diri.

Pada akhirnya, ini tentang membangun proses yang terasa seperti milik Anda dan mengikuti Anda saat proyek dan ide Anda tumbuh. Apakah Anda siap membangun alur kerja desain yang membaik dengan Anda?