Cara Membuat Modul Divi Fluida Responsif

Untuk lebih menyederhanakan proses penerapan desain responsif yang konsisten untuk modul Divi, kita dapat menerapkan praktik desain web yang lancar. Berbeda dengan metode desain responsif yang lebih tradisional, desain web Fluid tidak rusak atau tiba-tiba melompat ke ukuran/gaya yang berbeda pada titik henti yang berbeda. Ini menggabungkan unit panjang responsif relatif terhadap lebar viewport sehingga desain menyesuaikan (atau menskalakan) dengan lancar, menjaga desain tetap konsisten di semua perangkat.

Dalam tutorial ini, kami akan menunjukkan cara membuat modul Divi yang cair. Menggunakan praktik desain yang lancar serupa untuk membuat tipografi yang lancar dan/atau tombol yang mengalir, kita akan membuat modul Divi yang lancar yang akan diskalakan secara mulus dengan viewport browser. Seperti yang akan kita ketahui, kombinasi rahasia adalah menambahkan ukuran font badan root dengan unit panjang relatif (atau cair) ke modul dan kemudian menggabungkan unit panjang em (yang relatif terhadap ukuran font badan root) di seluruh modul. pengaturan bila diperlukan.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Dan ini adalah codepen yang mendemonstrasikan fungsionalitas modul fluid ini.

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

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:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Cara Membuat Modul Divi Fluida Responsif

Baris

Untuk memulai, buat baris satu kolom baru di dalam bagian reguler default.

Buka pengaturan baris, dan perbarui yang berikut:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar: otomatis
• Lebar Maks: 100%
• Padding: 5vw atas, 5vw bawah

Merancang Modul Ajakan Bertindak yang Cair

Meskipun teknik desain fluida yang sama dapat ditambahkan ke hampir semua modul Divi, kita akan membahas salah satu modul ajakan bertindak Divi untuk tutorial ini.

Tambahkan modul ajakan bertindak baru di dalam kolom/baris.

Pengaturan isi

Di bawah pengaturan konten, tambahkan URL tautan tombol tiruan dan perbarui warna latar belakang sebagai berikut:

• URL Tautan Tombol: #
• Warna Latar Belakang: #5e6472

Menambahkan Ukuran Font Root Fluid ke Modul

Saat mendesain modul fluid, kita perlu menambahkan ukuran font root fluid ke modul. Setelah ditambahkan ke modul, ukuran font root ini akan digabungkan secara dinamis di seluruh pengaturan desain modul lainnya menggunakan unit panjang em.

Untuk menambahkan ukuran font root fluid ke modul, buka tab lanjutan dan tambahkan CSS khusus berikut ke Elemen Utama:

font-size: clamp(16px, 2vw, 24px);

Untuk ukuran font ini, kami menggunakan fungsi CSS Clamp() untuk mengatur ukuran font minimum, ukuran font yang dapat disesuaikan (bila diperlukan), dan ukuran font maksimal.

Mengganti Setiap Elemen dengan Spasi Default dengan Nilai Satuan Panjang em

Meskipun tidak mutlak diperlukan, untuk mendapatkan desain yang lancar untuk modul, kita perlu mengganti spasi default (di belakang layar) apa pun yang saat ini digunakan modul dengan nilai satuan panjang em untuk properti itu. Anda dapat mengidentifikasi ini dengan memeriksa elemen Anda menggunakan alat pengembangan browser. Dalam hal ini, modul ajakan bertindak memiliki bantalan bawah baik pada deskripsi promo dan elemen judul promo. Karena properti padding bawah menggunakan satuan panjang piksel (px), kita perlu menimpa masing-masing dengan satuan panjang em yang akan menggabungkan ukuran font badan akar yang baru saja kita tambahkan ke elemen utama.

Memperbarui Desain dengan Unit Panjang em

Sekarang setelah ukuran font root cair untuk modul sudah ada, yang perlu kita lakukan adalah memperbarui desain modul menggunakan satuan panjang em. Karena satuan panjang em relatif terhadap ukuran font root, desain apa pun yang menggunakan satuan panjang em akan mewarisi fluiditas ukuran font dan menskalakan dengan lancar dengan ukuran font bila diperlukan.

Teks Tubuh

Ukuran font root kustom yang kami tambahkan sebelumnya sengaja dibuat dengan mempertimbangkan teks isi. Oleh karena itu kita dapat menetapkan teks isi dengan nilai 1em yang mewarisi nilai yang tepat dari ukuran font root. Kita juga bisa menambahkan tinggi garis tubuh. Untuk melakukannya, perbarui yang berikut ini:

• Ukuran Teks Tubuh: 1em
• Tinggi Garis Tubuh: 1.8em

