Cara Membuat Halaman Lebar Penuh di WordPress

Ingin membuat situs WordPress dengan lebar penuh? Banyak tema WordPress sudah dilengkapi dengan templat halaman lebar penuh bawaan yang dapat Anda gunakan. Namun, beberapa tema tidak memiliki karakteristik tersebut. Pada artikel ini, kami akan menunjukkan cara mudah membuat halaman lebar penuh di WordPress.

metode 1: gunakan templat lebar penuh yang terpasang di tema WordPress Anda

Metode ini disarankan jika tema Anda sudah dilengkapi dengan templat halaman lebar penuh.

Pertama, Anda perlu mengedit halaman atau membuat yang baru dengan membuka Halaman »Tambah Baru Halaman.

Pada layar edit halaman, pilih lebar penuh sebagai templat Anda di kotak meta atribut halaman.

Setelah memilih template lebar penuh, Anda harus menyimpan halaman Anda. Anda dapat terus mengedit halaman untuk menambahkan lebih banyak konten atau mengklik tombol pratinjau untuk melihatnya beraksi.

Jika Anda tidak memiliki opsi templat lebar penuh di layar edit halaman, ini berarti tema Anda tidak memiliki templat halaman dengan lebar penuh.

Jangan khawatir, kami akan menunjukkan kepada Anda cara mudah membuat halaman dengan lebar penuh tanpa mengubah tema WordPress Anda.

metode 2: Buat sendiri templat halaman lebar penuh

Metode ini mengharuskan Anda untuk mengedit file tema WordPress dan memiliki pemahaman dasar tentang PHP, CSS, dan HTML. Jika Anda belum pernah melakukan ini sebelumnya, lihat panduan kami tentang cara menyalin/menempel kode di WordPress.

Sebelum melanjutkan, Anda harus membuat cadangan WordPress atau setidaknya cadangan tema Anda saat ini. Ini akan memudahkan pemulihan situs Anda jika terjadi kesalahan.

Pertama, Anda perlu membuka editor teks sederhana seperti Notepad dan menempelkan kode berikut ke dalam file kosong:

Sekarang Anda perlu menyimpan file ini sebagai full-width.php di komputer Anda.

Kode ini hanya mengidentifikasi nama file template dan memberitahu WordPress untuk mencari template header.

Selanjutnya, Anda akan membutuhkan sepotong kode. Hubungkan ke situs Anda menggunakan klien FTP (atau pengelola file di cPanel) dan kemudian buka /wp-content/themes/your-theme-folder/.

Sekarang Anda perlu mencari file bernama page.php. Ini adalah file template halaman default untuk tema Anda.

Salin semuanya setelah baris get_header() dan tempel ke file full-width.php di komputer Anda.

Sekarang Anda perlu melihat file full-width.php dan menghapus baris kode ini:

Baris ini hanya mencari bilah sisi dan menampilkannya di tema Anda. Saat dihapus, tema tidak akan ditampilkan di bilah sisi saat menggunakan templat lebar penuh.

Anda mungkin melihat baris ini muncul lebih dari sekali di tema Anda. Jika tema Anda memiliki beberapa bilah sisi (area widget footer juga disebut barras ), Anda akan melihat setiap bilah sisi direferensikan sekali dalam kode. Anda harus memutuskan barra sisi mana yang ingin Anda pertahankan

Jika tema Anda tidak menampilkan barra di halaman, Anda mungkin tidak menemukan kode ini di file Anda.

Seperti inilah tampilan kode full-width.php setelah melakukan perubahan. Kode Anda mungkin terlihat sedikit berbeda tergantung pada tema Anda.

Selanjutnya, Anda perlu mengunggah file full-width.php ke folder tema Anda menggunakan klien FTP.

Anda telah berhasil membuat dan memuat templat halaman lebar penuh khusus untuk tema Anda. Langkah selanjutnya adalah menggunakan template ini untuk membuat halaman dengan lebar penuh.

Buka area admin WordPress dan edit atau buat halaman baru.

Pada layar edit halaman, cari kotak meta atribut halaman dan klik opsi “Templat” pada menu tarik-turun.

