Fitur eksklusif Divi 5 (sejauh ini)
Diterbitkan: 2025-06-09Kami meluncurkan fitur Divi 5 baru dengan kecepatan cepat, dan masing -masing dirancang untuk meningkatkan kinerja, merampingkan alur kerja Anda, dan membawa kemampuan desain yang kuat ke ujung jari Anda. Butuh gambaran umum? Posting ini akan menangani fitur eksklusif Divi 5 yang layak untuk dicoba. Dan ini hanyalah permulaan. Kami memiliki fitur -fitur baru yang menarik seperti FlexBox dan Loop Builder segera keluar. Pembaruan kami membahas poin rasa sakit umum yang kami dengar dari desainer dan pengembang yang menggunakan Divi setiap hari.
Divi 5 siap digunakan di situs web baru.
- 1 8 fitur eksklusif untuk Divi 5 (dan cara kerjanya)
- 1.1 1. Breakpoint yang dapat disesuaikan
- 1.2 2. Preset grup opsi
- 1.3 3. Unit Lanjutan
- 1.4 4. Variabel desain
- 1.5 5. Baris bersarang
- 1.6 6. Grup Modul
- 1.7 7. Manajer Atribut
- 1.8 8. Pengaturan Pencarian dan Penyaringan
- 2 Bagaimana Divi 5 menumpuk terhadap opsi populer
- 2.1 Artinya untuk proyek Anda
- 3 Apa yang akan terjadi selanjutnya?
- 3.1 Tata Letak Flexbox
- 3.2 Pembaruan Loop Builder dan WooCommerce
- 3.3 Warna Lanjutan
- 3.4 Perencanaan Beta dan Migrasi
- 4 Siap mencoba Divi 5? Inilah cara memulai
8 fitur eksklusif untuk Divi 5 (dan cara kerjanya)
Divi 5 memperkenalkan peningkatan inovatif ke desain situs web dan menggunakan serangkaian alat yang menciptakan kembali dan mempercepat tugas desain, membuatnya lebih intuitif. Delapan fitur berikut menunjukkan potensi divi kami yang baru divisi ulang:
1. Breakpoint yang dapat disesuaikan
Fitur yang dirilis pada 6 Februari 2025
Divi 5 memperkenalkan peningkatan fleksibilitas dalam desain responsif dengan sistem breakpoint yang dapat disesuaikan. Sebagian besar pembangun halaman membatasi pengguna hanya untuk tiga tampilan standar, tetapi Divi 5 memungkinkan hingga tujuh breakpoint unik, yang semuanya dapat diatur ke nilai piksel khusus.
Ini memberi pengguna lebih banyak kontrol daripada pembangun populer lainnya, yang biasanya berpegang pada ukuran perangkat tetap dan menawarkan opsi penyesuaian terbatas. Sementara banyak platform memaksa Anda untuk merancang dalam batas -batas yang kaku, Divi 5 memungkinkan Anda menargetkan lebar layar yang tepat di mana desain Anda membutuhkan perhatian khusus.
Di luar trio standar
Sebagian besar pembangun situs web tetap berpegang pada desktop, tablet, dan trio seluler karena mudah. Divi 5 mengakui bahwa ini tidak cocok dengan bagaimana orang benar -benar menelusuri web hari ini, pada lusinan ukuran layar yang berbeda.
Dengan Divi 5, Anda dapat mengatur breakpoint untuk:
- Telepon (<767px)
- Telepon Wide (<860px) - Sempurna untuk Tontonan Seluler Lansekap
- Tablet (<980px)
- Tablet Wide (<1024px) - Menangkap tablet yang lebih besar dan perangkat serupa
- Desktop (> 981px)
- Layar lebar (> 1280px)
- Ultra Wide (> 1440px)
Pembangun halaman WordPress lainnya menawarkan beberapa kontrol breakpoint, tetapi tidak ada yang cocok dengan ketepatan dan kemudahan penggunaan Divi. Sistem ini tetap intuitif, dengan kontrol divi yang sama yang diterapkan di semua breakpoint.
Penanganan breakpoint visual
Divi 5 memperkenalkan penskalaan kanvas, fitur yang membedakannya dari kebanyakan pembangun lainnya. Alih -alih terbatas untuk beralih di antara pratinjau perangkat tetap, Anda dapat menyeret tepi kanvas untuk melihat tata letak pada lebar apa pun yang Anda inginkan.
Pendekatan ini memberi Anda umpan balik yang realistis dan realistis, hampir seperti bekerja langsung di dalam browser web. Saat merancang untuk breakpoint yang lebih luas dari jendela Anda saat ini, kanvas menyesuaikan secara proporsional, sehingga Anda masih mendapatkan pandangan yang akurat pada desain Anda, bahkan pada layar yang lebih kecil.
Pengalaman tetap konsisten saat Anda bergerak di antara breakpoint. Kontrol berperilaku dengan cara yang sama, dan tata letak Anda tidak terduga bergeser. Keandalan ini mengurangi dugaan dan pemecahan masalah dari desain responsif, yang bisa menjadi sakit kepala di pembangun halaman lain.
Pelajari lebih lanjut
2. Preset grup opsi
Fitur yang dirilis pada 11 Maret 2025
Preset Grup Opsi adalah salah satu fitur baru yang paling menarik di Divi 5, memperluas kemampuan Anda membangun sistem desain yang cocok untuk Anda. Preset grup opsi adalah blok bangunan desain Anda. Sementara preset elemen mengunci Anda untuk menata elemen tertentu, preset grup opsi Divi 5 berfungsi di semua jenis elemen.
Anda dapat membuat gaya yang dapat digunakan kembali untuk properti desain tertentu, seperti tipografi, perbatasan, bayangan, atau latar belakang, dan mencampur gaya -gaya ini di berbagai elemen. Misalnya, Anda dapat membuat preset untuk gaya heading Anda, yang lain untuk gaya tombol, dan yang ketiga untuk bayangan kotak.
Setelah diatur, Anda dapat menerapkan gaya ini ke elemen yang kompatibel dengan klik, terlepas dari apakah itu modul teks, uraian, ajakan bertindak, atau bahkan wadah seperti bagian dan baris.
Mengapa ini penting untuk alur kerja Anda
Ini adalah penghemat waktu ketika Anda perlu memperbarui desain Anda. Katakanlah Anda memutuskan untuk mengubah jari -jari perbatasan pada elemen -elemen di seluruh situs Anda. Alih -alih memburu setiap tombol, gambar, dan bagian, Anda cukup mengedit preset perbatasan sekali, dan setiap elemen menggunakan pembaruan preset secara otomatis.
Kemampuan untuk bekerja di berbagai jenis elemen membuat preset grup opsi Divi 5 sangat membantu. Gaya perbatasan yang sama dapat berlaku untuk modul, kolom, baris, atau bagian. Kompatibilitas lintas elemen ini menghemat jam kerja gaya berulang.
Fleksibilitas ini melangkah lebih jauh. Preset grup opsi Divi melampaui opsi gaya dasar. Mereka juga mencakup fitur berbasis skrip seperti tampilan bersyarat, video latar belakang HTML, dan efek gulir. Ini memberi Anda kontrol yang konsisten atas gaya statis dan perilaku interaktif di seluruh situs Anda.
Pelajari lebih lanjut
3. Unit lanjutan
Fitur yang dirilis pada 19 Maret 2025
Divi 5 telah meningkatkan penanganan unit CSS, membuat desain yang responsif jauh lebih mudah.
Sekarang, Anda dapat mengakses berbagai unit CSS yang diperlukan untuk desain web hari ini langsung di dalam pembangun. Itu berarti Anda dapat menggunakan piksel (px), persentase (%), EMS (EM), EMS root (REM), unit viewport (VW, VH, Vmin, Vmax), dan bahkan pilihan yang lebih canggih seperti lebar karakter (CH) atau unit fraksional (FR) untuk grid.
Ini mungkin terlihat seperti pembaruan kecil pada awalnya, tetapi sebenarnya memberi Anda lebih banyak fleksibilitas untuk membangun tata letak yang responsif.
Mengapa unit yang berbeda penting
Saat Anda membangun situs yang ingin Anda terlihat bagus di ponsel, tablet, dan desktop, hanya menggunakan piksel yang dapat membuat sakit kepala. Elemen lebar 300px terlihat bagus di desktop tetapi mungkin merusak tata letak Anda di ponsel.
Dengan unit canggih seperti Viewport, Anda dapat mengatur elemen yang sama ke 80VW (80% dari lebar viewport), dan itu akan skala sempurna di semua perangkat. Atau gunakan unit REM untuk menjaga teks tetap sebanding dengan ukuran font dasar Anda, membuat penyesuaian aksesibilitas lebih mudah.
Sekarang, gabungkan unit dengan fungsi CSS seperti calc (), min (), max (), dan clamp () dan lihat keajaiban nyata terjadi. Divi 5 mendukung semua ini, memungkinkan Anda membuat tata letak yang benar -benar cair yang beradaptasi dengan ukuran layar apa pun.
Misalnya, Anda dapat menetapkan tinggi bagian ke Calc (80VH - 60px) untuk membuatnya mengambil sebagian besar layar sambil meninggalkan ruang untuk header. Atau gunakan klem (16px, 4VW, 22px) untuk teks yang tumbuh dengan layar tetapi tetap dalam batas yang dapat dibaca.
Fleksibilitas klem ()
Fungsi klem () patut mendapat perhatian khusus karena memecahkan banyak masalah desain yang responsif. Ini memungkinkan Anda mengatur ukuran minimum, lebih disukai, dan maksimum dalam sekali jalan, menjadikan fungsi klem () fitur favorit banyak desainer web.
Anda mungkin menginginkan judul yang tumbuh dengan ukuran layar tetapi tetap dapat dibaca. Dalam modul heading, Anda dapat mengatur ukuran teks ke penjepit (36px, 5VW, 72px). Judul tidak akan lebih kecil dari 36px atau lebih besar dari 72px, tetapi di antara ukuran itu, ia akan skala pada 5% dari lebar viewport.
Ini menciptakan transisi yang halus antara ukuran layar tanpa breakpoint. Teks yang terlalu besar di tablet atau terlalu kecil pada monitor besar tidak akan menjadi masalah. Tipografi Anda bernafas dengan tata letak.
Kami juga memahami bahwa elemen desain yang berbeda membutuhkan unit yang berbeda, itulah sebabnya unit canggih Divi 5 fitur berfungsi malleAry, tidak hanya dengan tipografi, tetapi margin, padding, dan nilai jarak lainnya:
- Untuk teks, unit REM menjaga semuanya secara proporsional. Jika Anda mengatur teks tubuh Anda ke 1rem dan judul ke 2.5rem, ubah ukuran font dasar memperbarui semuanya secara proporsional.
- Untuk tata letak, Anda dapat mencoba mencampur unit tetap dan cairan. Sidebar mungkin bekerja paling baik di 300px, sementara konten utama dapat menggunakan CALC (100% - 350px) untuk mengisi ruang yang tersisa.
- Untuk jarak, unit EM membuat bantalan yang berskala dengan ukuran teks. Ini membuat proporsi desain Anda konsisten bahkan ketika ukuran teks berubah.
Juga bermain dengan baik dengan fitur yang dibahas lainnya
Yang sangat bagus adalah Anda tidak perlu menulis CSS khusus untuk menggunakan unit -unit ini. Mereka dibangun langsung ke antarmuka visual. Anda dapat bereksperimen dengan nilai yang berbeda dan melihat hasilnya secara instan, membuat kurva belajar lebih lembut daripada mengkode solusi ini dengan tangan.
Unit-unit ini terintegrasi dengan fitur lain di Divi 5. Anda dapat menyimpan nilai Anda, menggunakan unit apa pun yang Anda sukai, sebagai variabel desain, dan kemudian menerapkannya di seluruh situs melalui preset grup opsi. Ini menciptakan reaksi berantai dari desain yang baik yang mengalir melalui seluruh situs Anda. Misalnya:
- Buat variabel angka seperti ukuran heading: clamp (26px, 5vw, 82px); untuk judul H1 Anda. Terapkan variabel ini ke preset teks heading Anda. Judul Anda sekarang akan skala dengan lancar antara 26px di ponsel dan 82px di desktop, dengan perhitungan cairan 5VW antara ukuran tersebut.
- Mengatur variabel angka untuk menjepit (20px, 5vw, 80px) dan kemudian menggunakannya sebagai margin, Anda memiliki jarak yang ketat di ruang bernafas seluler dan murah hati di desktop, dengan transisi yang mulus di antaranya.
- Atur spasi dasar menggunakan variabel angka-unit: 20px, dan gunakan dengan calc () di preset tata letak Anda. Misalnya, terapkan calc (var (–space-unit) * 2) untuk celah yang lebih besar dan calc (var (–space-unit) / 2) untuk ruang yang lebih ketat. Saat Anda memperbarui nilai dasar, semua jarak turunan menyesuaikan secara proporsional.
Ini hanya menggaruk permukaan. Dengan memadukan konfigurasi ini, Anda dapat \ membuat situs web yang memanfaatkan kesederhanaan Divi dan kemampuan yang baru ditemukan.
Pelajari lebih lanjut
4. Variabel desain
Fitur yang dirilis pada 3 April 2025
Sebagian besar pembangun situs web memiliki cara untuk mengatur warna dan font global. Divi 5 mengambil ide ini dan menjalankannya. Anda dapat membuat variabel tidak hanya untuk warna dan font, tetapi juga untuk angka, gambar, teks biasa, dan bahkan tautan web.
Pikirkan tentang ini: Sebagian besar pembangun memungkinkan Anda mengatur warna utama yang diperbarui di mana -mana. Tetapi bagaimana jika Anda ingin mengubah nomor telepon Anda di beberapa halaman? Atau bertukar gambar berulang yang digunakan di seluruh situs Anda? Divi 5 menangani situasi ini dengan mudah.
Semua variabel Anda hidup di panel sederhana di bilah sisi pembangun visual. Bersih, mudah ditemukan, dan menempatkan semuanya di satu tempat.
Pasangan yang sempurna dengan preset
Variabel dan preset desain (kedua preset grup opsi dan preset elemen) bekerja bersama untuk membuat desain yang dapat dipelihara dan dapat diskalakan. Anda dapat membangun preset yang merujuk variabel Anda, membuat sistem desain yang fleksibel.
Misalnya, Anda dapat membuat variabel desain untuk font heading utama Anda, kemudian gunakan variabel itu di praseteling tipografi heading Anda. Jika Anda memutuskan untuk mengubah font Anda nanti, Anda hanya perlu memperbarui variabel sekali, bukan preset itu sendiri. Ini menciptakan lapisan kontrol lain yang tidak ditawarkan sebagian besar pembangun.
Pendekatan dua lapis ini memberi Anda lebih banyak kontrol daripada pembangun lainnya. Anda memisahkan seperti apa sesuatu (variabel) dari tempat muncul (preset).
Anda dapat menggunakan variabel angka dengan fungsi CSS seperti calc () dan clamp () untuk membuat desain responsif yang beradaptasi dengan sempurna dengan ukuran layar yang berbeda. Tetapkan variabel untuk ritme jarak situs Anda, dan oleskan di seluruh tata letak Anda untuk proporsi yang konsisten yang berskala indah.
Saat Anda mengubah variabel, semuanya menggunakannya segera pembaruan. Ini mengubah jam kerja apa yang mungkin menjadi beberapa detik mengklik.
Bagaimana ini membantu menciptakan desain yang dapat dipelihara
Mari kita lihat beberapa contoh praktis dari variabel desain yang sedang beraksi:
- Jaga agar merek Anda terlihat sama di mana -mana: mengatur variabel untuk warna, font, dan jarak Anda. Gunakan di preset di seluruh situs Anda untuk tampilan yang konsisten.
- Jalankan Penjualan Liburan: Buat variabel gambar untuk grafik kampanye dan variabel teks untuk salinan promosi. Saat musim berakhir, perbarui sekali untuk menyegarkan seluruh situs Anda.
- Gaya perbatasan: Buat variabel angka untuk jari -jari perbatasan, seperti 10px, dan terapkan pada semua preset tombol, modul gambar, dan kartu. Jika arah desain Anda berubah, satu pembaruan memengaruhi semua sudut bulat di seluruh situs Anda.
- Buat pembaruan klien mudah: Saat membangun situs untuk klien yang perlu membuat pembaruan, variabel desain bersinar. Mengatur variabel untuk konten yang akan sering mereka ubah, seperti informasi kontak atau jam kerja. Mereka dapat memperbarui ini tanpa menyentuh pengaturan desain.
Variabel desain juga berfungsi dengan pembangun tema Divi. Ini berarti header, footer, dan templat Anda menggunakan kumpulan variabel yang sama dengan halaman Anda. Tidak seperti sistem lain yang mengunci Anda ke dalam pola yang kaku, variabel Divi 5 membuat hal -hal fleksibel sambil membantu Anda tetap teratur.
Pelajari lebih lanjut
5. Baris bersarang
Fitur yang dirilis pada 17 April 2025
Divi 5 memperkenalkan baris bersarang, yang memberi Anda lebih banyak kendali atas tata letak. Penambahan ini memungkinkan Anda menempatkan baris di dalam kolom, membuat tata letak kompleks yang tidak dimungkinkan dalam versi sebelumnya tanpa kode khusus.
Dengan baris bersarang, Anda dapat membangun tata letak grid canggih, blok konten bergaya majalah, dan desain berbasis kartu dengan usaha yang jauh lebih sedikit. Butuh bagian dengan kolom yang berisi tata letak multi-kolom sendiri? Sekarang Anda bisa melakukannya dengan benar di pembangun.
Membangun dengan kedalaman
Menambahkan baris bersarang berfungsi seperti menambahkan modul apa pun. Pilih bagian, klik tombol Plus, dan pilih "Row" dari opsi Anda. Dari sana, Anda dapat menambahkan baris untuk membuat baris bersarang dan mengisinya dengan konten.
Perubahan yang tampaknya sederhana ini membuka banyak kemungkinan desain. Anda dapat membuat widget sidebar dengan struktur kolom mereka sendiri, membangun acara produk dengan galeri bersarang, atau tabel perbandingan fitur desain dengan tata letak yang kompleks.
Bagian terbaiknya adalah seberapa alami itu cocok dengan alur kerja Anda. Tidak ada yang baru untuk dipelajari. Anda hanya menggunakan baris di lebih banyak tempat. Jika Anda tahu cara membangun dengan Divi, Anda sudah tahu cara menggunakan baris bersarang.
Baris bersarang menyelesaikan masalah nyata bagi pembangun situs. Ingin membuat bagian layanan di mana setiap layanan memiliki tata letak dua kolom sendiri? Sebelumnya, Anda memerlukan CSS khusus atau solusi yang kompleks. Sekarang dibangun tepat di.
Untuk situs konten-berat, Anda dapat membuat tata letak bergaya majalah dengan lebar kolom campuran dan area konten bersarang. Setiap artikel atau fitur dapat memiliki struktur kolom sendiri sambil mempertahankan tata letak halaman.
Hanya langkah pertama
Baris bersarang hanyalah awal dari evolusi tata letak Divi 5. Tim bekerja menuju sistem tata letak berbasis Flexbox lengkap untuk membuat Divi lebih fleksibel.
Pembaruan di masa depan akan memperkenalkan kontrol tata letak tambahan, memberi Anda lebih banyak opsi untuk membuat desain yang kompleks tanpa kode khusus. Pendekatan metodis ini memastikan setiap fitur baru berfungsi dengan sempurna sebelum pindah ke yang berikutnya.
Alih-alih bergegas keluar fitur setengah matang, tim pengembangan Divi sedang membangun fondasi yang kuat untuk masa depan desain tata letak. Setiap langkah dibangun pada yang terakhir, menciptakan sistem yang tahan masa depan dan mudah digunakan.
Pelajari lebih lanjut

