Kemampuan untuk menyelaraskan secara vertikal isi saat membuat situs dengan Divi dapat menjadi tambahan yang berguna untuk alat desain Anda. Terkadang ketentuan tertentu mensyaratkan bahwa isi disejajarkan secara vertikal dengan cara yang berbeda (tengah, bawah, atas). Kebutuhan yang paling umum adalah memusatkan perhatian Anda isi vertikal.
Ini memberikan sentuhan lezat dari spasi simetris yang berguna saat menggunakan beberapa tata letak kolom untuk konten Anda. Selain itu, konten yang berpusat secara vertikal tetap berpusat pada lebar browser yang berbeda, menghilangkan kerumitan menerapkan padding atau margin khusus untuk mencapai respons yang sama.
Dalam tutorial ini, saya akan menunjukkan cara menambahkan beberapa potongan CSS kecil ke kolom mana pun untuk menyelaraskan konten secara vertikal. Saya akan menggunakan beberapa tata letak pra-dibuat dari Divi untuk contoh bagaimana melakukan ini. Jika Anda tidak tahu banyak tentang CSS, Anda tidak perlu khawatir. Ini akan sangat mudah untuk diterapkan ke tata letak Anda sendiri dalam hitungan detik.
Memahami Flex dan Divi
Properti css Flex (atau Flexbox) hanyalah cara untuk memposisikan item dalam tumpukan horizontal dan / atau vertikal (seperti meja). Kecuali, tidak seperti tabel tradisional, properti flex memungkinkan Anda membuat kotak yang akan menyesuaikan dengan ukuran konten yang dikandungnya.
Divi menggunakan properti flex setiap kali Anda memilih "Equalize Column Heights" sebagai parameter baris. Ini hanya memastikan bahwa ukuran kolom Anda akan menyesuaikan dengan ukuran kolom dengan konten terbanyak. Dan karena “Equalize Column Heights” mengaktifkan fleksibilitas untuk wadah baris, Anda dapat dengan mudah memanfaatkannya dengan menambahkan css ke kolom Anda untuk menyesuaikan konten setiap kolom (atau area).
Misalnya, jika Anda menambahkan "margin: auto" ke kolom berturut-turut, konten kolom itu (apakah itu satu atau lebih modul) akan menjadi vertikal di tengah.
Selain itu, jika Anda menambahkan "align-items: center" ke baris Anda, semua kolom Anda (dan kontennya) akan dipusatkan secara vertikal.
Tentu saja, ada banyak kegunaan lain dari properti Flex dalam desain web, serta CSS yang lebih canggih yang dapat Anda terapkan ke tema Anda. Tetapi untuk tutorial ini, saya ingin membuatnya tetap sederhana.
Apakah ini benar-benar perlu?
Secara teknis, tidak. Anda dapat menyelaraskan konten / modul Anda secara vertikal dalam kolom menggunakan spasi kustom (padding dan margin). Misalnya, Anda dapat menggunakan opsi jarak Divi untuk memberikan kolom yang sama dengan bantalan atas dan bawah untuk menengahkan modul secara vertikal di kolom. Anda juga dapat menambahkan hanya bantalan atas ke kolom untuk meratakan konten bawah. Namun, Anda mungkin perlu menyesuaikan jarak saat memperbarui halaman Anda dengan lebih banyak konten. Selain itu, mungkin sulit untuk mempertahankan kesejajaran ini di berbagai lebar browser.
Jadi jika Anda mencari solusi untuk menyelaraskan konten secara vertikal tanpa harus memikirkan tentang spasi khusus, saya pikir Anda akan menemukan ini berguna.
Ayo mulai!
Muat tata letak yang telah ditentukan di halaman Anda
Untuk memulai, saya akan menggunakan tata letak dari rangkaian Portofolio Perusahaan Desain Interior. Untuk mendapatkan tata letak ini di halaman Anda, buat halaman baru. Kemudian beri judul halaman Anda. Klik "Gunakan Divi Builder" lalu "Gunakan Visual Builder". Kemudian pilih opsi "Pilih tata letak dasar". Kemudian pilih kit tata letak Perusahaan Desain Interior dari jendela pop-up Muat dari Perpustakaan. Terakhir, pilih halaman Portofolio dari daftar tata letak dan klik "Gunakan tata letak ini".
Setelah tata letak dimuat pada halaman Anda, Anda siap untuk pergi.
Metode 1: Cara Menyelaraskan Konten Secara Vertikal Menggunakan Flex dan Margin Otomatis
Buka pengaturan baris untuk baris kedua halaman (yang tepat di bawah baris dengan judul halaman). Di bawah pengaturan desain, buka grup opsi ukuran dan perhatikan bahwa "Equalize Column Heights" sudah aktif. Ini berarti bahwa baris tersebut sekarang memiliki properti flex ("display: flex;") ditambahkan.
Sekarang masuk ke pengaturan tab Advanced untuk baris yang sama dan tambahkan potongan css berikut di bawah kotak entri elemen utama kolom 2.
margin: auto; |
Sekarang isi kolom kedua telah dipindahkan untuk dipusatkan secara vertikal.
Buat konten yang lebih rendah selaras
Jika Anda ingin menyelaraskan konten Anda di bagian bawah sehingga semua modul menumpuk di bagian bawah kolom Anda, Anda dapat menyesuaikan nilai margin sebagai berikut:
margin: auto 0; |
Penyesuaian vertikal konten untuk semua kolom di baris Anda
Daripada menambahkan "margin: auto" ke setiap kolom satu per satu, Anda juga dapat memusatkan konten semua kolom di baris secara vertikal dengan menambahkan cuplikan berikut ke elemen utama setelan baris Anda.
align-items: center; |
Atau jika Anda ingin semua konten kolom Anda selaras di bagian bawah, Anda dapat menambahkan kutipan ini:
align-items: flex-end; |
Dan jangan lupa bahwa Anda dapat memanfaatkan fitur Perpanjang Gaya Divi dengan mengklik kanan elemen utama dengan cuplikan CSS Anda dan mengklik "Perluas elemen utama".
Kemudian, perluas elemen css utama ini ke semua baris halaman (atau bagian) untuk memusatkan secara vertikal semua konten dari setiap kolom halaman.
Sekarang semuanya terpusat secara vertikal.
Namun, Anda mungkin telah memperhatikan bahwa warna latar belakang kolom putih tidak lagi menutupi seluruh tinggi baris. Ini karena kami menambahkan "margin: auto" ke kolom. Untuk mengatasi masalah ini, Anda dapat mengubah warna latar belakang garis menjadi putih dan menghapus isian dari garis. Namun sebaliknya, saya akan menunjukkan cara untuk memusatkan konten kolom Anda tanpa mengubah margin.
Metode 2: Sejajarkan konten secara vertikal menggunakan arah lentur kolom
Dalam 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 fleksibel untuk menyelaraskan isi kolom kita tanpa kehilangan efek "Equalize Column Height" yang membuat kolom (dan latar belakang kolom) berukuran sama. Untuk melakukan ini, kami hanya akan menambahkan beberapa baris CSS ke kolom kami sehingga semua modul di kolom ditumpuk secara vertikal dan kemudian dipusatkan.
Mari kembali ke baris kita di contoh sebelumnya. Buka setelan baris dan hapus semua css khusus yang mungkin Anda miliki di sana dengan mengklik kanan pada CSS khusus dan mengklik "Setel ulang gaya CSS khusus".
Kemudian tambahkan CSS berikut di bawah kolom 2, elemen utama:
tampilan: fleksibel; arah fleksibel: kolom; justify-content: center;
Atau, jika saya ingin menyelaraskan konten di bagian bawah, cukup ganti "Justify the content: center" dengan "justify the content: flex-end".
Yang hebat tentang penyiapan ini adalah jika konten saya dipusatkan secara vertikal dan lebar baris tercapai, konten tetap berada di tengah.
Buat ringkasan (Ringkasan) dengan berbagai jumlah teks yang selaras secara vertikal
Membuat konten kolom Anda terpusat secara vertikal juga dapat berguna untuk uraian. Seperti yang Anda ketahui, tidak semua uraian akan berisi jumlah persis teks yang digunakan untuk dmenulis fungsi atau layanan. Memusatkan uraian ini secara vertikal dapat membuat desain yang indah untuk tata letak Anda.
Untuk contoh ini, saya akan secara vertikal menyelaraskan uraian ke tata letak beranda Pembayaran Digital.
Saya akan menambahkan jumlah teks tubuh yang berbeda ke uraian pertama untuk memberikan representasi yang lebih realistis tentang seperti apa situs itu.
Sekarang saya harus pergi ke pengaturan garis dan "Harmonisasi ketinggian kolom".
Sekarang saya dapat menambahkan cuplikan CSS saya untuk menyesuaikan konten saya dan memodifikasi desain.
Di bawah tab Advanced dari pengaturan baris Anda, kami dapat memusatkan konten kolom kami secara vertikal dengan menambahkan yang berikut di bawah Elemen Utama:
align-items: center; |
Atau ubah dengan mengikuti untuk menurunkannya.
align-items: flex-end; |
Anda juga dapat mengatur ulang gaya CSS kustom Anda dan menambahkan margin khusus berikut untuk menyelaraskan bagian bawah kolom pertama dan ketiga bagian atas selaras.
Elemen utama CSS kolom 1:
margin: auto auto 0; |
Elemen utama CSS kolom 3:
margin: 0 auto auto; |
Bagaimana dengan tata letak kolom tunggal?
Secara teknis, Anda tidak memerlukan cuplikan CSS atau fleksibel untuk memusatkan konten kolom secara vertikal. Yang perlu Anda lakukan adalah memastikan Anda memiliki jarak yang sama di atas dan di bawah konten (atau modul) Anda. Sering kali, pengguna membutuhkan konten vertikal yang berpusat pada model dengan banyak kolom karena mereka ingin konten yang berdekatan berbaris dengan sempurna.
Itu saja untuk tutorial ini yang menunjukkan kepada Anda cara menyelaraskan elemen pada baris yang sama di Divi.