Anda seharusnya dapat melihat templat lebar penuh Anda di sana. Silakan pilih dan simpan/refresh halaman.

Anda sekarang dapat mengunjungi situs web mereka dan Anda akan melihat bahwa barras Walkway hilang dan halaman Anda muncul sebagai kolom. Mungkin belum lebar penuh, tetapi sekarang Anda siap untuk menata yang lain.

Anda perlu menggunakan alat Inspect untuk menjelajahi kelas CSS yang digunakan oleh tema Anda untuk menentukan area konten.

Kemudian Anda dapat menyesuaikan lebarnya menjadi 100% menggunakan CSS. Kami menggunakan kode CSS berikut di situs pengujian kami:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Seperti inilah tampilan situs demo kami yang menggunakan tema Twenty Sixteen.

metode 3: Buat halaman lebar penuh dengan plugin Page Builder

Cara ini lebih mudah dan direkomendasikan untuk semua pengguna. Ini memungkinkan Anda untuk dengan mudah mengedit halaman lebar penuh Anda dan membuat tata letak halaman yang berbeda untuk situs web Anda.

Untuk metode ini, Anda memerlukan plugin pembuat halaman WordPress. Untuk keperluan tutorial ini, kita akan menggunakan Beaver Builder. Ini adalah salah satu plugin pembuat halaman seret dan lepas terbaik dan memungkinkan Anda membuat tata letak halaman dengan mudah tanpa menulis kode apa pun.

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin Beaver Builder. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Setelah aktivasi, Anda harus mengedit halaman yang ada atau membuat yang baru.

Pada layar edit halaman, di bagian properti halaman, Anda harus memilih template lebar penuh yang disediakan oleh tema WordPress Anda.

Jika tema Anda tidak memiliki templat lebar penuh, Anda dapat membuatnya dengan mengikuti instruksi yang disebutkan dalam metode kedua.

Setelah memilih templat halaman Anda, Anda perlu mengklik tombol Simpan Draf untuk mengarsipkan halaman Anda.

Anda sekarang siap menggunakan plugin pembuat halaman untuk membuat desain Anda. Anda akan mulai dengan mengklik tab pembuat halaman pada editor halaman.

Ini akan membuka antarmuka pembuat halaman tempat Anda dapat melihat pratinjau langsung halaman Anda dengan opsi pembuat halaman.

Anda dapat memulai dengan mengklik tombol Template di bagian atas. Beaver Builder hadir dengan sejumlah templat siap pakai yang dirancang secara profesional yang dapat Anda gunakan sebagai titik awal.

Anda cukup mengklik template untuk memilihnya dan pembuat halaman akan memuatnya untuk Anda, termasuk tata letak, gambar, dan konten. Anda juga dapat mengklik template kosong untuk memulai tanpa persiapan template dan membuat desain Anda sendiri.

Tata letak Beaver Builder dibuat dengan baris dan modul. Setiap baris dapat memiliki beberapa kolom dan di setiap baris Anda dapat menambahkan modul konten dan widget.

Untuk mengedit baris atau modul dalam tata letak, cukup arahkan dan klik di atasnya.

Beaver Builder akan membuka detail item dalam popup tempat Anda dapat mengedit pengaturannya. Anda dapat mengubah warna, font, menambahkan gambar latar belakang, mengubah teks, dll

Anda dapat menambahkan modul dan widget kapan saja ke desain Anda. Beaver Builder hadir dengan banyak modul konten dasar dan lanjutan yang dapat Anda seret dan lepas ke halaman Anda.

Setelah selesai mengedit, Anda dapat mengklik tombol “Selesai” di bagian atas. Ini akan memunculkan popup di mana Anda harus mengklik tombol simpan atau terbitkan.

Anda sekarang dapat mengunjungi halaman mereka untuk melihatnya beraksi.

Kami harap artikel ini membantu Anda mempelajari cara membuat situs WordPress full-width dengan mudah. Anda juga dapat melihat panduan kami tentang cara menambahkan gambar latar belakang layar penuh di WordPress.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.