Loncat ke Konten Utama

Bagaimana cara mengubah gambar rollover pada Divi

Divi: tema WordPress termudah untuk digunakan

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Mengetahui cara mengubah gambar rollover dapat berguna untuk semua jenis situs web yang sedang Anda kerjakan. Selain itu, ini membantu Anda menambahkan interaksi halus ke halaman. Misalnya, Anda dapat menggunakannya untuk memberikan perspektif tambahan pada testimonial, halaman, dan halaman tim.

Dengan opsi rollover Divi baru, Anda dapat mengedit gambar rollover hanya dengan menggunakan opsi bawaan. Dengan menggabungkan latar belakang kolom dan filter opacity, Anda akan sampai di sana dalam waktu singkat.

Mari kita pergi!

penelitian

Sebelum mempelajari tutorial, mari kita lihat empat contoh yang akan kita buat ulang dari awal.

melayang-layang gambar

Langkah umum

Tambahkan bagian baru

Di bagian pertama tutorial ini, kami akan mengikuti beberapa langkah umum. Langkah-langkah umum ini akan membantu kita menghemat waktu ketika kita fokus pada tiga contoh pertama. Buka halaman baru atau halaman yang ada dan tambahkan bagian reguler.

pemilihan bagian divi.jpg

Tambahkan baris baru

Struktur kolom

Kemudian tambahkan baris baru menggunakan struktur kolom berikut:

pilih layout divi.jpg

Kolom 1 Gambar latar belakang

Tanpa menambahkan modul lagi, buka pengaturan garis dan tambahkan gambar latar belakang ke kolom pertama. Pilih gambar yang ingin Anda terbangi.

  • Kolom 1 Gambar latar belakang Ulangi: Tidak ada pengulangan

gambar belakang divi.jpg

Tambahkan gambar ke kolom 1

Unggah gambar

Lanjutkan dengan menambahkan modul gambar ke kolom pertama dan muat gambar yang ingin Anda tampilkan sebelum melayang.

tambahkan gambar divi.jpg

Tambahkan modul teks judul ke kolom 2

Tambahkan konten

Pada kolom kedua, kita pertama-tama akan membutuhkan judul Modul Teks. Silakan dan tambahkan konten H3.

gambar dan teks divi.jpg

Pengaturan teks tajuk

Lalu pergi ke pengaturan teks judul dan buat beberapa perubahan.

  • Judul 3 Font: Baloo Tamma
  • Judul 3 Warna teks: # eda96a
  • Judul 3 Ukuran Teks: 100 piksel (desktop), 70 piksel (tablet), 50 piksel (ponsel)
  • Judul Spasi 3 Surat: -4px

jaden elian picture divi.jpg

  • Judul 3 Text Shadow Horizontal Length: 0.04em
  • Judul 3 Text Shadow Vertical Length: 0.04em
  • Judul 3 Warna Bayangan teks: rgba (0,0,0,0,6)

font kustomisasi divi image.jpg

jarak

Akhirnya, tambahkan margin atas dalam pengaturan spasi.

  • Margin atas: 50 (desktop), 50px (tablet dan telepon)

margin image divi.jpg

Tambahkan modul divisi ke kolom 2

Tampilkan pembagi

Tambahkan modul pemisahan tepat di bawah judul Modul Teks di kolom 2.

  • Show Divider: Ya

separator divi imge module.jpg

Warna separator

Ubah warna pembagi itu.

  • Warna pemisah: # e25300

image divi separateur color.jpg

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

mode

Dan pilih gaya pemisahan lain dalam pengaturan gaya.

  • Gaya pemisahan: bertitik

pemisah menekan divi.jpg

perekat

Juga menambah berat pembagi dalam parameter ukuran.

  • Berat pemisah: 3px

taile separator divi image.jpg

Tambahkan modul teks isi ke kolom 2

Tambahkan konten

Mari kita pergi ke modul terakhir! Tambahkan badan modul teks ke kolom kedua dengan konten pilihan.

bagian baru teks divi.jpg

Pengaturan teks

Ubah pengaturan teks nanti.

  • Ukuran teks: 16px
  • Tinggi baris teks: 2.3em
  • Orientasi teks: Membenarkan

ubah ukuran dan tinggi baris divi.jpg

Klon bagian dua kali

Setelah Anda menyelesaikan semua langkah umum, klon bagian dua kali yang telah Anda buat. Sekarang kita akan memiliki bagian terpisah untuk masing-masing dari tiga contoh pertama.

duplikat bagian divi.jpg

Buat Contoh 1

Terapkan parameter tambahan ke modul gambar

Keburaman bawaan

Mari kita mulai membuat contoh pertama! Satu-satunya hal yang akan kita lakukan di sini adalah membuat transisi melayang tanpa efek tambahan. Untuk melakukan ini, buka modul Gambar dan akses pengaturan filter. Pastikan nilai opacity default adalah 100%.

  • Opacity: 100%

image.jpg konfigurasi flyover

Ikhtisar opacity

Ubah opacity hover.

  • Opacity: 0%

ubah opacity pada flyover.jpg

Transisi

