3 Efek Arahkan Arah Transformasi Mulus yang Dapat Anda Terapkan ke Gambar Anda dengan Divi

Mencari cara keren untuk menampilkan gambar di situs web Divi Anda berikutnya? Teruslah membaca, karena dalam posting ini, kami akan menangani 3 efek hover transformasi gambar yang akan membantu meningkatkan tampilan dan nuansa halaman Anda secara keseluruhan. Anda akan dapat mengikuti proses rekreasi A hingga Z dari tiga contoh berbeda dan bahkan mengunduhnya untuk segera digunakan. Tujuan utama dari tutorial ini adalah menginspirasi Anda untuk menggabungkan opsi transformasi baru Divi dengan opsi yang sudah ada di luar sana untuk membuat desain web yang indah.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasil dari ketiga contoh di berbagai ukuran layar.

Desktop

Contoh 1

Contoh #2

Contoh #3

Seluler

Contoh 1

Contoh #2

Contoh #3

Unduh Efek Gambar Transform Hover GRATIS

Berlangganan Saluran Youtube Kami

Untuk mendapatkan efek hover transformasi gambar gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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

Sebelum kita membuat ulang setiap contoh satu per satu, kita akan melalui beberapa langkah umum. Tambahkan bagian reguler baru ke halaman Anda menggunakan margin dan nilai padding berikut:

• Margin Atas: 200px
• Margin Bawah: 200px
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna Latar Belakang Kolom 2

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang ke kolom kedua.

• Kolom 2 Warna Latar Belakang: #efefef

Perekat

Buka pengaturan ukuran berikutnya dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Tambahkan nilai padding kustom berikut berikutnya:

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 2 Padding Atas: 10vw
• Kolom 2 Padding Bawah: 10vw
• Kolom 2 Padding Kiri: 5vw
• Kolom 2 Padding Kanan: 5vw

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Konten H2

Saatnya mulai menambahkan berbagai modul ke kolom 2, dimulai dengan Modul Teks. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Times New Roman
• Judul 2 Berat Font: Tebal
• Judul 2 Warna Teks: #0f47ff
• Judul 2 Ukuran Teks: 3.5vw

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul selanjutnya yang kita butuhkan pada kolom kedua adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #ff961e

Perekat

Ubah juga nilai ukuran.

• Berat Pembagi: 1px
• Lebar: 20%
• Penyelarasan Modul: Kiri
• Tinggi: 0px

Jarak

Dan buat beberapa ruang untuk modul menggunakan nilai margin atas dan bawah berikut:

• Margin Atas: 1vw
• Margin Bawah: 1vw

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

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

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 0.7vw (Desktop), 1.7vw (Tablet), 2.5vw (Telepon)
• Tinggi Baris Teks: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Orientasi Teks: Justify

Perekat

Ubah juga pengaturan ukuran.

• Lebar: 61% (Desktop), 80% (Tablet & Ponsel)

Jarak

Dan tambahkan beberapa margin atas dan bawah kustom.

• Margin Atas: 2vw
• Margin Bawah: 2vw

Tambahkan Modul Teks #3 ke Kolom 3

Tambah isi

Ke modul berikutnya dan terakhir yang kita butuhkan di kolom kedua, yang merupakan Modul Teks lainnya. Kami akan menggunakan modul ini sebagai tombol dengan menambahkan beberapa konten paragraf.

Tambahkan Tautan

Lanjutkan dengan menambahkan tautan ke CTA.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks yang sesuai:

• Font Teks: Times New Roman
• Warna Teks: #ff961e
• Ukuran Teks: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)

Perekat

Ubah lebar modul dalam pengaturan ukuran juga.

• Lebar: 48%

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa bantalan khusus.

• Padding Atas: 1vw
• Padding Bawah: 1vw

Berbatasan

Selesaikan Modul Teks dengan menambahkan batas bawah dengan pengaturan berikut:

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #0f47ff

Bagian Klon Dua Kali

Setelah Anda selesai menyesuaikan bagian dan semua elemen di dalamnya, Anda dapat melanjutkan dan mengkloningnya dua kali. Kami akan menggunakan masing-masing bagian di halaman kami untuk membuat ulang tiga contoh yang dibagikan di awal posting ini.

Buat Ulang Contoh #1

Tambahkan Modul Gambar ke Kolom 1

Biarkan Kotak Gambar Kosong

Mari kita mulai dengan contoh pertama! Tambahkan Modul Gambar baru ke kolom pertama dan pastikan Anda membiarkan kotak gambar kosong.

Warna Latar Default

Ubah warna latar belakang Modul Gambar:

• Warna Latar Belakang: #0f47ff

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: rgba(255,150,30,0.65)

Gambar latar belakang

Alih-alih mengunggah gambar, kami akan menambahkannya ke latar belakang, disertai dengan pengaturan berikut:

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Cahaya Lembut

Jarak

Pindah ke pengaturan jarak modul dan tambahkan beberapa nilai padding khusus:

