Apa itu Gaya Teks?

Gaya teks adalah fitur yang memungkinkan Anda mendefinisikan terlebih dahulu atribut visual teks seperti font, ukuran, warna, dll. untuk digunakan kembali.
Sekali Anda menciptakan gaya, Anda dapat menerapkannya sama di seluruh situs.

Keuntungan Gaya Teks

• Dapat diperbarui dengan mengubahnya di satu tempat saja

• Menjaga konsistensi sistem desain

Menerapkan Gaya Teks

Cara Penerapan

1. Pilih elemen teks atau sebagian teks

2. Klik Text → Styles di panel properti kanan

3. Pilih gaya yang diinginkan

Menghapus Gaya

Klik tombol × di samping gaya yang diterapkan di panel properti

Menambahkan Breakpoint Gaya Teks

Anda dapat mengatur breakpoint untuk memastikan teks terlihat natural di berbagai ukuran layar.

Cara Pengaturan

1. Klik gaya teks yang diinginkan di Assets → Styles

2. Setelah modal Edit Style terbuka, klik Add Breakpoint di bagian Breakpoints

3. Tersedia secara default: Desktop (L), Tablet (M), Mobile (S)

4. Atur ukuran font, jarak antar baris, kerning, dan spasi paragraf secara individu untuk tiap perangkat

Mengelola Gaya Teks

• Anda dapat mencipta, memodifikasi, atau menghapus gaya sesuai situasi proyek di panel kiri Assets → Styles.

• Gunakan Markdown jika ingin menerapkan banyak gaya dalam satu kotak teks.

Teks dengan Gaya Kaya (Menggunakan Markdown)

Jika ingin mencampur beberapa gaya dalam satu blok teks, Anda dapat menggunakan format Markdown.
(Contoh: Hanya menyoroti kata tertentu dalam kalimat dengan Strong atau Highlight)

Cara Penerapan

1. Pilih teks secara drag

2. Terapkan gaya individu di panel properti kanan (Contoh: Hanya menyoroti kata tertentu dengan Bold dalam satu kalimat)

Menerapkan Gaya Teks di CMS

Anda bisa menerapkan gaya teks yang sama pada teks yang dimasukkan dalam CMS.
Pilih elemen teks CMS → Tentukan gaya teks di panel properti dapat memelihara konsistensi gaya di situs yang berfokus pada konten seperti blog, berita, atau deskripsi produk.

Menata Gaya Teks Tautan

Anda bisa menyesuaikan gaya teks tautan secara terpisah untuk setiap status: Default, Hover, Active, Current.

1. Pilih elemen teks lalu klik bagian Link

2. Tentukan properti gaya tautan (contoh: warna, garis bawah, dll.)

3. Atur warna atau efek berbeda untuk setiap status

Cara Menggantikan Hanya Warna Tekstual Tertentu

Setelah menerapkan gaya ke seluruh teks, jika ingin mengganti warna hanya pada sebagian, seret kata atau kalimat yang warnanya ingin Anda ubah dan atur hanya Color di panel properti (keuntungannya adalah dapat penekanan detail tanpa menciptakan gaya baru).

Artikel ini adalah terjemahan dan adaptasi dari konten Framer resmi ‘Using text styles’.