Gunakan blok Kisi Tata Letak untuk meratakan konten di situs web Anda. Blok ini berguna untuk menentukan breakpoint responsif, artinya Anda bisa memilih jumlah kolom yang muncul bersebelahan di pos atau halaman, baik untuk tampilan desktop maupun ponsel.
Dalam panduan ini
Ada pertanyaan?
Tanya Asisten AI kamiKisi tata letak memberikan struktur dan perataan ke konten halaman web. Kisi ini disusun dari sejumlah garis vertikal berdasarkan perangkat yang digunakan (breakpoint responsif):
- 12 garis kisi untuk perangkat desktop.
- 8 garis kisi untuk perangkat tablet.
- 4 garis kisi untuk perangkat seluler.
Pada blok Kisi Tata Letak, garis kisi disatukan untuk membentuk kolom-kolom (1-4) yang masing-masingnya dapat Anda isi dengan konten.
Biasanya, jika tata letak desktop digunakan pada perangkat yang lebih kecil, kolom akan tersebar di beberapa baris. Hal ini aktif secara otomatis jika Anda beralih ke tampilan tablet atau ponsel, tetapi Anda dapat membatalkannya dengan mengubah nilai kisi secara langsung.
Breakpoint responsif merupakan topik lanjutan. Anda masih dapat menggunakan blok Kisi Tata Letak tanpa perlu mengkhawatirkan breakpoint responsif, dan pengaturan kisi akan menggunakan breakpoint asal.
Untuk menambahkan blok Kisi Tata Letak, klik ikon + Penyisip Blok dan cari “kisi tata letak”. Klik untuk menambahkan blok ke pos atau halaman.
💡
Anda juga dapat menggunakan keyboard untuk mengetikkan
/layoutpada baris baru dan menekan enter untuk menambahkan blok Kisi Tata Letak baru dengan cepat.
Jika situs Anda mendukung plugin, pastikan Anda mengaktifkan plugin Kisi Tata Letak di Plugin → Plugin Terpasang.
Panduan lebih lanjut tentang cara menambahkan blok terdapat di sini.
Saat pertama kali menambahkan blok Kisi Tata Letak, Anda akan diminta untuk memilih jumlah kolom:
Anda dapat mengubahnya di lain waktu melalui Pengaturan Blok.
Setiap kolom di kisi dapat berisi blok lain. Klik ikon + Penyisip Blok untuk setiap kolom, lalu cari blok yang ingin Anda tambahkan.
Saat Anda mengeklik blok, bilah peralatan pilihan akan muncul:
Blok Kisi Tata Letak memiliki beberapa pilihan di bilah peralatan:
- Ubah tipe atau gaya blok.
- Seret blok.
- Pindahkan blok ke atas atau ke bawah.
- Ubah perataan horizontal atau lebar blok.
- Breakpoint responsif untuk desktop, tablet, dan ponsel.
- Ubah perataan vertikal blok.
- Pilihan tambahan.
Saat mengeklik blok, Anda akan menemukan pengaturan blok tambahan di bilah sisi kanan. Jika tidak terdapat bilah sisi, Anda mungkin perlu mengeklik ikon ️⚙️ (roda gigi) di sudut kanan atas untuk membuka pengaturan.
Gunakan ini untuk mengubah jumlah kolom di dalam blok Kisi Tata Letak. Jika Anda mengurangi satu kolom dari jumlah keseluruhannya, kolom terakhir (dan semua kontennya) akan dihapus.
Sesuaikan tampilan Desktop, Tablet, dan Ponsel dengan mengeklik tombolnya masing-masing.
Ini menentukan jumlah garis kisi yang dilompati kolom untuk memberi jarak dari kolom sebelumnya atau dari awal kisi tata letak.
Ini adalah jumlah total garis kisi yang membentuk lebar penuh satu kolom.
Gutter adalah ruang di antara dua kolom di dalam kisi.
Memilih Tanpa gutter akan menghapus semua gutter, termasuk yang pertama dan terakhir.
Jika ukuran gutter memiliki nilai selain Tanpa gutter, Anda dapat menonaktifkan tombol Tambahkan gutter ujung. Ini akan menghapus gutter di ujung paling kiri dan kanan dari kisi sehingga lebar halaman menjadi penuh seluruhnya.
Tingkat Lanjut
Tab Tingkat Lanjut memungkinkan Anda menambahkan kelas CSS ke blok, sehingga Anda dapat menulis CSS khusus dan mengatur gaya blok sesuai keinginan.
Setiap kolom di dalam blok Kisi Tata Letak memiliki pengaturannya masing-masing untuk mengubah warna latar belakang dan padding. Pengaturan ini hanya akan memengaruhi satu kolom yang dipilih.
Anda dapat mengubah ukuran kolom di dalam kisi tata letak. Akan tetapi, jumlah seluruh nilai Offset dan Rentang untuk setiap kolom di dalam baris tidak boleh melebihi jumlah total garis kisi yang tersedia untuk perangkat yang digunakan.
Misalnya, pada perangkat desktop (12 garis kisi), setiap kolom di dalam tata letak tiga kolom masing-masing dapat melintasi 4 garis kisi tanpa offset, atau melintasi 3 garis kisi dengan masing-masing 1 offset, atau satu kolom dapat melintasi 10 garis kisi dan tiap dua kolom lainnya melintasi 1 garis kisi.
Hal ini akan memastikan kolom tidak saling bertumpuk, yang kadang kala membuat Anda tidak dapat menambah nilai offset atau rentang di satu tempat tanpa mengurangi nilai yang lain terlebih dahulu.
Setiap kolom di kisi Anda memiliki pilihan berwarna di sisi-sisinya. Ini adalah pegangan seret dan jika Anda mengeklik dan menariknya ke kiri atau kanan, ukuran blok akan berubah.
Anda juga dapat mengubah ukuran kolom di kisi tata letak dengan mengubah nilai Offset dan Rentang secara langsung melalui pengaturan blok pada bilah sisi.
Keduanya secara otomatis disesuaikan saat menggunakan pegangan seret.
Jika Anda ingin mengubah ukuran kisi dan menyesuaikan tampilan kolom di perangkat seluler dan tablet, pastikan jumlah semua nilai offset dan rentang untuk setiap kolom tidak melebihi 8 garis kisi untuk perangkat tablet dan 4 garis kisi untuk perangkat seluler.
Pada contoh di bawah, kami mengatur kolom dengan rentang 2 dan offset 0 untuk menampilkan dua kolom di ponsel dan empat kolom di tablet.
Dukungan 