Menyesuaikan tata letak grup

Blok Grup membantu Anda menata konten dalam suatu tempat yang bisa Anda sesuaikan dan posisikan sebagai satu unit. Panduan ini akan menunjukkan cara menggunakan pengaturan tata letak untuk membuat bagian halaman yang responsif dan selaras dengan blok Grup.

Secara default, blok-blok dalam satu blok Grup ditampilkan bersusun secara vertikal. Anda dapat mengubah susunan blok dalam satu grup dengan memilih tampilan konten berjajar (horizontal) atau bertumpuk (vertikal), sehingga tata letak desain Anda lebih fleksibel. Anda dapat menyesuaikan perataan konten dalam grup dengan mengikuti langkah-langkah ini:

1. Pilih Tampilan Daftar di bagian atas layar pengeditan.
2. Pilih blok Grup.
3. Pada bilah sisi pengaturan blok di sebelah kanan, pilih satu dari beberapa pilihan berikut:
   • Grup: Pengaturan default untuk blok Grup.
   • Tumpukan: Menyusun blok secara vertikal dari atas ke bawah. Cocok untuk membuat konten yang jelas dan berurutan seperti langkah-langkah atau item unggulan.
     • Di bagian Rata Kanan-Kiri, ubah perataan vertikal dengan pilihan atas, tengah, atau bawah.
   • Baris: Menempatkan blok berjajar secara horizontal. Cocok untuk membuat perbandingan fitur atau galeri gambar.
     • Di bagian Rata Kanan-Kiri, sesuaikan perataan horizontal dengan pilihan kiri, tengah, kanan, atau dengan spasi di tengah.
   • Kisi: Mengatur blok dalam tata letak kisiyang dapat disesuaikan. Berguna untuk tampilan produk atau anggota tim.
4. Klik “Simpan” atau “Terbitkan” untuk menyimpan perubahan.

Dengan mengatur lebar keseluruhan blok Grup , Anda dapat membuat hirarki visual di halaman dan mengatur respons konten pada ukuran layar yang berbeda. Anda dapat mengubah ukuran ruang yang digunakan blok Grup , dari sesuai lebar konten, tampilan lebar, sampai lebar penuh, dengan mengikuti langkah-langkah berikut:

1. Pilih Tampilan Daftar di bagian atas layar pengeditan.
2. Pilih blok Grup.
3. Pada bilah peralatan yang muncul, klik ikon “Perataan” dan pilih salah satu opsi berikut:
   • Konten (atau “Tidak ada”): Mengatur lebar blok mengikuti lebar default area konten. Cocok untuk bagian konten reguler.
   • Tampilan lebar: Mengatur lebar blok menjadi lebih lebar (tetapi tidak penuh). Bagus untuk menarik perhatian pada konten penting tanpa memenuhi layar.
   • Lebar penuh: Membuat blok memenuhi lebar area yang tersedia. Sempurna untuk membuat bagian konten yang dominan secara visual, seperti banner atau galeri gambar ukuran besar.
4. Klik “Simpan” atau “Terbitkan” untuk menyimpan perubahan.

Baca selengkapnya tentang mengubah lebar konten.

Anda dapat menentukan ruang yang digunakan untuk menampilkan konten dalam grup. Cara ini membantu membuat desain responsif yang berfungsi maksimal di layar seluler dan desktop. Ikuti langkah-langkah ini untuk mengubah pengaturan lebar konten dalam blok Grup:

1. Pilih Tampilan Daftar di bagian atas layar pengeditan.
2. Pilih blok Grup.
3. Pada bilah sisi pengaturan blok, temukan bagian “Blok bagian dalam“. Alihkan pengaturan “Blok internal menggunakan lebar konten” :
   • Aktif: Konten akan mengikuti pengaturan lebar konten pada situs, atau menyesuaikan nilai lebar tertentu menggunakan kontrol lebar.
   • Nonaktif: Konten akan dilebarkan untuk mengisi penuh lebar blok Grup.
4. Klik “Simpan” atau “Terbitkan” untuk menyimpan perubahan.

Pengaturan “Blok bagian dalam menggunakan lebar konten” berfungsi untuk menentukan seberapa lebar tampilan konten di dalam blok Grup:

Jika Aktif: Konten di dalam blok Grup akan mengikuti pengaturan lebar konten situs secara umum (biasanya sekitar 700–800 piksel). Pengaturan ini membuat kolom konten yang isinya terpusat di bagian tengah walau lebar blok Grup memenuhi halaman. Opsi ini dapat meningkatkan keterbacaan pada layar yang lebih besar sembari mempertahankan tata letak yang menarik.

Jika Nonaktif: Konten di dalam blok Grup akan dilebarkan untuk memenuhi lebar blok Grup tersebut. Jika blok Grup menggunakan lebar penuh, konten Anda juga akan membentang selebar ukuran tersebut. Opsi ini berguna untuk membuat desain yang memenuhi seluruh halaman seperti galeri gambar lebar penuh atau konten yang selaras dengan latar belakang blok Grup .

Contoh praktis: Jika Anda memiliki blok Grup dengan latar belakang berwarna yang membentang memenuhi halaman, mengaktifkan pengaturan “Blok bagian dalam menggunakan lebar konten” akan membuat kolom konten berada di tengah halaman, dengan latar belakang berwarna yang membentang hingga tepi halaman. Tata letak ini sangat ideal untuk menyoroti informasi penting sekaligus memunculkan daya tarik visual.

Penyesuaian dimensi memungkinkan Anda mengatur tinggi, lebar, dan spasi blok Grup agar lebih pas dengan kebutuhan konten dan tata letak Anda. Cara ini membantu Anda membuat bagian yang proporsional secara visual dan membuat tampilan konten lebih lega. Atur spasi dengan presisi di sekitar konten blok Grup dengan mengikuti langkah-langkah ini:

1. Pilih Tampilan Daftar di bagian atas layar pengeditan.
2. Pilih blok Grup.
3. Pada bilah sisi pengaturan blok, temukan bagian Dimensi .
4. Atur nilai untuk:
   • Padding: Spasi antar garis tepi konten dan blok Grup. Padding yang lebih banyak akan memberi ruang di sekitar konten Anda.
   • Margin: Spasi di sekitar bagian luar blok Grup. Margin membantu memisahkan bagian ini dari konten lain.
5. Gunakan ikon tautan untuk beralih antara penyesuaian sisi keseluruhan atau satu per satu.

Baca selengkapnya tentang menyesuaikan dimensi blok.

Dengan menyesuaikan spasi, Anda dapat mengontrol seberapa dekat atau jauh tampilan konten dalam blok Grupdan menata koneksi visual yang tepat antarelemen. Pengaturan ini membantu pengunjung mengenali tiap konten yang berkaitan dalam tampilan yang selaras di bagian ini. Berikut ini cara mengatur spasi antarblok di dalam Grup:

1. Pilih Tampilan Daftar di bagian atas layar pengeditan.
2. Pilih blok Grup.
3. Pada bilah sisi pengaturan blok, temukan bagian Spasi blok .
4. Gunakan kontrol untuk menyetel:
   • Spasi blok: Spasi antarblok. Spasi yang lebih besar membuat pemisahan yang lebih jelas, sementara spasi yang lebih kecil membuat konten terasa lebih terkait satu sama lain.
   • Tinggi minimum: Ukuran tinggi minimum blok Grup. Pengaturan ini berguna untuk membuat bagian yang konsisten atau menambahkan ruang kosong sebagai penyeimbang visual.

Pelajari selengkapnya tentang menyesuaikan spasi antarblok.