Cara Mengubah Gaya Paket Tata Letak dengan Cepat dengan Temukan & Ganti

Memperbarui desain paket tata letak penuh terdengar sederhana sampai Anda menyadari bahwa Anda harus mengubah gaya yang sama di lima atau enam halaman berbeda. Karena gaya-gaya ini diterapkan sebagai nilai statis, bahkan pembaruan kecil, seperti mengubah font atau penyesuaian bagian bantalan, menjadi memakan waktu ketika dilakukan halaman demi halaman.

Tetapi bagaimana jika Anda dapat memperbarui semua gaya berulang hanya dalam beberapa klik? Itulah tepatnya yang ditemukan dan diganti dalam Divi 5. Apakah Anda menukar font, mengganti warna, atau menyesuaikan jarak, fitur ini membantu Anda membuat perubahan tata letak secara instan. Kami akan menunjukkan cara menggunakannya untuk membersihkan dan mengembalikan seluruh paket tata letak.

Apa yang ditemukan dan ganti di Divi 5

Temukan dan ganti adalah fitur di Divi 5 yang memungkinkan Anda dengan cepat memperbarui nilai gaya berulang di seluruh tata letak Anda. Baik itu font, kode warna, bantalan, atau bahkan efek bayangan, Anda sekarang dapat mengubah nilai itu sekali dan menerapkannya di beberapa elemen.

Jadi, bagaimana ini sebenarnya bekerja? Dimulai dengan modul apa pun di pembangun visual. Arahkan ke atas bidang gaya seperti warna teks atau ukuran font, dan Anda akan melihat ikon tiga titik. Klik itu (atau klik kanan bidang) dan pilih Temukan & Ganti .

Ini membuka panel di mana Anda menentukan nilai apa yang akan diganti, apa nilai baru seharusnya, dan di mana harus menerapkan perubahan. Anda dapat tetap fokus pada modul itu, memperluasnya ke seluruh bagian, atau pergi tata letak di seluruh halaman.

Setelah Anda mengalami alur kerja ini, Anda akan mengerti mengapa ini merupakan alat yang sangat membantu. Alih -alih berburu melalui lusinan modul untuk mengubah warna atau font yang sama, Anda membuat satu pembaruan yang ditargetkan dan menontonnya riak di seluruh tata letak Anda dalam hitungan detik. Tetapi untuk benar -benar membuka kunci dan mengganti potensi, Anda perlu melihat cara kerjanya dengan variabel desain, yang mengubah segalanya.

Bagaimana menemukan dan mengganti membantu memperbarui gaya tata letak lebih cepat

Kami akan berjalan melalui dua skenario: Pertama, operasi dasar dan mengganti operasi, kemudian tugas yang sama menggunakan variabel desain (yang ini adalah senjata rahasia).

Menggunakan Temukan dan Ganti di Divi 5

Prosesnya langsung: memicu dari bidang gaya apa pun, pilih apa yang harus diganti, dan menerapkan perubahan di beberapa modul. Mari kita berjalan melewatinya dengan contoh nyata.

Katakanlah Anda ingin meningkatkan ukuran font dari semua judul halaman Anda. Mulailah dengan mengklik modul heading di dalam pembangun visual. Pergi ke Pengaturan> Desain> Teks Heading> Teks Heading H1 Ukuran Font. Klik kanan atau melayang untuk menemukan opsi Find & Replace antara lain.

Ini membuka panel temukan dan ganti dengan banyak opsi:

