Menggantung situs web dalam 5 menit dengan atribut Perpanjangan

Mengganti situs web Anda tidak memerlukan pembangunan kembali penuh, meskipun sering terasa seperti itu. Font terjebak di bagian yang terpisah, warna tersebar di bagian -bagian, dan jarak disembunyikan dalam pengaturan individual. Dan setelah memperbarui beranda, Anda menemukan halaman lain yang membutuhkan perubahan yang sama. Ini adalah rutinitas yang biasa, tetapi ada cara yang lebih cepat.

Dengan atribut perpanjangan dalam Divi 5, Anda dapat menata satu elemen dan langsung menerapkan tampilan itu ke setiap modul serupa di seluruh baris, bagian, dan bahkan seluruh halaman. Mari kita berjalan melalui cara menggunakannya untuk mengubah citra situs web penuh dalam hitungan menit, bukan berjam -jam.

Apa yang diperluas atribut dalam Divi 5

FLETT Atribut adalah fitur Divi 5 yang memungkinkan Anda mengambil desain satu modul dan menerapkannya ke elemen atau modul lain di sekitarnya. Ini berarti jika Anda telah menata tombol, heading, atau blok teks, Anda tidak perlu membuat ulang gaya -gaya itu dari awal, karena Anda dapat memperluasnya ke elemen lain.

Begini cara kerjanya dalam praktik. Anda mulai dengan mengedit modul apa pun di pembangun visual. Kemudian, alih-alih mengulangi modul perubahan tersebut dengan modul, cukup klik kanan modul dan pilih Extopt Atribut.

Divi akan bertanya ke mana Anda ingin gaya itu pergi. Setelah Anda mengonfirmasi, semua modul yang cocok mengadopsi gaya yang sama. Perpanjang atribut tidak mencari kecocokan apa, tetapi menyalin tampilan saat ini dan menerapkannya pada target pilihan Anda.

Ini menjadikannya salah satu cara tercepat untuk meluncurkan perubahan desain tanpa mengelola mikro setiap blok. Ini membantu Anda mengubah gaya berulang menjadi satu aksi, tidak peduli jika Anda membangun dari awal atau mengubah citra seluruh tata letak.

Bagaimana atribut memperluas membantu mengubah citra situs web lebih cepat

Kami akan berjalan melalui cara Anda dapat menggunakan atribut Extand saja dan juga dengan preset grup opsi untuk mempercepat proses rebranding situs web Anda.

Menggunakan atribut Perpanjangan di Divi 5

Prosesnya sederhana: Modul gaya satu, klik kanan untuk memilih ekstensi atribut, dan memperluas pilihan desain itu ke setiap modul serupa, tanpa membuka panel pengaturan tunggal dua kali. Mari kita berjalan menggunakannya menggunakan contoh nyata.

Katakanlah Anda ingin mengubah citra semua tombol ajakan bertindak Anda. Mulailah dengan menata modul satu tombol di dalam pembangun visual.

Setelah selesai, klik kanan dan pilih Perpanjang Atribut. ;

Panel Atribut Perpanjangan akan terbuka, dan Anda dapat memilih dari beberapa opsi berbeda untuk memutuskan bagaimana dan di mana perubahan desain Anda harus diterapkan.

• (1) Perpanjang dari elemen: Modul yang Anda perlihatkan dari, seperti tombol dalam kasus kami. Ini secara otomatis diisi berdasarkan apa yang Anda klik kanan.
• (2) Memperpanjang ke lokasi: Pilih seberapa jauh desain harus melangkah. Kami telah memilih seluruh halaman karena kami ingin semua tombol dari halaman berubah.
• (3) Luas ke jenis elemen: Pilih jenis modul mana yang harus menerima gaya baru. Misalnya, hanya modul tombol atau semua modul serupa.
• (4) Tipe Atribut Untuk Memperpanjang: Tentukan apa yang ingin Anda salin. Kami memilih atribut desain dan meninggalkan yang lain.
• (5) Grup Opsi Untuk Memperpanjang: Tentukan Grup Opsi mana yang akan diterapkan: Teks, Tombol, Border, Spacing, dll.
• (6) Bidang yang dimodifikasi untuk memperpanjang: Anda juga dapat membatasi pilihan Anda hanya satu properti gaya atau memilih semua bidang yang dimodifikasi untuk memperluas semua perubahan yang Anda buat.

Setelah memilih preferensi Anda, klik Extope Atribut, dan gaya baru akan diterapkan ke semua tombol lain pada halaman.

Apakah Anda memperhatikan bagaimana tidak perlu mencari nilai yang cocok? Itu karena atrak atribut tidak peduli apa gaya aslinya. Ini menyalin tampilan saat ini dari modul yang dipilih dan menempelkannya langsung ke setiap modul serupa di lokasi yang Anda pilih.

