Cara Mengubah Latar Belakang Gradien saat Melayang dengan Divi

Membuat situs web adalah tentang memastikan setiap detail benar. Memperhatikan detail kecil dalam desain Anda akan dengan cepat menambah dan meningkatkan kualitas situs web Anda. Dengan opsi hover baru Divi, Anda dapat dengan mudah menambahkan interaksi kecil di situs web Anda. Opsi hover berlaku untuk hampir semua pengaturan desain. Anda dapat, misalnya, secara tidak langsung mengubah latar belakang gradien saat mengarahkan kursor untuk membuat transisi yang bagus. Itulah yang akan kami tunjukkan kepada Anda di posting blog ini. Selain mencapai transisi gradien, kami juga akan membuat contoh desain yang menakjubkan dari awal yang bebas Anda gunakan untuk semua jenis situs web yang Anda buat.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil akhir pada ukuran layar yang berbeda.

Statis

Arahkan kursor

Unduh Ilustrasi GRATIS

Untuk mendapatkan ilustrasi gratis yang berasal dari Paket Tata Letak Video Game, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin dan Jumat! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian #1

Jarak

Hal pertama yang perlu Anda lakukan adalah membuat halaman baru atau membuka halaman yang sudah ada dan menambahkan bagian reguler baru ke dalamnya. Buka pengaturan dan tambahkan beberapa margin atas dan bawah kustom.

• Padding Atas: 100px
• Padding Bawah: 100px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna Latar Default Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang default berikut ke kolom 1:

• Warna Latar Belakang: #e7ffa0

Kolom 1 Arahkan Warna Latar Belakang

Ubah warna latar belakang ini saat melayang.

• Warna Latar Belakang: #00020c

Kolom 1 Latar Belakang Gradien

Tambahkan warna latar belakang gradien ke kolom 1 juga. Anda akan melihat bahwa kami menggunakan satu warna yang benar-benar transparan. Warna ini akan memungkinkan warna latar belakang terlihat, yang pada gilirannya berubah saat melayang.

• Warna 1: rgba (255,255,255,0)
• Warna 2: rgba(16,0,201,0.8)
• Kolom 1 Jenis Gradien: Linear
• Kolom 1 Arah Gradien: 50deg
• Kolom 1 Posisi Awal: 20%

Warna Latar Kolom 2

Tambahkan warna latar belakang kolom 2 juga.

• Kolom 2 Warna Latar Belakang: #ffffff

Perekat

Lalu, buka tab desain dan ubah pengaturan ukuran.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 2000px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Lanjutkan dengan menambahkan beberapa nilai padding kustom dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 2 Padding Atas: 6vw (Desktop), 120px (Tablet & Ponsel)
• Kolom 2 Padding Bawah: 6vw (Desktop), 120px (Tablet & Ponsel)
• Kolom 2 Padding Kiri: 5vw (Desktop), 80px (Tablet), 50px (Telepon)
• Kolom 2 Padding Kanan: 5vw (Desktop), 80px (Tablet), 50px (Telepon)

Bayangan Kotak

Dan berikan juga baris bayangan kotak yang halus.

• Kekuatan Buram Bayangan Kotak: 100px
• Kekuatan Penyebaran Bayangan Kotak: -10px

Transisi

Last but not least, kita akan membuat transisi latar belakang gradien halus dengan meningkatkan durasi transisi di tab lanjutan.

• Durasi Transisi: 1100ms

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Saatnya mulai menambahkan modul! Tambahkan Modul Gambar ke kolom pertama dan unggah file ' divi-gradient-background-on-hover-illustration-1.png ' yang dapat Anda temukan di folder zip yang telah Anda unduh di awal posting ini.

Latar Belakang Gradien

Buka pengaturan latar belakang Modul Gambar ini dan tambahkan latar belakang gradien. Kami kembali menggunakan satu warna yang sepenuhnya transparan untuk memungkinkan warna lain terlihat.

• Warna 1: rgba(50.217.255.0.66)
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Akhir: 57%

Jarak

Kemudian, tambahkan beberapa bantalan atas khusus ke modul.

• Padding Atas: 14vw

Tambahkan Modul Teks Judul ke Kolom 2

Tambah isi

Ke kolom kedua! Modul pertama yang kita perlukan adalah Modul Teks judul. Silakan dan tambahkan beberapa konten heading pilihan.

Pengaturan Teks Judul

Kemudian, buka pengaturan teks judul dan buat beberapa perubahan.

• Font Judul: Abril Fatface
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 4vw (Desktop), 60px (Tablet), 40px (Telepon)

Tambahkan Modul Teks Deskripsi ke Kolom 2

Tambah isi

Modul kedua yang kita perlukan adalah Modul Teks lainnya. Tambahkan beberapa konten pilihan.

Pengaturan Teks

Kemudian, buka pengaturan teks dan ubah orientasi teks.

