Loncat ke Konten Utama

Cara menyelaraskan elemen pada baris yang sama di Divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

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

Kemungkinan menyelaraskan konten secara vertikal saat membuat situs dengan Divi dapat menjadi tambahan praktis untuk alat desain Anda. Terkadang tata letak tertentu mengharuskan konten diratakan secara vertikal dengan cara yang berbeda (tengah, bawah, atas). Kebutuhan paling umum adalah memusatkan konten Anda secara 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 cuplikan CSS kecil ke kolom mana pun untuk menyelaraskan konten secara vertikal. Saya akan menggunakan beberapa tata letak yang dibuat sebelumnya 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 paling banyak. Dan karena "Equalize Column Heights" mengaktifkan flex untuk kontainer 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".

template divi theme wordpress.png

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.

selaraskan ketinggian kolom.png

Sekarang masuk ke pengaturan tab Advanced untuk baris yang sama dan tambahkan potongan css berikut di bawah kotak entri elemen utama kolom 2.

marginauto;

margin divi.png otomatis

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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:

marginauto 0;

margin divi line.png

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;

menyelaraskan elemen divi.png

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".

perpanjang element.png utama

Kemudian, perluas elemen css utama ini ke semua baris halaman (atau bagian) untuk memusatkan secara vertikal semua konten dari setiap kolom halaman.

memperluas gaya divi.png

Sekarang semuanya terpusat secara vertikal.

penampilan perubahan divi.png

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.

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]

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;

Kemudi flex-column.png

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

melenturkan akhir pelurusan.png

Yang hebat tentang penyiapan ini adalah jika konten saya dipusatkan secara vertikal dan lebar baris tercapai, konten tetap berada di tengah.

tampilan boxes.png

Buat ringkasan (Ringkasan) dengan berbagai jumlah teks yang selaras secara vertikal

Membuat konten kolom Anda di tengah secara vertikal juga dapat berguna untuk uraian. Seperti yang Anda ketahui, tidak semua uraian akan berisi jumlah teks yang persis digunakan untuk mendeskripsikan fitur atau layanan. Memusatkan uraian ini secara vertikal dapat menciptakan 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.

perataan blox

Sekarang saya harus pergi ke pengaturan garis dan "Harmonisasi ketinggian kolom".

selaraskan columns.png

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;

Ubah penyelarasan konten divi.png

Atau ubah dengan mengikuti untuk menurunkannya.

align-items: flex-end;

pelurusan di bagian bawah divi.png

Buat Toko Online Anda dengan mudah

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

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:

marginauto auto 0;

Elemen utama CSS kolom 3:

margin0 auto auto;

menyesuaikan penyelarasan abstrak divi.png

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.

Artikel ini berisi komentar 0

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