• (1) Elemen Sumber: Ini mendefinisikan pengaturan yang Anda targetkan, seperti ukuran teks, warna, atau bantalan. Secara otomatis dipilih berdasarkan di mana Anda membuka panel.
• (2) Temukan Nilai: Nilai saat ini yang digunakan di seluruh tata letak Anda. Ini bisa berupa ukuran font seperti 30px, kode warna seperti #000000, atau pengaturan desain lainnya. Ini ditambahkan secara otomatis.
• (3) Ganti Nilai: Nilai baru yang ingin Anda terapkan. Divi mencari nilai yang cocok dan menggantinya dengan yang ini.
• (4) Temukan dan ganti di lokasi: Pilih di mana perubahan harus diterapkan. Anda dapat membatasi ke satu modul, bagiannya, atau seluruh halaman.
• (5) Temukan dan ganti dalam jenis elemen: Tentukan modul mana yang harus dipengaruhi oleh perubahan. Anda dapat menerapkannya pada semua modul atau hanya tipe spesifik seperti tombol, teks, atau blurbs.
• (6) Hanya mengganti bidang yang identik: Nyalakan ini untuk memperbarui hanya bidang yang persis cocok dengan nilai temukan. Ini membantu menghindari perubahan yang tidak disengaja pada elemen yang tidak terkait.

Misalnya, kami mengganti ukuran font dari 30px ke penjepit fluida (20px, 4VW, 50px). Kami telah memilih seluruh halaman dan semua elemen karena kami ingin memperbarui semua judul pada halaman.

Klik tombol Temukan dan Ganti , dan perhatikan apa yang terjadi. Semua judul dengan ukuran font 30px sekarang memiliki nilai cairan klem ().

Judul lainnya tetap tidak berubah karena Divi hanya memperbarui nilai -nilai yang cocok persis dalam ruang lingkup yang Anda pilih. Tidak diperlukan pengeditan manual, dan bahkan tidak ada perubahan yang tidak disengaja pada elemen yang tidak terkait. Akurasi ini membuatnya sempurna untuk membersihkan gaya default dalam paket tata letak.

Pelajari segala sesuatu tentang Temuan dan Ganti Divi

Menggunakan variabel desain di Find and Ract

Temukan dan ganti menjadi lebih kuat ketika dipasangkan dengan variabel desain. Alih -alih mengganti nilai statis dengan nilai statis lain, Anda dapat menggantinya dengan variabel yang disimpan dari manajer variabel. Ini membangun sistem desain yang konsisten yang mudah diperbarui nanti.

Mari kita lanjutkan dengan contoh yang sama, memperbarui semua ukuran font heading. Tapi kali ini, alih -alih mengganti 30px dengan nilai penjepit langsung, kami akan menggantinya dengan variabel bernama ukuran font H3.

Pertama, buat variabel. Buka manajer variabel dari bilah sisi kiri dan buka kolom angka . Beri nama variabel Anda, tetapkan nilai, dan simpan.

Ini membuat variabel tersedia di semua bidang ukuran font. Sekarang datang keajaiban: Anda dapat menggunakannya langsung di panel Temukan dan Ganti untuk menetapkan variabel yang disimpan untuk semua ukuran font heading sekaligus.

Buka panel temukan dan ganti seperti sebelumnya. Di bidang Nilai Ganti , kurangi input dan klik ikon Variable Manager . Pilih variabel yang Anda simpan, ukuran font H3, dan lanjutkan dengan pengaturan yang sama.

Klik Temukan dan ganti untuk menerapkan perubahan. Semua judul yang menggunakan 30px sekarang akan merujuk variabel ukuran font H3 alih -alih nomor tetap.

Di sinilah menjadi menarik. Perlu menyesuaikan ukuran font ini nanti? Buka Variable Manager , buka variabel ukuran font H3, dan ubah nilainya. Perbarui klem ke penjepit (24px, 5vw, 60px), dan setiap pos menggunakan variabel ini pembaruan secara otomatis.

Tidak perlu mengulangi dan mengganti. Dengan satu pembaruan, tata letak Anda menyesuaikan di mana -mana variabel digunakan.

