Cara Menggunakan Opsi Posisi Divi untuk Membuat Kumpulan Gambar
Diterbitkan: 2020-06-18Apakah Anda atau mencari tampilan baru yang segar untuk galeri gambar atau hanya menginginkan tampilan yang bagus untuk gambar produk, tutorial ini akan membantu. Biasanya, saat menambahkan gambar ke situs web Divi, kami dapat membatasi desain menjadi satu gambar per kolom. Meskipun ini secara tradisional merupakan desain yang aman dan bersih, Anda mungkin menemukan bahwa mengelompokkan gambar dalam kolom yang sama dapat membuat desain bundel gambar yang indah yang tampak hebat dalam tata letak kolom tunggal atau ganda.
Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana menggunakan opsi posisi bawaan Divi untuk merancang 3 bundel gambar kreatif yang dapat Anda gunakan untuk situs web Anda dalam berbagai cara.
Mari kita mulai.
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Desain Bundel Gambar #1
Mulai Desain Bangunan #1
Desain Bundel Gambar #2
Mulai Desain Bangunan #2
Desain Bundel Gambar #3
Mulai Desain Bangunan #3
Unduh Tata Letaknya GRATIS
Untuk mendapatkan desain 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 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.
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 bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Merancang Bundel Gambar #1
Untuk desain bundel gambar pertama ini, kita akan memposisikan dua gambar (sedikit diputar) di setiap sisi gambar tengah.
Mulailah dengan menambahkan baris satu kolom ke bagian reguler.
Tambahkan Gambar Tengah
Di dalam kolom, tambahkan modul gambar.
Kemudian unggah gambar ke modul.
Untuk gambar-gambar ini, kita akan menggunakan tangkapan layar dari Paket Tata Letak Pelatih Kebugaran. Masing-masing harus berukuran 880px kali 1200px.
Buka pengaturan gambar dan perbarui yang berikut:
- Lebar: 50%
- Penyelarasan Modul: tengah
Tambahkan bayangan kotak sebagai berikut:
- kotak Bayangan: lihat tangkapan layar
- Posisi Vertikal Bayangan Kotak: 0px
- Kekuatan Kabur Bayangan Kotak: 38px
- Kekuatan Penyebaran Bayangan Kotak: 5px
- Warna Bayangan: rgba(0,0,0,0.2)
Kemudian atur Z Index ke 1 sehingga tetap di atas gambar lain dalam bundel.
- Indeks Z: 1
Tambahkan Gambar Kiri
Untuk membuat gambar kiri dalam bundel, tambahkan gambar baru di bawah gambar tengah.
Perbarui gambar dengan yang baru (pastikan ukurannya sama untuk hasil terbaik).
Di bawah tab desain, perbarui lebarnya sebagai berikut:
- lebar: 30%
Kemudian tambahkan bayangan kotak sebagai berikut:
- Bayangan Kotak: lihat tangkapan layar
- Warna Bayangan: rgba(0,0,0,0.2)
Selanjutnya, beri gambar posisi absolut di lokasi tengah kiri sehingga letaknya berdekatan dengan gambar tengah di sisi kiri.
- posisi: mutlak
- Lokasi: kiri tengah
Untuk memberikan sedikit rotasi pada gambar, perbarui opsi transform rotate sebagai berikut:
Transformasi Putar Sumbu Z: -10deg
Tambahkan Gambar yang Tepat
Untuk membuat gambar kanan, buka kotak Layers, dan duplikat gambar kiri.
Beri label pada modul gambar (gambar kiri, gambar kanan, dll.) sehingga Anda dapat dengan mudah mengidentifikasinya nanti. Kemudian buka pengaturan untuk gambar duplikat dan sesuaikan lokasinya sebagai berikut:
- lokasi: kanan tengah
Kemudian sesuaikan opsi transform rotate sebagai berikut:
- Transform Rotate Z Index: 10deg
Jangan lupa untuk menukar gambar duplikat dengan yang baru.
Sekarang lihat hasilnya sejauh ini.
Menambahkan Bundel Gambar ke Beberapa Kolom
Karena gambar diposisikan dalam satu kolom, Anda dapat dengan mudah menambahkan desain bundel gambar ini ke beberapa tata letak kolom.
Untuk menambahkan bundel gambar ke beberapa kolom, duplikat baris yang berisi bundel gambar saat ini.
Di baris duplikat, duplikat kolom untuk membuat kolom lain dengan bundel gambar disertakan. Ini akan membuat bundel gambar dalam tata letak dua kolom.
Untuk membuat baris tiga bundel gambar, duplikat baris dua kolom, lalu duplikat salah satu kolom di baris duplikat. Ini akan memberi Anda tata letak tiga kolom.
Hasil Akhir
Berikut adalah desain akhir untuk bundel gambar #1.
Merancang Bundel Gambar #2
Desain berikutnya ini menampilkan bundel gambar dengan lima gambar – satu gambar di tengah dan empat di setiap sudut kolom.
Untuk memulai, buat bagian reguler baru dengan seperempat baris kolom seperempat seperempat.
Tambahkan Gambar Tengah
Di kolom tengah, tambahkan modul gambar.
Kemudian unggah gambar ke modul. Kami menggunakan gambar dari Paket Tata Letak Toko Furnitur (masing-masing 800px kali 1200).
Di bawah tab desain, perbarui yang berikut ini:
- Warna Latar Belakang: #f7f3ec
- Lebar: 55%
- Penyelarasan Modul: tengah
- Margin: 0px
- Padding: 5% atas, 5% bawah, 5% kiri, 5% kanan
Di bawah tab lanjutan, naikkan Indeks Z sebanyak 1 untuk memastikan gambar tetap berada di atas gambar lain dalam ruang Z.
- Indeks Z: 1
Tambahkan Gambar Kiri Atas
Untuk menambahkan gambar kiri atas, tambahkan modul gambar baru di bawah gambar tengah di kolom tengah.
Unggah gambar baru ke modul.
Kemudian perbarui pengaturan desain sebagai berikut:
- Lebar: 40%
- Margin: 0px bawah
Spasi Kolom
Tinggi kolom ditentukan oleh tinggi gambar tengah dan jumlah padding atas dan bawah yang kita tambahkan. Jadi, untuk memberikan jarak yang tepat pada gambar yang benar-benar diposisikan, kita perlu menambah tinggi kolom dengan meningkatkan padding atas dan bawah.
- Padding (desktop): 12% atas, 12% bawah
- Padding (tablet): 24% atas, 24% bawah
Selanjutnya, berikan gambar kiri atas posisi absolut sebagai berikut:
- Posisi: Absolut
- Lokasi: kiri atas
Tambahkan Gambar Kanan Atas
Sekarang gambar kiri atas sudah terpasang, duplikat gambar untuk membuat gambar kanan atas.
(Pada titik ini, ada baiknya untuk menambahkan label ke setiap gambar untuk memudahkan identifikasi nanti.)
Buka gambar duplikat (kanan atas) dan perbarui lokasi posisi absolut:
- Lokasi: kanan atas
Tambahkan Gambar Kiri Bawah
Untuk membuat gambar kiri bawah, duplikat gambar kanan atas, dan perbarui label sesuai kebutuhan.
Buka pengaturan untuk gambar duplikat (kiri bawah) dan perbarui lokasi posisi absolut:
- Lokasi: kiri bawah
Tambahkan Gambar Kanan Bawah
Untuk membuat gambar kanan bawah, duplikat gambar kiri bawah, dan perbarui label sesuai kebutuhan. Kemudian perbarui gambar dan berikan lokasi baru:
- Lokasi: kanan bawah
Tambahkan Aksen Desain Bayangan Kotak
Untuk menambahkan aksen desain yang bagus, kita dapat menambahkan bayangan kotak pada gambar kiri atas sebagai berikut:
- Bayangan Kotak: lihat tangkapan layar
- Posisi Horizontal Bayangan Kotak: -170px
- Posisi Vertikal Bayangan Kotak: 170px
- Warna Bayangan: rgba(36,57,74,0.07)
Tambahkan aksen desain bayangan kotak gratis ke gambar kanan atas sebagai berikut:
- Bayangan Kotak: lihat tangkapan layar
- Posisi Horizontal Bayangan Kotak: 170px
- Posisi Vertikal Bayangan Kotak: 170px
- Warna Bayangan: rgba(36,57,74,0.07)
Tambahkan Teks ke Kolom Kiri
Untuk menambahkan beberapa teks ke desain, tambahkan modul teks baru ke kolom kiri.
Isi
Kemudian perbarui konten dengan yang berikut:
<h2>Image Bundle</h2>
Desain Teks
Di bawah tab desain, perbarui yang berikut ini:
- Judul 2 Font: Montserrat
- Judul 2 Gaya Font: TT
- Judul 2 Perataan Teks: kanan
- Judul 2 Warna Teks: #24394a
- Judul 2 Ukuran Teks: 34px
- Spasi Judul 2 Huruf: 4px
- Pos 2 Tinggi Baris: 1.3em
Padding Kolom Kiri
Untuk menurunkan teks sedikit, buka pengaturan untuk kolom kiri, dan perbarui padding berikut:
- Padding: 20% tersisa
Tambahkan Teks ke Kolom Kanan
Untuk membuat teks kolom kanan, salin modul teks di kolom kiri, dan tempel di kolom kanan. Kemudian buka pengaturan teks dan perbarui yang berikut:
- Judul 2 Perataan Teks: kiri
Padding Kolom Kanan
Sama seperti yang kita lakukan untuk kolom kiri, tambahkan padding berikut ke kolom kanan (kolom 3) untuk menurunkan modul teks.
- Padding: 33% atas
Latar Belakang Bagian
Untuk menyelesaikan desain, buka pengaturan bagian dan tambahkan warna latar belakang berikut:
- Warna Latar Belakang: #f7f3ec
Inilah hasilnya sejauh ini. 
Menambahkan Bundel Gambar ke Beberapa Kolom
Untuk menambahkan bundel gambar ini ke beberapa kolom, duplikat baris dan kemudian hapus kolom kiri dan kanan di baris duplikat, hanya menyisakan kolom dengan bundel gambar.
Menggunakan multi-pilih, pilih gambar kiri atas dan gambar kanan atas. Buka pengaturan, dan keluarkan bayangan kotak.
Kemudian duplikat kolom sekali atau dua kali untuk membuat beberapa kolom dengan bundel gambar yang disertakan.
Jika Anda membuat tata letak tiga kolom untuk bundel gambar Anda, buka pengaturan kolom untuk setiap kolom dan perbarui padding sebagai berikut:
- bantalan: 8% atas, 8% bawah
Hasil Akhir
Berikut adalah hasil akhirnya.
Dan ini dia di ponsel.
Desain Bundel Gambar #3
Untuk desain bundel gambar terakhir ini, kita akan memposisikan 5 gambar berdampingan dengan rotasi 3D yang halus untuk membuat tampilan yang bagus untuk hal-hal seperti tema anak atau paket tata letak.
Menambahkan baris
Untuk memulai, tambahkan baris satu kolom ke bagian reguler.
Tambahkan Gambar Tengah
Di dalam baris, tambahkan modul gambar.
Kemudian unggah gambar ke modul gambar. Kami menggunakan tangkapan layar 880px kali 1200px yang sama dari Paket Tata Letak Pelatih Kebugaran yang kami gunakan untuk desain #1.
Di bawah tab desain, perbarui opsi ukuran sebagai berikut:
- Lebar: 30%
- Penyelarasan Modul: tengah
Kemudian beri gambar bayangan kotak yang halus:
- Bayangan Kotak: lihat tangkapan layar
- Posisi Vertikal Bayangan Kotak: -12px
- Kekuatan Buram Bayangan Kotak: 28px
- Warna Bayangan: rgba (0,0,0,0.11)
Selanjutnya, keluarkan margin bawah default dengan mengaturnya ke 0px.
- Margin: 0px bawah
Untuk memastikan gambar tetap berada di atas gambar lain saat tumpang tindih, sesuaikan Indeks Z.
- Indeks Z: 2
Tambahkan Perspektif Kolom
Sebelum menambahkan sisa gambar ke bundel gambar, kita perlu menambahkan CSS khusus ke kolom yang akan menambahkan perspektif ke gambar saat memutarnya menggunakan opsi transformasi. Ini menciptakan efek 3D yang realistis.
Tambahkan Gambar Kiri Tengah
Sekarang setelah kita memiliki perspektif, kita dapat mulai menambahkan gambar lainnya.
Untuk membuat gambar kiri tengah, duplikat gambar tengah.
Perbarui label gambar di kotak Lapisan sesuai kebutuhan, lalu perbarui modul gambar duplikat dengan gambar baru.
Buka pengaturan untuk gambar dan perbarui lokasi posisi absolut dan Indeks Z sebagai berikut:
- Lokasi: kiri bawah
- Indeks Z: 1
Kemudian tambahkan opsi transformasi berikut untuk memposisikan dan memutar gambar.
- Transformasi Terjemahkan X Sumbu: 75%
- Transformasi Putar X Sumbu: 30deg
Tambahkan Gambar Kiri
Untuk membuat gambar kiri, duplikat gambar kiri tengah yang baru saja kita buat.
Buka pengaturan untuk gambar baru dan perbarui lebarnya:
- Lebar: 20%
Kemudian sesuaikan opsi transform translate sebagai berikut:
- Transformasi Terjemahkan X Sumbu: 0px
Kemudian sesuaikan Z Index agar gambar tetap berada di belakang gambar kiri tengah.
- Indeks Z: 0
Tambahkan Gambar Kanan Tengah
Selanjutnya, kita akan menambahkan gambar kanan tengah ke bundel gambar.
Untuk membuat gambar, buka popup Layers. Kemudian duplikat gambar kiri tengah, seret gambar duplikat di bawah gambar kiri, lalu beri label yang sesuai (mis. "gambar kanan tengah").
Buka pengaturan untuk gambar kanan tengah dan ubah lokasi posisi absolut sebagai berikut:
- Lokasi: kanan bawah
Kemudian sesuaikan opsi transformasi sebagai berikut:
- Transformasi Terjemahkan Sumbu X: -75%
- Transformasi Putar X Sumbu: -30deg
Tambahkan Gambar Kanan
Untuk membuat gambar kanan (yang terakhir), kita dapat menduplikasi gambar kiri. Kemudian seret gambar duplikat di bawah gambar kanan tengah dan beri label "gambar kanan".
Buka pengaturan gambar kanan dan perbarui lokasi posisi absolut sebagai berikut:
- Lokasi: kanan bawah
Selanjutnya, sesuaikan rotasi transformasi.
- Transformasi Putar X Sumbu: -30deg
Lihat hasilnya sejauh ini.
Dan ini adalah bundel gambar yang sama yang ditambahkan ke beberapa kolom.
Pikiran Akhir
Setelah kami memahami cara kerja opsi posisi absolut Divi, kami dapat menggunakannya untuk membuat beberapa desain bundel gambar yang cukup mengagumkan. Bagian terbaik tentang bundel gambar ini adalah bahwa mereka ada dalam satu kolom sehingga mereka akan terlihat bagus di beberapa kolom dan juga berskala sempurna di seluler.
Saya harap ini memberi Anda inspirasi untuk membuat tampilan gambar yang luar biasa untuk proyek Anda berikutnya.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!