Mendekorasi Halaman Anda dengan Mengubah Bentuk saat Melayang dengan Divi

Membuat desain interaktif adalah sesuatu yang segera membantu meningkatkan tampilan dan nuansa situs web apa pun. Dengan opsi bawaan Divi, Anda dapat mengambil banyak belokan dan membuat efek yang benar-benar unik untuk situs web Anda.

Dalam posting ini, kami akan menunjukkan cara menghias halaman Anda dengan mengubah bentuk saat melayang. Hasil yang akan kita peroleh berfokus pada pengalaman desktop tetapi tetap mempertahankan desain yang rapi dan ramah pengguna pada ukuran layar yang lebih kecil juga.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas dua contoh yang akan kita buat ulang dari awal.

Contoh 1

Contoh #2

Unduh Hamparan Gambar Berbentuk

Untuk meletakkan tangan Anda pada hamparan gambar berbentuk yang digunakan sepanjang tutorial ini, Anda harus mengunduhnya menggunakan tombol di bawah ini. 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!

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Warna latar belakang

Stary dengan membuat halaman baru atau membuka yang sudah ada. Tambahkan bagian biasa ke dalamnya, buka pengaturan bagian dan tambahkan warna latar belakang yang sepenuhnya hitam.

• Warna Latar Belakang: #000000

Meluap

Untuk memotong overlay gambar berbentuk nanti di tutorial ini, kita akan memastikan tidak ada yang melebihi wadah bagian dengan menambahkan satu baris kode CSS ke elemen utama bagian.

overflow: hidden;

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

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

Tambahkan Modul Gambar ke Baris

Unggah Hamparan Gambar Berbentuk

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Gambar. Unggah hamparan gambar berbentuk pertama yang dapat Anda temukan di folder yang telah Anda unduh. Anda dapat menemukan lebih banyak hamparan gambar berbentuk dengan membuka posting ini, mengunduh file, membuka file Illustrator dan menyesuaikannya dengan kebutuhan Anda. Namun, jika Anda hanya ingin membuat ulang contoh yang dibagikan di pratinjau postingan ini, folder yang telah Anda unduh di awal postingan ini bisa digunakan.

Warna Latar Default

Buka pengaturan latar belakang Modul Gambar dan tambahkan warna latar belakang default berikut:

• Warna Latar Belakang: #6a00ff

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang menggunakan kode warna berikut:

• Warna Latar Belakang: #ffa216

Latar Belakang Gradien

Lanjutkan dengan menambahkan latar belakang gradien ke Modul Gambar juga.

• Warna 1: #ff2841
• Warna 2: rgba (255,255,255,0)
• Arah Gradien: 168deg
• Posisi Akhir: 68%

Perekat

Pindah ke tab desain dan aktifkan opsi 'Force Fullwidth'.

• Paksa Lebar Penuh: Ya

Jarak

Kami juga menyembunyikan bagian dari hamparan gambar berbentuk dengan menambahkan beberapa margin atas negatif ke pengaturan spasi. Anda akan melihat bahwa modul tidak akan melampaui wadah bagian berkat satu baris kode CSS yang telah kami tambahkan ke bagian di awal tutorial.

• Margin Atas: -22vw (Desktop & Tablet), 0vw (Telepon)

Putar Transformasi Default

Sekarang kita dapat mulai mengubah modul! Tambahkan pengaturan putar transformasi default berikut ke Modul Gambar:

• Pusat: 359 derajat

Arahkan Transform Putar

Dan ubah nilai-nilai ini saat mengarahkan kursor untuk membuat bentuk transformasi.

• Kiri: 250 derajat
• Pusat: 320deg

ID CSS

Saat mengarahkan Modul Gambar, hamparan gambar berbentuk akan tumpang tindih dengan semua modul lain yang ada di atasnya. Untuk menghindarinya, kita perlu memodifikasi indeks-z modul saat mengarahkan kursor ke postingan nanti. Untuk mencapai itu, Anda harus menambahkan kelas CSS khusus ke Modul Gambar.

Transisi

