Cara Membuat Transisi Gambar Breakaway dengan Efek Gulir Divi

Efek Gulir Divi memungkinkan kami membuat animasi transisi luar biasa yang dapat memukau pengunjung dengan desain yang menarik. Gambar, khususnya, dapat menunjukkan kekuatan efek gulir ini dengan cara yang mengejutkan. Dalam tutorial ini, kami akan menjelaskan langkah demi langkah cara membuat transisi gambar terpisah dengan efek gulir Divi. Efek ini awalnya ditampilkan di halaman demo. Efeknya melibatkan pengirisan gambar terlebih dahulu menggunakan editor foto seperti Photoshop (cukup mudah dilakukan). Setelah gambar diiris, yang perlu kita lakukan adalah menambahkannya ke Divi dan menggunakan efek gulir bawaan untuk membuat keajaiban terjadi.

Mari kita mulai.

Sneak Peek

Berikut adalah tampilan desain untuk hari ini.

Anda juga dapat melihat demo langsung asli dari desain di halaman demo dengan judul “Olahraga Tidak Harus Membosankan”.

Unduh Tata Letak Divi Transisi Gambar Breakaway GRATIS

Untuk mengetahui tata letak dari tutorial 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!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file JSON ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Selain pengaturan Divi di atas, Anda memerlukan:

• Dua gambar (setidaknya 1080px kali 540px)
• Perangkat lunak pengedit foto seperti Photoshop untuk mengiris gambar sebelum menambahkannya ke Divi.

Bagian 1: Mengiris Gambar di Photoshop

Sebelum kita dapat mulai membuat desain kita di Divi, kita perlu mengiris dua gambar kita yang akan digunakan untuk efek scroll transisi breakaway. Kedua gambar perlu dipangkas sehingga ukurannya persis 1080px kali 540px. Setelah itu, mereka perlu diiris menjadi 8 bagian yang sama (4 melintang, 2 ke bawah). Setelah siap, kami dapat menyimpannya ke komputer kami dan mengunggah irisan gambar ke situs kami. Mari kita mulai dengan gambar pertama.

Gambar #1

Memotong Gambar

Hal pertama yang perlu kita lakukan adalah memotong gambar sehingga memiliki dimensi tepat 1080px kali 540px. Anda dapat menggunakan perangkat lunak pengedit gambar apa pun untuk melakukan ini. Di Photoshop, Anda dapat menggunakan alat potong.

Mengiris Gambar

Selanjutnya, klik untuk menggunakan alat irisan dan pilih seluruh gambar. Klik kanan pada irisan/gambar dan pilih opsi Divide Slice.

Dalam kotak opsi Bagi Irisan, perbarui yang berikut ini:

Bagilah secara horizontal menjadi:

• 2 iris ke bawah, beri jarak rata
• 270 piksel per irisan

Bagi secara vertikal menjadi:

• 4 iris melintang, dengan jarak yang sama
• 270 piksel per irisan

Kemudian klik OK.

Menyimpan Irisan Gambar

Sekarang kita memiliki gambar yang diiris menjadi 8 blok yang sama, masing-masing 270px kali 270px.

Untuk menyimpan irisan gambar, navigasikan ke File > Ekspor > Simpan untuk Web.

Kemudian pilih format file dan klik Simpan.

Di kotak popup, pastikan untuk memperbarui yang berikut ini:

• Simpan Sebagai: [masukkan nama untuk gambar]
• Format: Gambar Saja
• Pengaturan: Pengaturan Default
• Irisan: Semua Irisan

Kemudian klik Simpan.

Sekarang semua irisan gambar Anda akan disimpan ke komputer, siap untuk diunggah ke Divi.

Gambar #2

Untuk membuat gambar kedua yang diperlukan untuk efek gulir transisi gambar terpisah ini, kita harus mengikuti proses yang sama (memotong, mengiris, dan menyimpan) yang kita gunakan untuk membuat gambar pertama.

Putar Irisan Gambar

Namun, karena cara kerja efek gulir berputar, setiap irisan gambar yang membentuk gambar kedua perlu diputar 90 derajat ke kiri atau ke kanan.

