Menggunakan Opsi Tinggi & Lebar Baru Divi untuk Membuat Desain Responsif

Meskipun biasanya bukan hal pertama yang diperhatikan pengunjung tentang situs web Anda, properti CSS lebar dan tinggi membantu menjaga situs web Anda tetap utuh dan terlihat mengagumkan. Dan sekarang, dengan opsi ukuran baru Divi yang dapat diseret, Anda benar-benar dapat mengontrol lebar setiap elemen, lebar maksimum, tinggi minimum, tinggi, dan tinggi maksimum di dalam pembuat itu sendiri. Ini memberi Anda kebebasan untuk membuat situs web yang sangat responsif di berbagai ukuran layar.

Sekarang, semua ini terdengar hebat, tetapi bagaimana ini diterjemahkan menjadi situs web yang indah, secara praktis? Itulah tepatnya yang akan kita bicarakan dalam posting ini. Kami akan mulai dengan terlebih dahulu menjelaskan perbedaan antara semua properti tinggi dan lebar yang tersedia dalam pengaturan Divi dan kemudian menggunakannya dalam skenario yang berbeda untuk membuat desain halaman kami berperilaku persis seperti yang kami inginkan.

Mari kita lakukan!

Berlangganan Saluran Youtube Kami

Memahami Perbedaan Antara Properti

Sebelum menggunakan lebar dan lebar maksimal dalam proses desain harian kami, penting untuk memahami apa yang mereka lakukan. Berikut penjelasan teoretisnya:

Lebar – Lebar sebenarnya dari elemen desain. Jika ini 100%, itu selebar wadah yang memungkinkan. Lebar biasanya dinyatakan dengan %. Semakin rendah persentase lebarnya, semakin sempit elemen desainnya.

Lebar Maks – Lebar maks memiliki kekuatan atas lebar. Jika lebar modul diatur ke 100%, itu akan mematuhi nilai itu selama tetap di bawah nilai lebar maksimal. Setelah nilai lebar maksimum tercapai, itu tidak akan melebihinya.

Tapi bagaimana itu diterjemahkan ke dalam desain responsif? Untuk membantu menjelaskan perbedaannya, kita akan membuat perbandingan visual dengan mengaktifkan Visual Builder pada halaman baru. Kami akan menambahkan bagian dengan baris satu kolom. Kemudian, masukkan Modul Teks dengan beberapa konten, warna latar belakang, dan beberapa bantalan khusus.

Mengubah Lebar

Saat Anda mengubah lebar Modul Teks menjadi 80%, Anda akan melihat Modul Teks menyusut ukurannya. Kemungkinan untuk menyelaraskan modul sesuai keinginan Anda juga muncul.

Mengubah Lebar Maks

Saat Anda mengubah lebar maksimal, nilai yang ditetapkan hanya akan mulai diterapkan dari saat lebar sebenarnya melebihi nilai lebar maksimal. Mari kita tunjukkan itu dengan sangat cepat:

Tidak Melebihi

Melebihi

Selain lebar dan lebar maksimum, Anda juga dapat menemukan tinggi minimum, tinggi, dan tinggi maksimum dalam pengaturan ukuran setiap elemen. Inilah yang secara teoritis dapat Anda pahami dari istilah-istilah ini:

Tinggi Min – Tinggi minimum yang ingin Anda tetapkan ke elemen. Jika nilai ini lebih besar dari input ketinggian, input ketinggian minimum akan mendominasi.

Tinggi – Ini menentukan ketinggian sebenarnya yang ingin Anda tetapkan ke elemen.

Max Height – Nilai ini menjadi tinggi baru setelah tinggi melebihi nilai yang ditetapkan untuk ketinggian.

Mengubah Tinggi Min

Jika Anda mengubah ketinggian minimum suatu elemen, nilai itu menjadi norma. Saat mengujinya, Anda akan secara otomatis melihat ketinggian Modul Teks berubah secara real time.

Mengubah Tinggi

Jika Anda menggabungkan tinggi minimum dan tinggi, Anda harus memastikan tingginya lebih besar dari tinggi minimum. Jika tidak, ketinggian akan diabaikan. Dalam dua GIF di bawah ini, Anda akan dapat melihat perbedaannya secara real time.

Tidak Melebihi

Melebihi

Mengubah Tinggi Maks

