Apakah Anda ingin memiliki gradien latar belakang? Divi yang berubah saat melayang?
Membangun situs web adalah tentang memastikan setiap detail benar. Memperhatikan detail kecil dari desain Anda akan dengan cepat meningkatkan kualitas Anda situs jaringan.
Dengan opsi arahkan kursor baru dari Divi, Anda dapat dengan mudah menambahkan interaksi kecil di situs jaringan. Opsi hover berlaku untuk hampir semua parameter desain. Anda dapat, misalnya, secara tidak langsung mengubah latar belakang gradien saat mengarahkan kursor untuk membuat transisi yang bagus.
Inilah tepatnya yang akan kami tunjukkan kepada Anda dalam tutorial ini. Selain membuat transisi gradien, kami juga akan membuat contoh desain menakjubkan dari awal yang bebas Anda gunakan untuk jenis apa pun situs jaringan yang Anda buat.
Mari kita pergi!
penelitian
Sebelum masuk ke tutorial, mari kita lihat hasil akhirnya.
Mari mulai mendesain dengan Divi
Lihat juga: Divi: Cara membuat slider akordeon responsif
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 margin atas dan bawah kustom.
- Padding (Atas dan Bawah): 100px
Tambahkan baris 1
Struktur kolom
Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:
Warna latar belakang default (Desktop) kolom 1
Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang default berikut ke kolom 1:
- Latar Belakang (Desktop): #e7ffa0
Warna latar kolom 1 di hover
Ubah warna latar belakang ini saat mengarahkan kursor.
- Latar belakang: #00020c
Gradien latar belakang kolom 1
Juga tambahkan warna latar belakang gradien ke kolom 1. Perhatikan bahwa kita menggunakan warna yang benar-benar transparan. Warna ini akan memungkinkan warna latar belakang terlihat, yang pada gilirannya berubah saat mengarahkan kursor.
- Warna 1 (20%): rgba(255,255,255,0)
- Warna 2 (100%): rgba(16,0,201,0.8)
- Tipe Gradien: Linier
- Arah Gradien: 50 derajat
Warna latar kolom 2
Tambahkan juga warna latar belakang ke kolom 2.
- Latar belakang: #ffffff
perekat
Lalu pergi ke tab Mendesain dan ubah pengaturan ukuran di opsi Perekat.
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar : 2000px
jarak
Lanjutkan dengan menambahkan nilai padding khusus di pengaturan spasi.
- Padding (Atas dan Bawah): 0px
Spasi (Kolom 2)
- Padding (Atas dan Bawah): 6vw (Desktop), 120px (Tablet dan Ponsel)
- Padding (Kiri dan Kanan): 5vw (Desktop), 80px (Tablet), 50px (Telepon)
Bayangan Kotak
Dan juga beri baris bayangan kotak yang halus.
- Kekuatan Buram Bayangan Kotak: 100px
- Kekuatan Penyebaran Bayangan Kotak: -10px
Transisi
Terakhir, kita akan membuat transisi latar belakang gradien halus dengan meningkatkan durasi transisi di tab Advanced.
- Durasi Transisi: 1100ms
Tambahkan modul Gambar ke kolom 1
Unggah gambar
Saatnya untuk mulai menambahkan modul! Tambahkan modul Gambar ke kolom pertama.
Latar belakang gradien
Buka pengaturan latar belakang modul Gambar ini dan tambahkan latar belakang gradien. Kami sekali lagi menggunakan warna yang sepenuhnya transparan untuk memungkinkan warna lain terlihat.
- Warna 1(57%): rgba(50,217,255,0.66)
- Warna 2(100%): rgba(255,255,255,0)
- Tipe Gradien: Melingkar
- Posisi Gradien: Atas
jarak
Selanjutnya, tambahkan padding atas kustom ke modul.
- Padding (Atas): 14vw
Tambahkan modul Teks ke kolom 2
Tambahkan konten
Mari beralih ke kolom kedua! Modul pertama yang kita perlukan adalah Modul Teks untuk judul. Silakan tambahkan a isi judul pilihan.
Pengaturan teks tajuk
Selanjutnya, buka pengaturan teks header dan buat beberapa perubahan.
- Font: Abril Fatface
- Warna Teks: #000000
- Ukuran Teks: 4 vw (desktop), 60 px (tablet), 40 px (ponsel)
Tambahkan modul Teks kedua ke kolom 2
Tambahkan konten
Modul kedua yang kita perlukan adalah modul Teks lainnya. Tambahkan beberapa isi pilihan.
Pengaturan teks
Selanjutnya, buka pengaturan teks dan ubah perataan teks.
- Perataan Teks: Dibenarkan
perekat
Sesuaikan juga lebarnya dalam pengaturan ukuran.
- Lebar: 73% (Desktop), 100% (Tablet dan Ponsel)
jarak
Terakhir, tambahkan margin atas dan bawah kustom ke modul untuk membuat spasi.
- Margin (Atas dan Bawah): 2,5 vw (Desktop), 50 px (Tablet dan Telepon)
Tambahkan modul Tombol ke kolom 2
Tambahkan deskripsi
Modul ketiga dan terakhir yang kita perlukan di kolom kedua adalah modul Button. Tambahkan salinan pilihan Anda.
Pengaturan tombol
Kemudian ubah pengaturan tombol.
- Gunakan Gaya Kustom Untuk Tombol: YA
- Ukuran Teks Tombol: 1,2 vw (Desktop), 14 px (Tablet dan Ponsel)
- Warna Teks Tombol: #ffffff
- Gradien Berhenti 1 (0%): #9ea6ff
- Gradien Berhenti 2 (100%): rgba(16,0,201,0.8)
- Kemudi: 78 derajat
- Lebar Batas Tombol: 0 piksel
- Radius Batas: 30px
- Spasi Huruf: -1px
- Berat Huruf: Sangat Tebal
- Gaya Font: TT - (Huruf Besar)
jarak
Juga tambahkan nilai isian khusus.
- Padding (Atas dan Bawah): 10px
- Padding (Kiri dan Kanan): 40px
Bayangan Kotak
Dan terapkan bayangan kotak halus ke tombol.
- Kekuatan Buram Bayangan Kotak: 40px
Baca juga: Cara menyesuaikan modul "Penghitung Waktu Mundur" dengan GIF
Tambahkan bagian # 2
jarak
Sekarang kita telah menyelesaikan bagian pertama, kita akan melanjutkan ke bagian berikutnya. Tambahkan bagian reguler baru menggunakan nilai padding khusus berikut:
- Padding (Atas dan Bawah): 100px
Tambahkan satu baris ke dua kolom
Struktur kolom
Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
Latar belakang kolom 1
Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang berikut ke kolom 1:
- Latar belakang: #ffffff
Latar Belakang Kolom 2 (Desktop)
Tambahkan warna latar belakang berikut ke kolom 2.
- Latar Belakang (Desktop): #ffffff
Warna latar belakang kolom 2 saat dilayangkan
Dan ubah warna latar belakang ini saat melayang.
- Latar Belakang (Arahkan kursor): #3d02ff
latar belakang gradien 2 kolom
Juga tambahkan latar belakang gradien ke kolom.
- Gradien Berhenti 1 (20%): rgba(255,255,255,0)
- Gradien Berhenti 2 (100%): #ff7700
perekat
Selanjutnya, buka pengaturan ukuran dan buat beberapa perubahan.
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 1
- Lebar: 2000px
Spasi (Baris)
Lanjutkan dengan menambahkan nilai padding khusus di pengaturan spasi.
- Padding (Atas dan Bawah): 0px
Spasi (Kolom 1)
Ubah pengaturan spasi kolom 1
- Padding (Atas dan Bawah): 6vw (Desktop), 120px (Tablet dan Ponsel)
- Padding (Kiri dan Kanan): 5vw (Desktop), 80px (Tablet), 50px (Telepon)
Bayangan Kotak
Dan juga tambahkan bayangan kotak halus ke baris ini.
- Kekuatan Buram Bayangan Kotak: 100px
- Kekuatan Penyebaran Bayangan Kotak: -10px
Transisi
Terakhir, buat transisi yang mulus dengan meningkatkan durasi transisi di tab Advanced.
- Durasi Transisi: 1100 ms
Duplikat modul baris 1
Karena kita sudah memiliki semua modul yang kita butuhkan di bagian sebelumnya, kita akan menghemat waktu dengan mengkloningnya.
Tempatkan duplikat di baris 2 kolom
Dan tempatkan duplikat di baris baru sebagai berikut:
mengedit konten
Pastikan untuk mengubah isi modul Anda.
Ubah latar belakang gradien tombol
Juga ubah gradien latar belakang tombol.
- Gradien Berhenti 0%: #ff653f
- Gradien Berhenti 100%: #0066ff
- Arah: 39deg
Ganti gambar
Ganti gambar.
Ubah gradien latar belakang
Terakhir, ubah gradien latar belakang modul Image.
- Gradien Berhenti 0%: rgba (0,2,12,0.66)
- Gradien Berhenti 57%: rgba (255,255,255,0)
penelitian
Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.
Unduh DIVI Sekarang!!!
Kesimpulan
Pada artikel ini, kami menunjukkan kepada Anda cara mengubah latar belakang gradien saat mengarahkan kursor menggunakan Divi. Kami juga telah membuat contoh bagus dari awal yang menggunakan pendekatan ini.
Anda bebas menggunakan desain dan karya seni untuk semua jenis situs web yang Anda buat.
Kami harap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
