Cara membuat kolom yang sama ketinggian dengan flexbox di divi 5

Membuat tata letak yang bersih dan profesional adalah landasan desain web yang efektif, dan ketinggian kolom yang sama berkontribusi pada tata letak yang seimbang. Apakah Anda menampilkan produk, layanan, atau item portofolio, kolom yang menyelaraskan pengalaman pengguna dengan sempurna. Dalam Divi 4, kolom yang sama dimungkinkan, tetapi Divi 5 membawa lebih banyak ke meja.

Dalam Divi 5, integrasi sistem tata letak Flexbox meningkatkan proses, menawarkan cara yang lebih sederhana dan lebih fleksibel untuk menciptakan ketinggian kolom yang sama. Posting ini akan memandu Anda dengan membuat tata letak yang bersih dan seimbang. Ayo menyelam!

Tinggi kolom yang sama di Divi 4

Dalam Divi 4, mencapai kolom dengan ketinggian yang sama langsung tetapi terbatas. Sakelar mengaktifkan semua kolom dalam satu baris agar sesuai dengan ketinggian kolom tertinggi. Fitur ini adalah penyelamat untuk mempertahankan konsistensi visual, tetapi memiliki keterbatasan yang sering membutuhkan solusi.

Efek tinggi yang sama dalam Divi 4 diterapkan pada wadah kolom, yang berarti bahwa warna latar belakang, gambar, atau perbatasan harus diatur pada tingkat kolom. Pendekatan ini tidak meluas ke modul di dalam kolom, yang dapat menyebabkan celah yang canggung. Misalnya, tombol di bawah modul teks pendek dalam satu kolom akan meninggalkan ruang canggung di bawahnya, sementara tombol di bawah modul teks yang lebih panjang di kolom lain mengisinya, membuat tampilan yang tidak seimbang.

Ketika desainer menginginkan lebih banyak kontrol, seperti menyelaraskan konten modul secara vertikal atau menyesuaikan jarak, CSS khusus sering diperlukan. Ini menimbulkan tantangan, terutama bagi pemula, karena mereka harus menyelami bidang CSS khusus divi untuk mencapai hasil yang dipoles. Misalnya, jika Anda ingin tombol untuk menyelaraskan ke bagian bawah kolom di Divi 4, Anda harus menggunakan CSS untuk mencapainya.

Bagaimana Flexbox di Divi 5 Mengatasi Kolom yang sama

Flexbox diintegrasikan dengan mulus ke dalam Divi 5, membuat menciptakan ketinggian kolom yang sama lebih mudah dicapai. Tidak seperti opsi berbasis sakelar Divi 4, Divi 5 memanfaatkan Flexbox untuk menyediakan kontrol bawaan yang membuat desain web merancang lebih mudah.

Dengan FlexBox, Anda dapat secara otomatis meregangkan kolom agar sesuai dengan yang tertinggi sambil menawarkan opsi penyelarasan yang tepat untuk kedua kolom dan kontennya. Ini menghilangkan kebutuhan akan CSS khusus, memungkinkan tata letak canggih untuk setiap pengguna Divi, untuk pemula dan profesional. Sistem tata letak Flexbox Divi 5 memungkinkan desainer untuk dengan mudah membuat desain profesional yang konsisten.

Cara membuat ketinggian kolom yang sama di divi 5

Membuat kolom dengan ketinggian yang sama di Divi 5 sangat mudah berkat integrasi flexbox -nya. Dalam langkah -langkah di bawah ini, kami akan menunjukkan cara mengatur segalanya dan memastikan bahwa semuanya berbaris dengan sempurna.

Langkah 1: Buat desain Anda

Buka pembangun visual pada halaman baru atau yang sudah ada. Klik ikon Black + untuk menambahkan baris baru .

Ketika kotak dialog bagian baru muncul, pilih tata letak tiga kolom di bawah kolom yang sama .

Tambahkan modul grup di kolom pertama.

Selanjutnya, tambahkan modul ikon ke dalam modul grup di kolom pertama.

Pilih Ikon Periksa di tab Konten.

Di tab Desain , atur warna ikon ke #2EA3F2 dan ukuran ikon ke 36px.

Selanjutnya, tambahkan modul heading di bawah modul ikon. Pastikan untuk menambahkan heading ke modul grup dengan mengklik ikon Black +, bukan yang abu -abu.

Ketik Desain Web sebagai judul di tab Konten .

Di tab Desain, pilih H5 sebagai level heading , Inter sebagai heading font , dan medium sebagai bobot font heading . Atur gaya heading font ke huruf besar , judul perataan teks ke kiri , warna teks heading ke #000000 , dan jaga ukuran teks heading pada ukuran default 16px .

