Komponen Column — Layout Multi-Kolom Responsif

Apa itu: Komponen layout yang membagi ruang halaman menjadi beberapa kolom horizontal yang berdampingan, dengan kontrol penuh atas tampilan di desktop dan mobile secara terpisah. Kapan pakai: Tampilkan konten side-by-side (gambar kiri + teks kanan), buat grid fitur (3 kartu sejajar), atau susun testimonial dalam baris — setiap kali kamu butuh dua atau lebih elemen berjajar secara horizontal.

Apa itu Column?

Column adalah komponen layout "tulang punggung" untuk konten horizontal di landing page. Tanpa Column, semua komponen hanya bisa ditumpuk vertikal. Dengan Column, kamu bisa membuat tata letak yang lebih kaya: dua kolom untuk hero image + copy, tiga kolom untuk feature cards, empat kolom untuk testimonial ringkas, dan seterusnya.

Yang membuat Column di Konvert istimewa adalah kontrol responsif terpisah — kamu bisa set berapa kolom tampil di desktop, dan berapa kolom tampil di mobile, secara independen. Bahkan urutan kolom pun bisa dibalik khusus untuk mobile.

Properties

Property	Tipe	Default	Penjelasan
Columns	Pilihan (1–4)	2	Jumlah kolom di tampilan desktop.
Gap	Pilihan	Medium	Jarak horizontal antar kolom.
Mobile Columns	Pilihan (1 atau 2)	1	Jumlah kolom di tampilan mobile.
Equal Height Columns	Toggle	Off	Paksa semua kolom punya tinggi yang sama (berguna untuk kartu).
Reverse Order on Mobile	Toggle	Off	Balik urutan kolom di mobile saja, desktop tidak berubah.

Columns (Desktop): 1–4

Nilai	Gunakan untuk
1	Full-width content block dalam "wrapper" Column (jarang, tapi valid)
2	Hero (image + copy), before-after, split feature
3	Feature cards, langkah-langkah, kolom benefit
4	Testimonial ringkas, grid logo partner, social proof mini

Gap Antar Kolom

Nilai	Kira-kira	Kapan Pakai
None	0px	Kolom yang sengaja menempel (misalnya before-after image)
Small	~8px	Konten yang rapat, grid yang padat
Medium	~16px	Default yang nyaman untuk kebanyakan layout
Large	~24px	Konten yang butuh napas, teks panjang tiap kolom
Extra Large	~40px	Section hero dengan kolom berisi banyak elemen

Mobile Columns

Di mobile, konten biasanya jauh lebih nyaman dibaca vertikal. Pilihan yang tersedia:

• 1 kolom — semua kolom stack vertikal, satu per satu (paling umum dan aman)
• 2 kolom — dua kolom kecil berdampingan di mobile (cocok untuk item pendek seperti logo, ikon kecil)

Equal Height Columns

Kalau toggle ini aktif, semua kolom dipaksa punya tinggi yang sama — diambil dari kolom tertinggi. Berguna untuk:

• Feature cards — agar semua kartu sejajar bawahnya, meski konten teksnya berbeda panjang
• Testimonial cards — keseragaman visual lebih terjaga

Jika toggle off, tiap kolom tingginya mengikuti kontennya masing-masing.

Reverse Order on Mobile

Ini adalah fitur yang sering diremehkan tapi sangat berguna.

Skenario: Desktop kamu punya layout 2 kolom — kolom kiri berisi gambar produk, kolom kanan berisi teks dan tombol CTA. Di mobile (1 kolom), urutan defaultnya adalah gambar dulu, baru teks.

Tapi bagaimana kalau kamu mau teks dulu, baru gambar di mobile? Atau sebaliknya — desktop pakai konvensi "teks kiri, gambar kanan", tapi mobile mau gambar di atas karena lebih engaging secara visual?

Aktifkan Reverse Order on Mobile — urutan kolom di mobile akan dibalik tanpa mengubah tampilan desktop sama sekali.

Desktop:   [Gambar] | [Teks + CTA]      ← urutan asli
Mobile OFF: Gambar → Teks + CTA         ← sama dengan desktop, stack vertikal
Mobile ON:  Teks + CTA → Gambar        ← urutan dibalik di mobile

Layout Visual

Desktop (2 Kolom) vs Mobile (1 Kolom, Stack)

graph LR
  subgraph Desktop["Desktop — 2 Kolom"]
    direction LR
    A["Kolom 1\n(Gambar)"] --- B["Kolom 2\n(Teks + CTA)"]
  end

  subgraph Mobile["Mobile — 1 Kolom, Stack"]
    direction TB
    C["Kolom 1\n(Gambar)"]
    D["Kolom 2\n(Teks + CTA)"]
    C --> D
  end

Konten dalam Kolom

Tiap kolom dalam komponen Column bisa berisi komponen apa saja — termasuk komponen Group. Pola paling umum adalah meletakkan sebuah Group di dalam tiap kolom, lalu mengisi Group tersebut dengan komponen-komponen spesifik.

Column (2 kolom, gap Large)
  ├── Kolom 1
  │     └── Image (foto produk, full width)
  └── Kolom 2
        └── Group (gap Medium)
              ├── Heading (H1) — "Nama Produk Unggulan"
              ├── Text — "Deskripsi singkat yang menarik."
              └── Button — "Pesan Sekarang"

Style Universal

Column sebagai wrapper mendukung semua properti style (margin, padding, background, border, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkap di Style Universal.

Contoh Penggunaan

Contoh 1 — Hero Image + Copy (2 Kolom)

Layout 2 kolom dengan Gap Large: kolom kiri berisi foto produk, kolom kanan berisi Group yang memuat Heading H1, teks deskripsi, dan Button "Beli Sekarang". Reverse Order on Mobile diaktifkan agar di layar HP teks dan CTA muncul di atas gambar — pengunjung langsung tahu pesan utama sebelum scroll ke gambar produk.

Contoh 2 — Feature Cards (3 Kolom)

Tiga Group berulang (masing-masing berisi icon, Heading, dan teks deskripsi) disusun dalam Column 3 kolom dengan Gap Medium. Equal Height Columns diaktifkan agar ketiga kartu sejajar bawahnya meski panjang teks berbeda — menghasilkan grid yang bersih dan konsisten.

Contoh 3 — Testimonial Grid (4 Kolom Desktop, 2 Kolom Mobile)

Empat Group testimonial singkat (rating bintang + kutipan + nama) dalam Column 4 kolom desktop dengan Gap Small dan Equal Height. Mobile Columns diset ke 2 karena testimonial pendek masih cukup terbaca dalam dua kolom di layar HP.

Tips & Gotchas