Cara Membuat Transisi Arahkan Arah Gradien Latar Belakang yang Indah dengan Divi

Baru-baru ini, beberapa opsi hover tambahan telah ditambahkan ke Divi-memungkinkan Anda untuk membuat lebih banyak efek keren tanpa harus menyentuh satu baris kode pun. Anda sekarang dapat, misalnya, membuat transisi melayang di latar belakang gradien yang menakjubkan. Dengan menggabungkan gradien kolom, baris, dan bagian, Anda dapat mencapai desain yang unik. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana melakukannya. Kami akan memulai dengan melalui beberapa langkah umum. Setelah selesai, kita akan fokus pada tiga contoh desain satu per satu. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas tiga contoh berbeda yang akan kita buat ulang sepanjang tutorial ini.

Contoh 1

Contoh #2

Contoh #3

Unduh Bagian Pahlawan GRATIS

Berlangganan Saluran Youtube Kami

Untuk mendapatkan bagian pahlawan gratis ini, 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! 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!

Langkah Umum

Tambahkan Bagian Baru

Jarak

Mari kita mulai dengan melalui beberapa langkah umum. Tambahkan bagian baru ke halaman yang sedang Anda kerjakan dan hapus semua padding default. Menghapus semua padding atas dan bawah akan, nanti, membantu kami menggabungkan latar belakang gradien kolom, baris, dan bagian.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar wadah bagian.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Pindah ke pengaturan spasi dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H1

Mari mulai menambahkan modul! Yang pertama kita butuhkan adalah Modul Teks dengan beberapa konten H1.

Pengaturan Teks H1

Pindah ke tab desain dan ubah pengaturan teks H1 yang sesuai:

• Font Judul: Montserrat
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Ukuran Teks Judul: 3vw (Desktop), 6vw (Tablet & Ponsel)
• Spasi Surat Judul: 0.7vw

Perekat

Buka pengaturan ukuran berikutnya dan ubah lebar bersama dengan perataan modul.

