Cara Membuat Kolase Gambar Interaktif Menggunakan Opsi Posisi Divi

Opsi posisi baru Divi membuka pintu untuk membuat tata letak kolase gambar yang unik menggunakan properti posisi absolut. Ini memungkinkan Anda membuat penempatan yang lebih tepat untuk setiap elemen desain Anda. Dan setelah Anda menggabungkannya dengan kombinasi pengaturan desain yang tak terhitung jumlahnya dalam Divi, Anda dapat mendesain beberapa kolase gambar yang sangat menakjubkan.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan opsi posisi bawaan Divi untuk membuat kolase gambar interaktif yang indah untuk situs web Divi Anda dalam hitungan menit.

Mari kita mulai!

Sneak Peek

Berikut adalah sekilas tentang tata letak kolase gambar interaktif yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk meletakkan tangan Anda pada tata letak kolase gambar dari tutorial ini, 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!

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.

Membuat Kolase Gambar Interaktif dengan Opsi Posisi Divi

Mengoptimalkan Baris dan Kolom

Untuk memulai, buat baris satu kolom.

Pengaturan Baris

Selanjutnya, kita perlu memperbarui baris sehingga kita tidak memiliki ruang ekstra di antara modul (melalui lebar talang) sehingga kita akan mengatur lebar talang menjadi 1. Kita juga perlu memastikan bahwa baris mencakup lebar penuh jendela browser jadi kita bisa memanfaatkan unit panjang vw untuk memposisikan gambar kita (satuan panjang vw (lebar viewport) terkait dengan lebar jendela browser). Dengan lebar yang disetel ke 100%, kita dapat menggunakan satuan panjang vw untuk memposisikan gambar kita di dalam baris/kolom sehingga posisinya tetap utuh di semua lebar browser untuk desain responsif yang mulus. Dan untuk menyembunyikan luapan gambar di luar baris, kita perlu menyetel luapan ke tersembunyi.

Untuk melakukannya, optimalkan pengaturan baris sebagai berikut:

Mengatur Tinggi Kolom

Secara default, tinggi kolom ditentukan oleh tinggi konten (atau modul Divi) yang dikandungnya. Modul Divi (seperti semua div dalam HTML) akan memiliki posisi statis secara default yang berarti mereka akan menambahkan ruang/tinggi aktual ke kolom induknya karena diposisikan dalam aliran normal halaman. Namun, Modul Divi yang memiliki posisi absolut, keluar dari aliran normal dan tidak akan menciptakan ruang/ketinggian sebenarnya untuk kolom. Untuk alasan ini, kita perlu menambahkan ketinggian tertentu untuk kolom sehingga kita dapat memposisikan gambar dalam ruang yang telah ditentukan.

Untuk melakukan ini, buka pengaturan baris dan perbarui pengaturan kolom dengan menambahkan CSS Kustom berikut ke Elemen Utama.

height: 40vw;

Di bawah tab telepon, kembalikan ketinggian ke keadaan default karena kami juga mengubah gambar kembali ke posisi statis di telepon. Tambahkan CSS Kustom berikut ke tab telepon:

height: auto !important;

Menambahkan Teks Judul

Dengan set ketinggian kolom, kita dapat mulai menambahkan elemen posisi absolut kita ke kolom. Mari kita mulai dengan menambahkan modul teks untuk judul tata letak kolase gambar kita.

Isi Modul Teks

Kemudian perbarui teks dengan konten berikut:

<h2>Recent Work</h2>

Pengaturan Modul Teks

Kemudian perbarui pengaturan modul teks sebagai berikut:

• Judul 2 Font: Limelight
• Judul 2 Perataan Teks: tengah
• Judul 2 Warna Teks: #24005b
• Judul 2 Ukuran Teks: 5vw (desktop dan tablet), 50px (ponsel)
• Lebar: 100%
• Lebar Maks: 35vw (desktop dan tablet), 100% (ponsel)
• Posisi: Absolute (desktop), Default (telepon)
• Offset Horizontal (desktop): 35vw

Membuat dan Memposisikan Gambar

Sekarang setelah judulnya ada, mari buat gambar pertama untuk kolase gambar interaktif kita. Idenya adalah untuk membuat yang pertama dengan semua pengoptimalan di tempatnya sehingga kita dapat menduplikasinya agar mudah membuat dan memposisikan sisa gambar untuk kolase.

Mengoptimalkan Gambar Pertama dengan Efek Hover, Lightbox, dan Pemosisian Absolut.

Pertama, tambahkan modul gambar di bawah modul teks.

Kemudian unggah gambar ke modul dan pilih opsi untuk membuka gambar di lightbox. Sekarang gambar akan ditampilkan di lightbox saat diklik.

Skala Gambar pada Arahkan kursor

Selain interaksi lightbox, tambahkan efek hover yang menyebabkan gambar menjadi sedikit lebih besar. Untuk melakukannya, perbarui opsi transformasi berikut:

• Skala Transform (arahkan kursor): 115%

Pemosisian Absolut dengan prioritas Indeks Z di Arahkan

Untuk memposisikan gambar kita, kita akan menggunakan posisi absolut dengan satuan panjang vw. Perbarui opsi posisi sebagai berikut:

