Descripción general del elemento de texto enriquecido - Ayuda de Webflow
Utiliza un elemento de texto enriquecido (RTE) para crear contenido extenso.
Un elemento de texto enriquecido (RTE) es el elemento perfecto para crear contenido extenso como publicaciones de blog, páginas de información, biografías, etc. En lugar de agregar elementos individuales de encabezado, párrafo, lista o imagen, puedes hacer doble clic en un elemento de texto enriquecido para crear y dar formato a texto, código personalizado y elementos multimedia.
Cómo agregar un elemento de texto enriquecido a tu sitio
Puedes agregar un elemento de texto enriquecido arrastrándolo desde el panel de Añadir (A) al lienzo del Diseñador. Para agregar o editar el contenido dentro, haz doble clic en el elemento de texto enriquecido o selecciona el elemento y presiona Enter o Return en tu teclado.
Puedes agregar los siguientes elementos dentro de los elementos de texto enriquecido:
- Párrafos
- Encabezados (H1-H6)
- Imágenes
- Leyendas de imágenes
- Atributos alt de imágenes
- Código personalizado
- Citas en bloque
- Listas desordenadas (con viñetas)
- Listas ordenadas (numeradas)
- Videos (YouTube, Vimeo)
- Medios enriquecidos (Google Maps, SoundCloud, Imgur, Giphy, Codepen y más)
También puedes agregar formato adicional a los elementos de texto:
- Enlaces (URL, página, correo electrónico, etc.)
- Texto en negrita
- Texto en cursiva
- Texto en superíndice y subíndice
- Código
Comandos de barra
Cuando estás editando contenido dentro de un RTE, puedes usar comandos de barra para generar rápidamente texto usando el Asistente de IA de Webflow o agregar nuevos elementos de contenido. Para usar comandos de barra, presiona / (barra diagonal) en tu teclado y haz clic en Generar más texto para agregar texto contextualmente relevante usando el Asistente de IA, selecciona el elemento deseado del menú de Añadir, o comienza a escribir para filtrar la lista de elementos:
- Encabezado (H1–H6)
- Lista numerada
- Lista con viñetas
- Párrafo
- Cita en bloque
- Imagen
- Video
- Contenido enriquecido
- Incrustación HTML
- Bloque de código
Cómo agregar y dar formato al contenido de texto
Puedes comenzar a escribir dentro del RTE y luego agregar formato al texto para crear encabezados, citas en bloque, texto en negrita o cursiva, texto en superíndice o subíndice, y enlaces.
Generar contenido de texto usando el Asistente de IA de Webflow
Para agregar rápidamente texto relevante a un RTE usando el Asistente de IA:
- Haz clic derecho en el RTE
- Elige Modificar copia del menú contextual
- (Opcional) Ingresa un mensaje describiendo el texto que deseas generar
- Haz clic en el icono "Enviar mensaje"
- Haz clic en Hecho para aceptar el texto generado
Aprende más sobre cómo usar el Asistente de IA de Webflow para generar y editar contenido.
Cómo agregar párrafos
Al igual que en cualquier otro editor de texto, presionar Enter en tu teclado creará un nuevo párrafo en una nueva línea donde puedes continuar escribiendo. Para agregar múltiples párrafos, presiona Enter al final de un párrafo. También puedes usar el Asistente de IA de Webflow para agregar y refinar texto por ti.
Cómo agregar encabezados y citas en bloque
Para crear un encabezado, selecciona cualquier texto dentro de un párrafo y elige una opción de encabezado (H1-H6). Lo mismo aplica para crear citas en bloque.
Cómo dar formato al texto y agregar enlaces
Cualquier parte de cualquier elemento de texto (por ejemplo, encabezados, párrafos, leyendas, etc.) puede ser formateada con negrita, cursiva, superíndice, subíndice y enlaces seleccionando parte del texto y aplicando las opciones de formato deseadas. Aprende más sobre el formato de texto en línea.
Cuando creas un enlace dentro de un RTE, tienes la opción de elegir una URL, página, sección de página, correo electrónico o número de teléfono.
Atajos de teclado
Estos atajos de teclado pueden ayudarte a formatear rápidamente el contenido de texto enriquecido:
- Insertar un espacio sin separación: Shift + Espacio
- Insertar un salto de línea: Shift + Enter
- Texto en negrita: Command + B (Control + B en Windows)
- Texto en cursiva: Command + I (Control + I en Windows)
- Insertar hipervínculo: Command + K (Control + K en Windows)
Mientras editas en el RTE, puedes usar el atajo de comando de barra (“/**”) para agregar rápidamente elementos de contenido. También puedes usar atajos de Markdown:
- Texto en cursiva:
*texto*o_texto_ - Texto en negrita:
**texto**o__texto__ - Negrita y cursiva:
***texto***o___texto___ - Insertar hipervínculo:
[texto del hipervínculo](https://www.url.com) - Encabezado 1:
#+ Espacio - Encabezado 2:
##+ Espacio - Encabezado 3:
###+ Espacio - Encabezado 4:
####+ Espacio - Encabezado 5:
#####+ Espacio - Encabezado 6:
######+ Espacio - Cita en bloque:
>+ Espacio - Lista desordenada:
-+ Espacio - Lista ordenada:
1.+ Espacio
Cómo agregar contenido multimedia, código personalizado y listas
Cuando el cursor de texto está en una nueva línea, aparece un botón de “más”. Al hacer clic en este botón, se muestra un menú de inserción con opciones para agregar imágenes, videos, otros medios enriquecidos, código personalizado y listas con viñetas o numeradas.
Agregar imágenes, videos y medios enriquecidos
Todos los elementos multimedia en el RTE son responsivos y respetarán la relación de aspecto del contenido. El soporte para videos de YouTube, Vimeo y Dailymotion se ha mejorado para permitir tiempos de inicio personalizados. Aquí tienes una lista de algunos tipos de medios enriquecidos compatibles:
- YouTube
- Vimeo
- Publicación de Instagram
- Publicación de Facebook
- DailyMotion
- Kickstarter
- TED
- Wistia
- Livestream
- Twitch
- Hulu
- Álbumes de Imgur
- Mapas de Google
- JSFiddle
- Codepen
- Scribd
- SlideShare
- Listas de reproducción y gráficos de Spotify
- Giphy
- SoundCloud
- ¡Y más!
Configuración de medios
Cada elemento de medios puede dimensionarse utilizando los ajustes preestablecidos en la configuración de imagen o establecerse en un valor específico de píxeles o porcentaje haciendo clic en el icono de "llave inglesa" en la barra de herramientas. También se puede añadir un pie de foto opcional debajo de las imágenes.
Texto alternativo
Para añadir texto alternativo a las imágenes, selecciona la imagen, haz clic en el icono de "llave inglesa" y luego escribe tu texto alternativo. Aprende más sobre cómo escribir texto alternativo descriptivo.
Cómo añadir código personalizado
El menú de inserción incluye un botón para añadir código personalizado. Puedes usar código personalizado para crear tablas y divisores con HTML, estilizar partes de tu contenido con CSS, expandir la funcionalidad de tu sitio con JavaScript e incrustar contenido de terceros.
Pasos:
- Coloca el cursor donde deseas añadir el código
- Haz clic en el icono de “más” para abrir el menú de inserción y haz clic en el botón de código personalizado
- Añade tu código
Cómo añadir listas
El menú de inserción ofrece opciones para añadir listas desordenadas (con viñetas) y ordenadas (numeradas). También puedes anidar o desanidar listas.
- Lista con viñetas: usa el menú de inserción o escribe un guion
-seguido de un espacio. - Lista numerada: usa el menú de inserción o escribe un número seguido de un punto y un espacio.
- Anidar una lista: selecciona el elemento y presiona Tab. Desanidar: selecciona y presiona Shift + Tab.
Cómo añadir contenido de texto enriquecido de otras fuentes
Puedes pegar texto enriquecido de otros sitios o procesadores de texto (como Google Docs). El formato, los enlaces y las imágenes se mantendrán si se pegan en el campo de texto enriquecido del Diseñador o CMS.
Cómo reorganizar y eliminar elementos
Los elementos en un elemento de texto enriquecido se pueden reorganizar mediante arrastrar y soltar en el lienzo o el Navegador, o mediante atajos de teclado. Los elementos se pueden eliminar seleccionándolos y presionando Retroceso o Comando + X (Control + X en Windows).
Cómo dar estilo al contenido de RTE
Estilizar elementos individuales dentro de un elemento de texto enriquecido
Estiliza elementos dentro del elemento de texto enriquecido como cualquier elemento de Webflow: selecciona en el lienzo, ve al panel de estilo, aplica o crea una clase y estiliza.
Estilizar elementos dentro de un elemento de texto enriquecido con etiquetas HTML
Los elementos de RTE heredan estilos de las etiquetas HTML. Puedes estilizar mediante selectores anidados, limitando los estilos predeterminados a RTEs con la misma clase.
Pasos:
- Selecciona RTE en el lienzo
- Asigna una clase al RTE
- Selecciona el elemento en RTE
- Ve al panel de estilo (S)
- Haz clic en el campo Selector
- Selecciona la etiqueta HTML
- Haz clic en Anidar selector dentro de “nombre de clase”
- Estiliza como desees
Cómo dar estilo al texto enriquecido dinámico
Los elementos de texto enriquecido pueden vincularse a campos de texto enriquecido en una Colección. Es mejor estilizar desconectando, estilizando y volviendo a vincular, o aplicando una clase, estilizando y manteniéndolo conectado. Aprende más sobre texto enriquecido dinámico.