Selanjutnya, tambahkan modul teks di bawah judul di dalam modul grup. Anda dapat meninggalkan pengaturan apa adanya.

Kami akan menambahkan modul tombol untuk modul akhir di kolom. Namun, alih -alih menambahkannya ke modul grup, kami akan menambahkannya di bawahnya. Ini akan memungkinkan kita untuk membuat ketinggian kolom yang sama, tetapi sejajarkan tombol ke bawah, membuat desain lebih kohesif.

Klik tab Desain, dan tetapkan pengaturan gaya yang Anda inginkan ke modul tombol. Periksa tombol Anda untuk memastikannya di luar modul grup dengan melihat tampilan Layers di menu sebelah kiri. Saat selesai, tombolnya akan terlihat seperti tangkapan layar di bawah ini-selaras kiri dengan latar belakang biru dan teks putih.

Langkah 2: Duplikasi kolom

Setelah kolom pertama diisi dengan konten, kami akan menyalin konten dari kolom pertama ke kolom kedua dan ketiga dan membuat beberapa perubahan. Anda dapat menghapus kolom kedua dan ketiga dan menduplikasi yang pertama, atau menyalin dan menempel modul grup dan tombol ke kolom kedua dan ketiga.

Selanjutnya, ubah judul judul di kolom ke -2 menjadi pengkodean , dan judul judul di kolom ke -3 menjadi pemasaran . Kami juga akan menghapus beberapa konten dalam modul teks di kolom ke -2 sehingga kami dapat menunjukkan bagaimana Divi 5 menangani flexbox dengan panjang konten yang bervariasi. Seperti yang Anda lihat, kolom tidak merata.

Sebelum kita beralih ke langkah berikutnya, klik ke kolom pertama dan tambahkan jarak 25px ke semua sisi kolom kami.

Kami juga akan menambahkan radius perbatasan 15px dan lebar perbatasan 1px dengan #666666 sebagai warnanya.

Langkah terakhir dalam merancang baris kami adalah menyalin atribut desain dari kolom pertama dan menempelkannya ke kolom yang tersisa. Klik kanan pada kolom pertama dan pilih Salin Gaya Item . Selanjutnya, klik kanan pada kolom ke-2 dan pilih Paste Item Style . Ulangi tindakan ini untuk kolom ke -3 juga.

Langkah 3: Mengkonfigurasi Pengaturan FlexBox untuk ketinggian yang sama

Selanjutnya, kita perlu mengonfigurasi pengaturan FlexBox kami untuk baris. Divi 5 mengintegrasikan kontrol FlexBox ke dalam sistem tata letaknya, bergerak di luar sakelar kolom Equalize divi 4. Arahkan ke tab Desain untuk baris dan pastikan bahwa Flex dipilih di bawah tata letak .

Selanjutnya, pastikan baris dipilih di bawah arah tata letak , mulai di bawah konten Justify , dan peregangan dipilih di bawah item Align . Ini akan memberi tahu Divi 5 untuk menjaga struktur kolom, menyelaraskan semua item di dalam baris ke kiri, dan mengisi ruang yang tersedia di dalam wadah induk.

Selanjutnya, klik pada pengaturan untuk kolom pertama. Klik menu tata letak dropdown untuk mengungkapkan pengaturannya di tab Desain . Secara default, Flex akan dipilih berdasarkan tata letak . Di bidang arah tata letak , pilih kolom . Di bawah konten Justify , pilih ruang di antara . Sejajarkan semua item ke awal (kiri), dan tinggalkan tata letak yang diatur ke No Wrap .

Ulangi langkah -langkah di atas untuk kolom ke -2 dan ke -3. Anda juga dapat menggunakan copy/paste atau memperluas fitur untuk menerapkan pengaturan yang sama ke kolom yang tersisa dari baris.

Semua modul dalam grup akan diregangkan untuk mengisi ruang yang tersedia, dan tombol di luar grup akan disejajarkan ke bagian bawah.

Langkah 4: Tes Responsif

Breakpoints responsif divi 5 yang dapat disesuaikan memudahkan untuk memastikan ketinggian kolom Anda yang sama terlihat bagus di semua perangkat. Gunakan tampilan responsif sakelar untuk mempratinjau tata letak Anda di pembangun visual. Secara default, ada tiga breakpoint. Namun, Divi 5 sekarang memiliki 7, yang dapat dengan mudah diaktifkan dengan mengklik menu ellipsis di bilah alat di bagian atas pembangun visual. Aktifkan breakpoint yang Anda inginkan dan klik simpan untuk menerapkannya.