6. Grup Modul
Fitur yang dirilis pada 1 Mei 2025
Membangun situs web seringkali berarti membuat pola konten yang sama berulang kali. Anda merancang kartu anggota tim yang sempurna, kemudian menghabiskan dua puluh menit untuk menciptakannya untuk orang berikutnya. Grup modul menyelesaikan ini dengan membiarkan Anda mengemas elemen terkait bersama menjadi unit yang dapat digunakan kembali.
Inilah yang terjadi: Alih -alih memperlakukan setiap bagian secara terpisah, Anda bekerja dengan blok lengkap. Kartu produk menjadi satu hal yang Anda pindahkan, bukan enam modul berbeda yang harus Anda pilih secara individual. Ketika Anda perlu menyesuaikan jarak di lima puluh kartu produk, Anda memperbarui templat grup sekali alih -alih mengedit setiap kartu secara manual.
Manfaat nyata muncul di situs yang lebih besar. Proyek klien dengan lusinan anggota tim, katalog produk, atau daftar layanan menjadi dapat dikelola. Anda tidak melakukan pekerjaan perakitan berulang-Anda fokus pada konten dan penyesuaian.
Membuat Kombinasi Modul Kustom
Grup modul membuka kemungkinan yang biasanya tidak dapat ditangani oleh modul tunggal. Bangun kartu layanan di mana Anda memerlukan gambar latar belakang, ikon overlay, tajuk utama, deskripsi, dan dua tombol aksi: "Pelajari lebih lanjut" dan "dapatkan penawaran."
Dengan grup modul, Anda melapisi elemen -elemen ini persis seperti yang Anda inginkan. Ini menjadi bermanfaat untuk konten yang tidak sesuai dengan templat standar.
Untuk tabel harga, Anda dapat menggunakan tiga baris bersarang dalam grup modul: tajuk di baris pertama, detail harga di urutan kedua, dan daftar fitur di yang ketiga. Ini memberi Anda kontrol individual atas font, warna, dan jarak yang tidak ditawarkan oleh modul tabel harga bawaan.
Pendekatan yang sama berfungsi untuk testimonial menggunakan ikon, gambar, heading, dan modul teks yang diatur dalam struktur grup. Anda mendapatkan lebih banyak fleksibilitas tata letak daripada modul testimonial standar sambil menjaga semuanya dapat dikelola sebagai satu unit.
Keuntungan utama adalah menggabungkan kontrol tata letak bangunan dari awal dengan kenyamanan memperlakukan beberapa elemen sebagai satu bagian.
Membangun pustaka komponen yang dapat digunakan kembali
Setelah Anda membuat grup modul yang efektif, simpan sebagai elemen global. Ini menciptakan pustaka komponen yang tumbuh dengan setiap proyek. Saat Anda memperbaiki gaya, pembaruan tata letak testimonial Anda di dua puluh halaman, dan showcase produk Anda tetap konsisten saat Anda mengulangi desain.
Alih -alih mulai dari awal setiap kali Anda membangun halaman, Anda mulai dengan tata letak yang konsisten dan menyesuaikannya dengan halaman baru dan persyaratan tata letak.
Rangkullah kemudahan integrasi divi cloud. Dengan alat ini, komponen dapat dengan mudah berpindah dari proyek ke proyek. Katakanlah Anda mengembangkan satu set grup modul yang kuat untuk situs klien tertentu; Anda sekarang dapat memanfaatkannya sebagai dasar untuk tugas yang akan datang. Dengan cara ini, setiap proyek mendapatkan keuntungan dari solusi sebelumnya tetapi mempertahankan estetika yang berbeda.
Bekerja mulus dengan sistem desain Divi 5
Grup modul menjadi sangat menarik ketika Anda menggunakannya dengan variabel desain dan preset grup opsi. Katakanlah Anda membangun grup testimonial: kutipan, nama penulis, perusahaan, dan foto.
Alih -alih mengatur warna tetap, Anda merujuk variabel warna merek Anda. Untuk gaya penawaran, Anda membuat preset grup opsi untuk tipografi yang mencakup font, ukuran, dan tinggi kustom Anda. Untuk nama penulis, Anda menerapkan preset grup opsi heading yang berbeda.
Sekarang simpan grup modul itu sebagai elemen global. Preset grup opsi ini menghubungkan setiap testimonial di seluruh situs Anda ke sistem desain Anda. Jika klien menginginkan abu -abu yang lebih gelap, ubah variabel sekali, dan semua modul grup testimonial akan diperbarui. Jika Anda perlu menyesuaikan gaya penawaran, edit preset grup opsi tipografi sekali; Setiap kutipan testimonial akan berubah secara instan.
Ini mengalahkan mengelola modul individu yang tersebar di mana -mana. Grup modul Anda menggunakan preset grup opsi untuk perbatasan, latar belakang, dan gaya teks, jadi memperbarui aliran preset melalui semua elemen yang dikelompokkan secara otomatis.
Pelajari lebih lanjut
7. Manajer Atribut
Fitur yang dirilis pada 16 Mei 2025
Anda telah menata tombol dalam modul Action Call To Action. Warnanya berfungsi, dan efek hover terlihat bagus. Sekarang Anda menginginkan gaya tombol yang sama pada formulir kontak, tetapi tidak ingin judul atau latar belakang CTA.
Copy-paste biasa tidak akan berfungsi di sini: Anda akan mendapatkan segalanya atau tidak sama sekali. Divi 5 memungkinkan Anda menyalin hanya bagian tombol berkat fitur manajemen atributnya. Klik kanan CTA, pilih apa yang akan disalin,
Kemudian tempel hanya gaya tombol itu ke formulir kontak.
Pilih dan pilih perjalanan apa
Divi 5 membagi setiap elemen menjadi berbagai jenis atribut. Anda memilih yang mana yang akan disalin:
- Semua atribut - semuanya akan disalin
- Atribut Desain - Warna, jarak, preset, tetapi tidak ada teks atau gambar
- Atribut Gaya - Hanya perubahan khusus Anda
- Atribut Konten - Teks dan Gambar saja
- Preset - hanya penugasan preset
Katakanlah Anda menginginkan gaya tombol tetapi bukan teksnya. Salin atribut desain. Ingin preset latar belakang bagian tetapi bukan padanya? Salin preset saja.
Bekerja di antara berbagai modul
Anda dapat menyalin atribut dari satu jenis modul dan menempelkannya ke jenis yang berbeda. Misalnya, Anda dapat menyalin dari modul ajakan ke tindakan dan menempelkannya ke formulir kontak. Divi 5 memperkirakan pengaturan mana yang berfungsi pada kedua modul dan mengabaikan sisanya.
Ini membantu saat membangun situs yang membutuhkan gaya yang sama di berbagai jenis modul. Anda tidak perlu membuat ulang warna tombol Anda untuk setiap bentuk, testimonial, atau modul lain yang menggunakan tombol.
Pintasan tingkat kelompok
Sistem atribut berjalan lebih dalam dengan manajemen grup selektif. Lewati panel pengaturan sepenuhnya. Klik kanan dan terapkan grup atribut spesifik langsung dari menu konteks.
Sudahkah Anda menyalin modul dengan preset tombol yang sempurna? Anda dapat menempelkan tombol yang telah ditetapkan pada elemen lain melalui menu selektif. Tidak ada perburuan tab, dan tidak ada pengaturan pengaturan.
Presisi yang sama bekerja untuk mengatur ulang. Bersihkan semua atribut desain sambil menjaga konten tetap utuh. Atau reset hanya preset sambil mempertahankan penanggulangan gaya kustom.
Kecepatan melalui jalan pintas
Setiap tindakan mendapatkan pintasan keyboard yang muncul tepat di menu konteks. Pelajari beberapa kombinasi kunci dan percepatan gaya. Pintasan tetap konsisten di semua jenis atribut, sehingga jari -jari Anda mempelajari polanya dengan cepat.
Ini melampaui penghematan klik. Saat membangun situs dengan ratusan elemen, efisiensi mikro ini bertambah menjadi berjam-jam waktu yang dihemat. Pekerjaan manual berulang menjadi tindakan yang cepat dan bertarget.
Bermain bagus dengan sistem desain Anda
Manajer atribut terhubung langsung ke ekosistem preset Divi 5. Koneksi sistem tersebut berjalan bersama saat Anda menyalin modul menggunakan preset grup opsi dan variabel desain.
Atribut tempel yang mencakup preset, dan elemen -elemen baru itu segera terhubung ke sistem gaya global Anda. Perbarui preset nanti, dan setiap elemen yang disalin mencerminkan perubahan secara otomatis. Sistem desain Anda tetap terhubung saat Anda membangun dan menggandakan elemen dengan cepat.
Pelajari lebih lanjut
8. Pengaturan Pencarian dan Penyaringan
Fitur yang dirilis pada 29 Mei 2025
Membangun situs web berarti mengutak -atik pengaturan. Modul Divi mengemas lusinan opsi ke dalam panel mereka, dan berburu melalui tab untuk satu bidang warna itu dapat memakan hari Anda. Divi 5 membawa kembali fitur pencarian dari Divi 4, tetapi membuatnya bekerja lebih baik.
Anda mendapatkan bilah pencarian tepat di bagian atas setiap panel pengaturan. Ketik apa yang Anda butuhkan, dan Divi hanya menunjukkan opsi yang cocok. Mencari "perbatasan"? Setiap pengaturan yang berhubungan dengan perbatasan muncul sementara yang lainnya menghilang. Perlu menyesuaikan "padding"? Semua kontrol spasi muncul secara instan.
Ini menghilangkan klik dan pengguliran yang memperlambat pekerjaan Anda. Alih -alih membuka tab dan berburu melalui grup, Anda dapat menemukan apa yang Anda butuhkan dalam hitungan detik.
Saring dengan apa yang telah Anda ubah
Penghemat waktu yang sebenarnya adalah filter "yang dimodifikasi". Klik dan lihat hanya pengaturan yang sudah Anda sesuaikan. Ini membantu ketika Anda mengambil paket tata letak atau situs pemula dan ingin melihat apa yang telah disesuaikan.
Katakanlah Anda mengimpor tata letak bisnis tetapi ingin mengubah warnanya. Tekan filter yang dimodifikasi dan lihat setiap pilihan warna khusus tanpa menggali setiap modul. Anda dapat melihat font mana yang diubah, jarak mana yang diubah, dan efek mana yang ditambahkan.
Ini juga berfungsi dengan baik untuk proyek klien. Ketika seseorang bertanya apa yang Anda sesuaikan di situs mereka, filter yang dimodifikasi menunjukkan pekerjaan Anda dengan jelas.
Opsi penyaringan yang cerdas
Di luar filter yang dimodifikasi, Anda dapat menyortir dengan pengaturan pengaturan. Saat memperbarui palet Anda, filter "Warna" menunjukkan setiap bidang warna sekaligus. Ketika perubahan tipografi diperlukan, filter "keluarga font" dan "bobot font" mengungkapkan pengaturan teks di semua modul Anda.
Sistem tahu pengaturan mana yang paling penting. Warna dan font mendapatkan filter mereka karena mereka adalah perubahan paling umum yang dilakukan orang. Ukuran dikelompokkan karena penyesuaian jarak sering terjadi.
Filter ini menyimpan klik saat Anda membuat perubahan di seluruh situs. Alih -alih membuka setiap modul secara individual, Anda bekerja melalui daftar pengaturan yang difilter yang perlu Anda modifikasi.
Pelajari lebih lanjut
Bagaimana Divi 5 menumpuk terhadap opsi populer
Pasar Situs Web Builder penuh dengan opsi, tetapi Divi 5 menonjol berkat beberapa fitur yang benar -benar baru. Inilah yang membuat Divi 5 berbeda:
Divi 5 | Divi 4 | Elementor | Gutenberg | Pembuat batu bata | |
---|---|---|---|---|---|
Breakpoint yang responsif | 7 breakpoint yang dapat disesuaikan dengan penskalaan kanvas | 3 Fixed Breakpoints (desktop, tablet, seluler) | 6 Breakpoint dengan nilai yang dapat disesuaikan. Tidak ada penskalaan kanvas. | Tidak ada kontrol breakpoint visual - membutuhkan CSS khusus | 4 default + breakpoint kustom tak terbatas. Tidak ada penskalaan kanvas. |
Variabel desain | Warna, font, angka, gambar, teks, dan url | Hanya warna global | Hanya warna global | Opsi Warna Global Terbatas | Dukungan Variabel CSS (mungkin memerlukan pengaturan yang luas atau kerangka kerja CSS) |
Sistem preset | Preset Elemen + Preset Grup Opsi (Kompatibilitas Lintas Elemen) | Hanya preset elemen | Gaya global untuk beberapa elemen (kelas global saat ini dalam alpha terbatas) | Blok pola dan blok yang dapat digunakan kembali | Sistem Kelas Global (mungkin memerlukan pengaturan yang luas atau kerangka kerja CSS) |
Unit CSS tingkat lanjut | Dukungan unit CSS penuh: clamp (), calc (), min (), max () melalui antarmuka visual | Unit Dasar: PX, %, Em. Opsi untuk menggunakan unit khusus seperti VH dan VW | Unit Dasar dalam Antarmuka Asli | Dukungan unit terbatas | Dukungan CSS penuh |
Sistem tata letak | Baris bersarang dengan bersarang yang tak terbatas | Memperbaiki struktur bagian-kolom-row | Dukungan elemen bersarang | Berbasis blok dengan blok grup | Flexbox dan CSS Grid |
Manajemen atribut | Salinan/Tempel Selektif - Pilih atribut spesifik untuk ditransfer | Salin/Tempel Dasar untuk Modul Lengkap | Transfer gaya antara jenis elemen yang sama | Blokir salinan/tempel saja | Kelas Global untuk Berbagi Gaya |
Grup modul | Grup Modul Asli Untuk Mengumpulkan Banyak Modul ke dalam Unit yang Dapat Digunakan kembali | Tidak ada kemampuan pengelompokan modul | Wadah sarang | Blok grup untuk menggabungkan beberapa blok sebagai unit tunggal. Sangat mendasar dan sering kikuk | Bagian, wadah, blok, elemen div + komponen (saat ini elemen yang dapat digunakan kembali eksperimental) |
Antarmuka pembangun | Panel docked, ruang kerja multi-panel, mode terang/gelap | Modal mengambang | Antarmuka panel samping | Blok Editor di dalam Area Konten | Panel samping dengan tampilan struktur |
Apa artinya ini bagi proyek Anda
Kombinasi fitur Divi 5 menciptakan sistem desain yang tidak bisa ditandingi oleh pembangun lain. Preset grup opsi dan grup modul saja menempatkan Divi 5 di depan pesaing.
Ketika variabel desain berfungsi dengan preset dan grup modul, Anda mendapatkan sesuatu yang serba guna. Variabel referensi di dalam preset, terapkan pada elemen yang dikelompokkan, dan mengubah nilai memperbarui setiap elemen secara otomatis di seluruh situs Anda. Tambahkan fitur FlexBox dan Loop Builder yang akan datang ke dalam campuran, dan Anda akan menemukan diri Anda membuat situs web apa pun tanpa perlu pengkodean khusus.
Apa yang akan terjadi selanjutnya?
Divi 5 Roadmap menunjukkan pembaruan berkelanjutan yang akan segera mendarat. Pengembang kami, dibagi menjadi tujuh tim, bekerja penuh waktu di berbagai fitur, pengiriman pembaruan setidaknya setiap dua minggu. Inilah intip dari apa yang dapat Anda harapkan dalam beberapa minggu mendatang:
Tata letak flexbox
Perubahan terbesar adalah sistem tata letak Flexbox lengkap, yang berjarak beberapa minggu lagi dari penyelesaian. Ini akan sepenuhnya menggantikan cara Anda membangun tata letak. Anda akan mendapatkan templat baris baru, pemusatan vertikal otomatis, pembungkus konten, dan distribusi jarak melalui kontrol visual alih -alih CSS khusus.
Grup modul baru saja dikirim sebagai wadah yang menggabungkan modul terkait bersama -sama. Dikombinasikan dengan FlexBox, Anda dapat membuat tata letak majalah, pertunjukan produk dengan ketinggian yang cocok, dan keberpihakan kompleks yang sebelumnya membutuhkan solusi. Bagian khusus menghilang begitu Flexbox tiba.
Pembuat Loop Builder dan WooCommerce
Membangun di atas sistem tata letak Flexbox dan grup modul, pembangun loop akan memungkinkan Anda mengulangi apa pun: modul tunggal, grup, atau seluruh bagian. Tidak seperti pembangun lain yang akan mengunci Anda ke dalam templat, Anda akan menentukan apa yang diulang dan menghubungkannya ke konten dinamis. Loop bersarang akan bekerja juga. Misalnya, kategori blog yang akan mengulang melalui posting, dengan setiap posting yang menunjukkan ulasan yang diulang.
Modul WooCommerce akan dibangun kembali dari awal menggunakan arsitektur Divi 5. Modul saat ini akan bekerja melalui kompatibilitas ke belakang tetapi tidak akan berinteraksi dengan preset atau variabel. Modul produk baru akan selesai dalam beberapa minggu, menempatkan dukungan WooCommerce di jalur untuk beta.
Warna canggih
Warna relatif dengan rona, saturation, dan lightness (HSL) dukungan memungkinkan Anda membangun hubungan warna matematika. Atur warna utama Anda sekali, lalu hasilkan variasi secara otomatis: “biru primer tetapi 20% lebih ringan” atau nuansa pelengkap yang diperbarui saat Anda mengubah basis.
Perencanaan beta dan migrasi
Beta dimulai ketika tiga tujuan selesai: peningkatan kompatibilitas ke belakang untuk situs yang ada, lengkap dukungan modul WooCommerce, dan perbaikan bug lanjutan berdasarkan umpan balik alpha.
Jika kita pergi dengan kemajuan saat ini, itu menunjukkan beta dalam beberapa bulan. Tim juga mengerjakan backend sehingga situs Divi 4 dapat bermigrasi tanpa memerlukan perubahan. Modul pihak ketiga dari Divi Marketplace membutuhkan kompatibilitas penuh.
Untuk proyek baru, Divi 5 Alpha memberikan kemampuan yang cukup untuk sebagian besar bangunan. Peningkatan kinerja saja membenarkan sakelar. Situs yang ada mendapat manfaat dari menunggu beta kecuali diperlukan fitur baru tertentu.
Saat beta tiba, Anda mendapatkan set fitur lengkap ditambah kepercayaan diri dari pengujian menyeluruh. Rilis resmi mengikuti tak lama setelah itu, memberi Anda dasar yang kuat untuk proyek -proyek masa depan.
Siap mencoba Divi 5? Inilah cara memulai
Fitur eksklusif Divi 5 ini bekerja bersama untuk menciptakan sesuatu yang berbeda. Alih -alih melawan pembangun Anda untuk desain yang konsisten, Anda mengatur sistem yang mempertahankan diri. Alih -alih membangun kembali gaya yang sama berulang kali, Anda membuat sekali dan menggunakan kembali di mana -mana - dan ini baru permulaan!
Jadi, maju dari kurva hari ini dengan membangun situs web baru menggunakan Divi 5. Ini tersedia untuk semua anggota Divi secara gratis. Cukup pergilah ke area akun Anda dan ambil salinannya.
Setelah WordPress diinstal, unggah Divi 5 karena Anda akan mengunggah tema normal: Penampilan> Tema> Tambahkan Tema Baru> Unggah. Aktifkan tema, masuk dengan kredensial Anda, dan bangun! Bangunan pertama Anda akan menunjukkan mengapa kami membangun kembali semuanya dari awal.
Ingat: Gunakan Divi 5 hanya untuk situs web baru sekarang. Kami tidak merekomendasikan migrasi situs yang ada selama fase alpha.