Loncat ke Konten Utama

Cara menyelaraskan elemen pada baris yang sama di Divi

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Kemampuan untuk menyesuaikan konten secara vertikal saat membuat situs Divi dapat menjadi tambahan praktis untuk alat desain Anda. Terkadang tata letak tertentu mengharuskan konten disejajarkan secara vertikal dengan cara yang berbeda (terpusat, rendah, tinggi). Kebutuhan paling umum adalah memusatkan konten Anda secara vertikal.

Ini memberikan pad jarak simetris yang sangat nyaman saat menggunakan beberapa tata letak kolom untuk konten Anda. Selain itu, konten yang dipusatkan secara vertikal tetap berpusat pada lebar browser yang berbeda, menghilangkan kerumitan penerapan fill atau margin khusus untuk respons yang serupa.

dalam hal ini Tutoriel, Saya akan menunjukkan cara menambahkan beberapa cuplikan CSS ke kolom mana pun untuk menyelaraskan konten secara vertikal. Saya akan menggunakan beberapa tata letak Divi yang telah ditetapkan untuk contoh bagaimana untuk melanjutkan. Jika Anda tidak tahu banyak tentang CSS, Anda tidak perlu khawatir. Ini akan sangat mudah diterapkan pada tata letak Anda sendiri dalam hitungan detik.

Memahami Flex dan Divi

Properti Flex (atau Flexbox) hanyalah cara untuk menempatkan elemen dalam tumpukan horisontal dan / atau vertikal (seperti meja). Kecuali itu tidak seperti tabel tradisional, properti lentur memungkinkan Anda untuk membuat kotak yang sesuai dengan ukuran konten yang dikandungnya.

Divi menggunakan properti fleksibel kapan pun Anda memilih "Equalize Column Heights" sebagai parameter garis. Ini hanya memastikan bahwa ukuran kolom Anda 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 zona).

Sebagai contoh, jika Anda menambahkan "margin: auto" ke kolom berturut-turut, isi kolom itu (apakah itu satu atau lebih modul) akan menjadi pusat secara vertikal.

Selain itu, jika Anda menambahkan "align-items: center" ke garis Anda, semua kolom Anda (dan isinya) 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 membuat semuanya tetap sederhana.

Apakah itu benar-benar diperlukan?

Secara teknis, tidak. Anda dapat secara vertikal menyelaraskan konten / modul Anda dalam kolom menggunakan spasi khusus (isi dan margin). Misalnya, Anda dapat menggunakan opsi spasi Divi untuk memberikan kolom yang sama dengan padding atas dan bawah untuk memusatkan modul secara vertikal di kolom. Anda juga dapat menambahkan hanya satu isi lebih dari satu kolom untuk menyelaraskan konten yang lebih rendah. Namun, Anda mungkin perlu menyesuaikan jarak saat memperbarui halaman Anda dengan lebih banyak konten. Selain itu, sulit untuk mempertahankan keselarasan ini pada lebar browser yang berbeda.

Jadi, jika Anda mencari solusi untuk menyelaraskan konten secara vertikal tanpa harus memikirkan jarak khusus, saya pikir Anda akan menemukan itu bermanfaat.

Ayo mulai!

Muat tata letak yang telah ditentukan pada halaman Anda

Sebagai permulaan, saya akan menggunakan tata letak Portofolio Perusahaan Desain Interior. Untuk mendapatkan tata letak ini di halaman Anda, buat halaman baru. Kemudian beri judul ke halaman Anda. Klik "Gunakan Divi Builder" dan kemudian "Gunakan Visual Builder." Kemudian pilih opsi "Pilih tata letak dasar". Kemudian pilih Tata Letak Perusahaan Desain Interior di Muat Dari Pustaka Perpustakaan. Akhirnya, pilih halaman Portofolio dalam daftar tata letak dan klik "Gunakan tata letak ini".

template divi theme wordpress.png

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

Metode 1: Cara Menyesuaikan Konten Secara Vertikal dengan Flex dan Margin Otomatis

Buka pengaturan garis dari baris kedua halaman (yang tepat di bawah garis dengan judul halaman). Di bawah parameter desain, buka grup opsi sizing dan perhatikan bahwa "Equalize Column Heights" sudah aktif. Ini berarti bahwa garis sekarang memiliki sifat flex ("display: flex;") ditambahkan.

selaraskan ketinggian kolom.png

Sekarang masuk ke pengaturan tab Lanjutan untuk baris yang sama dan tambahkan potongan css berikut di bawah bidang input dari item utama di kolom 2.

batas: mobil;

margin divi.png otomatis

Divi: Tema WordPress terbaik sepanjang masa!

lebih 554.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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:

batas: mobil 0;

margin divi line.png

Penyesuaian vertikal konten untuk semua kolom di baris Anda

Alih-alih menambahkan "margin: otomatis" ke setiap kolom secara individual, Anda juga dapat secara vertikal memusatkan isi semua kolom di baris Anda dengan menambahkan cuplikan berikut ke elemen utama dari parameter baris Anda.

menyelaraskan-item: pusat;

sejajarkan elemen divi.png

Atau jika Anda ingin semua konten kolom Anda disejajarkan di bagian bawah, Anda dapat menambahkan kutipan ini:

