Tata letak blok lebar Gutenberg di WordPress lebar penuh

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

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

Ada kegunaan yang berbeda untuk blok dengan orientasi penuh atau lebar. Misalnya, Anda dapat memperkenalkan bagian halaman baru dengan tabel lebar penuh yang melapisi teks di atas latar belakang gambar. Atau Anda dapat menggunakan fungsi tersebut 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 batasan kecil: tema Anda harus mendukung blok yang penuh dan selaras. Untungnya itu mudah. Berikut adalah panduan singkat tentang cara menambahkan dukungan penyelarasan komprehensif ke tata letak WordPress Anda dan cara mendesain blok dengan CSS.

Tambahkan dukungan tema

Langkah pertama adalah menambahkan satu baris kode ke file function.php di tema aktivitas Anda. Unduh file ini dari situs Anda jika Anda belum melakukannya (temukan di folder /wp assets/themes/themes/themes/folder Anda dan ganti nama folder saat ini dengan tema Anda. Kemudian salin dan tempel potongan PHP berikut:

add_theme_support( 'align-wide' );

Setelah menambahkan kode, muat ulang file Functions.php yang dimodifikasi ke direktori tema Anda.

Kode ini berarti Anda ingin mengaktifkan blok dengan perataan penuh dan lebar. Jika Anda masuk ke WordPress sekarang dan membuka Editor Halaman/Pos, Anda harus memperhatikan bahwa beberapa (tidak semua) blok memiliki opsi penargetan “Penuh” dan “Lebar” yang baru. .

Apakah Anda menggunakan tema komersial atau standar?

Jika Anda menggunakan WordPress standar atau tema bisnis, pastikan untuk menggunakan subtema. Ini memungkinkan Anda untuk mengubah tema tanpa kehilangannya setelah memperbarui.

Jenis blok dasar

Merancang balok lebar atau pas bisa sedikit rumit. Dan ada beberapa teknik yang berbeda. Yang digunakan 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 setiap orang memiliki tampilan yang unik di bagian depan.

Perhatikan juga kemungkinan kerugiannya: Dengan teknik ini, bilah gulir horizontal mungkin muncul pada beberapa desain. Ini dapat diperbaiki dengan CSS dengan menambahkan yang berikut ke elemen body:

body {
      overflow-x:  hidden;
 }

Hasil

Setelah kami mengaktifkan penguncian penuh dan ketat, saatnya untuk menguji semuanya. Di sini kami telah membuat halaman dengan blok sampul dengan orientasi lebar.

Jika Anda melihat bagian depan situs web, blok sampul berfungsi sebagaimana mestinya. Elemen mencakup lebar penuh halaman, sedangkan konten yang mendasarinya tetap dalam lebar tema default 960 piksel.

Jika Anda hanya menggunakan format standar, item ini sangat menonjol. Masih ada cara untuk berbuat lebih banyak dengan desain.

Dengan menambahkan kelas CSS tambahan atau menargetkan blok tertentu, kami memiliki banyak pilihan desain yang tersedia. Hal-hal seperti latar belakang, bingkai, atau jalur kliping bisa menjadi unik Note Menambahkan.

Ekspansi dengan tema WordPress

Pada instalasi standar, Gutenberg tidak menyediakan semua fitur plugin Page Builder. Tapi penyelarasan blok memungkinkan kita untuk memasuki area ini.

Ini bagus karena desain web telah berkembang sejak saat Editor Klasik pertama kali muncul. Pada saat itu, situs web menggunakan sejumlah besar konten seragam sepanjang waktu.

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