Cara menggunakan Perspektif dengan Transform Options untuk Mendesain Dinding Foto 3D di Divi

Merancang dinding foto 3D sepertinya sesuatu yang hanya mungkin dilakukan dengan menggunakan editor foto seperti Photoshop atau Sketch. Tapi tidak! Saat ini ada banyak sekali desain yang tampaknya mustahil yang dapat Anda buat di web hanya dengan CSS. Dan dengan pembuat halaman seperti Divi, Anda bahkan tidak perlu tahu banyak tentang CSS untuk membuat desain semacam ini. Itu sebabnya hari ini, saya akan menunjukkan cara mendesain dinding foto 3D di Divi.

Caranya adalah dengan menggunakan properti css perspektif. Dengan hanya satu baris CSS yang ditambahkan ke elemen induk, Anda dapat menggunakan opsi transformasi bawaan Divi untuk memutar item menjadi desain 3D yang nyata.

Mari kita mulai!

Sneak Peek

Berikut ini adalah sneak peek dinding Foto 3D yang akan kita desain hari ini.

Unduh contoh desain Dinding Foto 3D Layout GRATIS

Untuk mendapatkan desain dinding foto 3D 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?

Berlangganan Saluran Youtube Kami

Mulai

Untuk memulai tutorial ini, yang Anda butuhkan hanyalah Tema Divi yang terinstal dan aktif. Anda akan membutuhkan beberapa gambar untuk dikerjakan, jadi silakan gunakan gambar yang sama yang saya gunakan dari Paket Tata Letak Agen Perjalanan. Setelah itu, Anda perlu membuat halaman baru, memberikan halaman dan judul, dan menggunakan Divi Builder untuk membangun di bagian depan. Kemudian pilih opsi "membangun dari awal". Itu dia. Kanvas desain Anda menunggu!

Memahami Cara Kerja Perspektif dengan Transform Options

Jika Anda pernah mengikuti kelas seni dasar, Anda mungkin akrab dengan perspektif. Ini adalah teknik yang digunakan oleh seniman untuk menggambar objek yang tampak 3D meskipun ada di selembar kertas atau kanvas 2D. Dalam desain web, Anda dapat memposisikan elemen dalam posisi 3D menggunakan properti transformasi. Di Divi, opsi transformasi ini ada di dalam pembuat Divi. Properti transformasi utama yang menempatkan elemen dalam posisi 3D adalah rotasi transformasi, yang memungkinkan Anda memutar item di sepanjang sumbu z, x, atau y. Namun, jika Anda memutar item menggunakan transform rotate, elemen tidak akan muncul sebagai 3D kecuali jika properti perspektif diterapkan.

Misalnya, katakanlah Anda memiliki satu modul gambar dengan gambar yang ditambahkan ke satu baris kolom.

Kemudian Anda menggunakan properti transform rotate untuk memutar gambar di sepanjang sumbu x. Gambar akan berputar tetapi tetap 2D sehingga gambar hanya terlihat seperti diperas dari atas dan bawah menjadi lebih pendek.

Sekarang jika Anda menambahkan perspektif menggunakan potongan kecil CSS ke elemen utama Baris (yang merupakan elemen induk dari gambar), Anda menambahkan perspektif ke gambar. Bergantung pada nilai perspektif, Anda dapat menambah atau mengurangi jarak objek yang muncul dari pengguna yang melihat layar. Berikut adalah contoh tampilan gambar jika Anda menambahkan "perspektif: 600px" ke Baris.

Anda dapat melihat bahwa bagian atas gambar lebih kecil dan bagian bawah gambar lebih besar, menciptakan efek perspektif 3D. Pada dasarnya gambar terlihat 900px dari pengguna yang melihat halaman.

Dalam tutorial ini, saya akan menggunakan teknik yang sama untuk memutar seluruh baris gambar dan kemudian menambahkan perspektif ke bagian induk untuk membuat dinding foto 3D.

Mendesain Dinding Foto 3D Atas dan Bawah

Dalam desain pertama ini, kita akan menambahkan dinding foto 3D di bagian atas dan bawah satu jenis teks yang dapat digunakan sebagai judul. Berikut cara melakukannya.

Membuat Dinding Foto 3D Teratas

Untuk memulai sesuatu di halaman baru Anda, buat bagian reguler dengan baris empat kolom.

Di kolom 1, tambahkan modul gambar dengan gambar pertama Anda. Semua gambar yang saya gunakan dalam contoh ini berukuran 600px kali 800px.

Setelah Anda mengunggah gambar Anda ke modul gambar, perbarui padding sebagai berikut:

Padding Kustom: 3% atas, 3% bawah, 3% kiri, 3% kanan

Gandakan (atau salin dan tempel) gambar dan tambahkan ke masing-masing dari empat kolom sehingga Anda memiliki tiga gambar di masing-masing dari empat kolom seperti ini.

