Cara Menumpuk Item Portofolio dengan Indah dengan Opsi Transform Divi

Opsi transformasi Divi baru telah membuka banyak pintu baru untuk menciptakan desain web yang menarik secara visual. Ini membawa kita selangkah lebih dekat untuk tidak memerlukan perangkat lunak pengedit gambar apa pun saat merancang situs web dari awal. Kita dapat mengubahnya agar terlihat persis seperti yang kita inginkan sambil tetap memiliki desain responsif 100%.

Dalam posting ini, kita akan menggunakan opsi transformasi baru untuk menumpuk item portofolio dengan indah. Ini adalah pendekatan yang bagus untuk menampilkan situs web yang dibuat sebelumnya, misalnya. Kami juga akan memastikan gambar tetap berada di tempatnya, berapa pun ukuran layar yang digunakan pengunjung. Kami harap tutorial ini menginspirasi Anda untuk berkreasi dengan opsi transformasi baru Divi saat menyesuaikan situs web dengan kebutuhan Anda.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya pada ukuran layar yang berbeda.

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Latar Belakang Gradien

Mulailah dengan menambahkan bagian baru ke halaman Anda. Buka pengaturan bagian dan tambahkan latar belakang gradien ke dalamnya.

• Warna 1: #f4f4f4
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 30%
• Posisi Akhir: 30%

Jarak

Lalu, buka tab desain dan ubah nilai padding kustom di pengaturan spasi.

• Padding Atas: 0px (Desktop), 18vw (Tablet), 40vw (Telepon)
• Padding Bawah: 0px (Desktop), 18vw (Tablet), 40vw (Telepon)

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Kemudian, buka pengaturan spasi dan hapus padding default atas dan bawah.

• Padding Atas: 0px
• Padding Bawah: 0px

Menampilkan

Kami juga memastikan kedua kolom muncul bersebelahan pada ukuran layar yang lebih kecil. Untuk melakukannya, kita perlu menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Gambar #1 ke Kolom 1

Unggah Gambar

Sekarang kita dapat mulai menambahkan modul yang berbeda! Agar dapat mengikuti tutorial ini, lanjutkan dan simpan print screen berikut ke komputer Anda:

Unggah layar cetak ke Modul Gambar di kolom pertama.

Perekat

Kemudian, buka tab desain dan aktifkan opsi 'Force Fullwidth'. Setelah Anda melakukannya, gambar akan memenuhi seluruh lebar kolom.

• Paksa Lebar Penuh: Ya

Jarak

Untuk mengecilkan ukuran gambar, kita akan menambahkan beberapa margin kiri dan kanan kustom. Anda akan melihat bahwa kami menggunakan unit viewport untuk memastikan ukuran gambar tetap utuh, berapa pun ukuran layarnya.

• Margin Atas: -10vw
• Padding Kiri: 11vw
• Padding Kanan: 11vw

Berbatasan

Tambahkan '2vw' ke masing-masing sudut di pengaturan perbatasan berikutnya.

Bayangan Kotak

Bersamaan dengan bayangan kotak.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Ubah Terjemahan

Sekarang kita bisa mulai mengubah gambar! Tambahkan nilai berikut ke tab terjemahkan transformasi dari opsi transformasi:

• Bawah: -26vw
• Kanan: -2vw

Nilai yang Anda tambahkan di sini bergantung pada lebar dan tinggi gambar Anda, jadi jika Anda menggunakan gambar yang berbeda, Anda harus mengubah nilainya. Pastikan Anda menggunakan unit viewport untuk memastikan posisi gambar tetap sama di semua ukuran layar.

Ubah Putar

Pindah ke tab putar putar dan putar gambar yang sesuai:

• Kiri: 24 derajat
• Tengah: 46 derajat
• Kanan: -7deg

Terjemahkan Miring

Last but not least, aktifkan translate skew dengan nilai berikut:

• Bawah: -4deg
• Kanan: 24 derajat

Tambahkan Modul Gambar #2 ke Kolom 1

Unggah Gambar

Ke Modul Gambar berikutnya! Simpan layar cetak berikut ke komputer Anda atau gunakan layar cetak lain pilihan Anda:

Lanjutkan dengan mengunggah layar cetak ke Modul Gambar kedua di kolom 1.

Perekat

Kemudian, buka pengaturan ukuran dan aktifkan opsi 'Force Fullwidth'.

• Paksa Lebar Penuh: Ya

Jarak

Kami mengecilkan ukuran gambar dan membuatnya tumpang tindih dengan gambar sebelumnya dengan menggunakan beberapa nilai margin khusus dalam pengaturan spasi.

• Margin Atas: -81vw (Desktop), -50vw (Tablet & Ponsel)
• Margin Kiri: 11vw
• Margin Kanan: 11vw

Berbatasan

Kami akan menambahkan '2vw' ke masing-masing sudut di pengaturan perbatasan berikutnya.

Bayangan Kotak

Dan kita juga akan menambahkan bayangan kotak. Perhatikan bagaimana kita menggunakan bayangan kotak yang lebih gelap untuk gambar item portofolio kedua. Ini akan membantu Anda menciptakan kedalaman yang lebih di antara item portofolio.

• Kekuatan Buram Bayangan Kotak: 150px
• Warna Bayangan: rgba (0,0,0,0.6)

Ubah Terjemahan

Kemudian, buka pengaturan transformasi dan ubah nilai terjemahan transformasi:

• Bawah: -8vw
• Kanan: 0px