Inilah yang membuatnya sangat berguna untuk paket tata letak dan situs web yang ada. Perpanjang atribut memberi Anda kontrol total dengan satu modul gaya dan satu klik, apakah Anda menyesuaikan ukuran font, memperbarui warna, atau mengutak -atik jarak.

Pelajari segalanya tentang memperpanjang atribut

Menggunakan preset grup opsi dengan atribut perpanjangan

Saat Anda mengerjakan situs web dengan beberapa halaman, itu tidak cukup untuk hanya menyalin gaya secara visual. Anda menginginkan sistem yang menempel, dan di situlah preset masuk.

Preset memungkinkan Anda menyimpan sekelompok gaya di dalam modul apa pun dan menggunakannya kembali di situs Anda. Kombinasikan itu dengan atribut perpanjangan, dan Anda memiliki cara yang cepat dan fleksibel untuk mengubah citra tidak hanya satu halaman, tetapi seluruh situs web Anda. Kombinasi ini juga membantu Anda membuktikan situs web Anda di masa depan, sehingga jika Anda perlu mengubah citra lagi, Anda dapat dengan mudah memodifikasi preset dan semua modul di mana mereka digunakan juga akan diperbarui.

Mari kita kembali ke contoh tombol untuk memahami cara kerjanya.

Kami telah menata satu tombol dengan tampilan baru. Sekarang, alih -alih memperluas pengaturan sebagai nilai statis, kami akan menyimpannya sebagai preset.

Di sinilah atrade atribut masuk. Saat Anda mengklik atribut Extle, Anda akan melihat preset yang Anda simpan muncul. Pilih secara individual jika Anda hanya ingin memperpanjang preset yang dipilih, atau pilih preset tombol Extand untuk membawa semua.

Saat Anda memperpanjang, Divi tidak hanya menyalin tampilan; Ini menerapkan preset yang Anda simpan di belakang layar. Jadi tombol lain yang disentuh sekarang menggunakan preset yang sama.

Mengapa menambahkan langkah lain? Di sinilah manfaat situs web Anda di masa depan. Misalkan dalam beberapa bulan ke depan Anda memutuskan untuk mengubah gaya tombol Anda nanti. Apakah Anda ingin memperpanjang gaya lagi? Tidak, kan?

Nah, Anda bahkan tidak perlu melakukannya karena Anda hanya perlu memperbarui preset sekali. Karena semua modul tombol Anda dibangun dengan preset yang sama, setiap instance menggunakannya pembaruan secara otomatis.

Plus, setelah disimpan, preset grup opsi tersedia di halaman lain juga. Jadi, ketika Anda selesai mengubah nama rumah Anda dan pindah ke orang lain, Anda hanya akan menerapkan preset yang disimpan dan memperpanjangnya dalam hitungan menit.

Itulah sebabnya menggunakan preset grup opsi dengan atribut perpanjangan adalah cara yang lebih inovatif untuk mengubah citra. Anda mendapatkan konsistensi visual dan sistem yang mudah diperbarui tanpa mengulang pekerjaan Anda.

Pelajari segalanya tentang preset grup opsi

Ingin mencoba ini sendiri? Anda akan memerlukan Divi 5, yang membawa atribut perluasan, preset grup opsi, dan banyak lagi fitur ke dalam pembangun baru. Ini telah didesain ulang dari bawah ke atas untuk kecepatan, kontrol, dan alur kerja desain yang lebih halus.

Cara mengubah citra situs web dengan atribut perpanjangan

Sekarang Anda telah melihat bagaimana atribut memperluas bekerja dan bagaimana berpasangan dengan preset grup opsi, saatnya untuk menerapkannya ke situs web nyata.

Untuk walkthrough ini, kami akan menggunakan paket tata letak perangkat lunak AI. Ini adalah situs web lengkap dengan halaman seperti Home, About, Contact, dan Pricing. Kami tidak bertujuan untuk perbaikan total di sini. Ini hanya rebrand ringan, jenis yang biasanya kami lakukan di pembaruan bulanan kami.

Untuk memulai, lihat elemen -elemen yang menentukan identitas visual situs Anda, seperti tombol, judul, uraian, dan teks tubuh. Modul -modul ini muncul di berbagai halaman dan membawa sebagian besar kepribadian merek. Setelah Anda menyalakan kembali beberapa dari mereka, rentangkan atribut memungkinkan Anda mendorong perubahan itu di mana pun mereka muncul.

Mari kita berjalan dengan tepat apa yang harus diperbarui.

Modul Kunci Rebrand secara visual melintasi tata letak

Kami akan mulai dengan beranda, karena ia mengatur nada untuk seluruh situs. Sebagian besar situs web mengulangi pola desain yang sama di beberapa halaman, jadi setelah kami memperbarui beranda, Anda akan memiliki fondasi untuk yang lainnya.

Setelah memindai tata letak, kami telah mengidentifikasi elemen yang paling terlihat yang membentuk tampilan dan nuansa merek. Ini adalah tombol, judul, blurbs, teks tubuh, dan gambar. Karena kami sudah mengganti nama tombol kami, kami akan mulai dengan judul.