Ini akan berfungsi sebagai dinding atas (atau langit-langit) yang akan kita putar dan tambahkan perspektif untuk membuat desain dinding 3D.

Sesuaikan Bagian untuk Menambahkan Perspektif dan Sembunyikan Overflow

Karena kita akan memutar modul baris (bukan gambar individual), kita perlu menambahkan properti perspektif ke induk baris yang merupakan bagian. Dan untuk menjaga agar gambar tidak keluar dari wadah bagian, kita harus menambahkan overflow yang disembunyikan ke overflow vertikal dan horizontal.

Untuk melakukan ini, buka pengaturan bagian dan perbarui yang berikut ini:

Warna Latar Belakang: #000000
Padding Kustom: 0px atas, 0px bawah

Untuk menambahkan properti perspektif, tambahkan CSS khusus berikut ke elemen utama:

CSS Elemen Utama:

perspective: 400px;

Lihat properti overflow sebagai berikut:

Luapan Horisontal: tersembunyi
Overflow Vertikal: tersembunyi

Perbarui Pengaturan Baris: Lebar dan Lebar Talang

Sekarang saatnya untuk menyesuaikan baris untuk mempersiapkannya untuk desain 3D yang diputar. Untuk melakukan ini, kita akan mengecilkan lebar dan menghilangkan margin di antara gambar dengan memperbarui lebar talang.

Buka pengaturan baris dan perbarui yang berikut:

Lebar Talang: 1
Lebar: 300px (desktop, tablet, dan ponsel)

Perbarui Pengaturan Baris: Ubah Putar dan Asal

Sekarang gunakan opsi transform rotate untuk memutar baris sebagai berikut:

Transformasi Putar Sumbu Y: -58deg

Ubah Transform Origin sebagai berikut:

Transform Origin: tengah bawah (atau 100% 50%)

Perbarui Pengaturan Baris: Lebar Kolom Khusus

Karena kita ingin tata letak empat kolom tetap berada di layar tablet dan ponsel, kita perlu mengganti css untuk lebar kolom pada titik putus tersebut. Untuk melakukan ini, kita perlu menambahkan properti css lebar ke setiap kolom. Di bawah tab lanjutan, tambahkan cuplikan CSS khusus berikut ke elemen utama setiap kolom sebagai berikut:

(catatan: pastikan lebar talang diatur ke 1 atau ini tidak akan berfungsi)

Kolom 1 Elemen Utama:

width: 25% !important;

Kolom 2 Elemen Utama:

width: 25% !important;

Kolom 3 Elemen Utama:

width: 25% !important;

Kolom 4 Elemen Utama:

width: 25% !important;

Itu dia. Dinding foto 3d pertama kami telah dibuat.

Buat Bagian Judul

Untuk membuat judul desain, kita perlu membuat bagian reguler baru dengan baris satu kolom langsung di bawah bagian saat ini.

Sebelum Anda menambahkan modul, perbarui bagian dengan latar belakang hitam:

Warna Latar Belakang: #000000

Kemudian tambahkan properti perspektif yang sama ke elemen utama bagian seperti yang kita lakukan sebelumnya sebagai berikut:

Kemudian tambahkan modul teks ke baris dengan yang berikut:

Konten: Fotografi

Font Teks: Titillium Web
Gaya Font Teks: TT
Warna Teks Teks: #ffffff
Ukuran Teks Teks: 5vw
Spasi Huruf Teks: 6px
Tinggi Baris Teks: 1em
Orientasi Teks: Tengah

Sekarang, kita dapat menambahkan rotasi transformasi ke modul teks. Dengan perspektif yang ditetapkan pada induk (atau bagian) efek 3D akan muncul setelah kita memutar teks.

Tambahkan nilai transform rotate sebagai berikut:

Transformasi Putar X Sumbu: -12deg
Transform Putar Sumbu Y: 32deg

Sekarang kita siap untuk membuat dinding foto 3D bawah.

Buat Dinding Foto 3D Bawah (atau Lantai)

Untuk membuat dinding foto 3D bawah, kita cukup menyalin dan menempelkan bagian atas yang berisi dinding atas dan menempelkannya langsung di bawah bagian judul.

Selanjutnya, perbarui pengaturan baris bagian baru sebagai berikut:

Transformasi Putar Sumbu Y: 58 derajat

Transform Origin: Pusat Atas

Desain Akhir

Itu dia! Mari kita periksa desain akhir.

Desainnya juga akan tetap utuh di ponsel (selain sedikit meluap).

Membuat Dinding Foto 3D Kiri dan Kanan

Untuk desain berikutnya, kita akan membuat dinding foto 3D di sisi kiri dan kanan heading kita, bukan di atas dan bawah. Untuk memulai proses desain, kami akan menggunakan beberapa desain prebuilt kami dalam contoh pertama kami.

Untuk memulai, duplikat bagian bawah dari contoh desain pertama yang berisi dinding gambar bawah. Kemudian buka pengaturan baris bagian baru dan atur ulang opsi transformasi kembali ke status default.

