Cara Mentransfer Gaya Desain Baru ke Halaman Lain Menggunakan Fitur Efisiensi Divi

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang berkelanjutan, kami akan menunjukkan kepada Anda cara mentransfer gaya desain baru ke halaman lain menggunakan Paket Tata Letak Toko Furnitur Divi. Dengan semua paket tata letak baru yang keluar, Anda mungkin ingin mengubah gaya halaman yang ada menggunakan gaya paket tata letak baru. Alih-alih mengganti seluruh halaman, Anda juga dapat mentransfer gaya desain menggunakan fitur efisiensi Divi. Salah satu opsi terbaru yang disertakan dalam Visual Builder adalah fitur salin dan tempel lintas halaman. Ini akan memungkinkan Anda membuat banyak perubahan di seluruh tata letak tanpa menyentuh pengaturan elemen desain.

Namun tentu saja, setiap tata letak unik, yang berarti Anda juga harus menerapkan beberapa perubahan manual. Kabar baiknya adalah Anda dapat memperluas pengaturan manual tersebut ke elemen serupa pada halaman dalam satu klik. Posting ini diharapkan akan membantu Anda mengikuti struktur tertentu saat mentransfer gaya desain.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat dulu hasilnya.

Mendekati

Struktur halaman berbeda satu sama lain, itulah mengapa sulit untuk sepenuhnya mentransfer gaya desain dalam satu klik. Namun dengan Divi, Anda bisa menggunakan fitur efisiensi untuk mempercepat proses. Kami akan menggabungkan fitur salin-tempel lintas halaman, fitur perluasan gaya dan fitur temukan dan ganti untuk menghemat waktu mentransfer gaya desain ke halaman yang ada, tanpa harus mengubah struktur halaman.

Bagian 1: Membuka Dua Halaman Bersebelahan

Kita akan mulai dengan membuka dua halaman bersebelahan. Halaman yang ada dan halaman baru yang berisi gaya desain yang ingin kita terapkan. Kami akan mengambil halaman arahan Paket Tata Letak Toko Furniture (gaya desain yang ingin kami terapkan ke halaman yang ada) dan halaman arahan Paket Tata Letak Perusahaan Hosting (halaman yang ingin kami ubah).

Bagian 2: Mengatur Ulang Pengaturan Bagian Tertentu

Bagian kedua adalah tentang mengatur ulang pengaturan bagian tertentu. Pengaturan yang perlu Anda atur ulang bervariasi dari tata letak ke tata letak tetapi biasanya mencakup pengaturan latar belakang dan pengaturan pembagi.

Bagian 3: Menggunakan Fitur Salin-Tempel & Perluas Lintas Halaman Divi untuk Bagian Pahlawan

Kemudian, kita dapat mulai menggunakan fitur salin-tempel lintas halaman Divi untuk mulai mengubah banyak hal. Hal yang wajar untuk dilakukan adalah memulai dengan bagian pahlawan. Kami akan mengubah setiap elemen desain di bagian pahlawan ke gaya desain baru dengan menyalin pengaturan gaya desain baru dan menempelkannya di halaman yang ada. Setelah melakukan itu, kami akan memperluas gaya ini ke elemen serupa di halaman.

Bagian 4: Lakukan Perubahan Manual (Sesuai Tata Letak) & Gunakan Fitur Efisiensi

Seperti disebutkan sebelumnya, setiap tata letak adalah unik. Itu sebabnya membuat perubahan manual pada halaman yang ada juga diperlukan. Setelah beberapa perubahan dibuat, Anda dapat memperluas gaya atau menggunakan temukan dan ganti untuk membuatnya berlaku untuk elemen serupa di halaman.

Bagian 5: Tambahkan Karakteristik Desain

Last but not least, Anda juga dapat menambahkan karakteristik desain tertentu ke halaman yang ada.

Bagian 1: Membuka Dua Halaman Bersebelahan

Buat Halaman Baru Menggunakan Tata Letak Menggunakan Halaman Arahan Paket Tata Letak Toko Furnitur