Untuk memutar gambar, Anda dapat menggunakan Photoshop atau perangkat lunak pengedit gambar bawaan dari sistem operasi Anda (Anda bahkan dapat menggunakan galeri media WordPress untuk mengedit dan memutar gambar setelah mengunggahnya ke situs Anda.).

Berikut adalah panduan tentang bagaimana gambar harus diputar dalam posisi aslinya saat mengiris gambar.

Berikut adalah gambar aslinya.

Berikut adalah bagaimana irisan gambar harus diputar sebelum mengunggahnya ke situs Anda.

Ini diperlukan agar kita akhirnya bisa mendapatkan efek gulir berikut.

Sekarang kedua gambar dipotong, dipotong, disimpan, dan diputar, Anda siap untuk menambahkannya ke situs Divi Anda. Anda harus memiliki total 16 gambar (8 dari gambar satu dan 8 dari gambar 2).

Bagian 2: Membuat Efek Gulir Transisi Gambar Breakaway di Divi

Setelah irisan gambar siap, kita dapat memulai proses desain di Divi. Berikut cara melakukannya.

Tambahkan Baris #1

Untuk memulai, buat baris empat kolom.

Pengaturan Baris

Buka pengaturan baris dan perbarui yang berikut:

• Lebar Talang: 1
• Lebar Maks: 1080px (desktop), 540px (tablet dan ponsel)
• Padding: 0px atas, 0px bawah
• Luapan Horisontal: terlihat
• Overflow Vertikal: terlihat

Perbarui Bagian Padding

Karena kita akan memposisikan baris kedua kita secara mutlak di atas baris pertama, kita perlu mengeluarkan bantalan atas (dan bawah) dari bagian tersebut sehingga tidak membuang posisi baris kedua. Buka pengaturan bagian dan perbarui yang berikut ini:

• Padding: 0px atas, 0px kiri

Menambahkan Gambar

Di baris pertama, kita akan menambahkan masing-masing dari 8 gambar/irisan yang membentuk gambar pertama. Gambar harus diposisikan di dalam kolom persis seperti yang diiris di photoshop (4 melintang dan 2 ke bawah).

Berikut adalah ilustrasi dari setiap gambar yang diberi label dengan nomor. Beginilah tampilannya setelah semua gambar ditambahkan ke baris.

Gambar #1

Tambahkan modul gambar pertama ke kolom 1.

Kemudian unggah potongan gambar pertama ke modul.

Efek Gulir

Di bawah tab lanjutan, tambahkan efek gulir berikut ke gambar.

• Aktifkan Fading In and Out: YA
• Mulai Opacity: 100% (pada 20% viewport)
• Mid Opacity: 100% (pada 20% viewport)
• Ending Opacity: 0% (pada 50% viewport)

Klik tab Skala dan perbarui yang berikut ini:

• Aktifkan Penskalaan Naik dan Turun: YA
• Skala Awal: 100% (pada area pandang 20%)
• Skala Menengah: 70% (pada 32% – 48% viewport)
• Skala Akhir: 100% (pada 60% viewport)

Klik tab putar dan perbarui yang berikut ini:

• Aktifkan Rotasi: YA
• Rotasi Mulai: 0 derajat (pada 0% viewport)
• Rotasi Pertengahan: 0 derajat (pada area pandang 20%)
• Rotasi Akhir: -90 deg (pada 60% viewport)

Efek gulir akan terlihat seperti ini saat menggulir halaman ke bawah.

Gambar #2

Untuk membuat gambar #2, duplikat gambar #1 dan tempatkan duplikat di kolom 2.

Perbarui modul gambar duplikat dengan gambar #2.

Perbarui Efek Gulir

Kami akan menyimpan sebagian besar efek gulir yang sama terbawa dari gambar #1. Satu-satunya hal yang perlu kita ubah adalah rotasi. Buka tab lanjutan dan ubah rotasi akhir menjadi 90 derajat (bukan -90 derajat) sehingga berputar ke arah yang berlawanan.

• Rotasi Akhir: 90 derajat

Gambar #3

Untuk membuat gambar #3, salin dan tempel gambar #1 ke kolom 3 lalu ubah gambar menjadi gambar #3.

Gambar #4

Untuk membuat gambar #4, salin dan tempel gambar #2 ke kolom 4 dan perbarui gambar ke gambar #4.

Gambar #5

