Tata letak blok Gutenberg lebar di WordPress lebar penuh

Editor blok Gutenberg untuk WordPress telah mengubah cara kami membuat konten dalam CMS. Tetapi 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 posting. Fitur ini memungkinkan blok Gutenberg menyimpang dari lebar default konten tema, yang hampir tidak mungkin di editor klasik lama.

Ada berbagai kegunaan untuk blok dengan orientasi penuh atau lebar. Misalnya, Anda bisa memperkenalkan bagian halaman baru dengan lembar lebar penuh yang menutupi teks pada latar belakang gambar. Atau Anda dapat menggunakan fungsi ini untuk membuat area ajakan bertindak agar tidak terlewatkan. Hampir semua jenis konten dapat ditambahkan di sini, yang merupakan bagian dari daya tarik.

Namun, ada sedikit batasan: Tema Anda harus mendukung blok yang penuh dan selaras. Untungnya itu mudah. Di bawah ini adalah panduan cepat tentang cara menambahkan dukungan perataan komprehensif ke tata letak WordPress Anda dan cara merancang blok menggunakan CSS.

Tambahkan dukungan tema

Langkah pertama adalah menambahkan satu baris kode ke file function.php di tema aktif Anda. Unduh file ini dari situs Anda jika Anda belum melakukannya (ditemukan di / wp content / themes / direktori / tema Anda dan ganti nama direktori saat ini dengan "tema Anda"). Kemudian salin dan tempel cuplikan PHP berikut:

add_theme_support( 'align-wide' );

Setelah menambahkan kode, muat ulang file Functions.php yang dimodifikasi ke dalam folder dengan tema Anda.

Kode ini berarti Anda ingin mengaktifkan blok dengan perataan penuh dan lebar. Jika Anda masuk ke WordPress sekarang dan pergi ke Editor Halaman / Posting, Anda harus menyadari bahwa beberapa (tidak semua) dari blok memiliki opsi penargetan baru "Penuh" dan "Lebar".

Apakah Anda menggunakan tema komersial atau standar?

Jika Anda menggunakan WordPress standar atau tema bisnis, pastikan untuk menggunakan tema sekunder. Ini memungkinkan Anda untuk membuat perubahan pada tema tanpa kehilangan mereka setelah pembaruan.

Gaya blok dasar

Mendesain blok yang lebar atau sepenuhnya sejajar bisa sedikit rumit. Dan ada beberapa teknik 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 ketika ukuran layar 960 piksel atau lebih. Ini karena kami tidak ingin efek ini pada layar yang lebih kecil.

Dalam hal ini, kami menggunakan gaya yang sama untuk kedua pengaturan blokir. Tentu saja, sangat mungkin untuk mendesainnya secara terpisah sehingga setiap orang memiliki tampilan depan yang unik.

Perhatikan juga kemungkinan kelemahannya: Dengan teknik ini, bilah gulir horizontal dapat muncul pada beberapa desain. Ini dapat diperbaiki menggunakan CSS dengan menambahkan berikut ini ke elemen tubuh:

body {
      overflow-x:  hidden;
 }

Hasilnya

Setelah kami mengaktifkan fitur penguncian penuh dan ketat, sekarang saatnya untuk menguji segalanya. Di sini kami telah membuat halaman dengan blok penutup dengan orientasi luas.

Jika Anda melihat bagian depan situs web, blok penutup berfungsi sebagaimana dimaksud. Elemen ini mencakup lebar penuh halaman, sementara konten di bawah tetap dalam lebar tema default 960 piksel.

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

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

Perluas dengan tema WordPress

Dalam instalasi standar, Gutenberg tidak menawarkan semua fitur plugin Page Builder. Tapi penyelarasan blok memungkinkan kita memasuki area ini.

Yang bagus karena desain web telah berevolusi sejak zaman Editor Klasik pertama kali muncul. Pada saat itu, situs web menggunakan konten yang seragam sepanjang waktu.

Saat ini, bagian dengan lebar penuh adalah di antara opsi desain yang paling populer dan berguna. Kemampuan untuk menggunakan ini tanpa plugin atau peretasan tema membuat WordPress lebih baik bagi para desainer.