Ketinggian maks mengambil alih jika melebihi tinggi minimum tetapi lebih kecil dari ketinggian. Jika, misalnya, Anda akan menetapkan nilai yang lebih tinggi pada tinggi minimum daripada tinggi maksimum, tinggi minimum akan mendominasi.

Mengubah Lebar Maks untuk Baris

Salah satu praktik terbaik dalam desain web adalah memutuskan satu lebar maksimum tertentu untuk seluruh situs web Anda. Ini membantu menjaga semuanya tampak responsif di berbagai ukuran layar. Ini juga membantu desainer membuat gambar rangka yang akurat.

Mengubah Lebar Maks Global

Anda mungkin atau mungkin tidak tahu bahwa Anda dapat mengatur lebar maksimum default tertentu untuk konten Anda di Penyesuai Tema dengan membuka Pengaturan Umum dan melanjutkan ke Pengaturan Tata Letak. Menjaga lebar maksimal tetap ada membantu memberdayakan daya tanggap.

Ubah Lebar Maks untuk Satu Baris Secara Khusus

Dengan pembaruan ukuran baru yang dapat diseret, Anda juga mendapatkan kesempatan untuk menentukan lebar maksimum baris secara individual. Ini bagus untuk pengecualian di mana lebih masuk akal untuk menggunakan lebar maks yang lebih tinggi.

Memberikan Modul Ketinggian yang Sama

Teknik lain yang harus Anda ingat berfokus pada memberikan elemen serupa dengan ketinggian yang sama. Ini secara estetika menyenangkan mata dan membantu pengunjung memindai konten dengan mudah. Ada dua cara umum untuk mendekati ini:

Menggunakan Equalizer Kolom

Metode pertama adalah metode yang sudah lama digunakan Divi. Jika Anda ingin membuat tinggi yang sama untuk setiap kolom di baris Anda, Anda dapat mengaktifkan Equalizer Kolom di pengaturan ukuran baris Anda. Jika Anda menggunakan warna latar belakang kolom, Anda akan segera melihat perbedaannya.

Menetapkan Tinggi untuk Setiap Modul

Cara lain untuk mendekatinya adalah dengan menetapkan ketinggian yang telah ditentukan ke modul yang Anda tambahkan.

Menyelaraskan Konten dalam Modul

Setelah Anda menetapkan ketinggian untuk semua modul, Anda juga dapat bermain-main dengan penyelarasan konten. Untuk melakukannya, Anda dapat menggunakan padding khusus untuk menentukan spasi kosong dalam modul secara manual, atau menggunakan beberapa baris kode CSS untuk menyelaraskan konten secara otomatis.

display: flex;
flex-wrap: wrap;
align-content: center;

Memilih Tinggi atau Lebar Elemen Desain & Ubah Overflow menjadi Gulir

Hal keren lainnya yang dapat Anda lakukan dengan opsi ukuran baru yang dapat diseret adalah mengubah overflow menjadi scroll. Ini akan dengan mudah membantu Anda menghemat ruang di halaman Anda dan menambahkan interaksi ekstra. Ada dua langkah untuk ini; mengatur ketinggian untuk elemen Anda dan mengubah luapan dalam pengaturan visibilitas. Mulailah dengan mengubah ketinggian elemen Anda.

Kemudian, buka pengaturan visibilitas elemen Anda dan ubah overflow vertikal menjadi scroll.

Membuat Bagian Pahlawan Layar Penuh di Semua Ukuran Layar

Ke tip berikutnya dan terakhir! Ingin membuat bagian pahlawan layar penuh? Buka bagian pahlawan di halaman Anda, buka pengaturan ukuran dan ubah ketinggiannya. Anda harus menggunakan unit viewport ketinggian untuk memastikan semuanya tetap responsif di semua ukuran layar.

• Tinggi: 100vh

Ingin menyelaraskan konten secara terpusat di bagian pahlawan layar penuh Anda? Tambahkan juga baris kode CSS khusus berikut ke elemen utama bagian Anda:

display: flex;
flex-wrap: wrap;
align-content: center;

Pikiran Akhir

Dalam posting ini, kami telah membahas opsi lebar dan tinggi baru yang datang dengan pembaruan ukuran draggable Divi. Kami telah menunjukkan kepada Anda cara kerjanya dan bagaimana Anda dapat menggunakannya untuk membuat desain halaman responsif untuk semua jenis situs web yang Anda buat. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.