Membangun Kerangka Desain Anda Dengan Divi 5

Jika Anda pernah bekerja dengan kerangka kerja CSS seperti Bootstrap, Anda mengerti mengapa itu sangat populer. Kerangka kerja desain memberi Anda dasar yang dapat digunakan kembali untuk merancang tata letak yang cepat dan konsisten, jadi Anda tidak membangun dari awal setiap kali Anda menata halaman.

Meskipun sebagian besar kerangka kerja mengandalkan kelas yang telah ditulis sebelumnya, mereka masih mengharapkan Anda untuk menulis CSS khusus untuk kustomisasi yang lebih dalam, yang membuat mereka rumit untuk non-coders. Di situlah Divi 5 berbeda.

Dibutuhkan pendekatan visual-first, menggantikan CSS dengan alat seperti variabel desain, preset grup opsi, dan preset elemen. Anda mendapatkan semua kekuatan kerangka kerja, tanpa menulis satu barisan CSS. Dalam posting ini, kami akan menunjukkan kepada Anda cara membangun kerangka desain tanpa kode secara visual menggunakan Divi 5.

Divi 5 siap digunakan di situs web baru , tetapi kami belum merekomendasikan untuk memigrasi yang sudah ada.

Bagaimana Divi 5 Memungkinkan Anda Membangun Kerangka Desain No-kode

Divi 5 dibangun kembali dari awal untuk membuat desain web canggih dapat diakses oleh semua orang. Tidak peduli tingkat pengkodean Anda, ini memungkinkan Anda membangun tata letak kustom modern secara visual. Membangun kerangka kerja desain tidak berbeda.

Berlangganan saluran YouTube kami

Variabel desain memungkinkan Anda mendefinisikan nilai desain global

Variabel desain memungkinkan Anda mendefinisikan nilai yang berulang seperti warna merek, font, jarak, dan lebih banyak lagi di satu tempat pusat. Setelah disimpan, Anda dapat menggunakan kembali nilai -nilai ini di seluruh situs web Anda untuk memberikan penampilan visual yang konsisten dan bermerek.

Di dalam pembangun visual, temukan manajer variabel untuk mendefinisikan dan menyimpan jenis variabel yang berbeda (angka, teks, gambar, tautan, warna, dan font) dengan cara yang terorganisir.

