Menggunakan preset default Divi 5 untuk menata seluruh situs Anda

Kedatangan preset grup opsi telah membuka begitu banyak kemungkinan baru dalam Divi 5. Nick mengatakan ini adalah fitur paling penting untuk mencapai Divi selama bertahun -tahun, dan ketika Anda mengujinya, Anda akan melihat dengan tepat mengapa dia mengatakan itu .

Anda sudah terbiasa dengan preset elemen, tetapi preset grup opsi menambahkan lapisan baru kontrol desain yang tidak akan pernah Anda hentikan. Namun, kedua jenis preset mendukung " preset default ." Itulah yang ingin saya tunjukkan selama 2000 kata berikut.

Apa preset default di Divi 5?

Preset default adalah preset pertama yang ingin Anda edit di situs web Anda. Dalam banyak hal, ini adalah penggantian total untuk penyesuaian tema.

Anda memiliki dua jenis preset default yang dapat Anda kerjakan segera setelah mengedit halaman— Preset elemen default dan preset grup opsi default . Mari kita tutupi preset elemen terlebih dahulu karena lebih akrab, tetapi Anda ingin memulai semua desain Anda dengan preset grup opsi.

Preset elemen default

Preset elemen membuat kerja cepat merancang elemen yang akan Anda gunakan berkali -kali di situs web Anda. Dengan preset elemen, Anda dapat mengambil modul seperti modul blurb dan mengedit preset default modul. Setelah preset default diedit, ia menggunakan gaya yang sama saat menambahkan modul blurb baru ke situs Anda (karena item baru menggunakan pengaturan default).

Cara mengedit preset elemen default

Mengedit preset default sangat mudah. Klik pada elemen yang ingin Anda ubah pengaturan default (dalam hal ini modul teks). Di kanan atas, klik pemilih preset.

Anda harus melihat setidaknya satu preset di menu dropdown - prasetel default untuk elemen itu. Temukan pengaturan (ikon gigi) dan klik untuk mengubah opsi pengaturan dari elemen halaman tertentu ke opsi pengaturan untuk preset default.

Anda akan tahu Anda mengedit preset ketika remah roti (menunjukkan posisi bersarang dari elemen yang sedang Anda kerjakan) menghilang dan kata " preset " muncul di kiri atas panel pengaturan. Anda juga akan melihat pemilih preset mengatakan " preset default ," dan berubah menjadi biru. Dari sini, arahkan ke grup opsi elemen yang ingin Anda edit. Dalam hal ini, saya telah memutuskan untuk pergi ke tab desain> teks> ukuran teks untuk mengedit ukuran konten teks untuk modul ini.

Klik "Simpan Preset" agar perubahan Anda bertahan di seluruh Sitewide.

Jika Anda tidak tahu
Jika Anda sudah berada di sekitar Divi untuk sementara waktu, Anda tahu tentang preset modul . Preset elemen sama dengan preset modul, tetapi menyebutnya preset modul membingungkan karena preset juga dapat digunakan pada elemen non-modul seperti bagian dan baris.

Tampilan Wireframe dari halaman di Divi 5. Perhatikan bagaimana baris ini memiliki preset sambil tidak menyesuaikan kriteria untuk menjadi modul melainkan sebuah wadah.

Preset elemen default dapat "ditimpa" hanya dengan menerapkan elemen khusus yang berbeda preset ke modul (lebih lanjut tentang ini di bawah) atau dengan menerapkan gaya langsung ke modul atau elemen tertentu. Divi, seperti CSS, bekerja dengan aturan spesifisitas, dan dalam hal ini, pengaturan yang diterapkan pada modul secara langsung lebih spesifik daripada pengaturan yang diterapkan pada preset elemen default.

Tapi ada preset baru di blok yang harus Anda rancang di Situs Web Divi Anda terlebih dahulu.

Preset grup opsi default

Preset grup opsi baru divi memungkinkan Anda untuk membuat gaya default yang menjangkau berbagai modul dan elemen yang dapat menggunakan grup opsi serupa. Ini semua dilakukan dengan preset grup opsi "default" . Jika Anda kabur pada detail konsep baru grup opsi ini, Anda dapat membaca lebih lanjut tentang hal itu di posting kami, yang memberi tahu Anda semua yang perlu Anda ketahui tentang mereka.

Pelajari tentang Preset Grup Opsi

Singkatnya, modul yang berbeda memiliki komposisi yang berbeda (lihat tabel di bawah ini untuk contoh yang membandingkan empat elemen yang berbeda).

