Komponen Text — Paragraf dan Konten Body

Apa itu: Komponen untuk menampilkan paragraf, deskripsi produk, atau konten body apa pun di landing page kamu — dengan editor teks lengkap. Kapan pakai: Setiap kali kamu butuh menuliskan kalimat atau paragraf panjang, deskripsi fitur, keterangan produk, atau konten apa pun yang bukan judul.

Apa itu Text?

Text adalah komponen konten utama untuk menulis paragraf dan body copy di landing page kamu. Berbeda dengan Heading yang hanya untuk judul singkat, Text mendukung editor kaya fitur (Rich Text Editor / RTE) lengkap — kamu bisa bold, italic, buat list, tambahkan link, ganti warna teks, sampai sisipkan blockquote.

Komponen ini adalah tulang punggung konten landing page: deskripsi produk, penjelasan cara kerja, syarat dan ketentuan, testimoni tertulis pendek — semuanya cocok ditulis di Text.

Kapan Pakai Text?

Deskripsi produk — penjelasan 2–5 paragraf tentang apa yang kamu jual
Bullet point fitur — daftar keunggulan produk dengan format list
Sub-copy di bawah headline — kalimat penjelas setelah Heading H1/H2
Syarat & ketentuan — teks panjang dengan format rapi
Penjelasan cara pemesanan — langkah-langkah yang butuh penomoran
Catatan / disclaimer — teks kecil di bawah order form atau harga

Properties

Property	Tipe	Default	Penjelasan
Content	Rich text (full)	`"Teks kamu di sini"`	Isi konten. Mendukung semua formatting RTE.
Line Height	Angka (0.5–3) atau Default	`Default`	Jarak antar baris teks.
Letter Spacing	Pilihan	`Normal`	Jarak antar huruf.

Fitur Rich Text Editor (RTE)

Editor Text mendukung semua format berikut:

Format	Cara Pakai	Kegunaan
Bold	Ctrl+B atau tombol B	Menekankan kata kunci penting
Italic	Ctrl+I atau tombol I	Penekanan ringan, judul buku/film
Link	Tombol rantai	Tambahkan hyperlink ke URL eksternal
Ordered List	Tombol 1. 2. 3.	Langkah berurutan, tutorial
Unordered List	Tombol bullet	Daftar fitur, keunggulan
Blockquote	Tombol `"`	Kutipan atau highlight teks
Warna Teks	Color picker	Warna spesifik untuk kata tertentu

Line Height untuk Keterbacaan

Nilai	Cocok untuk
`1.4` – `1.6`	Body copy standar, mudah dibaca
`1.7` – `2.0`	Teks panjang / artikel; lebih longgar, tidak padat
`1.0` – `1.3`	Teks dekoratif pendek; bukan untuk paragraf panjang
`Default`	Ikuti pengaturan tema halaman

💡Rekomendasi Keterbacaan

Untuk body copy (paragraf 3+ kalimat), set Line Height ke 1.5–1.7. Teks yang terlalu rapat (1.0–1.2) membuat pembaca cepat lelah, terutama di mobile.

Letter Spacing

Nilai	Tampilan	Cocok untuk
Tight	Huruf rapat	Tidak disarankan untuk body — sulit dibaca
Normal	Standar	Body copy, pilihan aman
Wide	Sedikit longgar	Teks uppercase pendek, caption
Wider	Lebih longgar	Efek visual dekoratif
Widest	Paling longgar	Teks sangat pendek (1–3 kata)

Gradient Text (Fitur Tersembunyi)

Sama seperti Heading, Text juga mendukung gradient text via HTML inline. Klik ikon </> di toolbar, lalu sisipkan:

<span style="background-image: linear-gradient(90deg, #f57c00, #fbc02d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">kata bergradasi</span>

Berguna untuk menyorot kata kunci di tengah paragraf tanpa mengubah warna background.

Style Universal

Text mendukung semua properti style umum (margin, padding, background, border, radius, shadow, hide on mobile/desktop, custom CSS). Lihat panduan lengkapnya di Style Universal.

Contoh Penggunaan

Contoh 1 — Deskripsi Produk dengan Bullet List

Dua paragraf body copy diikuti unordered list keunggulan produk, ditulis di RTE dengan Line Height 1.6. Paragraf pertama menjelaskan produk secara singkat, paragraf kedua menampilkan 4 bullet point keunggulan (bahan, anti-kusut, ukuran, gratis ongkir). Alignment Left agar mudah dibaca secara alami.

Panel properti komponen text di builder

Contoh 2 — Sub-copy di Bawah Headline

Satu atau dua kalimat pendukung ditempatkan tepat di bawah H1 hero. Teks pendek "Lebih dari 10.000 pelanggan puas. Pengiriman ke seluruh Indonesia dalam 1–2 hari kerja." dengan Line Height 1.5. Warna teks dibiarkan default (muted foreground) agar tidak bersaing dengan headline — fungsinya memperkuat, bukan mendominasi.

Sub-copy satu baris di bawah H1 hero, teks lebih kecil dan berwarna muted, Line Height 1.5 tampak longgar dan nyaman dibaca

Contoh 3 — Langkah Cara Pesan (Numbered List)

Empat langkah cara pesan disusun sebagai ordered list di RTE (gunakan tombol 1. 2. 3. di toolbar). Line Height 1.7 memberi napas antar langkah agar mudah di-scan satu per satu. Cocok ditempatkan di seksi "Cara Pesan" atau "Cara Kerja" tepat sebelum order form.

Ordered list 4 langkah cara pesan dengan nomor urut, Line Height 1.7, tampil di halaman publik mobile dengan jarak antar langkah yang nyaman

Tips & Gotchas

💡Text vs Heading — Pilih yang Tepat

Kalau kalimat kamu pendek (di bawah 10 kata) dan berfungsi sebagai judul seksi, gunakan Heading. Kalau lebih dari satu kalimat atau perlu formatting (bold, list, link), gunakan Text.

💡Jangan Semua Bold

Bold dipakai untuk kata yang benar-benar penting. Kalau semua kata di-bold, tidak ada yang menonjol. Maksimal 1–2 kata per kalimat.

⚠️Link di dalam Text

Saat menambahkan link di RTE, pastikan URL diawali https://. Link tanpa protokol (www.example.com) mungkin tidak berfungsi di semua browser.

💡Warna Teks untuk Penekanan

Daripada bold semua, coba warnai satu-dua kata kunci dengan warna brand kamu. Lebih visual dan menarik, terutama untuk bullet list manfaat produk.

Siap buat landing page pertamamu?