Posted on

Membuat Dua Kolom Layout Halaman Atau Post WordPress

wpJakarta – Membuat Dua Kolom Layout Pada Halaman Atau Post WordPress. Website wpJakarta.com dibuat menggunakan tema website WordPress yang sudah jadi. Atau bukan dari kertas kosong (bahasa kerennya “scratch”). Lalu dilakukan sedikit modifikasi dan kustomisasi.

wp jakarta tips-trik wordpresswp jakarta tips-trik wordpress

Artikel ini dibuat saat belum menggunakan “gutenberg block editor”. Kini dengan block editor maka membuat kolom menjadi sangat mudah.

Tapi dalam membuat desain sebuah halaman atau post, wpjakarta tidak menggunakan plugin “page builder”. Melainkan lebih menekankan dengan menambahkan kode html dan css pada halaman atau post tersebut. Setiap kustomisasi yang dilakukan pada website ini selalu diusahakan dilakukan tanpa plugin. Dan hasilnya dituangkan dalam artikel-artikel yang ada di website ini.

Baca Juga :

Membuat dua kolom layout pada halaman atau post WordPress dengan HTML dan CSS

Membuat Dua Kolom Layout Halaman WordPress

Kali ini kami membuat dua kolom lay-out yang kami aplikasikan pada halaman homepage kami yang jadul dan benar-benar tidak menarik. Kolom sebelah kiri kami isi dengan paragraf “site information” dengan animasi mengetik. Sedangkan kolom kedua diisi dengan “kotak pencarian”.

Tapi sebelum kami memberikan tutorial membuat teks mengetik dan kotak pencarian, kami buatkan dulu tutorial dalam membuat dua kolom layout. Untuk membuat dua kolom layout tentu anda dapat dengan mudah menggunakan plugin page builder ataupun blok editor.

Tapi pada tutorial ini kami tidak menggunakan plugin. Melainkan dengan kode HTML dan CSS untuk membuat dua kolom layout halaman atau post WordPress dan memberikan element pada kedua kolomnya.

“Membelah” satu halaman kedalam dua kolom

Ketikan kode HTML dan CSS berikut pada halaman dimana kolom akan dibuat. Kolom kiri dan kanan dengan div yang sama yaitu “kolom” karena porsi lebarnya yang sama, yaitu 50% lebar masing-masing :

 <div class="row">
   <div class="kolom" style="background-color:#3369ff">
     <h2>Kolom 1 sebelah kiri</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
   <div class="kolom" style="background-color:#4fbba9">
     <h2>Kolom 2 sebelah kanan</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
 </div>

Lalu pada kotak kustom css editor ketikan kode css berikut untuk membuat style pada dua kolom float dengan lebar sama / @ 50%.

 .kolom {
   float: left;
   width: 50%;
   padding: 10px;
   height: 300px;
 }
 .row:after {
   content: "";
   display: table;
   clear: both;
 }

Membuat Layout Responsif / kolom akan menumpuk atas dan bawah pada screen dengan resolusi kurang dari 600px. Tambahkan kode berikut dibawah kode css yang sudah dibuat diatas.

 @media screen and (max-width: 600px) {
   .column {
   width: 100%;
   }
 }

Secara lengkap kodenya akan sebagai berikut :

 <!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
 * {
    box-sizing: border-box;
 }
  .kolom {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
 }
  .row:after {
    content: "";
    display: table;
    clear: both;
 }
 @media screen and (max-width: 600px) {
   .column {
     width: 100%;
   }
 }
 </style>
 </head>
 <body>
  <div class="row">
   <div class="kolom" style="background-color:#3369ff">
     <h2>Kolom 1 sebelah kiri</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
   <div class="kolom" style="background-color:#4fbba9">
     <h2>Kolom 2 sebelah kanan</h2>
       <p>"Lorem ipsum dolor sit amet "?</p>
   </div>
 </div>
 </body>
 </html>

Membuat dua element yang berbeda di setiap kolom

Pada tutorial diatas kami hanya membagi halaman menjadi dua kolom dan memberikan element teks paragraf baik pada kolom kiri dan kanan. Sedangkan seperti pada terlihat halaman homepage kami (jika belum kami rubah), dimana sebelah kiri adalah teks paragraph dengan animasi mengetik. Sedangkan sebelah kanan adalah kotak pencarian. Selengkapnya bagaimana kami membuat halaman homepage tersebut. Kami tuangkan dalam artikel berikut : Membuat kotak pencarian wordpress (searh box).