Cara Menyelaraskan Konten Secara Vertikal di Divi

Kemampuan untuk menyelaraskan konten secara vertikal saat membangun situs dengan Divi dapat menjadi tambahan yang nyaman untuk sabuk alat desain Anda. Terkadang tata letak tertentu meminta konten untuk disejajarkan secara vertikal dengan cara yang berbeda (tengah, bawah, atas). Kebutuhan paling umum adalah membuat konten Anda terpusat secara vertikal. Ini memberikan sentuhan spasi simetris yang menyenangkan yang sangat berguna saat menggunakan beberapa tata letak kolom untuk konten Anda. Plus, konten yang dipusatkan secara vertikal tetap dipusatkan pada lebar browser yang berbeda, yang menghilangkan pekerjaan kasar dari penerapan padding atau margin khusus untuk mendapatkan respons yang serupa.

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat menambahkan beberapa potongan kecil CSS ke kolom mana pun untuk menyelaraskan konten secara vertikal. Saya akan menggunakan beberapa tata letak premade Divi untuk contoh bagaimana melakukan ini. Jika Anda tidak tahu banyak tentang CSS, Anda tidak perlu khawatir. Ini akan cukup mudah untuk diterapkan ke tata letak Anda sendiri dalam hitungan detik.

Memahami Flex dan Divi

Properti css Flex (atau Flexbox) hanyalah cara untuk memposisikan elemen dalam tumpukan horizontal dan/atau vertikal (seperti tabel). Kecuali, tidak seperti tabel tradisional, properti flex memungkinkan Anda membuat kotak yang menyesuaikan atau "melenturkan" dengan ukuran konten yang dipegangnya.

Divi memang menggunakan properti flex setiap kali Anda memilih "Equalize Column Heights" sebagai pengaturan baris Anda. Ini hanya memastikan ukuran kolom Anda semua akan menyesuaikan dengan ukuran kolom dengan konten terbanyak. Dan karena "Equalize Column Heights" mengaktifkan flex untuk penampung baris, Anda dapat dengan mudah memanfaatkannya dengan menambahkan css ke kolom Anda untuk menyesuaikan konten setiap kolom (atau kotak).

Misalnya, jika Anda menambahkan "margin: auto" ke kolom mana pun dalam satu baris, konten kolom itu (apakah itu satu atau lebih modul) akan menjadi terpusat secara vertikal.

Juga, jika Anda menambahkan "align-items:center;" ke baris Anda, semua kolom Anda (dan kontennya) akan dipusatkan secara vertikal.

Tentu saja, ada lebih banyak kegunaan untuk properti flex dalam desain web bersama dengan CSS yang lebih canggih yang dapat Anda terapkan pada tema Anda. Tapi untuk tutorial ini, saya ingin menjaga semuanya tetap sederhana.

Apakah Ini Benar-Benar Diperlukan?

Secara teknis, tidak. Anda dapat menyelaraskan konten/modul Anda secara vertikal di dalam kolom menggunakan spasi khusus (padding dan margin). Misalnya, Anda dapat menggunakan opsi spasi Divi untuk memberikan bantalan atas dan bawah kolom yang sama untuk memusatkan modul secara vertikal di dalam kolom. Atau, Anda hanya dapat menambahkan padding atas ke kolom untuk membuat konten rata bawah. Namun, Anda mungkin harus menyesuaikan jarak saat memperbarui halaman Anda dengan lebih banyak konten. Plus, mungkin sulit untuk menjaga keselarasan ini pada lebar browser yang berbeda.

Jadi, jika Anda mencari solusi untuk menyelaraskan konten secara vertikal tanpa harus memikirkan spasi khusus, saya pikir Anda akan menemukan ini berguna.

Mari kita mulai!

Muat Tata Letak Premade ke Halaman Anda

Untuk memulai, saya akan menggunakan Tata Letak Halaman Portofolio Perusahaan Desain Interior. Untuk mendapatkan tata letak ini di halaman Anda, buat halaman baru. Kemudian beri judul pada halaman Anda. Klik "Gunakan Divi Builder" dan kemudian "Gunakan Visual Builder". Kemudian pilih opsi “Choose a Premade Layout”. Kemudian pilih Paket Tata Letak Perusahaan Desain Interior dari popup Load From Library. Terakhir, pilih halaman Portofolio dari daftar tata letak dan klik "Gunakan Tata Letak ini".

Setelah tata letak dimuat ke halaman Anda, Anda siap untuk pergi.

Metode 1: Cara Menyelaraskan Konten Secara Vertikal menggunakan Flex dan Auto Margin

Buka pengaturan baris dari baris kedua pada halaman (yang tepat di bawah baris dengan judul halaman). Di bawah pengaturan desain, buka grup opsi Sizing dan perhatikan bahwa "Equalize Column Heights" sudah aktif. Ini berarti bahwa baris sekarang memiliki properti flex (“display: flex;”) ditambahkan ke dalamnya.

Sekarang buka pengaturan tab Advanced untuk baris yang sama dan tambahkan potongan css berikut di bawah kotak input Elemen Utama Kolom 2.

margin: auto;

Sekarang konten kolom kedua telah bergeser menjadi terpusat secara vertikal.

Membuat Konten Sejajar di Bawah

Jika Anda ingin membuat konten Anda rata bawah sehingga semua modul akan ditumpuk di bagian bawah kolom Anda, Anda dapat menyesuaikan nilai margin sebagai berikut:

margin: auto auto 0;

Menyelaraskan Konten Secara Vertikal untuk Semua Kolom di Baris Anda

Alih-alih menambahkan "margin:auto" ke setiap kolom satu per satu, Anda juga dapat memusatkan konten semua kolom secara vertikal di baris Anda dengan menambahkan cuplikan berikut ke elemen utama pengaturan Baris Anda.

