Desain web modern selalu tentang memecahkan jaringan. Hal ini dilakukan dengan elemen mengejutkan dan menonjolkan aksen di posisi yang memecah struktur normal dari grid. Anda dapat melihatnya diterapkan dalam desain kisi yang rusak pada tata letak yang hebat Divi. Ini biasanya melibatkan pemindahan modul di luar kolom atau baris sehingga modul tersebut memanjang di luar wadah atau tumpang tindih dengan elemen lain pada halaman. Tapi Anda mungkin tidak berpikir untuk memindahkan kolom.
Dalam tutorial ini saya akan menunjukkan cara membuat kolom dan modul terhuyung-huyung Divi untuk desain grid rusak yang unik. Dengan berita opsi kolom dari Divi , Anda dapat dengan mudah memindahkan kolom serta modul yang ada di dalamnya. Hal ini memungkinkan Anda mendesain modul dan kolom dengan gaya unik untuk desain kisi rusak yang kreatif.
Ayo mulai!
penelitian
Berikut ini adalah ikhtisar contoh desain yang akan kami buat dalam tutorial ini.
Apa yang Anda butuhkan untuk memulai
Untuk memulai, Anda perlu yang berikut:
- Le Tema Divi terpasang dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)
- Beberapa gambar yang akan digunakan isi samaran
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Stagnasi kolom dan modul untuk membuat desain kotak rusak yang unik di Divi
Mulailah dengan membuat bagian reguler baru dengan deretan dua kolom.
Kemudian tambahkan panggilan ke modul tindakan di kolom 1.
Ubah teks judul menjadi "Modul Divi" atau judul pendek lain pilihan Anda.
Kemudian perbarui modul dengan warna latar belakang gelap, lalu edit teks judul sebagai berikut:
Warna latar: #333333
Perataan teks: kiri
Judul Font: pahit
Judul Ukuran Teks: 50px
Pengambilan Judul Judul: 2px
Kemudian perbarui tombol panggilan modul tindakan sebagai berikut:
Ukuran teks tombol: 16px
Warna teks tombol: #333333
Warna latar tombol: Warna tombol
batas tombol: #ffffff
Radius batas tombol: 25px
Jarak antar huruf tombol: 2px
Tombol font: Ukuran Raleway dari
Fon tombol: Tebal
Gaya font utama: TT
Kemudian salin modul dan rekatkan duplikat ke kolom 2 sehingga Anda memiliki panggilan yang sama ke modul tindakan di setiap kolom.
Perbarui spasi baris
Sekarang tambahkan beberapa margin atas dan bawah untuk memberi ruang bagi desain.
Margin: 20% naik, 20% turun
Tambahkan gambar latar belakang kolom
Meskipun kami belum dapat melihatnya, kami akan menambahkan gambar latar belakang ke setiap kolom. Mereka akan terlihat setelah kita memindahkan modul kita keluar dari wadah kolom dengan transform translate.
Silakan, buka pengaturan di kolom 1 dan tambahkan gambar latar belakang.
Kemudian buka pengaturan untuk kolom 2 dan tambahkan gambar latar belakang.
Tambahkan kotak bayangan ke setiap kolom
Buka pengaturan untuk kolom 1 dan tambahkan bayangan kotak berikut:
Box Shadow: lihat tangkapan layar
Box Horizontal Shadow Position: 0px
Posisi Vertikal Box Shadow: 0px
Box Shadow Spreading: 100px
Warna bayangan: rgba (151, 178, 193, 0.21)
Kemudian tambahkan gaya bayangan kotak yang sama ke kolom 2. Untuk mempercepat, Anda bisa menggunakan opsi klik kanan untuk menyalin gaya bayangan kotak ke kolom 1, dan lalu menempelkannya ke gaya bayangan kotak kolom 2.
Anda akan melihat bahwa bayangan di dalam kotak akan tumpang tindih. Menggunakan warna ombre semi-sheer akan membantu menciptakan efek super berlapis. Inilah keuntungan utama menggunakan bayangan kotak dalam desain. Tidak seperti batas, Anda dapat menambahkan bayangan besar yang terlihat seperti batas tetapi tidak memengaruhi spasi tata letak yang sebenarnya.
Overlay kolom menggunakan Transform Translate
Pada titik ini kami siap untuk menggeser kolom dan modul untuk menyelesaikan desain grid terputus. Pertama, kita perlu memindahkan kolom ke tepi luar halaman. Kemudian kita bisa memindahkan modul ke tengah nanti.
Stagger Column 1
Buka parameter kolom 1 dan tambahkan properti transformasi terjemahan berikut.
Ubah terjemahan sumbu X: 25%
Ubah terjemahan sumbu Y: -25% (desktop), -5% (tablet)
Stagger Column 2
Untuk kolom 2, tambahkan properti konversi konversi berikut.
Ubah terjemahan sumbu X: -25%
Ubah terjemahan sumbu Y: 25% (desktop), 5% (tablet)
Modul Offset Menggunakan Transform Translate
Kami sekarang siap untuk menyebarkan modul kami dengan memindahkannya dari wadah kolom. Ini akan mengekspos gambar latar belakang kolom dan memungkinkan kita menambahkan bayangan area lain ke modul untuk elemen desain tumpang tindih tambahan.
Offset Modul 1
Buka pengaturan ajakan bertindak kolom 1 dan perbarui yang berikut:
Ubah terjemahan sumbu X: -60%
Ubah terjemahan sumbu Y: 50% (desktop), 10% (tablet)
Tambahkan bayangan kotak ke modul 1
Kemudian tambahkan bayangan kotak berikut ke modul panggilan tindakan di kolom 1:
Box Shadow: lihat tangkapan layar
Box Horizontal Shadow Position: 0px
Posisi Vertikal Box Shadow: 0px
Box Shadow Spreading: 100px
Warna bayangan: rgba (151,178,193,0.21)
Penempatan Modul 2
Untuk memindahkan modul di kolom 2, perbarui yang berikut ini:
Transform terjemahkan sumbu X: 60%
Transformasikan translate Y axis: -50% (desktop), -10% (tablet)
Tambahkan bayangan kotak ke modul 2
Selanjutnya, kita bisa menambahkan bayangan kotak ke modul ajakan bertindak di kolom 2. Kita perlu membuat bayangan kotak ini hampir sepenuhnya transparan karena akan tumpang tindih dengan modul 1 dan kita tidak ingin mempersulit pembacaannya. isi.
Box Shadow: lihat tangkapan layar
Box Horizontal Shadow Position: 0px
Posisi Vertikal Box Shadow: 0px
Box Shadow Spreading: 100px
Warna bayangan: rgba (151,178,193,0.09)
Tambahkan Frame Kotak Bayangan
Untuk menyelesaikan desain, tambahkan bayangan zona ke garis yang berfungsi sebagai elemen desain bingkai di latar belakang.
Box Shadow: lihat tangkapan layar
Posisi Vertikal Box Shadow: 0px
Warna Bayangan: #97b2c1
final pikiran
Semoga tutorial ini memberi Anda sedikit ide tentang bagaimana Anda dapat mengimbangi kolom dan modul Divi untuk membuat desain grid rusak Anda sendiri. Tekniknya sangat sederhana. Ini terutama melibatkan beberapa properti terjemahan transformasi untuk mengimbangi kolom dan modul, serta bayangan kotak untuk membuat pola terputus tunggal. Jangan ragu untuk menjelajahi lebih banyak opsi warna dan memperkenalkan lebih banyak mod untuk melihat ke mana desain tersebut dapat membawa Anda.
Harapan untuk mendengar dari Anda di komentar.