Akhirnya, buat transisi yang mulus dengan meningkatkan durasi transisi.

  • Durasi transisi: 1200ms

durasi animasi divi module image.jpg

Buat Contoh 2

Terapkan parameter tambahan ke modul gambar

Jarak standar

Mari kita pergi ke contoh kedua! Buka modul gambar di kolom 1 dan pastikan tidak ada isian kustom secara default.

periksa fill.jpg default

Jarak stasioner

Lanjutkan dengan menambahkan sedikit overhead margin untuk memungkinkan gambar melayang meningkat.

  • Padding bawah: 100px

tentukan margin lebih rendah.jpg

Kotak bayangan

Kami juga menambahkan bayangan kotak default yang akan hilang pada flyover.

  • Bayangan kotak, posisi horizontal: -55px
  • Posisi Vertikal Box Shadow: -50px
  • Kekuatan penyebaran bayangan kotak: -10px
  • Warna warna: # eda96a

define shadow divi.jpg

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Keburaman bawaan

Lalu buka pengaturan filter dan pastikan opacity default adalah 100%.

  • Opacity: 100%

melayang-layang gambar

Ikhtisar opacity

Hapus opacity dari modul hover. Ini akan memungkinkan latar belakang kolom untuk ditampilkan dan membuat efek "rollover image".

  • Opacity: 0%

flyover opacity divi.jpg

Transisi

Terakhir, tambah durasi transisi dalam parameter transisi modul Gambar.

  • Durasi transisi: 1200ms

durasi divi.jpg animasi

Buat contoh 3

Tambahkan latar belakang gradien ke kolom 1

Untuk contoh ketiga, pertama-tama kita membuka parameter garis dan menambahkan latar belakang gradien radial ke kolom pertama. Ini akan memberi gambar melayang bentuk melingkar.

  • Warna 1: rgba (43,135,218,0)
  • Warna 2: #ffffff
  • Kolom 1 Jenis gradien: Radial
  • Kolom 1 Arah Radial: Tengah
  • Kolom 1 Posisi Awal: 60%
  • Kolom 1 Posisi Akhir: 60%

pengaturan baris divi.jpg

Terapkan parameter tambahan ke modul gambar

Keburaman bawaan

Lanjutkan dengan membuka modul gambar kolom 1 dan memastikan opacity default adalah 100%.

  • Opacity: 100%

konfigurasi opacity pada flyover image di divi.jpg

Ikhtisar opacity

Hapus opacity flyover untuk mengungkapkan latar belakang kolom.

  • Opacity: 0%

define lopacity divi.jpg

Buat Contoh 4

Tambahkan baris baru

Struktur kolom

Pada contoh terakhir! Di sini kita akan membutuhkan baris baru dengan kolom 6.

contoh tata letak 4 divi.jpg

Kolom 1 Gambar latar belakang

Tanpa menambahkan modul lagi, buka pengaturan garis dan tambahkan gambar latar di mana Anda ingin muncul di hover sebagai gambar latar belakang kolom 1.

  • Kolom 1 Gambar latar belakang Ulangi: Tidak ada pengulangan

gambar tanpa repetition.jpg

Ulangi untuk semua kolom secara online

Ulangi langkah sebelumnya untuk setiap kolom di baris Anda.

mereproduksi gambar di kolom lainnya.jpg

perekat

Kemudian, akses parameter ukuran untuk baris dan hapus celah di antara kolom.

  • Jadikan garis ini lebar penuh: Ya
  • Gunakan lebar selokan khusus: 1

dimensioning divi.jpg

Tambahkan modul gambar ke kolom 1

Unggah gambar

Lanjutkan dengan menambahkan modul gambar ke kolom pertama dan mengunggah gambar yang ingin Anda tampilkan secara default.

sekarang modul gambar di kolom 1 divi.jpg

Keburaman bawaan

Pastikan opacity default modul ini adalah 100%.

  • Opacity: 100%

konfigurasikan opacity pada divi.jpg

Ikhtisar opacity

Dan hapus opacity flyover untuk memungkinkan latar belakang kolom muncul sebagai gantinya.

  • Opacity: 0%

opacity overflight module image divi.jpg

Transisi

Tambah durasi transisi untuk transisi yang mulus.

  • Durasi transisi: 800ms

durasi transisi divi.jpg

Clone Image 3 module sekali dan letakkan duplikat di kolom yang tersisa

Setelah Anda selesai mengedit modul gambar di kolom 1, Anda dapat mengkloning dan menempatkan duplikat di kolom lainnya. Pastikan untuk mengubah gambar juga.

untuk mengkloning modules.jpg

Pikiran terakhir

Mengubah gambar overlay dapat membantu membawa interaksi tambahan ini ke bagian testimonial, tentang halaman dan halaman tim.

Dalam tutorial ini, kami menunjukkan kepada Anda cara sederhana untuk mendapatkan berbagai jenis rollover gambar hanya menggunakan opsi Divi bawaan! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah!

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Tema WordPress Keren yang saya temukan
Dan ada lebih banyak tema dan model 50 000 untuk dipilih!

Kembali ke atas
4 saham
saham4
menciak
Register
Ada apa