Cara Membuat Modul Mengambang yang Bertabrakan di Ruang 3D di Divi

Itu selalu menyenangkan untuk mengeksplorasi desain baru yang mungkin menggunakan Divi. Dan hari ini, kita akan menggunakan Divi untuk menjelajahi ruang 3D! Secara teknis, kita akan mengeksplorasi bagaimana merancang modul mengambang yang terlihat seperti bertabrakan dalam ruang 3D. Desain ini akan bekerja dengan baik sebagai cara kreatif untuk memukau pengunjung dengan menunjukkan bahwa Anda memiliki "luasan" layanan, produk, atau sumber daya di situs web Anda.

Jelas, tutorial ini tidak akan sebanding dengan apa yang saya bayangkan seperti eksplorasi ruang angkasa di kehidupan nyata. Tapi, semoga Anda penjelajah Divi di luar sana dapat belajar beberapa hal di sepanjang jalan.

Sneak Peek

Berikut ini adalah sneak peek dari desain yang akan kita buat bersama.

Unduh Modul Mengambang yang Bertabrakan dalam Tata Letak Ruang 3D GRATIS

Untuk memahami desain yang dibuat dalam 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

Memulai dengan Tata Letak Premade

Untuk memulai, pastikan Anda telah menginstal dan mengaktifkan tema Divi. Kemudian buat halaman baru, beri judul halaman, dan gunakan Divi Builder (di bagian depan). Pilih opsi “Choose a premade layout”. Kemudian pilih tata letak Halaman Arahan Video Game dan impor ke halaman baru Anda.

Untuk memulai desain kami, kami akan menggunakan bagian berjudul "Fitur Game" yang berisi uraian yang akan kami gunakan untuk desain kami. Karena ini adalah satu-satunya bagian yang benar-benar kita butuhkan, lanjutkan dan hapus setiap bagian dan baris kecuali dua baris uraian.

Menerapkan Blurb Mengambang dalam Desain Ruang 3D di Divi

Membuat Baris Pertama Blurb

Di dalam bagian tata letak premade yang berisi dua baris uraian, buat baris satu kolom baru dan seret ke bagian atas.

Sekarang menggunakan fitur multiselect Divi (tahan ctrl/cmd saat memilih setiap uraian), pilih 5 uraian di dua kolom di bawah dan seret ke baris satu kolom baru di bagian atas bagian.

Sekarang Anda dapat menghapus dua baris yang disertakan dengan tata letak premade di bawah ini. Setelah itu, Anda seharusnya hanya memiliki satu baris satu kolom yang berisi 5 uraian.

Menambahkan Perspektif ke Bagian kami

Untuk mendapatkan efek 3D yang kita cari dalam desain ini, kita perlu menambahkan properti css perspektif ke bagian kita. Ini akan menambahkan perspektif 3D ke baris kita setiap kali kita memutar baris menggunakan opsi transformasi.

Buka pengaturan bagian dan tambahkan CSS khusus berikut ke Elemen Utama:

perspective: 1000px;

Nanti, Anda mungkin ingin menambah atau mengurangi nilai perspektif untuk membawa elemen 3D (dalam hal ini, baris) lebih dekat atau lebih jauh dari perspektif pengguna saat melihat layar.

Untuk info lebih lanjut, lihat cara kerja perspektif dengan opsi transformasi di Divi.

Menyesuaikan Baris

Sebelum kita mulai menata uraian kita, pertama-tama mari kita konfigurasikan pengaturan baris kita. Ada tiga hal utama yang perlu kita ubah pada tingkat baris untuk desain ini:

1. Kita perlu menyelaraskan uraian kita secara horizontal menggunakan "display:flex". Ini akan menjaga desain kami tetap konsisten dan responsif di semua perangkat (berlawanan dengan menggunakan tata letak 5 kolom yang akan rusak di tablet dan ponsel).
2. Kita perlu menghilangkan margin kolom default dengan mengatur lebar talang ke 1.
3. Kita perlu menggunakan transform rotate untuk memutar baris 45 derajat pada sumbu X. Dengan properti perspektif ditambahkan ke induk (bagian), baris dan semua elemennya memiliki efek 3D yang kita cari.

Buka pengaturan baris dan perbarui yang berikut:

Lebar Talang: 1
Lebar: 80% (desktop), 100% (tablet), 100% (ponsel)
Transformasi Putar sumbu X: 45deg

CSS Elemen Utama Kolom:

display: flex;
justify-content: center;

Menyesuaikan Gaya Blurb dan Spasi

Sekarang saatnya menyesuaikan konten dan gaya uraian kita sedikit.

Karena kami ingin menerapkan penyesuaian yang sama ke semua uraian kami, gunakan multiselect lagi untuk memilih semua uraian dan menerapkan modal pengaturan elemen.

Pertama, hapus konten isi.

Kemudian tambahkan warna latar belakang:

Warna Latar Belakang: rgba (20.241.217.0.16)

Kemudian perbarui spasi berikut:

