Semua yang perlu Anda ketahui tentang preset grup opsi Divi 5

Preset Grup Opsi di Divi 5 Sederhanakan Gaya mengelola, menawarkan pendekatan desain yang lebih efisien dan dapat diskalakan. Anda tidak perlu lagi menerapkan gaya yang sama untuk beberapa elemen. Dengan preset grup opsi, Anda dapat membuat dan menerapkan preset grup opsi - seperti perbatasan, bayangan, dan jarak - di berbagai elemen, mencampur dan mencocokkannya, dan dengan mudah membuat pembaruan global.

Dalam posting ini, kami akan menyelam lebih dalam tentang bagaimana preset grup opsi mengubah cara Anda mendesain di Divi 5, mengeksplorasi manfaat dari pendekatan baru ini, dan menunjukkan kepada Anda cara menggunakannya. Jika Anda ingin merampingkan alur kerja Anda dan membangun sistem desain yang lebih dapat dipelihara, ini adalah game-changer yang tidak ingin Anda lewatkan.

Lihat video berikut untuk melihat fitur baru yang sedang beraksi.

Memahami dasar -dasar preset grup opsi

Sebelum kita terjun ke implementasi preset grup opsi, mari kita bahas beberapa dasar untuk membantu Anda lebih memahami fitur canggih baru ini.

Preset grup opsi dijelaskan

Preset grup opsi di Divi 5 memungkinkan pengguna untuk membuat gaya desain yang dapat digunakan kembali yang dapat diterapkan ke beberapa elemen di seluruh situs web. Tidak seperti preset elemen (yang telah ada di Divi untuk sementara waktu), preset ini bekerja di semua elemen, memungkinkan gaya yang konsisten untuk latar belakang, perbatasan, tipografi, dan banyak lagi.

Mereka dapat dilapisi, dikombinasikan, dan diperbarui secara global, membuat pemeliharaan sistem desain yang kohesif lebih mudah sambil mengurangi pekerjaan gaya berulang.

Kontrol global yang bahkan lebih

Sebelum preset grup opsi, elemen styling di Divi memerlukan penyesuaian manual atau menerapkan preset elemen yang mengontrol semua pengaturan desain untuk elemen tertentu (bagian, baris, kolom, modul). Sementara preset elemen masih penting dan membantu mempertahankan konsistensi, mereka terutama fokus pada seluruh elemen alih -alih gaya itu sendiri. Dan gaya itu dapat diterapkan pada elemen apa pun. Anda tidak perlu mengulangi gaya di setiap elemen lagi karena Anda dapat menariknya dari satu sumber tertentu.

Dengan preset grup opsi, preset elemen menjadi lebih efisien. Mereka dapat digabungkan untuk menghasilkan hasil yang paling efektif.

Kapan Anda harus membuat preset grup opsi?

Ada berbagai cara untuk mengimplementasikan preset grup opsi, tetapi umumnya, semakin cepat Anda membuatnya, semakin baik. Mulai lebih awal dengan preset grup opsi di situs web Anda Build membantu Anda menghemat waktu saat melakukan pengeditan.

Segera, preset grup opsi akan dapat hidup di dalam preset elemen juga, jadi akan terasa wajar untuk membuatnya sebelum Anda membangun preset elemen Anda. Sekarang, katakanlah Anda sedang membangun situs web baru dari awal; Cara Anda dapat mendekati bangunan ini adalah sebagai berikut:

1. Rancang Halaman Pertama Anda
2. Ubah gaya menjadi preset grup opsi
3. Sertakan preset grup opsi di dalam preset elemen Anda

Proses ini tidak linier, dan kemungkinan besar Anda akan bolak -balik antara preset grup opsi dan preset elemen sampai Anda senang dengan draf halaman pertama Anda.

Gaya Anda dapat menggunakan preset grup opsi untuk

Gaya apa pun dengan ikon preset grup opsi di sudut kanan atas dapat diubah menjadi satu.