Selanjutnya duplikat baris.

Selanjutnya, salin Baris (bukan bagian) yang berisi modul teks dengan judul pada contoh desain pertama. Kemudian tempel di antara dua baris yang berisi gambar.

Ini adalah pengaturan yang mirip dengan desain pertama, kecuali semua baris kami berada di dalam satu bagian. Ini penting untuk langkah selanjutnya.

Kami ingin dua dinding gambar kami berada di kiri dan kanan halaman dengan teks di tengah. Cara mudah untuk melakukannya adalah dengan menggunakan tampilan fleksibel di bagian kami. Ini akan menyelaraskan baris kita secara horizontal di dalam bagian.

Untuk melakukan ini, buka pengaturan bagian dan tambahkan CSS khusus berikut ke Elemen Utama:

(Perhatikan bahwa kita menaikkan nilai perspektif menjadi 700px untuk menciptakan lebih banyak jarak “Z space” dari perspektif pengguna.)

CSS Elemen Utama:

perspective: 700px;
display:flex;

Dan voila! Dinding kami sudah terpasang dan siap untuk rotasi.

Tambahkan Lebih Banyak Gambar untuk dinding yang lebih tinggi

Untuk membuat dinding foto 3D kita sedikit lebih tinggi, yang perlu kita lakukan adalah menambahkan gambar lain ke masing-masing dari empat kolom di setiap baris yang berisi gambar. Pastikan mereka membawa bantalan 3% seperti yang lain.

Mengubah Lebar Dua Baris Sisi

Sebelum kita memutar dinding gambar kita, pertama-tama kita perlu menyesuaikan lebarnya menjadi 100%. Buka pengaturan baris untuk dinding gambar di sisi kiri dan perbarui yang berikut:

Lebar: 100% (desktop, tablet, ponsel)
Lebar maks: 100%

Kemudian lakukan hal yang sama untuk baris di sisi kanan.

Memutar Baris Samping untuk Efek 3D

Sekarang kita siap untuk menambahkan rotasi transformasi kita ke setiap baris kita. Pertama, buka pengaturan baris untuk baris kiri dan perbarui yang berikut:

Transformasi Putar Sumbu X: 90 derajat

Selanjutnya, buka pengaturan baris untuk baris di sisi kanan dan perbarui yang berikut:

Transformasi Putar Sumbu X: -90deg

Dengan perspektif kami di tingkat bagian, baris kami akan ditampilkan sebagai dinding foto 3D di setiap sisi modul teks kami.

Hasil Akhir

Mari kita lihat hasil akhirnya.

Untuk menambahkan sedikit lapisan gula pada kue, Anda dapat menambahkan gambar latar belakang dengan elemen grafis 3D. Berikut adalah contoh desain dengan gambar latar belakang yang diambil dari Paket Tata Letak Cryptocurrency.

Bonus Hover Effect: Ayunkan dinding itu ke View on Hover!

Anda dapat dengan mudah menambahkan efek transform rotate hover yang memungkinkan pengguna untuk melihat dinding gambar dengan mengayunkannya ke tampilan saat melayang. Untuk melakukan ini, buka pengaturan baris kiri dan perbarui yang berikut:

Transform Origin: kiri tengah
Transform Rotate X Axis (arahkan kursor): 0deg

Kemudian pada pengaturan baris kanan, perbarui yang berikut:

Transform Origin: tengah kanan
Transform Rotate X Axis (arahkan kursor): 0deg

Sekarang lihat hasilnya.

Efek Desain Bonus: Membuat Gambar Terpecah ke Luar Angkasa

Karena Baris Gambar sedang diputar dengan perspektif di tempatnya, Anda dapat memindahkan gambar di dalam baris Anda menggunakan terjemahan transformasi. Yang keren dari ini adalah gerakannya akan tetap di sepanjang bidang 3D. Untuk melakukan ini, cukup buka pengaturan gambar dan gunakan opsi terjemahkan transformasi untuk memindahkan gambar di luar kisi ke luar angkasa!

Berikut adalah contoh tampilannya dengan menambahkan beberapa nilai terjemahan transformasi ke gambar.

Pikiran Akhir

Membuat Dinding Foto 3D di Divi benar-benar membuat dampak yang mengesankan pada desain halaman. Dan saya harus mengatakan itu sangat menyenangkan untuk bereksperimen dengan desain yang berbeda menggunakan teknik dalam artikel ini. Properti perspektif bekerja bersama dengan opsi transformasi untuk menciptakan kehidupan yang tak terhitung jumlahnya seperti desain 3D! Dan jangan lupa baris (atau dinding) ini dapat diisi dengan modul apa pun di Divi. Jadi jangan ragu untuk mencoba beberapa uraian juga. Saya harap ini akan menginspirasi Anda untuk membuat sesuatu yang unik hari ini.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!