Kombinasi variabel temukan dan ganti dan desain ini membuat memperbarui seluruh paket tata letak begitu efisien, dan kami akan mengikuti proses ini dalam tutorial ini. Anda akan mendefinisikan variabel desain Anda sekali, kemudian menggunakan Find and Repland untuk beralih dari nilai statis ke variabel yang disimpan di semua halaman. Setelah itu, memperbarui menjadi mudah.

Pelajari Segalanya Tentang Variabel Desain Divi

Siap mempraktikkan ini? Anda membutuhkan Divi 5 untuk menggunakan variabel temukan dan mengganti dan desain. Pembangun telah sepenuhnya dibangun kembali untuk kinerja yang lebih cepat dan alur kerja yang lebih cerdas.

Cara mengganti gaya melintasi paket tata letak

Sekarang setelah Anda tahu bagaimana menemukan dan mengganti berfungsi dan cara memasangkannya dengan variabel desain, mari kita beraksi pada paket tata letak nyata. Sebagai contoh kami, kami akan mengimpor sistem manajemen pembelajaran, yang mencakup beberapa halaman seperti Home, About, Contact, Course Landing, dan Harga.

Setiap halaman menggunakan font, warna, dan jarak yang sama, tetapi semua sebagai nilai statis. Dalam tutorial di bawah ini, kami akan memperbarui ini di semua halaman, mengubahnya menjadi variabel, dan menghubungkan semuanya ke sistem desain pusat.

1. Audit gaya desain tata letak Anda

Sebelum Anda mulai mengganti apa pun, luangkan beberapa menit untuk meninjau paket tata letak Anda. Buka setiap halaman dan daftarkan dengan cepat semua gaya desain yang berulang, seperti ukuran font, warna tombol, jarak teks, bantalan bagian, dan gaya perbatasan. Inilah yang saya temukan setelah meninjau tata letak LMS:

• Ukuran font: 30px digunakan untuk semua judul H3, dan 48px untuk H2S di beberapa halaman
• Font: Poppins digunakan secara konsisten untuk semua judul
• Tombol Primer: Warna latar belakang adalah #4449E0 dengan teks putih
• Padding: Sebagian besar bagian menggunakan 60px atas dan bawah
• Ikon Blurb: Ukuran ikon diatur ke 24px
• Perbatasan Blurb: Tidak ada perbatasan yang diterapkan pada modul uraian
• Latar Belakang Bagian: Warna Hijau #47BE68 muncul di bagian footer hampir setiap halaman

Ini semua dimasukkan secara manual sebagai nilai statis di dalam setiap modul. Misalnya, modul blurb menggunakan #4449E0 untuk warna ikon dan lebar 24px.

Setelah Anda mengidentifikasi gaya berulang seperti ini, Anda akan tahu persis apa yang harus dikonversi menjadi variabel desain.

Langkah audit ini menciptakan fondasi untuk semua yang mengikuti. Ini membantu Anda membangun pendekatan sistematis yang membuat tata letak Anda konsisten dan dapat dipelihara.

2. Simpan variabel desain Anda

Setelah Anda mengaudit tata letak Anda dan mencatat gaya berulang, langkah selanjutnya adalah menciptakan variabel desain dari nilai pilihan Anda. Ini memungkinkan Anda mengubah gaya hardcoded menjadi token yang dapat digunakan kembali, membuat tata letak Anda lebih mudah diperbarui nanti. Setelah kami menyimpan semua nilai kami, kami akan mengganti yang saat ini dengan kami.

Membuat variabel warna

Dalam contoh sebelumnya, saya menemukan bahwa ikon blurb menggunakan warna #4449E0, tetapi saya ingin beralih ke warna merek utama saya, #6C012A. Untuk melakukannya, saya akan membuat variabel warna.

Pergi ke manajer variabel dari bilah sisi kiri, lalu buka kolom warna .

Gulir ke bawah dan klik opsi + Tambahkan Warna Global . Beri nama variabel Anda dan masukkan nilai. Klik Simpan Variabel , dan selesai.

Membuat variabel angka