Preset grup opsi dapat dibuat dari dan diterapkan ke berbagai pengaturan desain, termasuk tipografi, warna, latar belakang, perbatasan, jarak, bayangan, efek, ukuran, tata letak, posisi, dan animasi. Preset ini memungkinkan desainer untuk membuat sistem desain yang terstruktur dan dapat digunakan kembali tanpa memerlukan penyesuaian manual berulang.

Salah satu hal hebat tentang preset grup opsi Divi, yang membedakannya dengan kuat dari pesaing, adalah tidak hanya fokus pada CSS. Ini juga termasuk efek yang dibangun menggunakan skrip. Anda dapat melihat ini dalam fitur yang lebih interaktif yang disediakan Divi, seperti opsi kondisi, video latar belakang HTML, efek gulir, dan banyak lagi.

Setiap contoh desain yang akan Anda gunakan lebih dari satu kali layak untuk diubah menjadi preset. Ini akan membuat memperbarui desain Anda lebih mudah.

Cara mengimplementasikan preset grup opsi

Sekarang kita sudah berbicara tentang dasar -dasarnya, mari kita fokus pada implementasi preset grup opsi. Untuk menjaga semuanya sesederhana dan sesudah mungkin, kita akan fokus pada pembuatan preset perbatasan sederhana. Cara Anda mendekati membuat preset lain sama dengan kasus penggunaan ini.

Contoh: Membuat preset perbatasan

Membuat preset grup opsi sangat mudah; Mari kita melalui proses membuat preset perbatasan langkah demi langkah. Kami menggunakan tata letak beranda yang dilengkapi dengan paket tata letak portofolio desain, tetapi jangan ragu untuk menggunakan tata letak pilihan Anda.

Langkah 1: Buka Pengaturan Elemen (Pengaturan Kolom)

Di Divi Builder, pilih modul apa pun yang ingin Anda gaya (misalnya, kolom).

Langkah 2: Arahkan ke tab Desain

Di dalam pengaturan modul, klik pada tab Desain. Gulir ke bawah dan temukan bagian perbatasan.

Langkah 3: Tambahkan perbatasan

Pilih gaya perbatasan dari opsi yang tersedia. Untuk menjaga hal -hal sederhana, satu -satunya hal yang akan kami lakukan adalah menambahkan perbatasan 1px dalam warna hitam.

Langkah 4: Simpan sebagai preset grup opsi

Klik ikon di sudut kanan atas pengaturan perbatasan untuk membuat preset baru. Berikan nama deskriptif preset Anda (misalnya, berbaris - berjajar). Klik Simpan Preset untuk menyelesaikannya.

Menerapkan preset perbatasan ke elemen lain

Sekarang Anda telah membuat preset grup opsi, saatnya untuk menerapkannya pada elemen lain. Apakah Anda menata bagian, baris, kolom, atau modul, preset memungkinkan Anda untuk mencapai desain yang seragam dengan upaya minimal. Ikuti langkah -langkah ini untuk menerapkan preset perbatasan yang Anda simpan:

Langkah 1: Pilih elemen lainnya

Buka modul lain yang ingin Anda gaya (misalnya, modul gambar). Di tab Desain, arahkan ke pengaturan perbatasan.

Langkah 2: Terapkan perbatasan preset

Temukan ikon preset grup opsi, dan pilih preset yang Anda buat di bagian sebelumnya dari posting ini.

Campurkan preset grup opsi dengan preset elemen

Dalam kasus tertentu, Anda mungkin ingin menerapkan pengaturan tertentu hanya pada level elemen. Katakanlah Anda memiliki 2 kolom di sebelah satu sama lain, dan Anda ingin mereka berbagi semua pengaturan yang sama tetapi tidak perbatasan yang sama. Dalam hal ini, Anda dapat menggunakan preset kolom bersama untuk kedua kolom tetapi menerapkan preset perbatasan yang berbeda untuk masing -masing.

