Ikhtisar elemen teks kaya - Bantuan Webflow
Gunakan Elemen Teks Kaya (RTE) untuk membuat konten panjang.
Elemen teks kaya (RTE) adalah elemen yang sempurna untuk membuat konten panjang seperti posting blog, halaman tentang, biografi, dll. Alih-alih menambahkan elemen judul, paragraf, daftar, atau gambar satu per satu, Anda dapat mengklik dua kali elemen teks kaya untuk membuat dan memformat teks, kode khusus, dan elemen media.
Cara menambahkan elemen teks kaya ke situs Anda
Anda dapat menambahkan elemen teks kaya dengan menyeretnya dari Panel Tambah (A) ke kanvas Desainer. Untuk menambahkan atau mengedit konten di dalamnya, klik dua kali elemen teks kaya atau pilih elemen dan tekan Enter atau Return pada keyboard Anda.
Anda dapat menambahkan elemen-elemen berikut di dalam elemen teks kaya:
- Paragraf
- Judul (H1-H6)
- Gambar
- Keterangan gambar
- Atribut alt gambar
- Kode khusus
- Kutipan blok
- Daftar tidak berurutan (berpeluru)
- Daftar berurutan (bernomor)
- Video (YouTube, Vimeo)
- Media kaya (Google maps, SoundCloud, Imgur, Giphy, Codepen, dan lainnya)
Anda juga dapat menambahkan pemformatan tambahan ke elemen teks:
- Tautan (URL, halaman, email, dll.)
- Teks tebal
- Teks miring
- Teks superskrip dan subskrip
- Kode
Perintah garis miring
Saat Anda mengedit konten di dalam RTE, Anda dapat menggunakan perintah garis miring untuk dengan cepat menghasilkan salinan menggunakan Asisten AI Webflow atau menambahkan elemen konten baru. Untuk menggunakan perintah garis miring, tekan / (garis miring maju) pada keyboard Anda dan klik Hasilkan lebih banyak salinan untuk menambahkan teks yang relevan secara kontekstual menggunakan Asisten AI, pilih elemen yang diinginkan dari Menu Tambah, atau mulai mengetik untuk menyaring daftar elemen:
- Judul (H1–H6)
- Daftar bernomor
- Daftar berpeluru
- Paragraf
- Kutipan blok
- Gambar
- Video
- Konten kaya
- Sematan HTML
- Blok kode
Cara menambahkan dan memformat konten teks
Anda dapat mulai mengetik di dalam RTE dan kemudian menambahkan pemformatan pada teks untuk membuat judul, kutipan blok, teks tebal atau miring, teks superskrip atau subskrip, dan tautan.
Menghasilkan konten teks menggunakan Asisten AI Webflow
Untuk dengan cepat menambahkan salinan yang relevan secara kontekstual ke RTE menggunakan Asisten AI:
- Klik kanan pada RTE
- Pilih Ubah salinan dari menu konteks
- (Opsional) Masukkan prompt yang menggambarkan salinan yang ingin Anda hasilkan
- Klik ikon "Kirim prompt"
- Klik Selesai untuk menerima salinan yang dihasilkan
Pelajari lebih lanjut tentang menggunakan Asisten AI Webflow untuk menghasilkan dan mengedit konten.
Cara menambahkan paragraf
Seperti editor teks lainnya, menekan Enter pada keyboard Anda akan membuat paragraf baru di baris baru di mana Anda dapat melanjutkan mengetik. Untuk menambahkan beberapa paragraf, tekan Enter di akhir paragraf. Anda juga dapat menggunakan Asisten AI Webflow untuk menambahkan dan menyempurnakan teks untuk Anda.
Cara menambahkan judul dan kutipan blok
Untuk membuat judul, pilih teks apa pun di dalam paragraf dan pilih opsi judul (H1-H6). Hal yang sama berlaku untuk membuat kutipan blok.
Cara memformat teks dan menambahkan tautan
Bagian mana pun dari elemen teks apa pun (misalnya, judul, paragraf, keterangan, dll.) dapat diformat dengan tebal, miring, superskrip, subskrip, dan tautan dengan memilih bagian dari teks dan menerapkan opsi pemformatan yang Anda inginkan. Pelajari lebih lanjut tentang pemformatan teks inline.
Ketika Anda membuat tautan dalam RTE, Anda memiliki opsi untuk memilih URL, halaman, bagian halaman, email, atau nomor telepon.
Pintasan keyboard
Pintasan keyboard ini dapat membantu Anda dengan cepat memformat konten teks kaya:
- Menyisipkan spasi tak terputus: Shift + Space
- Menyisipkan jeda baris: Shift + Enter
- Teks tebal: Command + B (Control + B di Windows)
- Miringkan teks: Command + I (Control + I di Windows)
- Menyisipkan hyperlink: Command + K (Control + K di Windows)
Saat mengedit di RTE, Anda dapat menggunakan pintasan perintah garis miring (“/**”) untuk dengan cepat menambahkan elemen konten. Anda juga dapat menggunakan pintasan Markdown:
- Miringkan teks:
*teks*atau_teks_ - Teks tebal:
**teks**atau__teks__ - Tebal & miring:
***teks***atau___teks___ - Menyisipkan hyperlink:
[teks hyperlink](https://www.url.com) - Judul 1:
#+ Spasi - Judul 2:
##+ Spasi - Judul 3:
###+ Spasi - Judul 4:
####+ Spasi - Judul 5:
#####+ Spasi - Judul 6:
######+ Spasi - Kutipan blok:
>+ Spasi - Daftar tidak berurutan:
-+ Spasi - Daftar berurutan:
1.+ Spasi
Cara menambahkan konten media, kode khusus, dan daftar
Ketika kursor teks Anda berada di baris baru, tombol “plus” akan muncul. Mengklik tombol ini akan menampilkan menu sisipkan dengan opsi untuk menambahkan gambar, video, media kaya lainnya, kode khusus, dan daftar berpoin atau bernomor.
Tambahkan gambar, video, dan media kaya
Semua elemen media dalam RTE bersifat responsif dan akan menghormati rasio aspek konten. Dukungan video YouTube, Vimeo, dan Dailymotion telah ditingkatkan untuk memungkinkan waktu mulai khusus. Berikut adalah daftar beberapa jenis media kaya yang didukung:
- YouTube
- Vimeo
- Postingan Instagram
- Postingan Facebook
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Album Imgur
- Peta Google
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Daftar putar dan grafik Spotify
- Giphy
- SoundCloud
- Dan banyak lagi!
Pengaturan media
Setiap elemen media dapat diatur ukurannya menggunakan preset di pengaturan gambar atau diatur ke nilai piksel atau persentase tertentu dengan mengklik ikon "kunci inggris" di toolbar. Keterangan opsional juga dapat ditambahkan di bawah gambar.
Teks alternatif
Untuk menambahkan teks alternatif ke gambar, pilih gambar, klik ikon "kunci inggris", lalu ketik teks alternatif Anda. Pelajari lebih lanjut tentang menulis teks alternatif deskriptif.
Cara menambahkan kode kustom
Menu sisipkan mencakup tombol untuk menambahkan kode kustom. Anda dapat menggunakan kode kustom untuk membuat tabel dan pembatas dengan HTML, menata bagian dari konten Anda dengan CSS, memperluas fungsionalitas situs Anda dengan JavaScript, dan menyematkan konten pihak ketiga.
Langkah-langkah:
- Tempatkan kursor di tempat Anda ingin menambahkan kode
- Klik ikon "plus" untuk membuka menu sisipkan dan klik tombol kode kustom
- Tambahkan kode Anda
Cara menambahkan daftar
Menu sisipkan menawarkan opsi untuk menambahkan daftar tidak berurutan (bullet) dan berurutan (bernomor). Anda juga dapat membuat daftar bersarang atau tidak bersarang.
- Daftar bullet: gunakan menu sisipkan atau ketik tanda hubung
-diikuti oleh spasi. - Daftar bernomor: gunakan menu sisipkan atau ketik angka diikuti oleh titik dan spasi.
- Membuat daftar bersarang: pilih item dan tekan Tab. Tidak bersarang: pilih dan tekan Shift + Tab.
Cara menambahkan konten teks kaya dari sumber lain
Anda dapat menempelkan teks kaya dari situs lain atau pengolah kata (seperti Google Docs). Pemformatan, tautan, dan gambar akan dipertahankan jika ditempelkan di bidang teks kaya Designer atau CMS.
Cara menyusun ulang dan menghapus elemen
Elemen dalam elemen Teks Kaya dapat disusun ulang melalui tarik dan lepas ke kanvas atau Navigator, atau melalui pintasan keyboard. Elemen dapat dihapus dengan memilih dan menekan Backspace atau Command + X (Control + X di Windows).
Cara menata konten RTE
Menata elemen individu di dalam elemen Teks Kaya
Menata elemen dalam elemen Teks Kaya seperti elemen Webflow lainnya: pilih di kanvas, buka Panel Gaya, terapkan atau buat kelas, dan tata.
Menata elemen di dalam elemen Teks Kaya dengan tag HTML
Elemen RTE mewarisi gaya dari tag HTML. Anda dapat menata melalui pemilih bersarang, membatasi gaya default ke RTE dengan kelas yang sama.
Langkah-langkah:
- Pilih RTE di kanvas
- Beri RTE kelas
- Pilih elemen di RTE
- Buka Panel Gaya (S)
- Klik ke dalam bidang Pemilih
- Pilih tag HTML
- Klik Sarangkan pemilih di dalam “nama kelas”
- Tata sesuai keinginan
Cara menata teks kaya dinamis
Elemen teks kaya dapat terhubung ke bidang teks kaya dalam Koleksi. Penataan terbaik dilakukan dengan memutuskan, menata, dan menghubungkan kembali—atau dengan menerapkan kelas, menata, dan tetap terhubung. Pelajari lebih lanjut tentang teks kaya dinamis.