Modul heading rebranding

Pertama, sesuaikan modul heading apa pun untuk mencerminkan branding baru Anda. Saya akan mulai dengan H4S.

Setelah Anda senang dengan styling, klik kanan modul dan pilih Perpanjang Atribut . Pilih ruang lingkup untuk seluruh halaman dan jenis modul ke teks . Terapkan perubahan ke semua modul H4 pada halaman.

Demikian pula, Anda akan mengubah citra H1, H2, dan H4S untuk menyatukan tipografi dan memberikan suara Anda suara yang konsisten hanya dalam beberapa klik tanpa menyalakan kembali setiap modul heading secara manual.

Rebranding Teks tubuh untuk keterbacaan yang lebih baik

Sekarang mari kita perbarui teks tubuh. Mulailah dengan memilih modul teks apa pun dengan blok paragraf. Kustomisasi agar sesuai dengan nada merek Anda. Saat Anda puas dengan perubahan, klik kanan modul dan pilih Perpanjang Atribut . Pilih untuk menerapkan pembaruan di semua modul teks pada halaman.

Ini memberi paragraf Anda gaya yang konsisten di halaman dalam hitungan detik dan menghilangkan kebutuhan untuk mengedit masing -masing secara individual.

Perbatasan blurb rebranding

Selanjutnya, saya ingin menambahkan perbatasan untuk merampingkan semua modul uraian saya. Jadi, saya akan menata satu kolom, lalu klik kanan kolom di tab Desain Baris dan pilih Copy Styles . Kemudian, tempel gaya ke kolom berikutnya dan sebagainya.

Anda akan melihat bahwa saya mengubah tata letak baris menjadi fleksibel dan divi secara otomatis menyamakan ketinggian kolom, menjaga blurbs sejajar tidak peduli berapa banyak konten yang dikandungnya. Ini berfungsi karena Divi sekarang mendukung fitur FlexBox, yang membantu Anda membangun tata letak yang responsif dan cerdas lebih cepat.

Mengubah citra halaman lain menggunakan preset yang disimpan

Sekarang setelah beranda diperbarui, Anda tidak perlu mengulangi prosesnya dari awal. Anda dapat menduplikasi bagian atau baris ke halaman lain, atau, karena Anda telah menyimpan gaya baru Anda sebagai preset grup opsi, Anda sudah ditetapkan.

Preset yang Anda simpan akan muncul di semua halaman.

Yang perlu Anda lakukan adalah menerapkannya jika diperlukan dan menggunakan atribut Extand untuk mendorong gaya secara instan. Tidak ada pengeditan manual dan tidak ada karya desain yang berulang.

Anda dapat mengikuti proses yang sama untuk mengubah citra halaman lain di situs web Anda.

Perpanjang atribut memberi Anda fleksibilitas untuk menikmati rebranding lagi. Mereka hebat saat Anda ingin mengubah kembali modul secara visual di halaman.

Tetapi jika Anda perlu menukar nilai tertentu, seperti kode hex, ukuran font, atau unit jarak, di berbagai modul, Anda ingin mencoba menemukan dan mengganti. Ini bekerja sangat baik untuk paket tata letak yang menggunakan nilai-nilai kode keras. Anda dapat menggunakan Temukan dan mengganti untuk menukar mereka dengan variabel desain yang disimpan untuk mendapatkan lebih banyak fleksibilitas untuk pembaruan di masa mendatang.

Kiat Pro: Gunakan atribut Perpanjangan dengan variabel desain

Perpanjang atribut tidak hanya menyalin gaya statis; Ini juga dapat membawa variabel desain yang Anda simpan. Misalnya, jika Anda telah menetapkan variabel heading font ke satu modul teks, Anda dapat memperluas pengaturan modul itu ke semua modul teks lainnya di halaman. Alih-alih setiap tajuk yang membawa nilai-nilai berkode keras, mereka semua mewarisi variabel yang sama.

Ini berarti pembaruan di masa mendatang bahkan lebih mudah: Sesuaikan variabel sekali di Variable Manager, dan setiap pembaruan modul yang diperluas secara otomatis. Ini adalah cara yang ampuh untuk menggabungkan atribut perpanjangan dengan sistem variabel Divi 5 untuk kontrol yang dapat diskalakan dan di seluruh merek.

Perpanjang atribut memungkinkan Anda mengubah citra tanpa membangun kembali

Rebranding tidak harus berarti membangun kembali. Dengan atribut Perpanjangan, Anda menata satu modul dan menerapkan tampilan itu ke sisanya, memotong jam pengeditan menjadi detik.

Apakah Anda bekerja dengan paket tata letak atau memperbarui situs langsung, Divi 5 memberi Anda cara tercepat untuk menyegarkan desain Anda tanpa menyentuh setiap elemen.