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 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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

Ini memberikan kunci spasi simetris yang bagus dan nyaman saat menggunakan beberapa tata letak kolom untuk konten Anda. Selain itu, konten yang dipusatkan secara vertikal tetap terpusat pada lebar browser yang berbeda, menghilangkan kerumitan dalam menerapkan pengisian khusus atau margin untuk responsif yang serupa.

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara menambahkan beberapa potongan CSS kecil ke kolom apa saja untuk menyelaraskan konten secara vertikal. Saya akan menggunakan beberapa tata letak Divi yang telah ditentukan untuk contoh bagaimana melanjutkan. 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 Flex (atau Flexbox) hanyalah cara untuk memposisikan elemen dalam tumpukan horizontal dan / atau vertikal (mirip meja). Kecuali bahwa tidak seperti tabel tradisional, properti flex memungkinkan Anda untuk membuat kotak yang sesuai dengan ukuran konten yang dikandungnya.

Divi menggunakan properti flex setiap kali 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 kontainer baris, Anda dapat dengan mudah memanfaatkannya dengan menambahkan css ke kolom Anda untuk menyesuaikan konten setiap kolom (atau zona).

Misalnya, jika Anda menambahkan "margin: auto" ke kolom berturut-turut, konten kolom itu (apakah itu satu atau lebih modul) akan menjadi terpusat secara vertikal.

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 pada tema Anda. Tetapi untuk tutorial ini, saya ingin menyederhanakannya.

Apakah ini benar-benar perlu?

Secara teknis, tidak. Anda dapat menyelaraskan konten / modul Anda secara vertikal dalam kolom menggunakan spasi khusus (isi dan margin). Misalnya, Anda dapat menggunakan opsi spacing Divi untuk memberikan kolom yang sama dengan padding atas dan bawah untuk memusatkan modul secara vertikal di dalam kolom. Anda juga dapat menambahkan hanya satu isian yang lebih besar dari satu kolom untuk menyelaraskan konten yang lebih rendah. Namun, Anda mungkin perlu menyesuaikan spasi saat memperbarui halaman Anda dengan lebih banyak konten. Selain itu, mungkin sulit untuk mempertahankan perataan 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 itu membantu.

Ayo mulai!

Muat tata letak yang telah ditentukan di halaman Anda

Sebagai permulaan, saya akan menggunakan tata letak jajaran Portofolio Perusahaan Desain Interior. Untuk mendapatkan tata letak ini di halaman Anda, buat halaman baru. Kemudian berikan judul pada halaman Anda. Klik "Use Divi Builder" dan kemudian "Use Visual Builder". Kemudian pilih opsi "Pilih tata letak dasar". Lalu pilih Kit Desain Tata Letak Perusahaan Desain Interior dalam jendela sembulan Muat Dari Perpustakaan. Terakhir, pilih halaman Portofolio di 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 dengan Flex dan Margin Otomatis

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

selaraskan ketinggian kolom.png

Sekarang pergi ke pengaturan tab Advanced untuk baris yang sama dan tambahkan potongan css berikut di bawah kolom input item utama di kolom 2.

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]

batas: mobil;

margin divi.png otomatis

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 satu per satu, Anda juga dapat memusatkan secara vertikal konten semua kolom di baris Anda dengan menambahkan potongan berikut ke elemen utama dari parameter baris Anda.

menyelaraskan-item: pusat;

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 Divi Extend Styles dengan mengklik kanan pada item utama dengan potongan CSS Anda dan mengklik "Expand item 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

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

Metode 2: Penyelarasan Vertikal Konten Menggunakan Arah Flex Kolom

Pada metode pertama, kami mengambil keuntungan dari properti flex yang ditambahkan ke saluran. Ini telah membuat masing-masing kolom kami menjadi "kotak fleksibel" yang dapat disejajarkan secara vertikal dengan hanya menyesuaikan margin.

Tetapi ada juga cara arah fleksibel untuk menyelaraskan isi kolom kami tanpa kehilangan efek "Equalize Column Height" yang menjaga ukuran kolom kami (dan latar belakang kolom) sama. Untuk melakukan ini, kita cukup menambahkan beberapa baris CSS ke kolom kita sehingga semua modul dalam kolom ditumpuk secara vertikal dan kemudian dipusatkan.

Mari kita kembali ke baris kita pada contoh sebelumnya. Buka pengaturan garis dan hapus css khusus yang mungkin Anda miliki dengan mengklik kanan CSS khusus dan mengklik "Setel ulang gaya CSS kustom".

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

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]

display: fleksibel; flex-direction: 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 dengan pengaturan ini adalah bahwa jika konten saya terpusat secara vertikal dan lebar garis tercapai, konten tetap terpusat.

tampilan boxes.png

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

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

Untuk contoh ini, saya akan menyelaraskan uraian pada tata letak laman Pembayaran Digital.

Pertama-tama saya akan menambahkan jumlah teks tubuh yang berbeda ke uraian untuk memberikan gambaran yang lebih realistis tentang seperti apa sebuah situs.

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.

Pada tab Tingkat Lanjut pengaturan baris Anda, kami dapat memusatkan konten kolom secara vertikal dengan menambahkan berikut ini 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

Buat Toko Online Anda dengan mudah

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

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:

batas: mobil mobil 0;

Elemen utama CSS kolom 3:

batas: 0 mobil mobil;

menyesuaikan penyelarasan abstrak divi.png

Bagaimana dengan tata letak satu kolom?

Secara teknis, Anda tidak perlu cuplikan CSS atau melenturkan untuk memusatkan konten kolom secara vertikal. Yang perlu Anda lakukan adalah memastikan Anda memiliki spasi yang sama di atas dan di bawah konten Anda (atau modul). Sebagian besar waktu, pengguna memerlukan konten vertikal yang berpusat pada model multi-kolom karena mereka ingin konten yang berdekatan selaras dengan sempurna.

Itu saja untuk tutorial ini yang menunjukkan kepada Anda bagaimana menyelaraskan elemen pada baris yang sama pada 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