Membuat Struktur Desain Diagonal dengan Transform Options Divi (Unduh Gratis!)

Kami selalu mencari cara untuk memperluas kemungkinan desain yang Anda miliki dengan Divi. Dan sejak pembaruan opsi transformasi keluar, banyak teknik baru menjadi mungkin, tanpa perlu pengetahuan pengkodean khusus.

Dalam posting ini, kami akan menunjukkan cara membuat struktur desain diagonal yang menakjubkan. Desain yang akan kami buat ulang berfungsi dengan baik untuk bagian pahlawan dan cocok dengan semua jenis situs web yang ingin Anda siapkan. Di akhir tutorial, Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Latar Belakang Gradien

Mulailah dengan membuat halaman baru atau membuka yang sudah ada dan menambahkan bagian reguler ke dalamnya. Buka pengaturan bagian dan tambahkan latar belakang gradien menggunakan pengaturan berikut:

• Warna 1: #ffd633
• Warna 2: #efefef
• Arah Gradien: 217deg
• Posisi Awal: 45%
• Posisi Akhir: 45%

Jarak

Lalu, buka tab desain dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 4vw
• Padding Bawah: 12vw

Meluap

Kita perlu memastikan bahwa opsi transformasi tidak melampaui wadah bagian. Untuk mencapai itu, kami akan menambahkan satu baris kode CSS ke elemen utama bagian tersebut.

overflow: hidden;

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar. Pada langkah selanjutnya dari posting ini, kami akan mengganti ruang yang baru saja kami hapus dengan menambahkan beberapa nilai padding kiri dan kanan kustom menggunakan unit viewport. Ini akan memastikan desain tetap responsif di semua ukuran layar.

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

Jarak

Silakan dan tambahkan beberapa nilai padding khusus ke pengaturan spasi berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 25vw (Desktop), 16vw (Tablet), 7vw (Telepon)
• Padding Kanan: 25vw (Desktop & Tablet), 27vw (Telepon)

Menampilkan

Kami juga memastikan kolom muncul bersebelahan pada ukuran layar yang lebih kecil dengan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Tambahkan judul

Saatnya mulai menambahkan modul! Tambahkan Modul Blurb ke kolom 1 dan masukkan judul pilihan Anda.

Unggah Ilustrasi

Lanjutkan dengan mengunggah ilustrasi pilihan Anda. Yang akan kita gunakan sepanjang tutorial ini adalah bagian dari Paket Tata Letak Pengembang Aplikasi. Anda dapat mengunduh ilustrasi secara gratis dengan membuka pos dan mengunduhnya di akhir.

Latar belakang

Kemudian, tambahkan warna latar belakang putih seluruhnya ke Modul Blurb.

• Warna Latar Belakang: #ffffff

Pengaturan Teks Judul

Pindah ke tab desain dan ubah pengaturan teks judul yang sesuai:

• Judul Font: Poppins
• Judul Font Berat: Semi Tebal
• Judul Font Style: Huruf Besar
• Perataan Teks Judul: Tengah
• Judul Teks Ukuran: 0.5vw (Desktop), 1.6vw (Tablet), 2.4vw (Telepon)
• Spasi Huruf Judul: 1px
• Tinggi Baris Judul: 1.6em

Jarak

Ubah pengaturan spasi berikutnya.

• Padding Atas: 1.3vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Bawah: 1.3vw (Desktop), 4vw (Tablet), 6vw (Telepon)
• Padding Kiri: 1vw (Desktop), 7vw (Tablet & Ponsel)
• Padding Kanan: 1vw (Desktop), 7vw (Tablet & Ponsel)

Berbatasan

Lanjutkan dengan menambahkan '1vw' ke kiri atas dan sudut kanan atas Modul Blurb.

Bayangan Kotak

Last but not least, tambahkan bayangan kotak ke modul menggunakan pengaturan berikut:

• Posisi Vertikal Bayangan Kotak: 10px
• Kekuatan Buram Bayangan Kotak: 60px
• Warna Bayangan: rgba (39,39,52,0.37)

Clone Blurb Module Dua Kali & Tempatkan Duplikat di Kolom Tersisa

Setelah Anda menyesuaikan Modul Blurb, Anda dapat melanjutkan dan mengkloningnya dua kali. Tempatkan duplikat di dua kolom baris yang tersisa.

Ubah Duplikat #1

Ubah Salinan & Ilustrasi

Ubah salinan dan ilustrasi duplikat pertama.

Ubah Spasi

Seiring dengan pengaturan spasi.

• Margin Atas: -3vw
• Padding Atas: 2,7vw (Desktop), 8vw (Tablet), 11vw (Telepon)
• Padding Bawah: 2.7vw (Desktop), 8vw (Tablet), 11vw (Telepon)

