Membuat Bagian Pahlawan Polaroid dengan Opsi Transform Divi

Bagian pahlawan kreatif membuat situs web berkesan dan istimewa. Desain bagian pahlawan polaroid ini membangkitkan rasa nafsu berkelana vintage. Dengan menggunakan opsi transformasi kolom, polaroid dapat diatur dengan cara apa pun yang Anda inginkan, seolah-olah tersebar di atas meja.

Anda dapat membuat ulang desain bagian pahlawan polaroid ini dengan gambar persegi Anda sendiri. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Desktop

Seluler

Unduh Desain Bagian Pahlawan Polaroid GRATIS

Untuk mendapatkan desain bagian pahlawan polaroid gratis, 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!

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan.

Pembagi Bawah

Tambahkan pembagi bawah hijau mint.

• Penempatan Pembagi: Bawah
• Gaya Pembagi: #12
• Warna Pembagi: Hijau Mint #d2f2d0
• Tinggi Pembagi: 23vw

Jarak

Sesuaikan jarak bagian.

• Margin Atas: 7vw
• Margin Bawah: 0px
• Padding Atas dan Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian Anda. Pilih struktur kolom berikut:

Perekat

Sekarang, sesuaikan ukuran baris.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 90vw
• Lebar Maks: 100%

Jarak

Selanjutnya, sesuaikan padding atas dan bawah dalam pengaturan spasi.

• Padding Atas dan Bawah: 0px

Menampilkan

Tambahkan satu baris kode CSS ke elemen utama baris untuk menjaga kolom di samping satu sama lain pada ukuran layar yang lebih kecil.

• CSS Kustom – Elemen Utama: tampilan: fleksibel;

display: flex;

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar Persegi

Tambahkan modul gambar ke kolom 1 dan unggah gambar persegi.

Penyelarasan

Sekarang, sesuaikan perataan modul.

• Penyelarasan Modul: Pusat

Perekat

Kemudian, buat modul fullwidth.

• Paksa Lebar Penuh: Ya

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Tambahkan modul teks dan masukkan beberapa konten. Kami akan menggunakan kata "polaroid".

Teks

Gaya font teks.

• Font Teks: Advent Pro
• Perataan Teks: Tengah
• Warna Teks: Abu-abu Sangat Gelap #474747
• Ukuran teks:
  • Desktop: 1vw
  • Tablet + Telepon: 2vw
• Spasi Surat Teks: 0.1vw
• Tinggi Baris Teks: 1.8em

Perekat

Gunakan '100%' untuk lebar dalam pengaturan ukuran.

• Lebar: 100%

Jarak

Sekarang sesuaikan jaraknya.

• Margin Atas: 1vw

Modul Klon Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Ubah Gambar & Salinan Duplikat

Ubah gambar di setiap modul gambar duplikat. Jika desain Anda membutuhkannya, ubah konten teks juga.

Pengaturan Kolom 1

Latar belakang

Lanjutkan dengan membuka kolom 1 pengaturan baris. Atur latar belakang menjadi putih untuk menciptakan efek polaroid.

• Warna Latar Belakang: Putih #ffffff

Jarak

Tambahkan beberapa bantalan bawah untuk membuat batas bawah polaroid yang lebih lebar.

• Padding Bawah: 2vw

Berbatasan

Tambahkan batas untuk menyelesaikan visual polaroid.

• Lebar Perbatasan 4 Sisi: 1vw
• Lebar Batas Atas: 2vw
• Lebar Perbatasan Kanan: 2vw
• Lebar Batas Bawah: 1vw
• Lebar Batas Kiri: 2vw
• Warna Perbatasan: Putih #ffffff

Bayangan Kotak

Selesaikan pengaturan kolom 1 dengan menambahkan bayangan kotak halus.

• Bayangan Kotak: #1

Perluas Pengaturan Kolom 1

Gunakan opsi perpanjangan gaya untuk memperluas pengaturan kolom.

• Kembali ke jendela pengaturan baris utama dan klik tiga titik di sebelah kanan tab kolom pertama.
• Pilih 'perpanjang gaya item' dan pilih 'di seluruh baris ini'.

Kolom 1 Mengubah Gaya

Sekarang, sesuaikan pengaturan transformasi di kolom pertama.

• Transform Terjemahkan: sumbu x -11vw, sumbu y -6vw
• Transform Rotate: 341 derajat, opsi pertama

Kolom 2 Mengubah Gaya

Selanjutnya, sesuaikan pengaturan transformasi untuk kolom kedua.

• Transform Terjemahkan: sumbu x -22w, sumbu y 0vw
• Transform Rotate: 10 derajat, opsi pertama

Kolom 3 Mengubah Gaya

Terakhir, sesuaikan pengaturan transformasi untuk kolom tiga.

• Skala Transform: 68% kedua sumbu
• Transform Terjemahkan: sumbu x -46w, sumbu y 12vw
• Transform Rotate: 31 derajat, opsi pertama

Tambahkan Bagian Baru

Latar belakang

Tambahkan bagian baru dan terapkan latar belakang hijau mint ke bagian tersebut.

• Warna Latar Belakang: Hijau Mint #d2f2d0

Pembagi Bawah

Berikan bagian itu pembagi bawah.

• Penempatan Pembagi: Bawah
• Gaya Pembagi: #12
• Warna Pembagi: Putih #ffffff
• Tinggi Pembagi: 23vw

Jarak

Hapus bantalan atas default.

• Padding Atas: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru dengan 3 kolom.

Salin dan Tempel Gaya Baris

Menggunakan tampilan gambar rangka, salin dan tempel gaya baris dari bagian pertama