align-items: flex-end;

Dan jangan lupa bahwa Anda dapat mengambil keuntungan dari fitur Divi Extend Styles dengan mengklik kanan pada item utama dengan cuplikan CSS Anda dan mengklik "Perluas item utama".

perpanjang element.png utama

Kemudian, perpanjang elemen css utama ini ke semua garis halaman (atau bagian) untuk secara vertikal memusatkan semua isi setiap kolom halaman.

memperluas gaya divi.png

Sekarang semuanya terpusat secara vertikal.

penampilan perubahan divi.png

Tapi, Anda mungkin telah memperhatikan bahwa warna latar belakang kolom putih tidak lagi menutupi tinggi penuh garis. Ini karena kami menambahkan "margin: otomatis" ke kolom. Untuk mengatasi masalah ini, Anda dapat mengubah warna latar belakang dari baris kosong dan menghapus isi dari garis. Tapi sebaliknya, saya akan menunjukkan kepada Anda cara untuk memusatkan isi kolom Anda tanpa mengubah margin.

2 Metode: Penyelarasan Vertikal Konten Menggunakan Column Flex Direction

Dalam metode pertama, kami mengambil keuntungan dari properti lentur yang ditambahkan ke garis. Ini menjadikan setiap kolom kami "kotak fleksibel" yang dapat disejajarkan secara vertikal hanya dengan menyesuaikan margin.

Tetapi ada juga cara fleksibel untuk mengarahkan isi kolom kita tanpa kehilangan efek "Equalize Column Height" yang menjaga kolom kita (dan latar belakang kolom) dengan ukuran yang sama. Untuk melakukan ini, kami hanya akan menambahkan beberapa baris CSS ke kolom kami sehingga semua modul di kolom ditumpuk secara vertikal dan kemudian di tengah.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

Mari kita kembali ke baris kami di contoh sebelumnya. Buka pengaturan saluran dan hapus css khusus yang mungkin Anda miliki dengan mengklik kanan CSS kustom dan mengklik "Reset Custom CSS Styles."

Kemudian tambahkan CSS berikut di bawah kolom 2, elemen utama:

display: fleksibel; flex-direction: kolom; justify-content: center;

Kemudi flex-column.png

Atau, jika saya ingin menyelaraskan konten di bagian bawah, cukup ganti "Justify content: center" dengan "justify content: flex-end".

melenturkan akhir pelurusan.png

Hal hebat dengan pengaturan ini adalah jika konten saya dipusatkan secara vertikal dan lebar garisnya tercapai, konten tetap terpusat.

tampilan boxes.png

Buatlah uraian (Ringkasan) dengan jumlah teks yang berjajar vertikal yang berbeda

Membuat konten kolom Anda secara vertikal terpusat juga dapat berguna untuk blurbs. Seperti yang Anda ketahui, tidak semua uraian akan berisi jumlah teks yang tepat yang digunakan untuk mendeskripsikan fungsi atau layanan. Memusatkan uraian ini secara vertikal dapat membuat desain yang indah untuk tata letak Anda.

Untuk contoh ini, saya akan secara vertikal menyesuaikan cetusan-cetusan pada tata letak halaman beranda Digital pembayaran.

Pertama-tama saya akan menambahkan jumlah teks tubuh yang berbeda ke uraian untuk memberikan representasi yang lebih realistis tentang bagaimana sebuah situs akan terlihat.

perataan blox

Sekarang saya harus pergi ke pengaturan garis dan 'Harmonize column height'.

selaraskan columns.png

Sekarang saya dapat menambahkan cuplikan CSS saya untuk menyesuaikan konten saya dan memodifikasi desain.

Pada tab Advanced dari pengaturan baris Anda, kita dapat secara vertikal memusatkan isi kolom kami dengan menambahkan berikut di bawah Elemen Utama:

menyelaraskan-item: pusat;

Ubah penyelarasan konten divi.png

Atau ubah dengan mengikuti untuk menurunkannya.

align-items: flex-end;

pelurusan di bagian bawah divi.png

Anda juga dapat menyetel ulang gaya CSS khusus dan menambahkan margin khusus berikut untuk menyejajarkan bagian bawah kolom pertama dan bagian atas ketiga yang sejajar.

Elemen utama kolom CSS 1:

batas: mobil mobil 0;

Elemen utama kolom CSS 3:

batas: 0 mobil mobil;

menyesuaikan penyelarasan divi.png abstrak

Bagaimana dengan tata letak satu kolom?

Secara teknis, Anda tidak perlu snipet kode CSS atau melenturkan ke pusat vertikal konten kolom Anda. Yang perlu Anda lakukan adalah memastikan Anda memiliki jarak yang sama di atas dan di bawah konten Anda (atau modul). Sebagian besar waktu, pengguna perlu konten vertikal yang berpusat pada model multi-kolom karena mereka ingin konten yang berdekatan untuk menyelaraskan dengan sempurna.

Itu saja untuk tutorial ini yang menunjukkan kepada Anda cara menyelaraskan elemen pada baris yang sama di Divi.

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
4 saham
saham2
menciak
Register2
Ada apa