Sekali lagi, nilai-nilai ini sangat bergantung pada bagaimana Anda ingin memposisikan layar cetak dan dimensi apa yang dimiliki layar cetak Anda. Semakin kecil gambar, semakin Anda harus mendorongnya ke kiri dengan menggunakan nilai negatif yang lebih besar.

Ubah Putar

Pindah ke tab transform rotate dan mainkan dengan ketiga nilai.

• Kiri: 24 derajat
• Tengah: 46 derajat
• Kanan: -7deg

Terjemahkan Miring

Last but not least, ubah nilai terjemahan miring:

• Bawah: -4deg
• Kanan: 24 derajat

Tambahkan Modul Gambar #3 ke Kolom 1

Unggah Gambar

Ke Modul Gambar berikutnya dan terakhir yang kita butuhkan di kolom 1. Simpan layar cetak berikut ke komputer Anda atau gunakan layar cetak lain pilihan Anda:

Tambahkan layar cetak yang telah Anda simpan ke Modul Gambar baru.

Perekat

Kemudian, buka pengaturan ukuran dan aktifkan opsi 'Force Fullwidth'.

• Paksa Lebar Penuh: Ya

Jarak

Buka pengaturan spasi berikutnya dan ubah nilai margin yang sesuai:

• Margin Atas: -107vw
• Margin Kiri: 19vw
• Margin Kanan: 19vw

Berbatasan

Lanjutkan dengan menambahkan '2vw' ke masing-masing sudut Modul Gambar.

Bayangan Kotak

Tambahkan bayangan kotak berikutnya. Sekali lagi, kami menggunakan warna bayangan yang lebih kuat daripada yang kami gunakan untuk dua Modul Gambar sebelumnya.

• Kekuatan Buram Bayangan Kotak: 200px
• Warna Bayangan: rgba (0,0,0,0.82)

Ubah Terjemahan

Lalu, buka pengaturan transformasi dan ubah nilai terjemahan transformasi:

• Bawah: -42vw
• Kanan: 11vw

Ubah Putar

Pindah ke tab transform rotate dan buat beberapa perubahan di sana juga.

• Kiri: 24 derajat
• Tengah: 46 derajat
• Kanan: -7deg

Terjemahkan Miring

Last but not least, ubah nilai translate skew.

• Bawah: -4deg
• Kanan: 24 derajat

Tambahkan Modul Teks Judul ke Kolom 2

Tambahkan Salinan H2

Ke kolom kedua! Tambahkan Modul Teks dengan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Buka pengaturan teks H2 berikutnya dan buat beberapa perubahan.

• Judul 2 Font: Roboto
• Judul 2 Berat Font: Tipis
• Judul 2 Perataan Teks: Kiri
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 5vw (Desktop), 6vw (Tablet), 7vw (Telepon)
• Spasi Judul 2 Huruf: -1px

Jarak

Lanjutkan dengan menambahkan beberapa nilai margin kustom dalam pengaturan spasi.

• Margin Atas: 35vw (Desktop), 10vw (Tablet), 0vw (Telepon)
• Margin Kiri: -4vw
• Margin Kanan: 4vw

Tambahkan Modul Pembagi ke Kolom 2

Visibilitas

Modul selanjutnya yang kita butuhkan di kolom 2 adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #8193fa

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 8px
• Lebar: 28%

Jarak

Dan tambahkan beberapa nilai margin khusus.

• Margin Atas: 1vw
• Margin Kiri: -4vw
• Margin Kanan: 4vw

Tambahkan Modul Teks Deskripsi ke Kolom 2

Tambah isi

Modul berikutnya yang kita butuhkan di kolom 2 adalah Modul Teks lainnya. Tambahkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Kemudian, buka pengaturan teks dan buat beberapa perubahan.

• Font Teks: Buka Sans
• Ukuran Teks: 0.6vw (Desktop), 1.2vw (Tablet), 1.8vw (Telepon)
• Tinggi Baris Teks: 3.1em (Desktop), 2.7em (Tablet), 2.6em (Telepon)
• Orientasi Teks: Kiri

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Atas: 1vw
• Margin Kiri: -4vw
• Margin Kanan: 4vw

Tambahkan Modul Tombol ke Kolom 2

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan untuk menyelesaikan desain adalah Modul Tombol. Tambahkan beberapa salinan pilihan.

Pengaturan Tombol

Kemudian, buka tab desain dan ubah pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna 1: #5627ba
• Warna 2: #8fb5fc
• Arah Gradien: 122deg
• Lebar Batas Tombol: 0px
• Berat Huruf: Sangat Tebal
• Gaya Font: Huruf Besar

Jarak

Ubah margin kustom dan nilai padding juga.

• Margin Atas: 2vw (Desktop), 3vw (Tablet), 5vw (Telepon)
• Margin Bawah: 6vw (Tablet), 8vw (Telepon)
• Margin Kiri: -4vw
• Margin Kanan: 4vw
• Padding Atas: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Padding Kiri: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)
• Padding Kanan: 3vw (Desktop), 5vw (Tablet), 7vw (Telepon)

Bayangan Kotak

Terakhir, tambahkan bayangan kotak halus dan selesai!

• Kekuatan Buram Bayangan Kotak: 40px
• Warna Bayangan: rgba(0,0,0,0.3)

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan opsi transformasi baru Divi. Lebih khusus lagi, kami telah menumpuk item portofolio untuk membuat desain yang bagus dan menarik secara visual. Kami juga telah memastikan bahwa gambar terlihat bagus di semua ukuran layar. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!