Untuk membuat gambar #5, duplikat gambar #1 sehingga duplikatnya berada tepat di bawah kolom 1.

Perbarui gambar ke gambar #5. Kemudian update efek scroll Fading In dan Out sebagai berikut:

• Mulai Opacity: 100% (pada 0% viewport)
• Mid Opacity: 100% (pada 0% viewport)
• Opacity Akhir: 0% (pada 40% viewport)

Kemudian update efek scroll Scaling Up and Down sebagai berikut:

• Skala Awal: 100% (pada 0% viewport)
• Skala Menengah: 70% (pada 12% – 28% viewport)
• Skala Akhir: 100% (pada 40% viewport)

Dan terakhir, perbarui efek Rotating scroll sebagai berikut:

• Rotasi Mulai: 0 derajat (pada 0% viewport)
• Rotasi Pertengahan: 0 derajat (pada area pandang 0%)
• Rotasi Akhir: 90 derajat (pada 40% viewport)

Gambar #6

Untuk membuat gambar #6, duplikat gambar #5 dan pindahkan ke kolom 2 (di bawah gambar #2).

Perbarui modul gambar dengan gambar #5. Kemudian sesuaikan efek scroll berputar ke arah yang berlawanan (-90 deg) sebagai berikut:

• Rotasi Akhir: -90 derajat

Gambar #7

Untuk membuat gambar #7, duplikat gambar #5 dan pindahkan di bawah gambar #3 di kolom 3. Kemudian perbarui modul gambar duplikat dengan gambar #7.

Gambar #8

Untuk membuat gambar #8, duplikat gambar #6 dan pindahkan di bawah gambar #4 di kolom 4. Kemudian perbarui modul gambar duplikat dengan gambar #8.

Sekarang semua irisan gambar telah ditambahkan ke baris #1 dengan efek scroll breakaway.

Berikut adalah apa yang terlihat seperti sejauh ini.

Tambahkan Baris #2

Baris kedua gambar tidak akan memakan banyak waktu untuk mendesain. Yang perlu kita lakukan adalah menduplikasi baris #1, memperbarui semua gambar dengan yang benar, dan kemudian memberikannya posisi absolut.

Silakan dan duplikat baris #1.

Perbarui Gambar Baris #2

Ingat gambar yang diputar yang kita buat untuk gambar #2. Sekarang, yang perlu kita lakukan adalah mengunggah masing-masing ke lokasi modul gambar yang benar di baris #2.

Perbarui Efek Gulir Gambar

Setelah gambar baru yang diputar berada di tempatnya, kita perlu menghilangkan efek gulir Fading In dan Out dari semua gambar di Baris #2.

Lakukan ini, terapkan mode tampilan gambar rangka dan gunakan multi-pilih untuk memilih semua 8 gambar di baris #2. Kemudian buka pengaturan untuk salah satu gambar yang dipilih untuk menerapkan pengaturan Elemen. Di bawah opsi efek gulir Fading In and Out, perbarui yang berikut ini:

• Aktifkan Fading In and Out: TIDAK

Baris Posisi #2

Langkah terakhir kita adalah memposisikan baris #2 tepat di belakang baris #1. Cara mudah untuk melakukannya adalah dengan memberikan baris dan posisi absolut. Buka pengaturan untuk baris # 2 dan perbarui yang berikut:

• Posisi: Absolut
• Lokasi: Pusat Atas

Hasil Akhir

Untuk melihat hasilnya, Anda mungkin perlu memberi bagian Anda sejumlah besar margin atas dan bawah atau membuat bagian lain di atas dan di bawah desain. Ini akan memberi Anda ruang yang Anda butuhkan untuk melihat efek gulir dengan benar.

Mari kita lihat hasil akhirnya.

Dan ini dia di ponsel.

Pikiran Akhir

Transisi gambar yang memisahkan diri ini adalah desain yang mengesankan dengan sendirinya, tetapi Anda dapat dengan mudah menggunakannya untuk menyampaikan pesan jenis transformasi kepada pengunjung (seperti sebelum dan sesudah). Dan Anda juga tidak harus puas dengan desain ini. Jangan ragu untuk bereksperimen dengan efek gulir yang berbeda untuk membuat transisi gambar yang lebih menakjubkan. Punya ide?

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!