• Pertama, klik pada tiga titik di sebelah kanan menu baris di dalam bagian pertama. Pilih 'salin gaya baris'.
• Kemudian, klik pada tiga titik di sebelah kanan menu baris di bagian kedua. Pilih 'tempel gaya baris'.

Salin dan Tempel Pengaturan Kolom

Sekarang, salin pengaturan kolom di baris pertama dan tempel ke kolom 1 dan 2 di baris baru.

• Pertama, buka pengaturan baris di baris pertama.
• Kedua, klik pada tiga titik di sisi kanan tab kolom pertama dan pilih 'salin gaya item'.
• Kemudian, gulir ke bawah ke baris baru dan buka tab pengaturan.
• Terakhir, klik tiga titik di sisi kanan kolom pertama dan pilih 'paste item styles'.

Kolom 1 Mengubah Gaya

Sekarang, sesuaikan gaya transformasi di kolom 1.

• Skala Transformasi: 75% kedua sumbu
• Transform Terjemahkan: sumbu x -8w, sumbu y -14vw
• Transform Rotate: 35 derajat opsi pertama

Kolom 2 Mengubah Gaya

Kemudian, ubah gaya transformasi di kolom 2.

• Transform Terjemahkan: sumbu x -17w, sumbu y 2vw
• Transform Rotate: 346 derajat opsi pertama

Tambahkan Modul Gambar

Duplikat dan Seret Modul Gambar

Sekarang, kembali ke tampilan wireframe untuk menduplikasi dan menyeret dua modul gambar.

• Pertama, duplikat modul gambar pertama di bagian pertama dua kali.
• Kemudian, seret ke kolom pertama dan kedua di bagian kedua.
• Ubah gambar di setiap modul untuk gambar persegi baru.

Tambahkan Modul Teks

Duplikat dan Seret Modul Teks

Setelah gambar, lakukan hal yang sama dengan modul teks. Gandakan dari bagian pertama dan seret ke bagian kedua.

• Dalam tampilan gambar rangka, duplikat modul teks dari kolom pertama di bagian pertama dua kali.
• Sekarang, seret modul teks baru ke kolom 1 dan 2 di bagian kedua.
• Jika Anda ingin mengubah konten, lakukan sekarang.

Tambahkan Modul Teks ke Kolom 3

Tambah isi

Klik pada simbol plus di kolom ketiga dan tambahkan modul teks. Masukkan beberapa konten H2 dan paragraf.

Teks

Gaya teks sebagai berikut.

• Font Teks: Advent Pro
• Perataan Teks: Tengah
• Warna Teks: Abu-abu Gelap #848484
• Ukuran teks:
  • Desktop: 1vw
  • Tablet + Telepon: 1.9vw
• Spasi Surat Teks: 0.1vw
• Tinggi Baris Teks:
  • Desktop: 1.2em
  • Tablet + Telepon: 1.3em

Teks Judul

Sekarang, gaya teks H2.

• Judul: H2
• Huruf H2: Adamina
• Berat Huruf H2: Tebal
• Warna Huruf H2: Abu-abu Sangat Gelap #444444
• Ukuran Huruf H2:
  • Desktop: 2vw
  • Tablet + Telepon: 3vw
• Spasi Huruf H2: 4px
• Tinggi Garis H2:
  • Desktop: 1.7vw
  • Tablet + Telepon: 1.5vw

Perekat

Kemudian, sesuaikan ukurannya.

• Lebar:
  • Desktop: 60%
  • Tablet: 91%
  • Telepon: 100%
• Penyelarasan Modul: Pusat

Jarak

Terakhir, sesuaikan jarak.

• Margin Atas: -12vw

Tambahkan Modul Tombol ke Kolom 3

Tambahkan Salinan

Klik pada simbol plus di bawah teks dan tambahkan modul tombol. Tambahkan beberapa salinan ke tombol.

Penyelarasan

Ubah perataan tombol.

• Penjajaran: Pusat

Gaya Tombol Kustom

Gaya tombol yang sesuai.

• Ukuran Teks Tombol:
  • Desktop: 1vw
  • Tablet: 2.4vw
  • Telepon: 2.3vw
• Lebar Batas Tombol: 0px
• Warna Teks Tombol: Hitam #000000
• Jarak Huruf Tombol: 4px
• Font Tombol: Advent Pro
• Berat Huruf Tombol: Tebal

Jarak

Terapkan nilai margin atas.

• Margin Atas: 2vw

Tambahkan Modul Pembagi ke Kolom 3

Visibilitas

Di bawah tombol, tambahkan pembagi dan gaya sebagai berikut.

• Visibilitas: Ya

Garis

Berikan pembagi warna hijau cerah.

• Warna Garis: #55f252

Perekat

Ubah pengaturan ukuran pembagi dan selesai!

• Pembagi Berat
  • Desktop: 7px
  • Tablet + Telepon: 4px
• Lebar:
  • Desktop: 10%
  • Tablet + Telepon: 30%
• Penyelarasan Modul: Pusat

Pratinjau

Mari kita lihat kembali desain bagian pahlawan polaroid yang telah selesai di berbagai ukuran layar.

Desktop

Seluler

Ini adalah Bungkus!

Dalam posting ini, kami menunjukkan kepada Anda cara membuat ulang bagian pahlawan polaroid menggunakan opsi transformasi Divi. Ini adalah cara yang bagus untuk menampilkan banyak gambar di bagian pahlawan halaman Anda. Kami berharap desain ini akan menginspirasi desain bagian pahlawan kreatif Anda sendiri! Jika Anda memiliki pertanyaan, pastikan Anda meninggalkan komentar di bagian komentar di bawah.