• Orientasi Teks: Justify

Perekat

Sesuaikan lebar dalam pengaturan ukuran juga.

• Lebar: 73% (Desktop), 100% (Tablet & Ponsel)

Jarak

Terakhir, tambahkan beberapa margin atas dan bawah kustom ke modul untuk membuat spasi.

• Margin Atas: 2.5vw (Desktop), 50px (Tablet & Ponsel)
• Margin Bawah: 2.5vw (Desktop), 50px (Tablet & Ponsel)

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Modul ketiga dan terakhir yang kita perlukan di kolom kedua adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Ubah pengaturan tombol berikutnya.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1.2vw (Desktop), 14px (Tablet & Ponsel)
• Warna Teks Tombol: #ffffff
• Warna Gradien 1: #9ea6ff
• Warna Gradien 2: rgba(16,0,201,0.8)
• Arah Gradien: 78deg
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 30px
• Jarak Huruf Tombol: -1px
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 10px
• Padding Bawah: 10px
• Padding Kiri: 40px
• Padding Kanan: 40px

Bayangan Kotak

Dan terapkan bayangan kotak halus ke tombol.

• Kekuatan Buram Bayangan Kotak: 40px

Tambahkan Bagian #2

Jarak

Sekarang setelah kita menyelesaikan bagian pertama, kita akan melanjutkan ke bagian berikutnya. Tambahkan bagian reguler baru menggunakan nilai padding khusus berikut:

• Padding Atas: 100px
• Padding Bawah: 100px

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Warna Latar Kolom 1

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang berikut ke kolom 1:

• Kolom 1 Warna Latar Belakang: #ffffff

Warna Latar Default Kolom 2

Tambahkan warna latar belakang berikut ke kolom 2.

• Kolom 2 Warna Latar Belakang: #ffffff

Kolom 2 Arahkan Warna Latar Belakang

Dan ubah warna latar belakang ini saat melayang.

• Kolom 2 Warna Latar Belakang: #3d02ff

Kolom 2 Latar Belakang Gradien

Tambahkan latar belakang gradien ke kolom juga.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #ff7700
• Kolom 2 Posisi Awal: 20%

Perekat

Kemudian, buka pengaturan ukuran dan buat beberapa perubahan.

• Gunakan Lebar Kustom: Ya
• Satuan: PX
• Lebar Kustom: 2000px
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Lanjutkan dengan menambahkan nilai padding kustom dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 1 Padding Atas: 6vw (Desktop), 120px (Tablet & Ponsel)
• Kolom 1 Padding Bawah: 6vw (Desktop), 120px (Tablet & Ponsel)
• Kolom 1 Padding Kiri: 5vw (Desktop), 80px (Tablet), 50px (Telepon)
• Kolom 1 Padding Kanan: 5vw (Desktop), 80px (Tablet), 50px (Telepon)

Bayangan Kotak

Dan tambahkan bayangan kotak halus ke baris ini juga.

• Kekuatan Buram Bayangan Kotak: 100px
• Kekuatan Penyebaran Bayangan Kotak: -10px

Transisi

Last but not least, buat transisi yang mulus dengan meningkatkan durasi transisi di tab lanjutan.

• Durasi Transisi: 1100ms

Modul Teks Duplikat & Modul Tombol Baris #1

Karena kita sudah memiliki semua modul yang kita butuhkan di bagian sebelumnya, kita akan menghemat waktu dengan mengkloningnya.

Tempatkan Duplikat di Kolom 1 Baris #2

Dan menempatkan duplikat di kolom pertama dari baris baru.

Ubah Konten

Pastikan Anda mengubah konten modul Anda.

Ubah Latar Belakang Gradien Tombol

Ubah juga latar belakang gradien tombol.

• Warna 1: #ff653f
• Warna 2: #0066ff
• Arah Gradien: 39deg

Modul Gambar Klon Baris #2

Kloning Modul Gambar yang dapat Anda temukan di kolom pertama dari baris sebelumnya juga.

Tempatkan Duplikat di Kolom 2 Baris #2

Dan tempatkan duplikat di kolom kedua dari baris baru.

Ganti gambar

Ubah gambar ke file ' divi-gradient-background-on-hover-illustration-2.png ' yang dapat Anda temukan di folder zip yang telah Anda unduh di awal posting ini.

Ubah Latar Belakang Gradien

Last but not least, ubah latar belakang gradien dari Modul Gambar.

• Warna 1: rgba (0,2,12,0.66)
• Warna 2: rgba (255,255,255,0)
• Posisi Akhir: 57%

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda!

Statis

Arahkan kursor

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara mengubah latar belakang gradien saat melayang menggunakan Divi. Kami juga telah membuat contoh desain yang menakjubkan dari awal yang menggunakan pendekatan ini. Anda bebas menggunakan desain dan ilustrasi untuk semua jenis situs web yang Anda buat. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!