Cara Membuat Desain Header Ramping dengan Parallelograms di Divi

Menambahkan desain tajuk baru yang ramping ke halaman Anda adalah cara yang efektif untuk membuat pengunjung Anda kagum. Dan merancang latar belakang unik untuk tajuk Anda adalah tempat yang bagus untuk memulai. Dalam tutorial ini, saya akan menunjukkan cara menggunakan Divi untuk menambahkan jajaran genjang ke desain header Anda menggunakan latar belakang gradien dengan cara yang kreatif. Ini menambahkan elemen tekstur yang bagus ke desain yang memisahkan diri dari tata letak kotak tradisional.

Mari kita mulai.

Sneak Peek

Berikut adalah tampilan desain yang akan kita buat.

Apa yang Anda Butuhkan

Untuk membuat desain ini, Anda perlu hal-hal utama:

1. Tema Divi
2. Perusahaan Desain Interior Tentang Tata Letak Halaman (tersedia dari dalam Divi Builder)

Siapkan Halaman

Untuk tutorial ini, saya akan menggunakan Perusahaan Desain Interior Tentang Tata Letak Halaman di halaman baru. Buka Dashboard WordPress Anda dan arahkan ke Pages > Add New. Kemudian beri judul halaman Anda dan klik untuk menggunakan Divi Builder. Kemudian klik tombol untuk menerapkan pembuat visual. Pilih opsi “Choose a Premade Layout”. Kemudian cari dan pilih Paket Tata Letak Desain Interior. Pilih tata letak halaman Tentang dan terakhir klik "Gunakan Tata Letak Ini".

Setelah halaman dimuat ke halaman, Anda siap untuk mulai mengedit.

Keluarkan Padding Bagian Atas dan Ganti Gambar Latar Belakang

Ini adalah langkah pertama yang mudah. Yang perlu Anda lakukan adalah mengarahkan kursor ke bagian atas bagian header atas halaman. Anda akan melihat bahwa bantalan atas saat ini diatur ke 10%. Cukup seret padding ke 0%. Atau Anda selalu dapat masuk ke pengaturan halaman dan mengatur padding atas kustom ke 0% juga.

Anda juga dapat mengubah gambar latar belakang pada saat ini, tetapi itu tidak perlu. Untuk melakukannya, buka pengaturan bagian dan ubah gambar latar belakang di bawah tab konten. Kemudian keluarkan gradien latar belakang. Ini akan membantu membuat teks (yang akan berwarna putih) lebih mudah dibaca di ponsel karena akan ada beberapa teks yang tumpang tindih dengan gambar latar belakang.

Sesuaikan Ukuran Baris dan Padding

Selanjutnya, buka pengaturan baris dan di bawah tab Desain, perbarui yang berikut:

Gunakan Lebar Kustom: YA
Lebar Kustom: 100%
Padding Kustom: Atas 0px, Bawah 10vw

Tambahkan Latar Belakang Gradien ke Baris dan Kolom

Untuk membuat desain yang ramping ini, kita akan membuat latar belakang gradien yang tumpang tindih dengan posisi awal dan akhir yang berbeda. Pertama kita perlu menambahkan latar belakang gradien ke baris dan kemudian ke kolom.

Buka pengaturan baris di bawah tab konten dan perbarui yang berikut:

Warna Kiri Gradien Latar Belakang: #1a1a1a
Warna Kanan Gradien Latar Belakang: rgba(255,255,255,0)
Arah Gradien: 45deg
Posisi Awal: 60%
Posisi Akhir: 0%

Kolom 1 Latar Belakang Gradien Warna Kiri: rgba(244,88,63,0.83)
Kolom 1 Latar Belakang Gradien Warna Kanan: rgba(255,255,255,0)
Arah Gradien Kolom: 45deg
Posisi Awal Kolom: 66%
Posisi Akhir Kolom: 0%

Gradien oranye yang kita tambahkan ke kolom akan digunakan untuk jajaran genjang pertama dalam desain header kita. Untuk membuat jajaran genjang kita perlu memperpendek gradien oranye dengan sisi kiri yang miring pada 45 derajat agar sesuai dengan sisi kanan. Kami akan melakukan ini dengan menambahkan gradien ke modul ajakan bertindak.

Menyesuaikan Ukuran Teks dan Spasi Modul Ajakan Bertindak

Sebelum kita menambahkan gradien latar belakang kita ke modul call to action, mari kita atur spasi dan gaya teks terlebih dahulu.