Di Desktop (dan Tablet)

• Posisi: mutlak
• Lokasi: Kiri Atas
• Offset Vertikal: 5vw
• Offset Horisontal: -2vw

Di Telepon

• Posisi: Default

Saat Melayang

• Indeks Z: 2

Desain Gambar dan Pengaturan Responsif

Kemudian perbarui yang berikut ini:

• Penjajaran Gambar: kiri (desktop), tengah (telepon)
• Lebar: 75% (telepon)
• Lebar Maks: 20vw (desktop dan tablet), 100% (ponsel)
• Margin (telepon): 30px bawah
• Bayangan Kotak: lihat tangkapan layar
• Saturasi: 0% (desktop), 100% (arahkan kursor)

Menggunakan Gambar Pertama sebagai Template untuk Membuat dan Memposisikan Gambar Lain dengan Cepat

Setelah gambar pertama selesai, sangat mudah untuk membuat gambar baru untuk membangun kolase gambar interaktif. Ini adalah alat desain yang kuat juga karena Anda akan dapat menyeret gambar di tempatnya dan menyesuaikan ukuran saat melihat desain secara realtime.

Berikut adalah proses…

1. Gandakan Gambar dengan mengklik ikon duplikat. Gambar duplikat akan diposisikan secara mutlak di tempat yang sama langsung di atas gambar yang Anda duplikasi.
2. Tarik Gambar di Tempat. Karena gambar duplikat mewarisi satuan panjang vw dari gambar sebelumnya, Anda dapat menggunakan ikon seret untuk memposisikan gambar tepat di tempat yang Anda inginkan di dalam baris.
3. Perbarui Gambar dengan yang baru.
4. Sesuaikan ukuran gambar menggunakan opsi ukuran bawaan.

Berikut adalah ilustrasi dari apa yang akan terlihat saat membuat gambar kedua.

Bagian keren dari proses ini adalah posisi (offset vertikal dan horizontal) akan ditentukan setiap kali Anda menyeret gambar ke tempatnya. Tidak perlu memperbarui posisi offset secara manual di pengaturan.

Namun, agar Anda dapat melihat offset yang saya gunakan untuk contoh ini, saya akan menyertakannya untuk setiap gambar di bawah ini bersama dengan penyesuaian ukuran.

Gambar #2 Pembaruan

• Offset Vertikal: 10,06 vw
• Offset Horisontal: 16,51 vw
• Lebar Maks: 18 vw

Gambar #3 Pembaruan

• Offset Vertikal: 24.25vw
• Offset Horisontal: 7.13vw
• Lebar Maks: 20vw

Gambar #4 Pembaruan

• Offset Vertikal: 17.69vw
• Offset Horisontal: 31.91vw
• Lebar Maks: 18vw

Gambar #5 Pembaruan

• Offset Vertikal: 12vw
• Offset Horisontal: 46.82vw
• Lebar Maks: 15vw

Gambar #6 Pembaruan

• Offset Vertikal: 19.13vw
• Offset Horisontal: 58.84vw
• Lebar Maks: 12vw

Gambar #7 Pembaruan

• Offset Vertikal: 28.24vw
• Offset Horisontal: 54.2vw
• Lebar Maks: 10vw

Gambar #8 Pembaruan

• Offset Vertikal: 32.5vw
• Offset Horisontal: 74.04vw
• Lebar Maks: 8vw

Gambar #9 Pembaruan

• Offset Vertikal: 1.01vw
• Offset Horisontal: 75.5vw
• Lebar: 27vw
• Lebar Maks: 27vw

Tambahkan Gambar Latar Belakang

Untuk satu sentuhan terakhir, tambahkan gambar latar belakang ke bagian tersebut dan selesai!

Hasil Akhir

Seperti inilah tampilan galeri gambar interaktif di desktop dan tablet. Perhatikan efek hover yang membawa gambar ke depan, menampilkan versi penuh warna dari gambar, dan menskalakan gambar lebih besar. Kemudian Anda dapat mengklik gambar untuk menunjukkan efek lightbox.

Berikut adalah desain pada tampilan ponsel.

Mengubah Titik Lokasi untuk Gambar untuk Desain Tata Letak yang Berbeda

Karena offset untuk setiap gambar relatif terhadap titik lokasi, kita dapat mengubah titik lokasi asli gambar untuk melihat desain kita datang dari arah yang berbeda dalam hitungan detik.

Untuk melakukan ini, gunakan fitur multi-pilih Divi untuk memilih semua modul gambar. Kemudian buka salah satu pengaturan modul gambar untuk memunculkan modal pengaturan elemen.

Kemudian Anda dapat mengubah lokasi ke masing-masing dari empat sudut untuk struktur tata letak yang berbeda.

Lokasi Pojok Kanan Atas

Lokasi Pojok Kiri Bawah

Lokasi Pojok Kanan Bawah

Pikiran Akhir

Opsi posisi baru Divi sangat kuat dan nyaman. Dan seperti yang telah kita alami dalam tutorial ini, mereka memberi kita beberapa alat desain yang luar biasa untuk merancang tata letak yang unik untuk gambar kita. Semoga kolase gambar interaktif ini bisa menjadi sedikit inspirasi untuk proyek Anda selanjutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!