Selanjutnya, saya ingin menambahkan perbatasan 2px di sekitar blurbs, jadi saya akan membutuhkan variabel angka . Prosesnya serupa, tetapi di kolom yang berbeda. Pergi ke kolom nomor . Klik + Tambahkan nomor global, beri nama variabel Anda, tetapkan nilai, dan simpan.

Membuat variabel font

Saya juga ingin mengubah semua font judul ke Askhar, font merek saya. Ini membutuhkan variabel font . Arahkan ke kolom font , buat variabel baru, tetapkan nama, pilih font, dan simpan.

Itu sudah selesai. Font ini sekarang akan dapat dipilih di semua bidang teks heading di seluruh tata letak.

Ikuti proses yang sama untuk sisa temuan audit Anda, seperti bantalan bagian, ukuran heading lainnya, atau warna merek tambahan. Setiap gaya berulang dari tata letak Anda dapat (dan harus) menjadi variabel.

Dengan begitu, Anda tidak perlu mengingat kode hex, nama font, atau nilai spesifik. Mereka tinggal di manajer variabel Anda dan mengikuti Anda melintasi modul dan halaman. Dan yang terbaik dari semuanya, Anda dapat menggunakan Temukan dan mengganti untuk menerapkannya di seluruh tata letak, yang akan kami lakukan selanjutnya.

3. Gunakan Temukan dan Ganti untuk menerapkan variabel

Inilah bagian paling menarik yang pernah kami tunggu. Dengan variabel kami disimpan, mengubah gaya dari seluruh tata letak ini cepat dan mudah. Mari kita lihat caranya.

Mengubah warna ikon

Pertama, mari kita ubah warna ikon menjadi variabel warna merek primer kami yang disimpan. Arahkan ke Pengaturan Blurb> Desain> Gambar & Ikon. Sekarang, kurangi opsi warna ikon dan klik pada tiga titik. Pilih Temukan & Ganti .

Pada panel Temukan dan Ganti, yang perlu Anda lakukan adalah melayang untuk menemukan ikon Variable Manager dan pilih variabel Anda.

Dan begitu saja, semua ikon memiliki warna baru. Saya juga bisa melakukannya dengan cara lain, dengan menetapkan warna merek saya sebagai nilai statis alih -alih menyimpan variabel desain, tetapi kami menambahkan langkah tambahan untuk menyederhanakan pembaruan di masa depan.

Bagaimana? Bayangkan Anda telah memodifikasi semua halaman tata letak Anda tetapi ingin mengganti warna merek Anda. Tidak perlu merasa kewalahan meninjau kembali semua halaman atau melakukan modul dengan modul. Karena Anda sudah menyimpan variabel desain warna merek, Anda hanya perlu mengubah nilai untuk memperbaruinya di seluruh situs.

Mengubah semua judul font

Selanjutnya, mari kita beralih semua font heading ke font merek saya. Akses Pengaturan Heading> Desain> Teks Judul. Arahkan ke atas judul font dan buka temukan & ganti . Di kolom Ganti Nilai , tetapkan variabel font heading merek Anda.

Memperbarui lebar perbatasan dari semua modul uraian

Untuk pembaruan lebar perbatasan, saya akan menggunakan variabel modul blurb saya. Prosesnya tetap konsisten. Arahkan ke pengaturan perbatasan uraian apa pun, buka temukan & ganti, pilih variabel Anda, dan terapkan.

Setelah Anda beralih semua nilai statis dengan variabel desain Anda, Anda akan menghubungkan gaya tata letak Anda langsung ke variabel. Ini berarti jika Anda ingin mengubah warna merek, tweak tajuk tipografi, atau menyesuaikan lebar perbatasan, Anda tidak perlu mengulang pengganti. Cukup perbarui variabel, dan semua elemen yang ditautkan akan langsung menyesuaikan.

Langkah Bonus: Buat dan Simpan Preset (Opsional)