Buka pengaturan modul ajakan bertindak dan perbarui yang berikut di bawah Tab Desain:

Orientasi Teks: Kiri
Warna Teks: Cahaya
Judul Teks Ukuran: 4.5vw (desktop), 42px (tablet)
Warna Teks Tombol: #1a1a1a
Tombol Warna latar belakang: #ffffff
Lebar: 100%
Setel Ulang Margin
Padding Kustom (desktop): 10vw atas, 5% kiri, 45% kanan
Padding Kustom (tablet): 38% benar
Padding Kustom (ponsel cerdas): 5% benar

Sekarang kita dapat menambahkan gradien latar belakang ke modul kita. Untuk mempercepat proses ini, buka pengaturan baris dan klik kanan dan salin gradien latar belakang baris.

Lalu buka pengaturan modul ajakan bertindak, di bawah tab konten, dan klik kanan dan tempel gradien latar belakang ke modul. Kemudian sesuaikan posisi awal menjadi 47%.

Seperti yang Anda lihat, ini menciptakan efek persegi panjang bersudut yang tumpang tindih dengan latar belakang gradien gelap untuk elemen desain yang unik.

Ini akan menjadi desain yang bagus seperti yang ada sekarang, tetapi mari kita lanjutkan dan menjadi lebih kreatif dengan menambahkan jajaran genjang tambahan yang tumpang tindih di bagian bawah baris kita.

Membuat Jajaran Genjang Tambahan Menggunakan Modul Teks Kosong

Konsep untuk fase terakhir dari desain header ini melibatkan pembuatan dua modul teks berdampingan masing-masing dengan gradien khusus yang, bila digabungkan, menunjukkan satu "kotak" dengan sisi miring yang sama di kanan dan kiri. Untuk melakukan ini, pertama-tama kita harus membuat baris satu kolom untuk menampung modul teks kita. Kemudian kita dapat mengukur dan memposisikan modul kita untuk berdiri berdampingan.

Tambahkan baris satu kolom langsung di bawah bagian yang berisi modul ajakan bertindak kami di dalam bagian yang sama.

Kemudian tambahkan modul teks ke kolom kiri dan perbarui modul teks sebagai berikut:

Hapus semua konten di kotak konten (kita akan menggunakan modul teks kosong)
Warna Kiri Gradien Latar Belakang: rgba(255,255,255,0)
Warna Kanan Gradien Latar Belakang: rgba(58,80,107,0.83)
Arah Gradien: 45deg
Posisi Awal: 50%
Posisi Akhir: 0%

Sekarang lompati tab desain dan perbarui yang berikut:

Tinggi Baris Teks: 0em (ini akan menghilangkan spasi yang tidak diinginkan)
Lebar: 50%
Margin Kustom: -8vw Atas, 0px Bawah
Padding Kustom: Atas 8vw, Bawah 8vw

Simpan Pengaturan.

Dari pembuat visual, duplikat modul dan perbarui pengaturan modul teks untuk modul baru sebagai berikut:

Arahkan kursor ke pratinjau gradien latar belakang dan klik ikon "Switch Gradient" untuk mengganti warna gradien dari kiri ke kanan.

Penyelarasan Modul: Kanan
Margin Kustom: -16vw Atas, 0px Bawah

Simpan Pengaturan.

Sekarang setelah modul kita disejajarkan, kita dapat menyesuaikan pengaturan baris untuk memposisikan modul kita dan mengubah ukurannya agar sesuai dengan desain. Buka pengaturan baris dan perbarui yang berikut:

Penjajaran Baris: Kiri
Gunakan Lebar Kustom: YA
Lebar Kustom: 45%
Margin Kustom: 30% tersisa
Padding Kustom: 0px Atas, 0px Bawah

Itu tentang melakukannya! Lihat hasil akhirnya.

Ini dia di tablet dan smartphone.

Pikiran Akhir

Saya harap teknik desain ini memberi Anda sedikit inspirasi tentang bagaimana Anda dapat menggunakan opsi latar belakang gradien Divi untuk menggabungkan beberapa jajaran genjang yang ramping ke dalam desain header Anda sendiri. Dan, tentu saja, desain ini tidak terbatas pada header. Jangan ragu untuk menjelajahi area baru di mana desain ini akan bekerja untuk Anda. Untuk inspirasi lebih lanjut, lihat beberapa rahasia desain kisi yang rusak yang dapat membantu Anda di sepanjang jalan.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!