Ketika fitur komposit salah satu elemen tumpang tindih dengan yang lain, mereka dapat berbagi gaya pada tingkat grup opsi - artinya Anda menghemat waktu ketika merancang motif serupa di berbagai modul dan elemen (seperti teks judul di banyak modul). Khususnya dengan judul, teks tubuh, bayangan, animasi, fungsi lengket, perbatasan, jarak, dan tombol, Anda akan merancang situs web banyak, jauh lebih cepat.

Cara mengedit preset grup opsi default

Untuk mengedit preset grup opsi default, buka Panel Pengaturan Modul atau Baris/Bagian. Arahkan kursor grup opsi yang tersedia (teks, teks judul, tombol, latar belakang, dll.). Grup opsi yang mendukung preset akan mengungkapkan ikon preset di sisi kanan bidang OG ketika melayang. Klik ikon Preset untuk menunjukkan default dan preset khusus untuk grup opsi itu.

Berikut adalah video yang menunjukkan perbedaan antara mengedit aspek tertentu dari satu modul dan mengedit aspek yang sama dengan preset grup opsi.

Anda tahu Anda mengedit preset grup opsi ketika UI berubah dari terang ke gelap (kecuali jika Anda berada dalam mode gelap, dalam hal ini sebaliknya) hanya untuk grup opsi yang saat ini Anda edit. Anda harus menyimpan perubahan agar mereka dapat berlaku.

Apa perbedaan antara preset default dan khusus?

Preset default adalah gaya yang diterapkan secara otomatis ke elemen baru (modul/bagian/baris) yang ditempatkan pada halaman atau templat. Apa pun yang terjadi, setiap elemen dan setiap grup opsi dalam Divi akan memiliki preset default. Lihat di bawah dari mana gaya default berasal.

Preset khusus adalah preset tambahan yang mudah dikelola dan diterapkan sebagai preset default tetapi tidak akan digunakan secara otomatis (Anda harus menerapkan preset khusus ini sebagai pengganti default). Mereka digunakan dalam situasi khusus, seperti bagian gelap, bilah samping, dan tampilan konten yang padat - apa pun kebutuhan desain Anda.

Setiap situs web harus dirancang menggunakan preset grup opsi default sejauh mungkin. Kemudian, preset grup opsi khusus tambahan harus dibuat untuk menangani situasi serupa sesuai spesifikasi desain Anda. Apa pun yang tidak dicakup oleh preset OG tersebut dapat dirancang dengan preset elemen default dan preset elemen khusus. Anda dapat secara langsung menerapkan gaya ke modul individual untuk casing tepi yang tersisa yang masih perlu dirancang.

Divi berada pada tahap yang menarik dengan semua fitur baru yang diluncurkan. Ketika unit canggih dan variabel desain turun, Anda dapat mengatur variabel CSS dengan semua unit dan fungsi CSS. Dari sana, Anda dapat menggunakan variabel CSS di semua preset Anda, membuat alur kerja desain Anda sekitar 10x lebih konsisten dan lebih cepat.

Ada juga fitur yang direncanakan untuk memungkinkan preset grup opsi bersarang dalam preset elemen, memungkinkan Anda untuk membuat preset elemen dengan logika preset grup opsi yang dibangun di dalamnya. Itu berarti bahwa ketika Anda mengedit preset OG, itu juga akan memodifikasi preset elemen terkait (dan sebaliknya sampai batas tertentu).

Masa depan terlihat cerah bagi desainer dan pengembang di Divi 5!

Cara mengubah preset khusus menjadi preset default

Kami memiliki preset default dan kami juga memiliki preset khusus. Kami melihat cara menerapkan preset khusus alih -alih yang default, tetapi bagaimana jika kami sangat menyukainya sehingga kami ingin menjadikannya default kami?

Nah, itu mudah. Buka preset elemen atau dropdown preset grup opsi . Arahkan kursor kustom yang Anda inginkan untuk membuat default dan klik ikon Star . Kemudian simpan perubahan Anda . Preset Anda sekarang menjadi prasetel default di seluruh situs web Anda.

Dari mana asal preset default di dalam?

Preset default yang belum diedit hanya mewarisi nilai gaya yang ditemukan di tema penyesuaikan. Hampir semua tema WordPress masih menggunakan beberapa aspek dari penyesalan tema (bahkan memblokir tema), meskipun Divi telah membuatnya sehingga terhubung tetapi tidak perlu digunakan . Kami kemungkinan akan mengganti penyesuaikan di beberapa titik di masa depan, tetapi untuk saat ini, ini adalah peninggalan yang dibawa dari inti WordPress yang merupakan kekhasan tema WordPress modern .

