Loncat ke Konten Utama

Cara membuang kolom dan modul Divi untuk desain kisi yang unik

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Desain web modern selalu melibatkan melanggar grid. Ini dilakukan dengan menggeser elemen dan aksen aksen pada posisi yang merusak struktur normal kisi. Anda dapat melihatnya diaplikasikan dalam desain grid yang rusak pada tata letak Divi yang indah. Ini biasanya melibatkan pemindahan modul dari kolom atau baris sehingga membentang di luar wadah atau tumpang tindih elemen lain dari halaman. Tetapi Anda mungkin tidak berpikir untuk memindahkan kolom.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana cara mengatur kolom dan modul Divi untuk desain kotak rusak yang unik. Dengan berita opsi kolom dari Divi, Anda dapat dengan mudah memindahkan kolom serta modul yang dikandungnya. Ini memungkinkan Anda mendesain modul dan kolom dengan gaya unik untuk desain kisi-kisi yang rusak.

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:

  1. Tema Divi terinstal dan aktif
  2. Halaman baru dibuat untuk membangun dari awal di ujung depan (konstruktor visual)
  3. Beberapa gambar digunakan untuk konten fiksi

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 panggil 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

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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 menjadi terlihat setelah kami memindahkan modul kami di luar wadah kolom dengan terjemahan 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 kolom 1 dan tambahkan bayangan dari 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)

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 kotak akan tumpang tindih. Menggunakan warna teduh semi-transparan akan membantu menciptakan efek super ditumpangkan. Ini adalah keuntungan utama menggunakan bayangan kotak dalam desain. Tidak seperti borders, Anda dapat menambahkan bayangan besar yang terlihat seperti borders tetapi tidak memengaruhi jarak layout yang sebenarnya.

Overlay kolom menggunakan Transform Translate

Pada titik ini, kami siap untuk menggeser kolom dan modul untuk menyelesaikan desain grid yang terputus. Pertama, kita perlu memindahkan kolom ke tepi luar halaman. Kemudian kita bisa memindahkan modul ke pusat nanti.

Stagger Column 1

Buka parameter kolom 1 dan tambahkan properti transformasi terjemahan berikut.

Transform menerjemahkan sumbu X: 25%
Transformasikan translate Y axis: -25% (desktop), -5% (tablet)

Stagger Column 2

Untuk kolom 2, tambahkan properti konversi konversi berikut.

Transform menerjemahkan sumbu X: -25%
Transformasikan Y Y Axis: 25% (Desktop), 5% (Tablet)

Pergeseran modul 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 untuk menambahkan bayangan zona lain ke modul untuk elemen desain tambahan yang tumpang tindih.

Offset Modul 1

Buka pengaturan ajakan bertindak kolom 1 dan perbarui yang berikut:

Transform menerjemahkan sumbu X: -60%
Transformasikan Y Y Axis: 50% (Desktop), 10% (Tablet)

Tambahkan bayangan kotak ke modul 1

Kemudian tambahkan bayangan kotak berikut ke modul panggilan 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)

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Tambahkan bayangan kotak ke modul 2

Kemudian kita bisa menambahkan bayangan zona ke modul ajakan bertindak dari kolom 2. Kami harus membuat bayangan kotak ini hampir sepenuhnya transparan karena akan tumpang tindih modul 1 dan kami tidak ingin menyulitkan pembacaan konten.

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

Saya harap tutorial ini memberi Anda beberapa ide tentang bagaimana Anda dapat menggeser kolom dan modul Divi untuk membuat desain grid yang rusak. Tekniknya sangat sederhana. Ini terutama melibatkan beberapa properti terjemahan transformasi untuk menggeser kolom dan modul, serta bayangan kotak untuk membuat pola tunggal yang rusak. Jangan ragu untuk menjelajahi lebih banyak opsi warna dan memperkenalkan lebih banyak modul untuk melihat di mana desain mungkin mengarahkan Anda.

Saya berharap dapat mendengar dari Anda di komentar.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
2 saham
saham2
menciak
Register