align-items: center;

Atau jika Anda ingin semua konten kolom Anda sejajar, Anda dapat menambahkan cuplikan ini:

align-items: flex-end;

Dan, jangan lupa bahwa Anda dapat memanfaatkan fitur Extend Styles Divi dengan mengklik kanan pada elemen utama dengan potongan css Anda dan mengklik "Perpanjang Elemen Utama".

Kemudian perluas css elemen utama itu ke semua baris di seluruh halaman (atau bagian) untuk memusatkan semua konten setiap kolom di halaman secara vertikal.

Sekarang semuanya terpusat secara vertikal.

Tapi, Anda mungkin telah memperhatikan warna latar belakang kolom putih tidak lagi mencakup tinggi penuh baris. Ini karena kami menambahkan "margin: auto" ke kolom. Untuk memperbaikinya, Anda dapat mengubah warna latar belakang baris menjadi putih dan menghilangkan padding baris. Tapi sebagai gantinya, saya akan menunjukkan cara bagi Anda untuk memusatkan konten kolom Anda tanpa mengubah margin.

Metode 2: Menyelaraskan Konten Secara Vertikal menggunakan Arah Fleksi Kolom

Pada metode pertama, kami memanfaatkan properti flex yang ditambahkan ke baris. Ini membuat setiap kolom kami menjadi "kotak fleksibel" yang dapat disejajarkan secara vertikal hanya dengan menyesuaikan margin.

Tetapi ada juga cara yang digunakan untuk flex-direction untuk menyelaraskan konten kolom kita tanpa kehilangan efek "Equalize Column Height" yang membuat kolom kita (dan latar belakang kolom) berukuran sama. Untuk melakukan ini, kita cukup menambahkan beberapa baris CSS ke kolom kita sehingga semua modul di dalam kolom akan ditumpuk secara vertikal dan kemudian dipusatkan.

Mari kembali ke baris kita pada contoh sebelumnya. Buka Pengaturan Baris dan keluarkan css khusus yang mungkin Anda miliki di sana dengan mengklik kanan pada CSS Kustom dan mengklik "Setel Ulang Gaya CSS Kustom"

Kemudian tambahkan CSS berikut di bawah Elemen Utama Kolom 2:

display: flex;
flex-direction: column;
justify-content: center;

Atau jika saya ingin menyelaraskan konten, cukup ubah "justify-content: center" menjadi "justify-content: flex-end".

Apa yang hebat tentang pengaturan ini adalah jika saya membuat konten saya dipusatkan secara vertikal dan saya membuat baris lebar penuh, konten tetap di tengah.

Membuat Blurb dengan Berbagai Jumlah Teks Sejajar Secara Vertikal

Membuat konten kolom Anda terpusat secara vertikal juga berguna untuk uraian. Seperti yang Anda ketahui, tidak setiap uraian akan memiliki jumlah teks yang tepat yang digunakan untuk menggambarkan fitur atau layanan. Membuat uraian ini dipusatkan secara vertikal dapat membuat desain yang bagus untuk tata letak Anda.

Untuk contoh ini, saya akan menyelaraskan secara vertikal uraian di Tata Letak Halaman Beranda Pembayaran Digital.

Pertama-tama saya akan menambahkan beberapa jumlah teks isi yang berbeda ke uraian untuk memberikan representasi yang lebih realistis tentang seperti apa tampilan situs.

Sekarang, saya harus pergi ke pengaturan baris dan "Equalize Column Heights".

Sekarang saya dapat menambahkan potongan CSS saya untuk menyelaraskan konten saya dan mengubah desain.

Di bawah tab Lanjutan Pengaturan Baris Anda, kami dapat memusatkan konten kolom kami secara vertikal dengan menambahkan yang berikut di bawah Elemen Utama:

align-items: center;

Atau ubah ke yang berikut untuk membuatnya rata bawah.

align-items: flex-end;

Atau Anda dapat mengatur ulang gaya css khusus Anda dan menambahkan margin khusus berikut untuk membuat kolom pertama rata bawah dan kolom ketiga rata atas.

Kolom 1 Elemen Utama CSS:

margin: auto auto 0;

Kolom 3 Elemen Utama CSS:

margin: 0 auto auto;

Bagaimana dengan Tata Letak Satu Kolom?

Secara teknis, Anda tidak memerlukan potongan css atau flex untuk membuat konten satu kolom Anda terpusat secara vertikal. Yang perlu Anda lakukan adalah memastikan Anda memiliki jarak yang sama di atas dan di bawah konten (atau modul). Sebagian besar waktu, orang membutuhkan konten yang dipusatkan secara vertikal pada tata letak dengan beberapa kolom karena mereka ingin konten yang berdekatan sejajar dengan sempurna.

Banyak Aplikasi

Ada banyak aplikasi berguna yang menyelaraskan konten Anda secara vertikal di Divi. Ini akan berguna untuk tajuk dengan tata letak dua kolom dengan teks tajuk dalam satu kolom dan Anda ingin memastikan CTA (tombol) di kolom lainnya dipusatkan secara vertikal. Ini juga akan membantu untuk logo yang dipusatkan secara vertikal dalam tata letak enam kolom (terutama jika logo memiliki dimensi yang sedikit berbeda).

Pikiran Akhir

Meskipun metode ini bergantung pada beberapa potongan kecil CSS khusus, saya yakin aplikasi ini bisa sangat berguna bagi mereka yang mencari perbaikan cepat untuk proses yang terkadang rumit. Saya akan senang mendengar contoh lain di mana ini mungkin berguna.

Jangan ragu untuk membagikan ide dan komentar Anda di bawah ini.

Bersulang!