Klik untuk mempratinjau tata letak Anda di tampilan tablet . Seperti yang Anda lihat, Flexbox menjaga kolom ditumpuk berdampingan.

Anda dapat mengubah struktur kolom untuk memungkinkan kolom menumpuk secara vertikal pada perangkat yang lebih kecil. Saat berada di breakpoint tablet, klik tab konten untuk baris . Klik Ubah Struktur Kolom .

Ketika kotak dialog muncul, klik untuk mengaktifkan baris tunggal di bawah kolom yang sama . Ini akan mengubah baris 3-kolom menjadi satu kolom di tablet dan perangkat seluler, sambil melestarikan struktur 3-kolom di desktop.

Saat Anda mempratinjau perubahan di semua breakpoint, Anda akan melihat bagaimana Divi mentransisikan tata letak untuk layar kecil.

Dengan mengotomatisasi penyelarasan tinggi, desainer dapat fokus pada kreativitas daripada perbaikan teknis, membuatnya lebih mudah untuk membangun situs profesional dalam waktu yang sebagian kecil. Sistem tata letak Flexbox Divi 5 juga mendukung organisasi konten yang lebih baik melalui grup modul, membuat modul yang menyelaraskan tanpa CSS khusus lebih mudah dari sebelumnya.

Kasus penggunaan umum

Sistem Flexbox Divi 5 membuat menciptakan ketinggian kolom yang sama serbaguna dan efektif untuk berbagai kasus penggunaan. Di bawah ini adalah beberapa cara umum di mana sistem Flexbox Divi 5 bersinar:

1. Daftar Produk

Dalam tata letak e-commerce, kartu produk sering bervariasi dalam panjang konten karena judul atau deskripsi. Dengan Flexbox Divi 5, Anda dapat membuat kisi kartu produk di mana setiap kolom mempertahankan ketinggian yang sama, memastikan penampilan yang bersih dan profesional. Misalnya, produk dengan deskripsi singkat selaras dengan yang menampilkan deskripsi yang lebih panjang. Sistem Flexbox Divi 5 memungkinkan Anda untuk menghindari celah yang canggung dan menciptakan pengalaman kohesif yang mendorong kepercayaan dan keterlibatan pengguna.

2. Bagian unggulan

Bagian layanan atau fitur sangat cocok untuk sistem Flexbox Divi. Flexbox dalam Divi 5 memastikan semua modul dalam satu baris memiliki ketinggian kolom yang sama, menciptakan tampilan yang seimbang dan dipoles. Apakah menampilkan bios tim, layanan, atau sorotan fitur, kolom yang disamakan membuat halaman web Anda mudah dipindai, meningkatkan pengalaman pengguna.

3. Kisi Portofolio

Kisi portofolio adalah casing penggunaan yang sempurna untuk Flexbox, terutama untuk freelancer yang menampilkan pekerjaan mereka. Flexbox memastikan bahwa item galeri seperti gambar selaras secara seragam, bahkan dengan rasio aspek yang berbeda. Anda dapat menggunakan modul grup, menetapkan gambar latar belakang, dan menyesuaikan jarak yang sesuai. Ini menciptakan kisi -kisi profesional yang rapi yang menampilkan karya Anda secara konsisten, menjadikannya ideal untuk fotografer, desainer, atau agensi yang bertujuan untuk mengesankan klien potensial.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama 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 mendapatkan akses ke paket tata letak divi mingguan gratis!

Bersikaplah terbiasa dengan fitur Flexbox Divi 5 hari ini

Sistem tata letak Flexbox Divi 5 menandai lompatan yang signifikan ke depan dari cara Divi 4 untuk menyamakan ketinggian kolom, mengubah bagaimana pengguna Divi membuat kolom yang sama. Di mana Divi 4 mengandalkan metode yang kaku dan bergantung pada latar belakang yang sering membutuhkan CSS khusus untuk penyempurnaan, Divi 5 memanfaatkan flexbox untuk memberikan kontrol intuitif dan responsif yang mulus. Hasilnya adalah sistem yang lebih efisien yang menghilangkan kebutuhan untuk solusi CSS khusus dan memungkinkan pengguna Divi untuk dengan mudah membangun tata letak profesional yang dipoles.

Apakah Anda siap untuk mengangkat situs web divi Anda? Selami pengaturan Flexbox Divi 5 dan bereksperimen dengan kemungkinan kreatif yang mereka buka. Bagikan komentar Anda di bawah ini atau terhubung dengan kami di saluran media sosial kami untuk membagikan pemikiran Anda tentang fitur FlexBox baru kami.