• Lebar: 48% (Desktop), 60% (Tablet & Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Lengkapi desain modul dengan menambahkan beberapa margin atas.

• Margin Atas: 10vw

Tambahkan Modul Pembagi ke Kolom

Visibilitas

Ke modul berikutnya! Tambahkan Modul Pembagi dan pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Ubah warna garis selanjutnya.

• Warna Garis: #000000

Perekat

Pindah ke pengaturan ukuran dan terapkan pengaturan berikut:

• Berat Pembagi: 0.1vw
• Lebar: 10% (Desktop),16% (Tablet), 25% (Ponsel)
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa nilai padding khusus di berbagai ukuran layar juga.

• Padding Atas: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Bawah: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Ke modul berikutnya, yang merupakan Modul Teks lainnya. Tambahkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Buka Sans
• Perataan Teks: Justify
• Tinggi Baris Teks: 2.3em

Perekat

Ubah lebar dan perataan modul dalam pengaturan ukuran berikutnya:

• Lebar: 30% (Desktop), 54% (Tablet), 70% (Ponsel)
• Penyelarasan Modul: Pusat

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di kolom adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Pindah ke tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah juga pengaturan tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 0.8vw (Desktop), 2vw (Tablet), 2.8vw (Ponsel)
• Warna Teks Tombol: #000000
• Lebar Perbatasan Tombol: 1px
• Radius Perbatasan Tombol: 1px
• Font Tombol: Montserrat

Jarak

Dan tambahkan beberapa nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: 2vw (Desktop), 8vw (Tablet & Ponsel)
• Margin Bawah: 10vw
• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 6vw (Tablet), 8vw (Telepon)
• Padding Kanan: 3vw (Desktop), 6vw (Tablet), 8vw (Telepon)

Bagian Klon Dua Kali

Setelah Anda menyelesaikan bagian tersebut, Anda dapat mengkloningnya dua kali; satu untuk setiap contoh.

Buat Ulang Latar Belakang Gradien Hover Transition #1

Bagian

Latar Belakang Gradien Default

Mari mulai membuat transisi hover pertama! Buka pengaturan bagian dan tambahkan latar belakang gradien default berikut:

• Warna 1: #d1d1ff
• Warna 2: #f7f7f7
• Arah Gradien: 90 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Arahkan Arah Gradien Latar Belakang

Ubah latar belakang gradien saat melayang.

• Warna 1: #f7f7f7
• Warna 2: #ffc1c7
• Arah Gradien: 90 derajat
• Posisi Awal: 50%
• Posisi Akhir: 50%

Baris

Latar Belakang Gradien Default

Buka pengaturan baris berikutnya dan terapkan pengaturan latar belakang gradien default berikut:

• Warna 1: #7032ff
• Warna 2: rgba (255,255,255,0)
• Arah Gradien: 90 derajat
• Posisi Awal: 10%
• Posisi Akhir: 10%

Arahkan Arah Gradien Latar Belakang

Ubah latar belakang gradien saat melayang.

• Warna 1: rgba (255,255,255,0)
• Warna 2: #ff324a
• Arah Gradien: 90 derajat
• Posisi Awal: 90%
• Posisi Akhir: 90%

Buat Ulang Gradien Latar Belakang Arahkan Transisi #2

Bagian

Latar Belakang Gradien Default

Ke contoh kedua! Buka pengaturan bagian dan tambahkan latar belakang gradien berikut:

• Warna 1: #f7f7f7
• Warna 2: #eceaff
• Arah Gradien: 156deg
• Posisi Awal: 50%
• Posisi Akhir: 50%

Arahkan ke Latar Belakang Gradien

Tambahkan latar belakang gradien yang berbeda saat mengarahkan kursor:

• Warna 1: #ffeaec
• Warna 2: #f7f7f7
• Arah Gradien: 204deg
• Posisi Awal: 50%
• Posisi Akhir: 50%

Baris

Latar Belakang Gradien Default

Buka pengaturan baris berikutnya dan terapkan pengaturan latar belakang gradien berikut:

• Warna 1: #a932ff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kiri Bawah
• Posisi Awal: 14%
• Posisi Akhir: 14%

Arahkan Arah Gradien Latar Belakang

Ubah latar belakang gradien baris pada hover yang sesuai:

• Warna 1: #ff324a
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kiri Atas
• Posisi Awal: 14%
• Posisi Akhir: 14%

Kolom

Latar Belakang Gradien Default

Pindah ke pengaturan kolom dan tambahkan latar belakang gradien berikut:

• Warna 1: #a932ff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kanan Atas
• Posisi Awal: 14%
• Posisi Akhir: 14%

Arahkan Arah Gradien Latar Belakang

Ubah latar belakang gradien kolom saat mengarahkan kursor:

• Warna 1: #ff324a
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kanan Bawah
• Posisi Awal: 14%
• Posisi Akhir: 14%

Buat Ulang Gradien Latar Belakang Arahkan Transisi #3

Bagian

Latar Belakang Gradien Default

Ke contoh berikutnya dan terakhir! Buka pengaturan bagian dan terapkan latar belakang gradien berikut:

• Warna 1: #ffc1c7
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 45%
• Posisi Akhir: 45%

Arahkan Arah Gradien Latar Belakang

Ubah latar belakang gradien bagian saat mengarahkan kursor.

• Warna 1: #ffc1c7
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Kiri
• Posisi Awal: 20%
• Posisi Akhir: 20%

Baris

Latar Belakang Gradien Default

Buka pengaturan baris berikutnya dan tambahkan latar belakang gradien berikut:

• Warna 1: #d3dffff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Bawah
• Posisi Awal: 45%
• Posisi Akhir: 45%

Arahkan Arah Gradien Latar Belakang

Ubah latar belakang gradien sesuai:

• Warna 1: #d3dffff
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Kanan
• Posisi Awal: 20%
• Posisi Akhir: 20%

Kolom

Latar Belakang Gradien Default

Terakhir, tambahkan latar belakang gradien kolom dan selesai!

• Warna 1: #f7f7f7
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 41%
• Posisi Akhir: 41%

Pratinjau

Sekarang setelah kita melewati semua langkah, mari kita lihat hasil akhir dari ketiga contoh yang kita buat ulang sepanjang tutorial ini!

Contoh 1

Contoh #2

Contoh #3

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara kreatif menggunakan opsi hover latar belakang gradien tambahan Divi untuk membuat transisi hover yang indah hanya dengan opsi bawaan Divi. Kami telah mulai dengan beberapa langkah umum dan dilanjutkan dengan membuat ulang masing-masing dari tiga contoh. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.