• Tampilkan Spasi Di Bawah Gambar: Tidak
• Padding Atas: 22vw
• Padding Bawah: 22vw

Putar Terjemahan Default

Kami juga akan memutar gambar saat melayang. Pastikan gambar muncul dalam keadaan aslinya sebelum melayang dengan menambahkan '0deg' ke opsi yang tepat.

• Kanan: 0 derajat

Arahkan Terjemahkan Putar

Ubah nilai ini saat mengarahkan:

• Kanan: 180 derajat

Transisi

Untuk membuat efek langsung, kami akan menghapus durasi transisi:

• Durasi Transisi: 0ms

Buat Ulang Contoh #2

Tambahkan Modul Gambar ke Kolom 1

Biarkan Kotak Gambar Kosong

Ke contoh kedua! Sekali lagi, pastikan Anda membiarkan kotak gambar kosong.

Warna Latar Default

Buka pengaturan latar belakang dan tambahkan warna latar belakang (sepenuhnya transparan):

• Warna Latar Belakang: rgba(255,255,255,0)

Arahkan Warna Latar Belakang

Ubah warna ini saat melayang:

• Warna Latar Belakang: rgba(0,0,0,0.65)

Gambar latar belakang

Kami, sekali lagi, menggunakan gambar latar daripada mengunggahnya ke modul itu sendiri. Gabungkan gambar latar belakang dengan pengaturan berikut:

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Cahaya Lembut

Jarak

Lalu, buka pengaturan spasi dan ubah padding atas dan bawah:

• Tampilkan Spasi Di Bawah Gambar: Tidak
• Padding Atas: 22vw
• Padding Bawah: 22vw

Skala Transformasi Default

Pastikan nilai skala transformasi default tetap '100%'.

• Kanan: 100%
• Bawah: 100%

Arahkan Skala Transformasi

Dan ubah nilai ini saat mengarahkan kursor untuk membuat efek penskalaan.

• Kanan: 120%
• Bawah: 120%

Terjemahan Default Transform

Secara default, kami menyimpan '0px' untuk opsi bawah dalam pengaturan transformasi terjemahan.

• Bawah: 0px

Arahkan Arahkan Transformasi Terjemahan

Ubah nilai ini saat mengarahkan kursor untuk memposisikan ulang elemen.

• Bawah: 9vw

Transisi

Kami juga membuat transisi yang sedikit lebih cepat dengan mengubah durasi transisi di tab lanjutan:

• Durasi Transisi: 200ms

Buat Ulang Contoh #3

Ubah Struktur Kolom

Ke contoh berikutnya dan terakhir! Mulailah dengan memodifikasi struktur kolom dari baris.

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar 1:1

Kemudian, tambahkan Modul Gambar ke kolom pertama. Berbeda dengan dua contoh pertama, kita akan mengunggah gambar dengan rasio 1:1 (lebar dan tinggi yang sama).

Perekat

Pindah ke tab desain dan paksa gambar menjadi lebar penuh dalam pengaturan ukuran.

• Paksa Lebar Penuh: Ya

Jarak

Hapus spasi di bawah gambar di pengaturan spasi berikutnya.

• Tampilkan Spasi Di Bawah Gambar: Tidak

Perbatasan Default

Kemudian, pergi ke pengaturan perbatasan dan tambahkan '500vw' ke masing-masing sudut. Kami memastikan nilai ini cukup tinggi untuk mencakup semua ukuran layar.

Arahkan Perbatasan

Hapus sudut membulat yang Anda tambahkan saat mengarahkan kursor.

Filter Bawaan

Lalu, buka pengaturan filter dan pastikan nilai default ini ditambahkan:

• Saturasi: 100%
• Kecerahan: 46%
• Opasitas: 3%

Arahkan Filter

Aktifkan opsi arahkan kursor pada setiap pengaturan yang dimodifikasi dan gunakan nilai berikut:

• Saturasi: 300%
• Kecerahan: 46%
• Opasitas: 100%

Skala Transformasi Default

Lalu, buka opsi transformasi dan ubah opsi skala transformasi default:

• Kanan: 68%
• Bawah: 68%

Arahkan Skala Transformasi

Ubah nilai-nilai ini saat mengarahkan kursor.

• Kanan: 130%
• Bawah: 130%

Terjemahan Default Transform

Pindah ke nilai translasi transformasi dan pastikan nilai translasi transformasi default tetap sama:

• Kanan: 0px
• Bawah: 0px

Arahkan Arahkan Transformasi Terjemahan

Ubah nilai pada hover.

• Kanan: 1vw
• Bawah: 8vw

Transisi

Last but not least, tingkatkan durasi transisi di tab lanjutan untuk membuat transisi yang mulus dan selesai!

• Durasi Transisi: 600ms

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Contoh 1

Contoh #2

Contoh #3

Seluler

Contoh 1

Contoh #2

Contoh #3

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan Modul Gambar dan opsi hover and transform Divi. Efek yang kami buat ulang hanyalah beberapa dari banyak kemungkinan indah di luar sana. 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.