Variabel desain seperti versi no-kode dari CSS Custom Properties, tetapi memiliki fleksibilitas yang jauh lebih banyak. Misalnya, Anda umumnya mendeklarasikan variabel CSS seperti : root {–Primary-color: #1A73E8; } , tetapi dengan variabel desain Divi, Anda hanya menyimpan warna sebagai warna utama .

Anda akan melihat kekuatan mereka yang sebenarnya saat membuat pembaruan. Tidak perlu melalui stylesheet Anda; Cukup modifikasi nilai variabel yang disimpan sekali dalam variabel manager untuk memperbarui setiap instance di seluruh situs web. Mereka membiarkan Anda dengan cepat memvisualisasikan ide -ide Anda tanpa berburu melalui beberapa aturan gaya.

Juga, Anda dapat mendefinisikan elemen konten yang umum diulang seperti alamat, email, tautan, motif latar belakang, dll., Sebagai variabel konten. Anda tidak harus memasukkannya secara manual beberapa kali; Satu klik dan elemen -elemen ini muncul di halaman Anda. Misalnya, simpan dan gunakan alamat perusahaan Anda sebagai variabel teks.

Untuk menerapkan variabel desain, arahkan opsi dan cari ikon konten dinamis.

Pelajari segalanya tentang variabel desain

Simpan kombinasi gaya umum dengan preset grup opsi

Preset grup opsi memungkinkan Anda menyimpan dan menggunakan kembali pengaturan desain yang sering digunakan, seperti jarak, perbatasan, bayangan, gaya teks, dan latar belakang, tanpa harus membangunnya kembali setiap saat. Mereka fokus pada satu kelompok opsi tertentu di dalam modul, sehingga Anda dapat menata bagian itu dan menerapkannya di mana saja dengan satu klik.

Misalnya, katakanlah Anda selalu menggunakan padding 40px yang sama dan margin 10px pada semua bagian testimonial Anda. Simpan pengaturan tersebut sebagai preset spasi . Saat Anda menambahkan modul testimonial baru, pilih preset dan selesai.

Apa yang membuat preset grup opsi kuat adalah Anda dapat mencampurnya dengan variabel desain . Jika warna utama Anda disimpan sebagai variabel, Anda dapat menggunakannya di dalam latar belakang preset, jadi jika warna merek berubah, seluruh preset memperbarui dengan itu. Latar belakang di semua halaman Anda berubah dengan satu klik.

Preset grup opsi tidak mengganti seluruh modul Anda, mereka hanya berlaku untuk grup gaya yang Anda pilih. Tetapi Anda selalu dapat mengganti preset dengan pengaturan khusus modul untuk menyesuaikan modul tertentu. Ini memungkinkan Anda untuk menjaga tata letak dan konten Anda tetap unik sambil tetap memastikan gaya visual yang konsisten di situs Anda.

Pelajari segalanya tentang preset grup opsi

Simpan elemen yang dirancang penuh dengan preset elemen

Jika Anda telah menjadi pengguna Divi, Anda sudah terbiasa dengan preset elemen. Mereka membiarkan Anda menyimpan semua gaya kustom dari suatu modul, termasuk teks, jarak, warna, ikon, efek melayang, sebagai preset elemen, sehingga Anda dapat menggunakannya kembali di mana saja tanpa membangun dari awal. Anda pada dasarnya membuat versi modul yang paling banyak digunakan.

Berikut casing penggunaan cepat: Kustomisasi dan simpan preset uraian, lalu oleskan ke blurbs yang tidak tertutup lainnya untuk menata gaya dengan cepat.

Bagaimana alat -alat ini tercermin dalam html frontend

Divi 5 mungkin terlihat seperti alat no-kode, tetapi sebenarnya menulis kode yang bersih dan terstruktur di latar belakang. Saat Anda menyesuaikan pengaturan secara visual, seperti memilih preset spasi atau menerapkan warna merek Anda dari manajer variabel, Anda tidak hanya menata modul. Anda juga menulis kodenya.

Setiap keputusan desain yang Anda buat diterjemahkan ke dalam output frontend yang tepat. Divi menangani bagian pengkodean saat Anda fokus pada desain.

Untuk menunjukkan kepada Anda betapa kuatnya ini, kami akan membandingkan alur kerja visual-pertama di Divi 5 dengan pendekatan manual menggunakan kerangka kerja CSS tradisional seperti Bootstrap.

Bootstrap pertama:

Membangun sistem desain secara manual dengan kode di Bootstrap

Sebagai contoh kami, saya telah menggunakan pengaturan WordPress dengan tema understrap yang diinstal.

Dalam alur kerja berbasis kode yang khas, Anda akan mulai dengan mendefinisikan nilai-nilai desain global Anda sebagai variabel CSS. Inilah milik kami:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Katakanlah kita sedang membangun tata letak halaman kontak sederhana dengan formulir kontak dan tombol bergaya khusus. Agar semuanya konsisten dan dapat digunakan kembali, kami akan menggunakan campuran kelas utilitas Bootstrap dan variabel CSS kami sendiri.

Pertama, kami menambahkan kode khusus untuk formulir kontak menggunakan kelas formulir bawaan Bootstrap untuk menangani tata letak dan gaya input.

Kemudian kami menambahkan kode untuk tombol gaya kami. Di sini, kami menggabungkan kelas utilitas bootstrap dengan variabel CSS khusus kami untuk latar belakang, jari -jari perbatasan, dan bayangan. Ini memberi kami kendali penuh atas tampilan dan nuansa. Jika kami ingin melakukan perubahan, kami dapat memperbarui variabel kami.

Seperti yang Anda lihat, ini hebat dan efisien, tetapi semuanya dibangun secara manual. Kami mendefinisikan variabel, menerapkan kelas, dan menulis seluruh kode sendiri. Dan ini adalah tata letak sederhana, bayangkan membangun halaman kompleks menggunakan pendekatan ini!

Sekarang, mari kita bangun halaman yang sama menggunakan Divi 5 tanpa pengkodean.

Menciptakan kembali halaman yang sama secara visual dengan Divi 5

Kami mulai dengan mendefinisikan variabel desain global kami yang menjadi bagian dari sistem desain situs kami. Pertama, Anda pergi ke Variable Manager> Colors . Kemudian, tulis kode hex untuk warna utama (#e91e63) dan simpan.

Demikian pula, Anda juga dapat menyimpan variabel angka untuk jari -jari perbatasan {6px} dan jarak. Selanjutnya, saya menambahkan modul Formulir Kontak dan menyesuaikan tombol kirim ke gaya pilihan saya:

Sekarang saya menyimpan pengaturan tombol ini sebagai preset tombol untuk digunakan nanti.

Jika saya menambahkan tombol lain dan memilih tombol preset , lihat apa yang terjadi? Itu ditata secara otomatis.

Untuk menerapkan preset grup opsi, kurangi pengaturan dan cari ikon Pengaturan .

Juga, apakah Anda memperhatikan bagaimana kami menerapkan beberapa gaya khusus ke tombol dalam satu klik tanpa menyentuh satu baris kode? Inilah yang kami maksud ketika kami mengatakan Anda menyimpan preferensi desain Anda secara visual. Jenis alur kerja divi 5 dibangun untuk. Ini cepat, konsisten, dan sepenuhnya visual.

Apa yang terjadi di balik layar adalah ajaib. Divi tidak hanya menumpuk gaya secara membabi buta. Setiap variabel desain, preset, dan pengaturan yang Anda terapkan diatur ke dalam kode yang bersih dan efisien yang diberikan di ujung depan.

Sumber halaman dari halaman yang dirancang divi di atas menunjukkan bahwa warna utama disimpan di bagian root, seperti variabel CSS:

Dan di frontend, preset grup opsi Anda secara otomatis disimpan dan output sebagai CSS bersih yang menargetkan kelas yang sesuai (.et_pb_button, .et_pb_contact_submit).

Kedua halaman terlihat sama, tetapi bagaimana mereka dibangun dan dipelihara sangat berbeda.

Di Bootstrap, kami mendapat manfaat dari kelas utilitasnya tetapi masih harus menulis kode. Tetapi dengan Divi 5, kami mencapai hasil yang sama tanpa menyentuh garis kode, hanya dengan menggunakan fitur -fitur kuatnya seperti variabel desain dan preset grup opsi.

Setiap perubahan diterapkan dalam beberapa klik, tanpa risiko ketidakkonsistenan, namun kode frontend tetap bersih. Divi menyimpan gaya Anda dalam format terstruktur dan dapat digunakan kembali tanpa menambahkan markup yang tidak perlu atau gaya inline.

Cara Membangun Kerangka Desain Anda Dengan Divi 5

Divi 5 memberi Anda semua alat untuk membangun sistem desain yang dapat diskalakan, tetapi sama seperti dalam pengembangan tradisional, urutan Anda menggunakan alat -alat ini penting. Mari kita berjalan melalui langkah -langkah dan, yang lebih penting, pahami mengapa:

1. Tentukan variabel desain global Anda

Sebelum Anda mendesain halaman, mulailah dengan mendefinisikan variabel desain global Anda. Ini adalah nilai inti yang akan diandalkan oleh seluruh situs Anda, seperti warna, font, ukuran, unit jarak, dll. Setelah Anda mendefinisikan blok bangunan situs Anda, Anda dapat menggunakannya kembali di mana saja untuk menjaga semuanya konsisten, bersih, dan mudah dikelola.

Di Divi 5, Anda memiliki manajer variabel untuk membuat dan mengaturnya.

Beginilah tipe variabel yang disorot berperan:

• Warna: Simpan warna primer, sekunder, dan aksen merek Anda sehingga Anda tidak perlu mengetik kode hex atau mencocokkan nuansa. Simpan variabel warna Anda dan terapkan dengan satu klik.
• Font: Tentukan font yang tepat yang Anda gunakan untuk judul, teks tubuh, atau testimonial. Alih-alih memilih kembali poppins tebal setiap kali Anda membuat H2, simpan sebagai variabel font . Anda akan dapat menggunakan kembali gaya yang sama di seluruh modul dengan mudah.
• Angka: Simpan nilai desain masuk Anda, seperti radius perbatasan 8px untuk kartu atau padding 32px untuk modul gambar, sebagai variabel angka . Anda juga dapat menggunakan unit canggih di dalam variabel angka untuk membuat desain dinamis.

Setelah variabel inti Anda ditetapkan, setiap preset dan halaman yang Anda bangun akan bergantung pada mereka. Dan jika arah desain Anda berubah nanti (katakanlah, Anda ingin menyesuaikan jarak dasar Anda) , Anda hanya perlu memperbarui variabel di satu tempat.

Setelah Anda mendefinisikan variabel desain Anda dengan benar, tidak perlu berburu dan memodifikasi setiap contoh. Cukup ubah nilainya sekali di manajer variabel itu sendiri.

2. Simpan konten yang berulang secara global

Menggunakan Variable Manager , Anda juga dapat menyimpan nilai konten seperti tautan, teks, dan gambar yang sering diulang di situs Anda. Anda biasanya akan menyalin dan menempelkan nilai -nilai ini setiap saat, tetapi Divi 5 memungkinkan Anda mendefinisikannya sekali dan menggunakannya kembali di mana saja.

Ini sangat membantu untuk menyimpan tautan media sosial, detail kontak perusahaan Anda, dan konten berulang lainnya yang perlu ditambahkan secara manual.

Anda dapat menyimpan konten melalui tiga variabel yang tersisa:

• Teks: Katakanlah alamat perusahaan Anda muncul di footer, di halaman kontak, dan di bagian pahlawan beranda Anda. Simpan sebagai variabel teks dan pilih di mana pun Anda ingin alamat muncul.
• Tautan: Simpan URL ke halaman tentang Anda, koleksi produk, profil sosial, atau syarat dan ketentuan sebagai variabel tautan.
• Gambar: Jika Anda menggunakan logo merek Anda atau gambar latar belakang di beberapa halaman, simpan sebagai variabel gambar . Bayangkan mengganti gambar placeholder di seluruh templat dalam klik!

Divi 5 memungkinkan Anda memperlakukan teks, tautan, dan gambar sebagai blok bangunan yang dapat digunakan kembali. Variabel konten ini mungkin terasa kecil, tetapi sangat dampak kecepatan, akurasi, dan pemeliharaan jangka panjang. Anda menghemat waktu, mengurangi kesalahan, dan menjaga situs Anda diperbarui secara konsisten.

3. Buat & Simpan Gaya Inti Dengan Preset Grup Opsi

Setelah variabel desain Anda ada, langkah Anda berikutnya adalah untuk menentukan pola penataan inti situs Anda menggunakan preset grup opsi. Simpan pengaturan desain yang umum digunakan sebagai preset dan gunakan kembali di seluruh modul apa pun.

Inilah cara memaksimalkan preset grup opsi:

1. Simpan preset untuk gaya umum

Mulailah dengan menyimpan preset untuk pengaturan yang paling sering Anda gunakan, seperti jari -jari perbatasan, warna latar belakang, atau jarak. Katakanlah saya selalu menggunakan padding atas 40px dan margin bawah 10px untuk testimonial, jadi saya menyimpan nilai -nilai itu sebagai preset spasi.

Saya dapat langsung menerapkan jarak itu ke testimonial saya (dan modul lain jika saya mau) . Lakukan ini untuk setiap grup pengaturan yang secara konsisten Anda gunakan kembali: perbatasan, bayangan kotak, latar belakang tombol, dll., Sehingga Anda dapat menggunakannya kembali saat membangun halaman.

2. Gabungkan variabel desain dengan preset

Selanjutnya, memperkuat kerangka kerja Anda dengan menggabungkan variabel desain dengan preset grup opsi. Katakanlah Anda menyimpan radius perbatasan 6px sebagai variabel angka dan menggunakannya saat membuat preset grup opsi Anda. Jika Anda mengubah variabel nanti, preset Anda juga akan diperbarui di seluruh situs secara otomatis.

Demikian pula, Anda dapat membuat tipografi cairan dengan nilai klem () untuk teks responsif. Simpan di dalam preset H1 dan oleskan secara konsisten ke judul di seluruh tata letak Anda. Kombinasi preset dan variabel ini adalah tempat kerangka visual Anda benar -benar mulai menjadi modular, dapat diskalakan, dan mudah dipelihara.

Anda juga dapat menyimpan preset grup opsi sebagai default , yang berarti gaya diterapkan secara otomatis ke modul baru juga. Terapkan default di preset umum Anda sehingga Anda bahkan tidak perlu memilih preset setiap saat.

4. Buat preset elemen

Preset Elemen Lengkapi kerangka desain Anda. Setelah menyimpan gaya pilihan Anda sebagai preset, Anda juga harus menyimpan gaya modul sebagai preset elemen.

Ini sangat membantu untuk modul yang sering Anda gunakan, seperti CTA, testimonial, blurbs, dan formulir kontak. Misalnya, jika Anda telah menata tombol CTA dengan warna merek Anda, bayangan lembut, dan bantalan khusus, Anda dapat menyimpan seluruh desain itu sebagai preset yang disebut cahaya primer. Kemudian, terapkan langsung ke tombol baru dengan satu klik.

Atur preset elemen sebagai default

Anda juga dapat mengatur preset elemen apa pun sebagai default, sehingga setiap modul baru dari jenis itu secara otomatis mengikuti gaya desain yang disimpan. Menyimpan preset tombol lampu utama di atas sebagai default, Anda akan melihat tombol baru yang mewarisi gayanya:

Default mempercepat alur kerja Anda, dan Anda masih dapat menimpanya jika diperlukan. Tetapi dalam kebanyakan kasus, memiliki preset yang terdefinisi dengan baik mengurangi pekerjaan yang berulang dan menghilangkan dugaan desain. Dengan tiga fitur ini digabungkan, Anda mengikuti kerangka desain berbasis prasetis yang membuat situs web membangun sama sekali tidak ada kode.

Mendesain halaman baru berdasarkan kerangka desain Anda

Sekarang saya telah menyimpan semua variabel desain pilihan saya, preset grup opsi, dan preset elemen, mari kita uji kerangka kerja kami.

Membangun halaman baru telah menjadi pengalaman yang jauh lebih cepat dan lebih mudah. Saya tidak perlu memulai dari awal atau secara manual mengubah setiap modul. Semua yang saya butuhkan sudah diatur.

Seperti yang Anda lihat, saya telah menerapkan beberapa perubahan desain hanya dalam beberapa klik. Ya, saya mengimpor tata letak divi yang sudah dibuat sebelumnya, tetapi saya menyesuaikannya dalam hitungan detik dengan kerangka kerja yang saya simpan.

Alih -alih memilih font, menyesuaikan jarak, atau mengubah warna secara manual, saya hanya menerapkan preset yang saya simpan. Desain tombol, ukuran teks, gaya latar belakang, dan perbatasan gambar semuanya mengikuti pengaturan kerangka yang saya bangun sebelumnya.

Menerapkan gaya -gaya itu secara manual ke satu modul mungkin bukan masalah besar. Tetapi ketika Anda menyesuaikan seluruh halaman, perbedaannya jelas. Anda dapat melihat kemudahan dan kecepatan yang saya buat semua perubahan itu. Ini adalah manfaat nyata dari menciptakan kerangka desain: ini mempercepat alur kerja Anda tanpa mengorbankan kualitas atau konsistensi.

Bagian terbaik datang saat membuat pembaruan. Jika nilai -nilai global saya pernah berubah, saya hanya perlu memodifikasi variabel desain yang saya simpan melalui variabel manager. Saya juga dapat memodifikasi grup opsi dan preset elemen saya dengan mengklik ikon Pengaturan Kecil.

Ini adalah Power Divi 5 yang dibawa kepada Anda. Ini memungkinkan Anda membuat, menyimpan, dan menyesuaikan seluruh kerangka kerja desain Anda tanpa menyentuh satu baris kode.

Membangun Kerangka Desain No-kode Anda secara visual

Membuat kerangka desain tidak lagi hanya untuk pengembang. Dengan alat yang tepat, siapa pun dapat melakukannya, bahkan jika Anda belum pernah menyentuh kode sebelumnya. Seperti yang telah Anda lihat di seluruh posting ini, yang diperlukan hanyalah beberapa langkah pintar untuk membuat sistem desain Anda sendiri. Bagaimana? Dengan menggunakan Divi 5.

Divi 5 memberi Anda alat untuk mewujudkannya

Divi 5 menangani kompleksitas dan memberi Anda kontrol penuh melalui fitur -fitur canggihnya. Anda dapat membangun lebih cepat, tetap konsisten, dan membuat pembaruan global tanpa pernah meninggalkan pembangun visual. Keren, kan? Tapi itu hanya puncak gunung es, dan kami baru saja memulai!

Kami memiliki lebih banyak fitur luar biasa yang dibangun untuk dirilis, dan kami tidak sabar menunggu Anda mencobanya. Unduh Public Alpha hari ini dan bangun kerangka desain Anda sendiri tanpa batasan pengkodean.

Divi 5 siap digunakan di situs web baru , tetapi kami belum merekomendasikan untuk memigrasi yang sudah ada.