Last but not least, kami membuat transisi yang mulus dengan meningkatkan durasi transisi di tab lanjutan.

• Durasi Transisi: 950ms

Tambahkan Modul Teks #1 ke Baris

Tambahkan Konten H2

Modul selanjutnya yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Lalu, buka tab desain dan ubah pengaturan teks H2.

• Judul 2 Font: Didact Gothic
• Judul 2 Berat Font: Tebal
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #ffffff
• Judul 2 Ukuran Teks: 7vw
• Pos 2 Tinggi Baris: 0.9em

Jarak

Buat tumpang tindih antara modul ini dan Modul Gambar menggunakan beberapa nilai margin khusus.

• Margin Atas: -68vw
• Margin Bawah: 8vw
• Margin Kiri: 29vw
• Margin Kanan: 29vw

Tambahkan Modul Teks #2 ke Baris

Tambah isi

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan masukkan beberapa konten paragraf pilihan Anda.

Pengaturan Teks

Kemudian, buka tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Warna Teks: #ffffff
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Tinggi Baris Teks: 1.8em
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa nilai margin khusus juga.

• Margin Bawah: 2vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Margin Kiri: 30vw (Desktop), 10vw (Tablet & Ponsel)
• Margin Kanan: 30vw (Desktop), 10vw (Tablet & Ponsel)

Tambahkan Modul Pembagi ke Baris

Visibilitas

Modul berikutnya dan terakhir yang kita butuhkan adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Lalu, buka tab desain dan ubah warna pembagi.

• Warna: #ffffff

Perekat

Ubah juga nilai ukuran.

• Berat Pembagi: 7px
• Lebar: 15%
• Penyelarasan Modul: Pusat

Jarak

Dan tambahkan beberapa bantalan bawah khusus.

• Margin Bawah: 5vw

Klon Seluruh Bagian

Ke contoh kedua! Kloning bagian yang baru saja Anda selesaikan.

Ubah Modul Gambar

Unggah Hamparan Gambar Berbentuk Baru

Ada beberapa perubahan yang perlu kita lakukan, dimulai dengan overlay gambar berbentuk. Silakan dan unggah overlay gambar berbentuk kedua yang dapat Anda temukan di folder yang telah Anda unduh di awal posting ini.

Ubah Warna Latar Default

Lalu, buka pengaturan latar belakang Modul Gambar dan ubah warna latar belakang default.

• Warna Latar Belakang: #2d007c

Ubah Warna Latar Belakang Arahkan kursor

Ubah warna latar belakang hover juga.

• Warna Latar Belakang: #008089

Ubah Latar Belakang Gradien

Seiring dengan latar belakang gradien.

• Warna 1: #0c0c0c
• Warna 2: rgba (255,255,255,0)
• Arah Gradien: 168deg
• Posisi Akhir: 68%

Ubah Pengaturan Putar Transformasi Default

Kami juga mengubah efek transformasi. Buka pengaturan transformasi dan ubah nilai putar transformasi default.

• Kiri: 270 derajat
• Pusat: 359 derajat

Ubah Arahkan Arahkan Transformasi Putar

Ubah nilai yang sama saat mengarahkan kursor.

• Kiri: 192 derajat
• Pusat: 280deg
• Kanan: 15 derajat

Tambahkan Kode Kustom ke Halaman

Buka Pengaturan Halaman

Sekarang, bagian terakhir dari posting ini memastikan bahwa bentuk transformasi tetap berada di bawah semua modul lainnya ketika sedang di-hover. Buka pengaturan halaman.

Tambahkan Kode CSS

Lalu pergi ke tab lanjutan dan tambahkan kode CSS berikut.

.hover-state:hover {
z-index: -99; }

Kami menggunakan Kelas CSS yang telah kami tetapkan ke bagian sepanjang tutorial.

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasilnya.

Contoh 1

Contoh #2

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan opsi transformasi Divi. Lebih khusus lagi, kami telah menggunakan Modul Gambar dengan hamparan gambar berbentuk untuk membuat bentuk latar belakang yang berubah. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!