Apakah Anda ingin membuat bagian Pahlawan di Divi mana yang cair alih-alih responsif tradisional?
Bagian Pahlawan dari a situs jaringan adalah salah satu kandidat terbaik untuk desain fluida. Tidak seperti desain responsif tradisional yang menyesuaikan dengan titik henti sementara yang berbeda, desain yang lancar beradaptasi dengan mulus ke area pandang browser dan menjaga desain tetap konsisten di semua perangkat. Lagipula, bagian Pahlawan adalah hal pertama yang dilihat pengguna di situs jaringan.
Dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat seluruh bagian pahlawan cair di Divi. Kunci untuk membuat desain yang lancar ini adalah dengan menambahkan ukuran font root yang cair ke setiap modul yang digunakan dan kemudian menggabungkan unit panjangnya em (siapa yang relatif terhadap ukuran font tubuh root ) dalam pengaturan modul.
Ayo mulai!
penelitian
Berikut sekilas desain yang akan kita buat dalam tutorial ini.
Perhatikan bagaimana desain yang lancar menyesuaikan dengan lebar jendela browser.
Buat halaman baru dengan Divi Builder
Untuk memulai, Anda perlu melakukan hal berikut:
Dari dasbor WordPress, buka Halaman> Tambah Baru untuk membuat halaman baru.
Berikan judul yang masuk akal bagi Anda dan klik penggunaan Divi Pembangun
kemudian klik Mulai Membangun (Bangun Dari Awal)
Setelah itu Anda akan memiliki kanvas kosong untuk mulai mendesain Divi.
Baca juga: Divi: Cara membuat bagian Pahlawan dengan modul Header Lebar Penuh
Cara Mendesain Bagian Pahlawan Fluid di Divi
Pengaturan bagian
Untuk memulai, mari perbarui pengaturan desain yang ada untuk bagian tersebut. Buka pengaturan bagian dan perbarui yang berikut:
- Gradien Berhenti:
- 30%: #ff2000
- 30%: #121212
- Arah Gradien: 45deg
Di bawah tab Mendesain, perbarui bantalan:
- Padding: 0px atas, 0px bawah
Buat garis
Selanjutnya, tambahkan baris satu kolom ke bagian tersebut.
Pengaturan saluran
Buka pengaturan baris dan perbarui yang berikut di bawah tab Mendesain :
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 1px
- Tinggi Min: 100 vh (Desktop), tidak ada (Tablet dan Ponsel)
- Padding: 0px (Atas dan Bawah)
Buat teks tajuk yang mengalir dengan batas
Sekarang setelah bagian dan garis selesai, kita dapat menambahkan teks header yang mengalir ke bagian Pahlawan. Kami juga akan menambahkan batas cair ke modul Teks untuk elemen desain kreatif.
Tambahkan modul Teks
Untuk membuat teks judul dan batas, tambahkan modul Teks baru ke kolom.
Pengaturan teks
Di bawah tab Konten, perbarui isi badan dengan kode HTML berikut:
<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>
Untuk membuat elemen desain cair, pertama-tama kita perlu menambahkan ukuran font root cairan ke modul menggunakan fungsi CSS Clamp().
Di bawah tab Advanced, rekatkan cuplikan CSS berikut:
font-size: clamp(32px, 4.1vw, 70px);
Di bawah tab Mendesain, perbarui pengaturan desain teks header berikut:
- Teks judul:
- Tipe: H1
- Font: Montserrat
- Berat Huruf: Berat
- Warna: #ffffff
- Ukuran: 1em
- Spasi Huruf: 0,1em
- Tinggi Garis: 1,2 em
Perbarui juga padding mod sebagai berikut:
- Padding: 1 (Atas, Bawah, Kiri dan Kanan)
Untuk membuat desain batas cair, perbarui yang berikut ini:
- Lebar Perbatasan: 1em
- Warna Perbatasan: #ffffff
- Warna Batas Bawah: bening
- Warna Batas Kiri: bening
Membuat Perbatasan Aksen
Untuk membuat aksen border, kita bisa menduplikasi modul Text yang ada.
Hapus isi dari badan yang ada dan perbarui parameter desain sebagai berikut:
- Lebar Maks: 6,5 cm
- Tinggi: 3,25 em
- Lebar Perbatasan: 0,5em
- Warna Batas: #ff2000
Untuk memposisikan batas aksen, tambahkan posisi absolut dengan offset yang sama dengan lebar batas dalam modul Teks Judul (1em).
Di bawah tab Advanced, perbarui opsi Posisi berikut:
- Posisi: Absolut
- Lokasi: kanan atas
- Offset Vertikal: 1em
- Offset Horisontal: 1em
Buat teks subtitle
Di bawah teks judul, kami akan menambahkan teks subtitle yang mengalir. Karena teks ini lebih kecil, kami akan menambahkan ukuran font root cairan yang lebih kecil.
Tambahkan modul Teks baru
Untuk membuat teks teks, tambahkan modul Teks baru di bawah modul Teks Header yang ada.
Anda dapat menambahkan beberapa kalimat teks pengisi sebagai berikut:
- Isi: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, conectetur adipiscing elit.
Tambahkan ukuran font root yang cair
Selanjutnya, kita perlu menambahkan ukuran font baru yang berfungsi lebih baik untuk teks kecil. Di bawah tab Lanjutan, rekatkan cuplikan CSS berikut di bawah elemen utama:
font-size: clamp(14px, 1.4vw, 24px);
Pengaturan desain teks
Di bawah tab Mendesain, perbarui berikut ini:
- Teks:
- Berat Huruf: Semi Tebal
- Warna: #ffffff
- Ukuran: 1em
- Tinggi: 1,6 em
Kemudian perbarui ukuran dan jarak sebagai berikut:
- Lebar Maks: 19 cm
- Margin: 2 em (Bawah), otomatis (Kiri), 5 em (Kanan)
Buat tombol cair
Untuk membuat tombol cair, tambahkan modul Tombol baru di bawah modul Teks Teks.
Selanjutnya, perbarui teks tombol untuk membaca "Tral Gratis 7 Hari".
Tambahkan ukuran font root yang cair
Selanjutnya, kita perlu menambahkan ukuran font baru yang sesuai untuk sebuah tombol.
Di bawah tab Advanced, rekatkan cuplikan CSS berikut di bawah elemen utama:
font-size: clamp(20px, 2.35vw, 40px);
Pengaturan desain tombol
Di bawah tab Mendesain, perbarui berikut ini:
- Penjajaran Tombol: Kanan
- Gunakan Ukuran Khusus Untuk Tombol: YA
- Warna Teks Tombol: #ff2000
- Gradien Berhenti:
- Warna 1 25%: bening
- Warna 2 25%: #ffffff
- Arah Gradien: 45 derajat
- Tombol:
- Lebar Perbatasan: 0 piksel
- Radius Perbatasan: 0 piksel
- Font: Montserrat
- Berat Font: tebal
- Gaya: miring
- Tampilkan Ikon Tombol : YA
- Ikon: panah berbentuk segitiga ke kanan (lihat tangkapan layar)
- Penempatan Ikon: Kanan
- Margin: 8em (Kanan)
- Padding: 0,2em (Atas dan Bawah), 1,5em (Kiri), 1em (Kanan)
Buat gambar untuk bagian Pahlawan
Dengan semua itu isi dari bagian Pahlawan ke ukuran halaman yang benar, kami siap menambahkan gambar bagian Pahlawan di sisi kiri. Untuk melakukan ini, pertama-tama tambahkan modul Gambar di bawah tombol.
Buka pengaturan gambar dan unggah gambar.
Pengaturan desain gambar
Di bawah tab Mendesain, perbarui pengaturan berikut:
- Penjajaran Gambar: kiri (Desktop dan Tablet), tengah (Telepon)
- Lebar Maks: 48% (Desktop dan Tablet), 70% (Telepon)
- Padding: 4% (Kiri)
Terakhir, berikan gambar posisi absolut dengan offset menggunakan satuan panjang vmin sebagai berikut:
- Posisi: Absolut (Desktop dan Tablet), Relatif (Telepon)
- Lokasi: kiri atas (Desktop dan Tablet)
- Offset Vertikal: 30vmin (Desktop dan Tablet), 0px (Telepon)
Hasil akhir
Berikut adalah hasil akhirnya pada halaman langsung.
Lihat juga: Divi: Cara Menggunakan Masker dan Pola Latar Belakang untuk Bagian Pahlawan
Beginilah cara desain yang lancar menyesuaikan dengan lebar jendela browser.
Unduh DIVI sekarang!!!
Kesimpulan
Menambahkan desain yang lancar ke bagian Pahlawan dapat menjadi cara yang praktis untuk memastikan paruh atas konsisten dengan indah di semua ukuran browser, tanpa harus memperbarui desain pada titik-titik perhentian tertentu atau menggunakan kueri media.
Semoga teknik ini akan menambah keterampilan desain lain yang berguna untuk proyek-proyek masa depan.
Kami juga berharap tutorial ini akan menginspirasi Anda untuk proyek Divi Anda berikutnya. Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Anda juga dapat berkonsultasi sumber daya kita, jika Anda membutuhkan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda.
Jangan ragu untuk juga berkonsultasi dengan panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