Sekarang kita telah melalui bagian pendekatan dari posting ini, mari kita mulai menggunakan Divi! Tambahkan halaman baru menggunakan halaman arahan Paket Tata Letak Toko Furnitur.

Buat Halaman Baru Menggunakan Halaman Arahan Paket Tata Letak Perusahaan Hosting

Buat halaman lain menggunakan halaman arahan Paket Tata Letak Perusahaan Hosting juga. Kami akan mengganti gaya desain tata letak ini dengan desain halaman arahan Paket Tata Letak Toko Furnitur.

Bagian 2: Mengatur Ulang Pengaturan Bagian Tertentu

Setel Ulang Bagian Pengaturan Khusus Halaman Arahan Perusahaan Hosting

Buka Bagian Pahlawan

Setelah Anda memiliki kedua tata letak di dekat Anda, lanjutkan dengan membuka pengaturan bagian pahlawan dari halaman arahan perusahaan hosting.

Setel Ulang Latar Belakang Bagian & Perluas ke Semua Bagian

Buka pengaturan latar belakang dan atur ulang opsi dengan mengklik kanan dan mengklik Atur Ulang Latar Belakang. Setelah selesai, Anda dapat memperluas gaya latar belakang ini ke semua bagian di halaman untuk memastikan tidak ada bagian di halaman Anda yang berisi elemen latar belakang.

Atur Ulang Pembagi & Perluas ke Semua Bagian

Lakukan hal yang sama untuk pembagi bagian untuk memastikan semua pembagi bagian pada halaman hilang.

Bagian 3: Menggunakan Fitur Salin-Tempel & Perluas Lintas Halaman Divi untuk Bagian Pahlawan

Elemen Bagian Pahlawan Salin-Tempel Lintas Halaman

Pengaturan Bagian

Saatnya mulai menggunakan opsi salin-tempel lintas halaman! Kami akan memodifikasi setiap elemen desain di bagian pahlawan. Mulailah dengan menyalin gaya bagian pahlawan di halaman arahan toko furnitur. Kemudian, kembali ke halaman arahan perusahaan hosting dan tempel gaya bagian yang disalin.

Pengaturan Baris

Lakukan hal yang sama untuk barisan.

Modul Teks Judul

Salin gaya modul dari judul Modul Teks juga dan buat mereka berlaku untuk judul halaman arahan perusahaan hosting.

Modul Teks Tubuh

Buka deskripsi Modul Teks berikutnya dan salin gaya teks. Setelah Anda melakukannya, buat mereka berlaku untuk Modul Teks di halaman perusahaan hosting.

Perpanjang Gaya

Setelah Anda menerapkan gaya teks baru, lanjutkan dan perluas gaya ini ke semua modul di seluruh halaman.

Ubah Kembali Orientasi Teks ke Pusat Dimana Diperlukan

Anda akan melihat bahwa orientasi teks kiri akan diterapkan ke semua elemen desain di seluruh halaman. Anda dapat tetap seperti itu atau mengubah kembali orientasi teks secara manual.

Pengaturan Tombol

Modul terakhir di bagian pahlawan yang Anda perlukan untuk menerapkan gaya modul baru adalah Modul Tombol.

Perluas Gaya untuk Pengaturan Tombol

Alih-alih memperluas seluruh gaya Modul Tombol, kami akan memperluas pengaturan tombol tertentu.

Perluas Gaya untuk Spasi

Seiring dengan pengaturan spasi.

Perpanjang Gaya untuk Bayangan Kotak

Dan pengaturan bayangan kotak juga.

Salin-Tempel Elemen yang Tersisa Sekali + Perpanjang Gaya

Pembagi

Kita juga perlu menyalin dan menempelkan gaya Modul Pembagi dan membuatnya berlaku untuk pembagi di halaman arahan perusahaan hosting.

Perpanjang Gaya

Sekali lagi, perluas gaya modul ini di seluruh halaman.

Bagian 4: Lakukan Perubahan Manual (Sesuai Tata Letak) & Gunakan Fitur Efisiensi

Perubahan Khusus Tata Letak

