Desain Blok Gutenberg yang Luas dan Penuh di WordPress

Editor blok Gutenberg untuk WordPress telah mengubah cara kami membuat konten di CMS. Tapi itu juga membuka beberapa kemungkinan baru di ujung depan juga.

Salah satu perkembangan paling menarik di bidang ini adalah kemampuan untuk menambahkan blok “penuh” atau “lebar” ke halaman atau postingan. Fitur ini menambahkan kemampuan blok Gutenberg untuk menyimpang dari lebar default konten tema, sesuatu yang hampir tidak mungkin dilakukan di Editor Klasik lama.

Ada beberapa kemungkinan penggunaan untuk blok yang sepenuhnya selaras atau lebar. Misalnya, Anda dapat memperkenalkan bagian halaman baru dengan blok sampul lebar penuh yang melapisi teks di atas latar belakang gambar. Atau Anda dapat memanfaatkan fitur ini untuk membuat area ajakan bertindak yang tidak dapat dilewati. Hampir semua jenis konten dapat ditambahkan di sini, yang merupakan bagian dari daya tarik.

Namun, ada peringatan kecil: Tema Anda harus mendukung blok yang sepenuhnya selaras. Untungnya, itu cukup mudah dilakukan. Berikut ini adalah panduan cepat untuk menambahkan dukungan perataan lebar ke tema dan blok desain WordPress Anda melalui CSS.

Tambahkan dukungan tema

Langkah pertama adalah menambahkan sebaris kode ke file .php tema aktif. Unduh file ini dari situs web Anda jika Anda belum memilikinya (dapat ditemukan di direktori /wp-content/themes/yourtheme/, menggantikan “yourtheme” untuk nama folder yang sebenarnya). Kemudian salin dan tempel kode PHP berikut:

add_theme_support( 'align-wide' );

Setelah Anda menambahkan kode, muat kembali file Fungsi yang dimodifikasi ke direktori tema Anda.

Kode ini berarti Anda ingin mengaktifkan blok yang sepenuhnya selaras dan lebar. Sekarang ketika Anda masuk ke WordPress dan pergi ke editor halaman/posting, Anda akan melihat bahwa beberapa blok (tidak semua) memiliki opsi penyelarasan baru “Penuh” dan “Lebar”.

Apakah Anda menggunakan tema komersial atau default?

Jika Anda menggunakan tema WordPress bisnis atau default, pastikan Anda menggunakan tema anak. Ini akan memungkinkan Anda untuk mengubah tema tanpa berpotensi kehilangannya setelah memperbarui.

Jenis blok dasar

Merancang balok lebar atau pas bisa sedikit rumit. Dan ada sejumlah teknik berbeda yang beredar. Yang akan kita gunakan di sini berasal dari contoh ini di CodePen.

@media screen and (min-width: 960px) {
      .alignwide, .alignfull {
           width:  100vw;
           max-width:  100vw;
           margin-left:  calc(50% - 50vw);
      }
 }

Harap perhatikan bahwa kami menggunakan kueri media CSS untuk menyematkan gaya ini hanya jika ukuran layar 960 piksel atau lebih. Ini karena kita tidak selalu menginginkan efek ini pada layar yang lebih kecil.

Dalam hal ini, kami menggunakan gaya yang sama untuk kedua pengaturan blok. Tentu saja, sangat mungkin untuk mendesainnya secara terpisah sehingga masing-masing memberikan tampilan yang unik di bagian depan.

Perlu juga diperhatikan kemungkinan kerugiannya: bilah gulir horizontal mungkin muncul di beberapa desain saat menggunakan teknik ini. Itu dapat diperbaiki melalui CSS dengan yang berikut ditambahkan ke elemen body:

body {
      overflow-x:  hidden;
 }

Hasil

Sekarang kami telah mengaktifkan kemampuan blok penuh dan konsisten, saatnya untuk menguji semuanya. Di sini, kami telah membuat halaman dengan blok sampul, dengan perataan lebar.

Saat melihat ujung depan situs, blok penutup berfungsi sebagaimana dimaksud. Elemen mencakup lebar penuh halaman, sementara konten yang mendasarinya tetap dalam lebar default tema 960 piksel.

Hanya menggunakan gaya default, elemen ini benar-benar menonjol. Namun, ada banyak peluang untuk berbuat lebih banyak dengan desain.

Dengan menambahkan kelas CSS tambahan atau menargetkan blok tertentu, kami memiliki gudang kemungkinan desain yang lengkap. Hal-hal seperti latar belakang, batas, atau potongan dapat menambahkan sentuhan unik.

Ekspansi dengan tema WordPress

Dalam instalasi default, Gutenberg tidak menyediakan semua fitur plugin pembuat halaman. Tetapi susunan blok memungkinkan kita untuk menjelajah ke wilayah itu.

Tidak apa-apa, karena desain web telah berkembang sejak Classic Composer pertama kali muncul. Saat itu, situs web cenderung menggunakan lebar konten yang seragam sepanjang waktu.

Saat ini, bagian dengan lebar penuh adalah salah satu pilihan desain yang paling populer dan berguna. Kemampuan untuk memanfaatkan ini tanpa plugin atau peretasan tema menjadikan WordPress lebih baik bagi para desainer.