Cara Mengguncang Kolom dan Modul Divi untuk Desain Kotak Rusak Unik
Diterbitkan: 2019-07-10Desain web modern masih tentang memecahkan jaringan. Ini dilakukan dengan elemen mengejutkan dan aksen desain pada posisi yang merusak struktur normal tata letak kotak. Anda dapat melihat kami menerapkan banyak desain kisi yang rusak ini di seluruh tata letak Divi kami yang mengagumkan. Biasanya, ini melibatkan sesuatu seperti memindahkan modul ke luar kolom atau baris sehingga modul tersebut memanjang di luar wadah atau tumpang tindih dengan elemen lain di halaman. Tetapi Anda mungkin tidak berpikir untuk memindahkan kolom yang sebenarnya.
Dalam tutorial ini, saya akan menunjukkan cara membuat kolom dan modul Divi terhuyung-huyung untuk desain grid rusak yang unik. Dengan opsi kolom baru Divi, Anda dapat dengan mudah memindahkan kolom serta modul yang dikandungnya. Hal ini memungkinkan Anda untuk mendesain modul dan kolom dengan gaya unik untuk desain kisi rusak yang kreatif.
Mari kita mulai!
Sneak Peek
Berikut adalah sekilas contoh desain yang akan kita buat dalam tutorial ini.
Unduh Tata Letak Kolom dan Modul Divi Stagger secara GRATIS
Untuk mendapatkan desain 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 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.
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?
Ide Dasar Dijelaskan
Ide dasar di balik cara membuat kolom dan modul Divi terhuyung-huyung untuk desain grid rusak yang unik melibatkan penggunaan properti terjemahan transformasi Divi ke kolom posisi dan modul yang dikandungnya.
Setelah elemen terhuyung-huyung, Anda memiliki semua fitur desain kolom dan modul untuk menambahkan aksen desain yang menciptakan desain kisi rusak yang unik.
Jadi misalnya, Anda dapat menambahkan latar belakang unik (warna, gambar, dll.) dengan bayangan kotak ke kolom Anda dan latar belakang dan bayangan kotak yang sama sekali berbeda ke modul Anda.
Sekarang setelah Anda memiliki ide dasarnya, mari buat desain dari awal.
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda harus memiliki yang berikut:
- Tema Divi diinstal dan aktif
- Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
- Beberapa Gambar yang akan digunakan untuk konten tiruan
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Kolom dan Modul yang Mengejutkan untuk Membuat Desain Grid Rusak Unik di Divi
Pertama, buat bagian reguler baru dengan baris dua kolom.
Kemudian tambahkan modul ajakan bertindak di kolom 1.
Ubah teks judul menjadi "Modul Divi" atau judul pendek lain yang Anda pilih.
Kemudian Perbarui modul dengan warna latar belakang gelap lalu ubah teks Judul sebagai berikut:
Warna Latar Belakang: #333333
Perataan Teks: kiri
Judul Font: pahit
Judul Teks ukuran: 50px
Spasi Huruf Judul: 2px
Kemudian perbarui tombol modul ajakan bertindak sebagai berikut:
Ukuran Teks Tombol: 16px
Warna Teks Tombol: #333333
Warna Latar Belakang Tombol:
Warna Batas Tombol: #ffffff
Radius Batas Tombol: 25px
Jarak Huruf Tombol: 2px
Font Tombol: Raleway
Berat Huruf Tombol: Tebal
Gaya Font Tombol: TT
Selanjutnya, salin modul dan tempel duplikat di kolom 2 sehingga Anda memiliki modul ajakan bertindak yang sama di setiap kolom.
Perbarui Spasi Baris
Sekarang mari tambahkan beberapa margin atas dan bawah ke baris untuk memberi ruang bagi desain.
Margin: 20% atas, 20% bawah
Tambahkan Gambar Latar Belakang Kolom
Meskipun kita belum dapat melihatnya, kita akan menambahkan gambar latar belakang ke setiap kolom. Mereka akan terlihat setelah kita memindahkan modul kita di luar wadah kolom dengan transform translate.
Silakan dan buka pengaturan untuk kolom 1 dan tambahkan gambar latar belakang.
Kemudian buka pengaturan untuk kolom 2 dan tambahkan gambar latar belakang.
Tambahkan Bayangan Kotak ke setiap kolom
Buka pengaturan kolom 1 dan tambahkan bayangan kotak berikut:
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 100px
Warna Bayangan: rgba(151,178,193,0.21)
Kemudian tambahkan gaya bayangan kotak yang sama ke kolom 2. Untuk mempercepat, Anda dapat menggunakan opsi klik kanan untuk menyalin gaya bayangan kotak di kolom 1 dan kemudian menempelkannya ke gaya bayangan kotak di kolom 2.
Anda akan melihat bayangan kotak akan tumpang tindih. Menggunakan warna bayangan kotak semi transparan akan membantu menciptakan efek tumpang tindih yang keren. Ini adalah hal yang hebat tentang menggunakan bayangan kotak dalam desain. Tidak seperti batas, Anda dapat menambahkan bayangan besar yang terlihat seperti batas tetapi tidak memengaruhi jarak sebenarnya dari tata letak.
Kolom Stagger Divi Menggunakan Transform Translate
Pada titik ini, kita siap untuk mulai membuat kolom dan modul yang terhuyung-huyung untuk menyelesaikan desain grid yang rusak. Pertama, kita perlu memindahkan kolom ke tepi luar halaman. Kemudian kita bisa memindahkan modul ke tengah nanti.
Kolom Terhuyung 1
Buka pengaturan kolom 1 dan tambahkan properti transform translate berikut.
Transformasi Terjemahkan sumbu X: 25%
Transformasi Terjemahkan sumbu Y: -25% (desktop), -5% (tablet)
Kolom Terhuyung 2
Untuk kolom 2, tambahkan properti translate translate berikut.
Transformasi Terjemahkan sumbu X: -25%
Transformasi Terjemahkan sumbu Y: 25% (desktop), 5% (tablet)
Atur Modul Menggunakan Transform Translate
Sekarang kita siap untuk mengubah modul kita dengan memindahkannya keluar dari wadah kolom. Ini akan mengekspos gambar latar belakang kolom dan memungkinkan kita untuk menambahkan bayangan kotak lain ke modul untuk elemen desain tumpang tindih tambahan.
Modul Terhuyung 1
Buka pengaturan untuk modul ajakan bertindak di kolom 1 dan perbarui yang berikut ini:
Transformasi Terjemahkan sumbu X: -60%
Transformasi Terjemahkan sumbu Y: 50% (desktop), 10% (tablet)
Tambahkan bayangan kotak ke Modul 1
Kemudian tambahkan bayangan kotak berikut ke modul call to action di kolom 1:
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 100px
Warna Bayangan: rgba(151,178,193,0.21)
Modul Terhuyung 2
Untuk memindahkan modul di kolom 2, perbarui yang berikut ini:
Transformasi Terjemahkan sumbu X: 60%
Transformasi Terjemahkan sumbu Y: -50% (desktop), -10% (tablet)
Tambahkan bayangan kotak ke Modul 2
Selanjutnya, kita dapat menambahkan bayangan kotak ke modul call to action di kolom 2. Kita perlu membuat bayangan kotak ini hampir sepenuhnya transparan karena akan tumpang tindih dengan modul 1 dan kita tidak ingin mempersulit membaca isinya.
Bayangan Kotak: lihat tangkapan layar
Posisi Horizontal Bayangan Kotak: 0px
Posisi Vertikal Bayangan Kotak: 0px
Kekuatan Penyebaran Bayangan Kotak: 100px
Warna Bayangan: rgba(151,178,193,0.09)
Tambahkan Bingkai Bayangan Kotak Baris
Untuk melengkapi desain, mari tambahkan bayangan kotak ke baris yang berfungsi sebagai elemen desain bingkai yang berada di latar belakang.
Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 0px
Warna Bayangan: #97b2c1
Desain Akhir
Sekarang mari kita periksa desain akhir.
Desktop
Tablet
Telepon
Bereksperimen dengan Desain Berbeda
Yang keren dari desain ini adalah memungkinkan Anda dengan mudah mengubah jumlah modul, warna, dan jarak untuk desain baru. Dan Anda juga dapat mengubah kolom dan modul Divi di berbagai posisi.
Menambahkan spasi ke modul untuk membuat gambar latar kolom dengan ukuran yang sama dengan modul
Karena ukuran kolom ditentukan oleh ukuran konten yang dikandungnya, ruang apa pun yang Anda tambahkan ke modul juga akan menambah ukuran kolom. Dan karena kolom kita telah diselingi dengan gambar latar belakang, ini adalah cara mudah untuk membuat gambar latar itu selalu berskala dengan ukuran modul untuk desain yang seimbang.
Misalnya, buka pengaturan untuk modul ajakan bertindak di kolom 1 dan perbarui padding sebagai berikut:
Padding: 20% atas, 15% bawah
Dan perhatikan bagaimana skala gambar latar kolom 1 dengan ukuran modul.
Menambahkan lebih banyak modul
Dengan cara yang sama menambahkan lebih banyak padding ke modul akan meningkatkan ukuran latar belakang kolom, menambahkan lebih banyak modul di kolom juga akan meningkatkan ukuran latar belakang kolom.
Misalnya, duplikat modul di kolom 2 dan perhatikan bagaimana gambar latar belakang mengembang untuk mengakomodasi ruang yang dibutuhkan untuk dua modul di kolom.
Kemudian Anda dapat memindahkan modul teratas di kolom 2 ke kanan sedikit untuk desain alternatif yang bagus.
Inilah hasilnya.
Mengubah Warna
Jika Anda ingin mencocokkan tata letak dengan skema warna Anda sendiri, cara yang bagus untuk melakukannya adalah dengan memperbarui warna bayangan kotak.
Berikut adalah contoh tampilannya saat memperbarui bayangan kotak semi transparan untuk kolom 1, modul 1, dan modul 2.
Pikiran Akhir
Saya harap tutorial ini memberi Anda sedikit inspirasi tentang bagaimana Anda dapat mengubah kolom dan modul Divi untuk membuat desain grid rusak unik Anda sendiri. Tekniknya sangat sederhana, terutama melibatkan beberapa properti terjemahan transformasi untuk mengubah kolom dan modul dan beberapa bayangan kotak untuk membuat desain rusak yang unik. Jangan ragu untuk menjelajahi lebih banyak pilihan warna dan memperkenalkan lebih banyak modul untuk melihat ke mana desain akan membawa Anda.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!