Ubah Duplikat #2

Ubah Salinan & Ilustrasi

Ubah salinan dan ilustrasi duplikat kedua juga.

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

Latar Belakang Gradien

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan latar belakang gradien ke dalamnya.

• Warna 1: #fff20a
• Warna 2: #ffb200
• Arah Gradien: 165 derajat

Perekat

Lalu, buka tab desain dan aktifkan opsi 'Make This Row Fullwidth'.

• Jadikan Baris Ini Lebar Penuh: Ya

Bayangan Kotak

Last but not least, tambahkan bayangan kotak ke baris.

• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (0,0,0,0.39)

Tambahkan Modul Pembagi

Visibilitas

Kami hanya menggunakan baris ini untuk tujuan desain, bukan untuk menampilkan modul apa pun. Tetapi untuk memastikan kita tahu persis bagaimana tampilan baris, kita perlu menambahkan Modul Pembagi ke dalamnya. Kami tidak ingin modul muncul, jadi pastikan opsi 'Tampilkan Pembagi' dinonaktifkan.

• Tampilkan Pembagi: Tidak

Terapkan Opsi Transform ke Baris

Baris #1

Ubah Terjemahan

Sekarang setelah kita menyelesaikan dua baris pertama, kita akan mengubahnya agar sesuai dengan struktur desain diagonal yang ingin kita buat. Mulailah dengan membuka pengaturan baris pertama dan ubah nilai transform translate.

• Bawah: 30vw
• Kanan: 6vw

Ubah Putar

Kemudian, ubah nilai putar transformasi kiri.

• Kiri: 37 derajat

Baris #2

Transformasi Skala

Lanjutkan dengan membuka pengaturan baris kedua dan ubah nilai skala transformasi.

• Bawah: 133% (Desktop), 171% (Tablet), 176% (Ponsel)
• Kanan: 133% (Desktop), 171% (Tablet), 176% (Ponsel)

Ubah Terjemahan

Bersamaan dengan nilai transform translate.

• Bawah: 12vw (Desktop), 1vw (Tablet), 3vw (Telepon)
• Kanan: -2vw (Desktop), -6vw (Tablet), -4vw (Telepon)

Ubah Putar

Dan putar baris dalam pengaturan putar transformasi juga.

• Kiri: 37 derajat

Tambahkan Baris #3

Struktur Kolom

Ke baris berikutnya dan terakhir! Anda dapat menggunakan baris ini dan kolomnya untuk berbagi informasi apa pun yang Anda inginkan. Untuk membuat ulang desain persis seperti yang Anda lihat di pratinjau postingan ini, pilih 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 Teks #1 ke Kolom 1

Tambahkan Konten H1

Saatnya mulai menambahkan modul! Kita akan mulai dengan judul Modul Teks. Masukkan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Kemudian, buka tab desain dan ubah pengaturan teks H1.

• Font Judul: Poppins
• Ukuran Teks Judul: 3vw (Desktop), 5vw (Tablet), 6vw (Telepon)
• Spasi Surat Judul: -2px

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: -6vw (Desktop & Tablet), 11vw (Telepon)
• Margin Kiri: 10vw

Tambahkan Modul Teks #2 ke Kolom 1

Tambah isi

Modul kedua yang kita butuhkan adalah Modul Teks lainnya. Tambahkan beberapa konten pilihan Anda.

Pengaturan Teks

Kemudian, buka tab desain dan ubah pengaturan teks.

• Font Teks: Buka Sans
• Ukuran Teks: 0.8vw (Desktop), 1.5vw (Tablet), 2.2vw (Telepon)
• Tinggi Baris Teks: 2.6em

Jarak

Ubah juga nilai spasi.

• Margin Atas: 3vw (Telepon), 5vw (Telepon)
• Margin Kiri: 10vw
• Margin Kanan: 28vw (Tablet), 20vw (Telepon)

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Kemudian, buka tab desain dan ubah pengaturan tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 0.9vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Warna Teks Tombol: #000000
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #000000
• Radius Perbatasan Tombol: 1px
• Font Tombol: Poppins
• Berat Huruf: Ringan

Jarak

Last but not least, bentuk modul Anda menggunakan beberapa nilai spasi khusus dan Anda selesai!

• Margin Atas: 2vw (Desktop), 5vw (Tablet & Ponsel)
• Margin Kiri: 10vw
• Padding Atas: 1vw
• Padding Bawah: 1vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

Unduh Bagian Desain Diagonal GRATIS

Untuk mendapatkan bagian desain diagonal gratis, 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!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat struktur desain diagonal yang menakjubkan menggunakan opsi bawaan Divi saja. Kami harap tutorial ini membantu Anda membiasakan diri dengan opsi transformasi Divi yang baru. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!