Langkah 1: Buat preset kolom baru

Buka kolom pertama Anda dan buat preset baru dari gaya saat ini di sudut kanan atas. Berikan nama deskriptif, dan simpan pengaturannya.

Langkah 2: Aktifkan preset perbatasan di samping preset kolom

Sekarang, arahkan ke kolom kedua baris Anda. Saya telah memastikan bahwa kolom 2 tidak memiliki pengaturan tingkat elemen utama. Setelah Anda di sana, aktifkan preset yang Anda buat di langkah sebelumnya.

Pada titik ini, kedua kolom memiliki preset elemen yang sama, tetapi hanya kolom pertama yang berisi preset perbatasan tambahan (yang Anda rencanakan untuk digunakan pada elemen lain di masa depan juga).

Menetapkan default grup opsi sebagai default

Opsi hebat lainnya dengan preset grup opsi adalah kemampuan untuk menjadikannya default. Itu berarti segera setelah Anda menambahkan elemen yang mencakup kemampuan gaya tertentu, gaya default yang Anda pilih akan berlaku. Ini sangat membantu untuk tipografi, warna, dan tombol.

Mari kita ambil tombol, misalnya. Gaya tombol adalah bagian dari beberapa modul, termasuk modul Formulir Kontak, modul CTA, modul optin email, dan banyak lagi. Jika Anda ingin satu gaya khusus diterapkan pada semua tombol ini secara otomatis, itu dimungkinkan dengan preset grup opsi. Mari kita lihat caranya.

Langkah 1: Buka modul Formulir Kontak di dalam halaman kontak Anda

Untuk contoh khusus ini, kami akan menggunakan halaman kontak yang termasuk dalam paket tata letak portofolio desain. Setelah Anda membuat halaman baru, unggah tata letak ini (atau tata letak kontak lainnya). Kemudian, buka pengaturan modul Formulir Kontak yang akan Anda temukan di dalam tata letak itu.

Langkah 2: Buat grup opsi yang ditetapkan dari gaya statis

Membuat preset grup opsi mudah. Anda memiliki dua opsi; Anda dapat membuat satu dari awal atau mengubah gaya statis yang ada menjadi preset grup opsi. Karena kami memiliki tombol yang dirancang di dalam modul Formulir Kontak kami, kami tidak perlu menata lagi, dan sebaliknya kami dapat menggunakan kembali pengaturan ini untuk preset grup opsi kami. Arahkan ke tab Desain dan buka pengaturan tombol.

Setelah Anda mengarahkan sudut kanan atas grup pengaturan ini, Anda akan melihat ikon muncul. Klik ikon ini.

Lanjutkan dengan memilih "preset baru dari gaya saat ini" dan memberikan tombol Anda nama deskriptif seperti "tombol primer".

Langkah 3: Tetapkan gaya tombol sebagai default

Untuk membuat gaya tombol ini default untuk semua tombol di seluruh situs web Anda, beralih opsi "Tetapkan sebagai default" dan simpan pengaturan preset Anda.

Langkah 4: Tambahkan Modul Optin Email Baru yang Tidak Terpenang untuk Melihat Hasil

Segera setelah Anda menambahkan modul apa pun dengan pengaturan tombol, default baru akan berlaku. Ini tidak terbatas hanya pada modul formulir kontak, di mana kami membuat preset grup opsi awal, tetapi meluas ke semua elemen dengan pengaturan tombol. Salah satu modul yang mencakup pengaturan tombol adalah modul out call to action.

Untuk melihat preset baru Anda beraksi, tambahkan modul optin email baru yang tidak terhubung tepat di bawah modul Formulir Kontak Anda.

Anda akan melihat bahwa tombol di dalam modul yang baru ditambahkan ini berisi gaya default baru yang kami terapkan di bagian sebelumnya dari tutorial ini.

Mengedit secara global