Teks Judul

Untuk elemen teks judul modul, kita dapat memberikan ukuran yang lebih besar menggunakan satuan panjang em. Perbarui berikut ini:

• Judul Teks Ukuran: 1.7em
• Tinggi Baris Judul: 1.3em

Untuk memberi Anda gambaran tentang ukuran teks judul yang sebenarnya, kami cukup mengalikan nilai panjang em dengan nilai font akar. Ingat, ukuran font root menggunakan clamp() untuk menetapkan ukuran font min (16px), fluid (2vw), dan max (24px). Oleh karena itu ukuran teks judul min akan menjadi 1,7 kali 16px yang mendekati 27,2px. Ukuran font cair akan menjadi 1,7 kali 2vw (2% dari lebar viewport). Dan ukuran font maksimal adalah 1,7 kali 24px yang mendekati 69,36px.

Desain Tombol

Elemen ketiga dari modul adalah tombol. Kami dapat memperbarui pengaturan desain tombol menggunakan nilai satuan panjang em untuk menggabungkan desain fluida juga.
Perbarui pengaturan tombol berikut:

• Ukuran Teks Tombol: 1.3em
• Lebar Perbatasan Tombol: 0.12em
• Radius Perbatasan Tombol: 1.5em
• Jarak Huruf Tombol: 0.1em
• Tombol Padding: 0.1em atas, 0.1em bawah, 2em kiri, 2em kanan

Ukuran dan Spasi

Untuk memastikan modul memiliki ukuran fluida dan jarak fluida, kita juga perlu menggunakan satuan panjang em untuk nilai tersebut.

Perbarui pengaturan ukuran dan spasi berikut:

• Lebar Maks: 40em
• Tinggi Min: 0vw
• Margin: atas 0,5em, bawah 0,5em, kiri otomatis, kanan otomatis
• Padding: 2.5em atas, 2.5em bawah, 2em kiri, 2em kanan

Hasil

Sekarang mari kita lihat hasil dari fluid module kita saat mengatur lebar browser pada halaman live.

Menambahkan Beberapa Modul Fluida Berturut-turut dengan CSS Grid

Untuk menambahkan beberapa modul fluida yang berdekatan ke baris, kita perlu memastikan bahwa desain modul fluida kita tidak dibatasi atau dihentikan oleh lebar wadah induk apa pun. Dengan kata lain, kami ingin wadah induk modul kami (kolom) disetel ke otomatis sehingga skalanya sesuai dengan ukuran modul. Kita dapat melakukan ini menggunakan CSS Grid di tingkat kolom untuk mengatur setiap modul dalam kotak dengan setiap kolom memiliki lebar otomatis.

Sesuaikan Ukuran dan Jarak Modul

Sebelum kita membuat Grid CSS untuk modul, kita perlu menyesuaikan max-width dan margin untuk modul kita ke ukuran yang lebih pas untuk tata letak dua kolom dengan dua modul.

Buka pengaturan untuk modul dan perbarui yang berikut:

• Perataan Teks: Kiri
• Lebar Maks: 24em
• Margin: 0.5em kiri, 0.5em kanan

Modul Duplikat

Sekarang duplikat modul untuk membuat yang lain di kolom yang sama.

Tambahkan Grid CSS ke Kolom

Sekarang kita dapat menambahkan CSS khusus ke kolom untuk membuat Grid CSS untuk modul.

Di bawah tab lanjutan, tambahkan CSS berikut ke Elemen Utama pada tampilan desktop:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Kemudian tambahkan CSS berikut ke Elemen Utama pada tampilan telepon:

display:grid;
grid-template-columns: auto;
justify-content:center;

Ini akan mengatur dua modul dalam kisi dua kolom (masing-masing memiliki lebar otomatis) di desktop. Kemudian di ponsel, modul akan kembali ke kisi satu kolom (lebar otomatis).

Hasil

Sekarang lihat hasilnya.

Hasil Akhir

Setelah modul fluid selesai, Anda dapat memperbarui gaya modul menggunakan pengaturan desain bawaan untuk memberinya font, warna, dll.

Berikut adalah tampilan hasil akhir menggunakan font yang berbeda, warna font, warna tombol, dan warna latar belakang.

Pikiran Akhir

Seperti yang telah kita lihat dalam tutorial ini, menggabungkan desain yang lancar pada Modul Divi dapat menjadi cara yang nyaman untuk memastikan modul terlihat cantik dan konsisten pada semua ukuran browser, tanpa perlu repot memperbarui desain pada titik henti tertentu.

Jangan lupa untuk membaca artikel kami yang lain tentang desain yang lancar, termasuk panduan kami untuk membuat tipografi yang lancar dan tombol Divi yang lancar.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!