Katakanlah saya menggunakan situs starter penasihat keuangan (sebagai satu contoh konkret). Dalam penyesalan tema, ukuran teks header diatur ke 30px .

Saya dapat melihat nilai yang sama (30px) yang digunakan dalam preset default dengan masuk ke editor visual untuk halaman, mengklik " preset default " untuk modul heading atau teks , dan memeriksa di bawah desain> teks heading untuk elevasi H1.

Nilai abu -abu di bidang Divi 5 berarti bahwa itu adalah nilai yang diwariskan, dalam hal ini, diwarisi dari penyesalan tema

Tapi itu hanyalah default yang ditetapkan oleh situs pemula ini. Jika Anda menggunakan preset dari paket tata letak impor atau mulai dari awal, nilai default yang berbeda akan diatur dalam penyesalan tema.

Cara menggunakan preset default untuk membangun situs web

Saya sarankan memulai build Anda dengan beberapa halaman wireframes. Letakkan semuanya di beberapa halaman dengan apa yang Anda tahu Anda perlu dirancang.

Cobalah mengandalkan modul paling sederhana untuk menyelesaikan pekerjaan dan mengulangi penggunaan set modul yang sama jika memungkinkan. Pertimbangkan bagaimana Anda dapat menggunakan heading, teks, uraian, menu, gambar, akordeon/sakelar, dan modul video untuk membangun sebagian besar wireframes halaman Anda. Tambahkan modul lain sesuai kebutuhan, tetapi menempel pada serangkaian modul inti untuk sebagian besar hal akan membuatnya lebih cepat untuk menggunakan preset grup opsi dan elemen default.

Halaman ini menggunakan bagian, baris, kolom, teks, uraian, gambar, tombol, dan modul menu. Dengan menjaga hal -hal sesederhana mungkin untuk halaman khusus ini, saya mengurangi jumlah grup opsi yang perlu saya rancang.

Selanjutnya, Anda ingin mulai merancang perubahan yang paling menyapu dengan preset grup opsi default. Untuk sebagian besar desain, ini adalah:

1. Jarak Bagian : Sertakan margin atas/bawah, margin kiri/kanan, dan bantalan yang diperlukan.
2. Bagian Warna Latar Belakang : Buat preset grup opsi default yang ingin Anda gunakan dalam banyak kasus dan preset grup opsi khusus untuk warna latar belakang alternatif/kontras. Ingat preset default ke preset grup opsi latar belakang juga dapat diterapkan pada latar belakang kolom.
3. Tipografi : Mulailah dengan H1-H6 Anda. Bergantung pada penggunaan modul Anda, Anda ingin memulainya di preset grup opsi default di bawah heading text untuk modul tajuk dan teks dan teks judul untuk hal -hal seperti modul uraian. Kemudian, kerjakan teks normal, berfokus pada grup opsi teks dalam modul teks dan grup opsi teks tubuh yang ditemukan dalam hal -hal seperti modul blurb.
4. Pengaturan Desain Lainnya : Buat preset grup opsi untuk perbatasan, bayangan kotak, filter (jika Anda menata gambar), dan animasi. Untuk ini, saya cenderung tidak menggunakan preset default tetapi membuat preset khusus yang dapat saya terapkan secara selektif ke elemen halaman.
5. Pengaturan Lanjutan : Ini mirip dengan langkah di atas, tetapi saya membuat preset grup opsi untuk hal -hal seperti transisi dan efek gulir. Saya juga cenderung tidak menggunakan preset default tetapi membuat preset khusus yang dapat saya terapkan secara selektif ke elemen halaman.

Membuat preset grup opsi default dengan cara ini akan secara otomatis mulai menerapkan gaya Anda di situs Anda. Setiap kali OG default diperbarui, elemen yang relevan di seluruh situs web Anda secara otomatis menerima perubahan tersebut.

Preset default akan menghemat jam Anda

Preset default, baik elemen maupun variasi grup opsi, akan menghemat banyak waktu. Saya tidak sabar menunggu Anda untuk mulai membangun situs dengan fitur-fitur ini menggunakan pembangun yang cepat divi 5. Dan itu bahkan bukan akhir dari fitur -fitur baru yang diluncurkan di Divi 5.

Dengan fitur Divi yang baru dan yang direncanakan, Anda akan memiliki sistem desain yang benar di ujung jari Anda. Sudahkah Anda mencoba mengedit situs menggunakan preset default terlebih dahulu? Bagaimana hasilnya? Beri tahu kami dalam komentar di bawah ini dan bagikan cara Anda menggunakan fitur -fitur ini.

Unduh Divi 5 Pelajari Semua Tentang Divi 5 Coba Demo Divi 5