Sementara menemukan dan mengganti dan desain variabel memberi Anda fondasi yang kuat, ada langkah opsional yang dibangun pada sistem ini lebih jauh. Preset memungkinkan Anda mengemas gaya lengkap dan menggunakannya kembali di mana saja hanya dengan satu klik.

Setelah Anda puas dengan variabel dasar Anda, Anda dapat mengambil satu langkah lebih dalam dan membuat preset untuk lebih banyak gaya granular. Ini tidak diperlukan untuk proses inti yang baru saja kami lalui, tetapi perlu dijelaskan jika Anda menginginkan efisiensi maksimal.

Katakanlah Anda suka menambahkan efek bayangan ke semua blurbs Anda, jadi Anda merancang gaya bayangan yang sempurna untuk modul uraian Anda. Alih -alih menyalin gaya ini secara manual setiap kali, Anda dapat menyimpannya sebagai preset.

Selesai. Preset ini sekarang muncul di dropdown preset dari setiap modul. Anda dapat menerapkannya ke modul lain secara instan; Tidak perlu mengulang jarak, perbatasan, bayangan, atau tweak desain lainnya.

Apa yang membuat preset lebih kuat adalah fleksibilitas mereka. Anda dapat membuat grup preset untuk kombinasi pengaturan yang berbeda untuk optimasi alur kerja yang lebih baik dan kontrol granular. Misalnya, Anda mungkin memiliki satu grup preset untuk gaya tombol dengan variasi seperti garis cahaya primer, primer, dan garis cahaya primer, masing -masing berisi kombinasi latar belakang, perbatasan, dan jarak yang berbeda.

Dengan cara ini, Anda mempertahankan konsistensi sambil memiliki opsi untuk konteks yang berbeda. Preset sangat berguna ketika tata letak Anda memiliki 10+ modul menggunakan gaya yang sama. Alih -alih mengandalkan memori atau pengeditan manual, Anda menstandarkan semuanya di muka.

Pelajari segalanya tentang preset grup opsi Divi

Setelah menerapkan semua variabel desain yang disimpan, inilah tampilan versi sebelum dan sesudah:

4. Oleskan proses yang sama ke halaman lain

Setelah variabel desain dan preset Anda diatur, memperbarui sisa paket tata letak Anda menjadi lebih cepat.

Ambil halaman arahan kursus, misalnya. Anda akan melihat nilai statis yang sama yang digunakan di sini, tajuk font, warna tombol, perbatasan uraian, warna ikon, dan banyak lagi. Sekali lagi, alih -alih secara manual mengutak -atik setiap pengaturan, buka modul yang relevan, memicu Find & Replace, dan tetapkan variabel desain yang cocok.

Ulangi proses ini untuk setiap gaya berulang di semua halaman Anda. Setelah selesai, seluruh paket tata letak Anda akan terhubung ke variabel dan preset, membuat pengeditan di masa depan hampir mudah.

Halaman Pendaratan Kursus yang Diperbarui Menggunakan Variabel Temukan & Ganti dan Desain Divi

Lakukan edit tata letak di detik dengan temukan dan ganti

Menyiapkan variabel desain dan pembelajaran menemukan dan mengganti di Divi 5 mungkin memakan waktu di muka. Tetapi begitu Anda melakukannya untuk satu paket tata letak, Anda tidak akan pernah ingin kembali mengklik secara manual melalui lusinan modul.

Kami mengubah seluruh paket tata letak dari nilai statis yang tersebar ke sistem desain yang terhubung. Apa yang memakan waktu beberapa menit dengan Find & Repland akan memakan waktu berjam -jam melakukannya dengan cara lama, modul demi modul, halaman demi halaman.

Ini bukan hanya tentang menghemat waktu pada proyek ini. Anda sedang membangun sistem desain yang akan membuat setiap proyek divi di masa depan lebih cepat dan lebih konsisten.