Temukan & Ganti Font Judul

Saatnya mulai membuat beberapa perubahan manual! Hal pertama yang akan kita lakukan adalah mencocokkan font. Buka Modul Teks di halaman dan temukan font Rubik yang digunakan di seluruh halaman. Kemudian, klik Temukan & Ganti dan ganti font dengan Montserrat.

Temukan & Ganti Berat Font Judul

Lakukan hal yang sama untuk berat font. Alih-alih menggunakan Medium, pilih Light.

Temukan & Ganti Sudut Bulat

Kami juga menghapus batas sudut membulat di seluruh halaman dengan menggunakan Temukan & Ganti dan menerapkan '0px' ke setiap sudut di seluruh halaman.

Atur Ulang Pengaturan Latar Belakang CTA & Perpanjang Gaya di Bagian

Lanjutkan dengan menemukan Modul Ajakan Bertindak di halaman dan mengatur ulang pengaturan latar belakang modul pertama. Kemudian, perluas gaya ini ke semua Ajakan Bertindak di bagian tersebut.

Temukan & Ganti Warna Latar Belakang CTA di Bagian

Setelah Anda melakukannya, warna latar belakang default akan muncul. Temukan & Ganti warna ini dan ubah menjadi '#1a2545' di seluruh bagian.

Temukan & Ganti Warna Teks CTA di Bagian

Ganti Warna Teks dengan 'Cahaya' di seluruh bagian juga.

Ubah Pengaturan Tombol Tabel Harga

Kemudian, buka tabel harga di halaman dan ubah pengaturan tombol:

• Warna Latar Tombol: #ef6f49
• Lebar Batas Tombol: 8px
• Warna Batas Tombol: #ef6f49
• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 2px (Default), 1px (Hover)
• Font Tombol: Montserrat
• Berat Huruf: Semi Tebal
• Gaya Font: Huruf Besar
• Penjajaran Tombol: Kiri

Perluas Gaya untuk Tabel Harga & Modul CTA

Perluas pengaturan tombol baru ke semua tabel harga dan Modul Ajakan Bertindak di seluruh halaman.

Bagian 5: Tambahkan Karakteristik Desain

Bagian Warna Latar #1

Di bagian terakhir dari tutorial ini, kita akan menambahkan beberapa karakteristik desain secara manual. Ini termasuk, namun tidak terbatas pada, pengaturan latar belakang. Buka bagian yang ditandai pada layar cetak di bawah dan ubah warna latar belakang.

• Warna Latar Belakang: #f7f3ec

Bagian Warna Latar #2

Lakukan hal yang sama untuk bagian di bawah ini.

• Warna Latar Belakang: #f7f3ec

Bagian Latar Belakang Gradien #1

Kemudian, temukan bagian di layar cetak di bawah ini dan tambahkan latar belakang gradien.

• Warna 1: #ffffff
• Warna 2: #1a2545
• Arah Gradien: 90 derajat
• Posisi Awal: 55%
• Posisi Akhir: 55%

Bagian Latar Belakang Gradien #2

Gunakan latar belakang gradien lain untuk bagian di bawah ini:

• Warna 1: rgba(210,218,228,0.38)
• Warna 2: #ffffff
• Arah Gradien: 90 derajat
• Posisi Awal: 45%
• Posisi Akhir: 45%

Bagian Latar Belakang Gradien #3

Last but not least, tambahkan latar belakang gradien linier ke bagian terakhir pada halaman juga.

• Warna 1: #ffffff
• Warna 2: #f7f3ec
• Posisi Awal: 40%
• Posisi Akhir: 40%

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat mentransfer gaya desain tata letak menggunakan fitur efisiensi Divi. Tutorial ini memanfaatkan fitur salin-tempel lintas halaman baru yang merupakan bagian dari Pembuat Visual baru. Tutorial ini adalah bagian dari inisiatif desain Divi kami yang sedang berlangsung di mana kami mencoba memasukkan sesuatu yang ekstra ke dalam kotak peralatan desain Anda setiap minggu. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan bagian komentar di bawah!