Margin Kustom (desktop): 2vw kanan
Margin Kustom (tablet dan ponsel): 0vw kan

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

Selanjutnya, tambahkan perbatasan sebagai berikut:

Lebar Perbatasan: 2px
Warna Perbatasan: rgba (20.241.217.0.66)

Pada titik ini, semua uraian memiliki penataan di tempatnya. Kita masih perlu menggunakan opsi transformasi untuk mengubah skala dan posisi masing-masing uraian secara individual yang akan menambah efek mengambang 3D dari uraian. Tapi sebelum kita melakukannya, mari kita duplikat baris untuk membuat baris kedua dari uraian kita.

Membuat Baris Kedua blurb

Untuk membuat baris kedua dari uraian, cukup duplikat baris 5 uraian yang baru saja Anda sesuaikan.

Untuk membuat efek bertabrakan, kita dapat memutar baris yang digandakan ke arah yang berlawanan (-45deg).

Buka baris yang digandakan dan perbarui yang berikut ini:

Transformasi Putar sumbu X: -45deg

Tingkatkan Padding Bagian Atas dan Bawah

Pada titik ini, uraian depan mungkin memanjang ke luar bagian. Untuk memperbaikinya, tambahkan padding berikut ke bagian Anda:

Padding Kustom: 15% atas, 15% bawah

Menggunakan Opsi Transform ke Ukuran dan Posisikan setiap Blurb Secara Individual

Pada titik ini, Anda siap untuk berkreasi dengan bagaimana Anda ingin setiap uraian Anda "mengambang" di ruang 3D. Untuk melakukan ini, Anda dapat menggunakan opsi transformasi untuk mengukur dan memposisikan setiap uraian satu per satu persis di tempat yang Anda inginkan. Dengan melakukan ini, uraian Anda akan tampak memiliki kedalaman yang berbeda dalam ruang 3D.

Untuk mempermudah, saya akan memberi nomor uraian dari 1-10 dimulai dengan uraian paling kiri di baris atas (Blurb #1) dan diakhiri dengan uraian paling kanan di baris kedua (Blurb #10).

Blurb #1

Mari kita mulai dengan uraian pertama kita di baris atas. Buka pengaturan uraian dan perbarui yang berikut:

Skala Transform (sumbu x dan y): 90%

Blurb #2

Buka pengaturan untuk Blurb #2 dan perbarui yang berikut:

Skala Transform (sumbu x dan y): 80%
Transformasi Terjemahkan sumbu X: -10%

Blurb #3

Skala Transform (sumbu x dan y): 80%
Transformasi Terjemahkan sumbu X: 20%

kabur #4

Skala Transform (sumbu x dan y): 85%
Transformasi Terjemahkan sumbu X: -30%

kabur #5

Skala Transform (sumbu x dan y): 60%

Setelah selesai, baris pertama Anda akan terlihat seperti ini.

Lanjutkan menyesuaikan opsi transformasi untuk uraian 6-10, dimulai dengan uraian #6 di paling kiri baris kedua.

Kabur #6

Skala Transform (sumbu x dan y): 60%
Transformasi Terjemahkan sumbu X: -40%
Transformasi Terjemahkan sumbu Y: -20%

Kabur #7

Skala Transform (sumbu x dan y): 90%
Transformasi Terjemahkan sumbu X: 20%

kabur #8

Skala Transform (sumbu x dan y): 70%
Transformasi Terjemahkan sumbu X: -50%

Kabur #9

Skala Transform (sumbu x dan y): 80%
Transformasi Terjemahkan sumbu X: -20%

Kabur #10

Skala Transform (sumbu x dan y): 70%
Transformasi Terjemahkan sumbu X: -60%

Sekarang mari kita lihat bagaimana baris kedua terlihat saat bertabrakan dengan baris pertama kita di ruang 3D.

Untuk melengkapi desain, kita dapat menambahkan gambar latar ruang 3D yang bagus ke bagian tersebut. Saya menggunakan gambar latar bagian atas yang disertakan dengan tata letak Halaman Arahan Video Game yang kami gunakan untuk tutorial ini.

Desain Akhir

Sekarang mari kita periksa desain akhir modul mengambang 3D kami.

Desktop

Tablet

Telepon

Karena 5 uraian yang membentang di sepanjang baris, sedikit lebih sulit untuk menyesuaikan semua 5 uraian tanpa meluas ke luar area pandang. Untuk memperbaikinya, Anda cukup menyembunyikan uraian jauh di setiap baris di ponsel. Atau Anda dapat memberi setiap uraian Anda ukuran yang lebih kecil di ponsel.

Pikiran Akhir

Saya harap tutorial ini akan memberi Anda beberapa inspirasi tentang cara membuat modul mengambang Anda sendiri di Ruang 3D. Yang diperlukan hanyalah beberapa langkah untuk membuat seluruh baris modul Anda diputar dalam 3D menggunakan opsi perspektif dan transformasi. Setelah itu, Anda dapat memposisikan setiap modul untuk mengapungkannya di mana pun Anda inginkan.

Bersenang-senang menjelajahi.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!