Bagaimana Mendesain Bagian Fluid Hero di Divi
Diterbitkan: 2021-07-26Bagian pahlawan situs web adalah salah satu kandidat terbaik untuk desain yang lancar. Tidak seperti desain responsif tradisional yang menyesuaikan pada titik henti sementara yang berbeda, desain yang lancar menskalakan secara mulus dengan area pandang browser dan menjaga desain tetap konsisten di perangkat apa pun. Lagi pula, bagian pahlawan adalah hal pertama yang dilihat pengguna di situs web.
Anda mungkin pernah melihat desain fluid yang didemonstrasikan dalam tutorial sebelumnya tentang tipografi fluid, modul fluid, dan/atau tombol fluid. Dalam tutorial ini, kami akan menunjukkan cara membuat seluruh bagian pahlawan cair di Divi. Kunci untuk membuat desain yang dapat disesuaikan ini adalah menambahkan ukuran font root yang dapat disesuaikan ke setiap modul yang digunakan dan kemudian menggabungkan unit panjang em (yang relatif terhadap ukuran font body root) di seluruh pengaturan modul.
Mari kita mulai!
Sneak Peek
Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.
Perhatikan bagaimana desain yang lancar menskala dengan mulus dengan lebar viewport browser.
Unduh Tata Letaknya 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 bagian ke Perpustakaan Divi Anda, navigasikan ke Perpustakaan Divi.
Klik tombol Impor.
Di popup portabilitas, pilih tab impor dan pilih file unduhan dari komputer Anda.
Kemudian klik tombol impor.
Setelah selesai, tata letak bagian akan tersedia di Divi Builder.
Langsung saja ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Pilih opsi "Bangun Dari Awal".
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Bagaimana Mendesain Bagian Fluid Hero di Divi
Untuk membangun bagian fluid hero, kita akan menambahkan ukuran font root fluid ke masing-masing dari tiga modul. Modul-modul ini akan membentuk heading, subtitle, dan tombol. Kemudian kita akan menggunakan unit panjang em dalam pengaturan desain modul untuk memastikan elemen desain relatif terhadap ukuran font root fluid. Kemudian kita akan memposisikan gambar di sisi kiri halaman dengan posisi absolut dan offset. Hasilnya akan menjadi bagian pahlawan yang mengalir dengan skala sempurna dengan lebar viewport sehingga desainnya konsisten di semua perangkat.
Pengaturan Bagian
Untuk memulai, mari perbarui pengaturan desain yang ada untuk bagian tersebut. Buka pengaturan bagian dan perbarui yang berikut ini:
- Warna Kiri Gradien Latar Belakang: #ff2000
- Warna Kanan Gradien Latar Belakang: #121212
- Arah Gradien: 45deg
- Posisi Awal: 30%
- Posisi Akhir: 0%
Di bawah tab desain, perbarui padding:
- Padding: 0px atas, 0px bawah
Buat Baris
Selanjutnya, tambahkan baris satu kolom ke bagian tersebut.
Pengaturan Baris
Buka pengaturan untuk baris dan perbarui yang berikut di bawah tab desain:
- Lebar Talang: 1
- Lebar: 100%
- Lebar Maks: 1700px
- Tinggi Min: 100vh (desktop), tidak ada (tablet dan ponsel)
- Padding: 0px atas, 0px bawah
Buat Teks Heading Fluid dengan Border
Sekarang bagian dan baris sudah selesai, kita dapat menambahkan teks heading fluid ke bagian hero. 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 konten isi dengan HTML berikut:
<h1>Fluid Fullscreen Page Design<span style="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 lanjutan, lewati cuplikan CSS berikut:
font-size: clamp(32px, 4.1vw, 70px);
Dengan ukuran font root yang cair, kami siap untuk memperbarui pengaturan desain. Penting untuk menggunakan satuan panjang em secara keseluruhan karena satuan panjang em relatif terhadap ukuran font akar elemen.
Di bawah tab desain, perbarui pengaturan desain teks judul berikut:
- Jenis Judul: H1
- Font Judul: Montserrat
- Berat Huruf Judul: Berat
- Warna Teks Judul: #ffffff
- Ukuran Teks Judul: 1em
- Spasi Surat Judul: 0.1em
- Tinggi Garis Pos: 1.2em
Juga, perbarui padding modul sebagai berikut:
- Padding: 1em (atas, bawah, kiri, kanan)
Untuk membuat desain batas cair, perbarui yang berikut ini:
- Lebar Perbatasan: 1em
- Warna Perbatasan: #ffffff
- Warna Perbatasan Bawah: transparan
- Warna Batas Kiri: transparan
Membuat Perbatasan Aksen
Untuk membuat aksen border, kita bisa menduplikasi modul teks yang ada.
Keluarkan konten tubuh yang ada dan perbarui pengaturan desain sebagai berikut:
- Lebar Maks: 6.5em
- Tinggi: 3.25em
- Lebar Perbatasan: 0.5em
- Warna Batas: #ff2000
Ingat, ukuran font root cairan yang sama disertakan dalam modul duplikat ini. Jadi, kita bisa menggunakan satuan panjang em untuk menyesuaikan ukuran dan lebar perbatasan. Ini akan memastikan desain akan menyesuaikan dengan desain modul teks heading.
Untuk memposisikan batas aksen, tambahkan posisi absolut dengan offset yang sama dengan lebar batas di modul teks judul (1em). Di bawah tab lanjutan, perbarui opsi Posisi berikut:
- Posisi: Absolut
- Lokasi: kanan atas
- Offset Vertikal: 1em
- Offset Horisontal: 1em
Buat Teks Tubuh Subtitle Cairan
Di bawah teks judul, kita akan menambahkan teks isi subtitle yang cair. Karena teks ini lebih kecil, kita akan menambahkan ukuran font root yang lebih kecil.
Tambahkan Modul Teks Baru
Untuk membuat teks subtitle, tambahkan modul teks baru di bawah modul teks judul yang ada.
Anda dapat menambahkan beberapa kalimat teks pengisi sebagai berikut:
- Isi Tubuh: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, conectetur adipiscing elit.
Tambahkan Ukuran Font Root Cairan
Selanjutnya, kita perlu menambahkan ukuran font baru yang lebih sesuai untuk teks yang lebih 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 desain, perbarui yang berikut ini:
- Berat Font Teks: Semi Tebal
- Warna Teks Teks: #ffffff
- Ukuran Teks Teks: 1em
- Tinggi Baris Teks: 1.6em
Kemudian perbarui ukuran dan spasi sebagai berikut:
- Lebar Maks: 19em
- Margin: bawah 2em, kiri otomatis, kanan 5em
Buat Tombol Cairan
Untuk membuat tombol cair, tambahkan modul tombol baru di bawah modul teks subtitle.
Kemudian perbarui teks tombol untuk membaca "Uji Coba Gratis 7 Hari".
Tambahkan Ukuran Font Root Cairan
Selanjutnya, kita perlu menambahkan ukuran font baru yang sesuai untuk sebuah tombol. Di bawah tab lanjutan, rekatkan cuplikan CSS berikut di bawah Elemen Utama:
font-size: clamp(20px, 2.35vw, 40px);
Pengaturan Desain Tombol
Di bawah tab desain, perbarui yang berikut ini:
- Penjajaran Tombol: Kanan
- Warna Teks Tombol: #ff2000
- Tombol Latar Belakang Gradien Warna Kiri: transparan
- Tombol Latar Belakang Gradien Warna Kanan: #ffffff
- Arah Gradien: 45deg
- Posisi Awal: 25%
- Posisi Akhir: 0%
- Lebar Batas Tombol: 0px
- Radius Perbatasan Tombol: 0px
- Font Tombol: Montserrat
- Berat Huruf Tombol: Berat
- Gaya Font Tombol: Miring
- Ikon Tombol: panah segitiga siku-siku (lihat tangkapan layar)
- Penempatan Ikon Tombol: Kiri
- Margin: 8em kanan
- Padding: 0.2em atas, 0.2em bawah, 1.5em kiri, 1em kanan
Buat Gambar untuk Bagian Pahlawan
Dengan semua konten bagian pahlawan pada ukuran halaman yang tepat, kami siap untuk menambahkan gambar bagian pahlawan ke 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 desain, perbarui pengaturan berikut:
- Penjajaran Gambar: Kiri (desktop dan tablet), Tengah (ponsel)
- Lebar Maks: 48% (desktop dan tablet), 70% (ponsel)
- Padding: 4% Kiri
Terakhir, berikan gambar posisi absolut dengan offset menggunakan satuan panjang vmin sebagai berikut:
- Posisi: Absolute (desktop dan tablet), Relative (ponsel)
- Lokasi: Kiri Atas (desktop dan tablet)
- Vertikal Offset 30vmin (desktop dan tablet), 0px (ponsel)
Hasil Akhir
Berikut adalah hasil akhir pada halaman langsung.
Berikut adalah bagaimana desain yang lancar menskalakan dengan lancar dengan lebar viewport browser.
Dukungan Peramban
Fungsi CSS clamp() (digunakan untuk ukuran font yang dapat disesuaikan dalam tutorial ini) secara mengejutkan didukung dengan baik oleh semua browser utama kecuali IE. Ada bug safari aneh yang tidak menskala secara dinamis saat menyesuaikan jendela browser, tetapi ditampilkan dengan benar saat memuat halaman. Untuk memperbaikinya, yang tampaknya perlu Anda lakukan adalah memberi masing-masing modul ketinggian minimum 0vw.
Pikiran Akhir
Menambahkan desain yang lancar ke bagian pahlawan dapat menjadi cara yang nyaman untuk memastikan paruh atas terlihat sangat konsisten di semua ukuran browser, tanpa perlu repot memperbarui desain pada titik henti sementara tertentu atau menggunakan kueri media.
Jangan lupa untuk membaca artikel kami yang lain tentang desain lancar, termasuk cara membuat tipografi lancar, modul lancar, dan tombol lancar.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!