Mari kita lanjutkan dengan contoh kami dari tombol Preset. Karena ini adalah default untuk semua tombol di seluruh situs web kami, memperbarui gaya pada tombol ini dapat membantu kami menghemat banyak waktu. Kami hanya perlu mengeditnya sekali, dan perubahan akan berlaku di seluruh situs web kami.

Untuk mengedit preset yang ada, temukan di dalam salah satu modul Anda.

Arahkan preset tombol dan klik ikon gigi. Ini akan membuka layar di mana semua modifikasi dapat terjadi. Mari kita ubah jari -jari perbatasan menjadi 5px, misalnya. Anda dapat melihat bagaimana hal itu segera berlaku di semua contoh di mana tombol ini telah digunakan.

Selalu pastikan untuk mengklik "Simpan Preset", dan itu akan memberi Anda peringatan menyebutkan bahwa itu akan mempengaruhi semua contoh di mana Anda telah menggunakan preset ini.

Manfaat utama menggunakan preset grup opsi

Setelah Anda mulai menggunakan preset grup opsi, sulit membayangkan bagaimana Anda belum pernah menggunakannya di masa lalu. Mari kita bahas mengapa Anda harus menjelajahi Divi 5 dengan preset grup opsi baru hari ini.

1. Alur kerja desain lebih cepat & lebih efisien

Dengan preset grup opsi, Anda tidak perlu lagi mengulangi perubahan desain secara manual di berbagai elemen. Setelah Anda membuat preset, itu dapat diterapkan secara universal. Jika pembaruan desain diperlukan, memodifikasi preset secara otomatis memperbarui semua elemen yang menggunakannya, menghemat waktu dan upaya.

2. Skalabilitas

Seiring bertambahnya situs web, mempertahankan desain yang konsisten dapat menjadi tantangan. Preset grup opsi memungkinkan Anda untuk skala desain Anda secara efisien dengan memastikan bahwa semua elemen mengikuti gaya terpadu. Apakah Anda mengelola situs web bisnis kecil atau proyek perusahaan besar, Preset membantu mempertahankan sistem desain yang bersih dan terstruktur.

3. Kolaborasi yang lebih mudah

Preset grup opsi membuat kolaborasi lebih halus antara desainer yang bekerja pada proyek yang sama. Alih -alih memperbarui beberapa elemen secara manual, anggota tim dapat menggunakan preset untuk menerapkan gaya standar dengan cepat. Selain itu, klien yang meminta perubahan akan mendapat manfaat dari proses yang lebih ramping karena pengeditan dapat dilakukan pada tingkat yang telah ditetapkan tanpa harus memodifikasi elemen individual secara individual.

4. Konsistensi di seluruh elemen situs

Konsistensi desain sangat penting untuk situs web profesional. Dengan menggunakan preset grup opsi, Anda dapat memastikan bahwa setiap tombol, tajuk, dan latar belakang mengikuti aturan desain yang sama. Ini menghilangkan ketidakkonsistenan dan membantu mempertahankan identitas merek di semua halaman.

5. Pembaruan Global Mudah Dengan Upaya Minimal

Alih -alih memperbarui gaya secara manual untuk setiap elemen, preset grup opsi memungkinkan Anda untuk melakukan perubahan global dengan mudah. Penyesuaian tunggal untuk preset secara instan memperbarui semua elemen yang menggunakannya, mengurangi waktu yang dihabiskan untuk revisi dan memastikan keseragaman di seluruh situs web Anda.

Mulailah dengan Divi 5 Hari Ini

Preset grup opsi adalah tambahan yang kuat untuk Divi 5, memberikan cara yang fleksibel dan efisien untuk mengelola desain situs web Anda. Dengan memanfaatkan preset ini, Anda dapat merampingkan alur kerja Anda, mempertahankan konsistensi desain, dan dengan mudah membuat pembaruan global. Mulailah menggunakan preset grup opsi hari ini dan alami tingkat kontrol dan efisiensi baru dalam proyek desain web Anda.