Visão geral do elemento de texto rico - Ajuda do Webflow

Last updated on 10/11/2025@mrbirddev

Use um elemento de texto rico (RTE) para criar conteúdo longo.

Um elemento de texto rico (RTE) é o elemento perfeito para criar conteúdo longo, como postagens de blog, páginas sobre, biografias, etc. Em vez de adicionar individualmente elementos de título, parágrafo, lista ou imagem, você pode clicar duas vezes em um elemento de texto rico para criar e formatar texto, código personalizado e elementos de mídia.

Como adicionar um elemento de texto rico ao seu site

Você pode adicionar um elemento de texto rico arrastando-o do Painel de Adição (A) para a tela do Designer. Para adicionar ou editar o conteúdo dentro dele, clique duas vezes no elemento de texto rico ou selecione o elemento e pressione Enter ou Return no seu teclado.

Você pode adicionar os seguintes elementos dentro de elementos de texto rico:

Parágrafos
Títulos (H1-H6)
Imagens
Legendas de imagem
Atributos alt de imagem
Código personalizado
Citações em bloco
Listas não ordenadas (com marcadores)
Listas ordenadas (numeradas)
Vídeos (YouTube, Vimeo)
Mídia rica (Google Maps, SoundCloud, Imgur, Giphy, Codepen e mais)

Você também pode adicionar formatação adicional aos elementos de texto:

Links (URL, página, e-mail, etc.)
Texto em negrito
Texto em itálico
Texto em sobrescrito e subscrito
Código

Comandos de barra

Quando você está editando conteúdo dentro de um RTE, pode usar comandos de barra para gerar rapidamente cópias usando o Assistente de IA do Webflow ou adicionar novos elementos de conteúdo. Para usar comandos de barra, pressione / (barra) no seu teclado e clique em Gerar mais cópia para adicionar texto contextualmente relevante usando o Assistente de IA, selecione o elemento desejado no menu Adicionar ou comece a digitar para filtrar a lista de elementos:

Título (H1–H6)
Lista numerada
Lista com marcadores
Parágrafo
Citação em bloco
Imagem
Vídeo
Conteúdo rico
Incorporação HTML
Bloco de código

Como adicionar e formatar conteúdo de texto

Você pode começar a digitar dentro do RTE e depois adicionar formatação ao texto para criar cabeçalhos, citações em bloco, texto em negrito ou itálico, texto em sobrescrito ou subscrito e links.

Você pode formatar rapidamente o texto (por exemplo, negrito, itálico, adicionar um hyperlink) e elementos de bloco (por exemplo, cabeçalhos, listas) usando Markdown.

Gerar conteúdo de texto usando o Assistente de IA do Webflow

Para adicionar rapidamente uma cópia contextualmente relevante a um RTE usando o Assistente de IA:

Clique com o botão direito no RTE
Escolha Modificar cópia no menu de contexto
(Opcional) Insira um prompt descrevendo a cópia que você gostaria de gerar
Clique no ícone "Enviar prompt"
Clique em Concluído para aceitar a cópia gerada

Gerar cópia usando o Assistente de IA substituirá o conteúdo existente dentro de um RTE.

Saiba mais sobre como usar o Assistente de IA do Webflow para gerar e editar conteúdo.

Como adicionar parágrafos

Assim como em qualquer outro editor de texto, pressionar Enter no teclado criará um novo parágrafo em uma nova linha onde você pode continuar a digitar. Para adicionar vários parágrafos, pressione Enter no final de um parágrafo. Você também pode usar o Assistente de IA do Webflow para adicionar e refinar texto para você.

Como adicionar cabeçalhos e citações em bloco

Para criar um cabeçalho, selecione qualquer texto dentro de um parágrafo e escolha uma opção de cabeçalho (H1-H6). O mesmo vale para criar citações em bloco.

Como formatar texto e adicionar links

Qualquer parte de qualquer elemento de texto (por exemplo, cabeçalhos, parágrafos, legendas, etc.) pode ser formatada com negrito, itálico, sobrescrito, subscrito e links selecionando parte do texto e aplicando suas opções de formatação desejadas. Saiba mais sobre formatação de texto inline.

Quando você cria um link dentro de um RTE, você tem a opção de escolher uma URL, página, seção da página, e-mail ou número de telefone.

Atalhos de teclado

Estes atalhos de teclado podem ajudá-lo a formatar rapidamente o conteúdo de texto rico:

Inserir um espaço não separável: Shift + Espaço
Inserir uma quebra de linha: Shift + Enter
Texto em negrito: Command + B (Control + B no Windows)
Texto em itálico: Command + I (Control + I no Windows)
Inserir hiperlink: Command + K (Control + K no Windows)

Enquanto edita no RTE, você pode usar o atalho de comando de barra (“/**”) para adicionar rapidamente elementos de conteúdo. Você também pode usar atalhos de Markdown:

Texto em itálico: *texto* ou _texto_
Texto em negrito: **texto** ou __texto__
Negrito e itálico: ***texto*** ou ___texto___
Inserir hiperlink: [texto do hiperlink](https://www.url.com)
Título 1: # + Espaço
Título 2: ## + Espaço
Título 3: ### + Espaço
Título 4: #### + Espaço
Título 5: ##### + Espaço
Título 6: ###### + Espaço
Citação: > + Espaço
Lista não ordenada: - + Espaço
Lista ordenada: 1. + Espaço

Como adicionar conteúdo de mídia, código personalizado e listas

Quando o cursor de texto está em uma nova linha, um botão de “mais” aparece. Clicar neste botão revela um menu de inserção com opções para adicionar imagens, vídeos, outras mídias ricas, código personalizado e listas com marcadores ou numeradas.

Adicionar imagens, vídeos e mídia rica

Todos os elementos de mídia no RTE são responsivos e respeitarão a proporção do conteúdo. O suporte a vídeos do YouTube, Vimeo e Dailymotion foi aprimorado para permitir tempos de início personalizados. Aqui está uma lista de alguns tipos de mídia rica suportados:

YouTube
Vimeo
Post do Instagram
Post do Facebook
DailyMotion
Kickstarter
TED
Wistia
Livestream
Twitch
Hulu
Álbuns do Imgur
Mapas do Google
JSFiddle
Codepen
Scribd
SlideShare
Playlists e gráficos do Spotify
Giphy
SoundCloud
E mais!

Configurações de mídia

Cada elemento de mídia pode ser dimensionado usando as predefinições nas configurações de imagem ou definido para um valor específico em pixels ou porcentagem clicando no ícone de "chave inglesa" na barra de ferramentas. Uma legenda opcional também pode ser adicionada abaixo das imagens.

Texto alternativo

Para adicionar texto alternativo às imagens, selecione a imagem, clique no ícone de "chave inglesa" e digite seu texto alternativo. Saiba mais sobre como escrever texto alternativo descritivo.

Como adicionar código personalizado

O menu de inserção inclui um botão para adicionar código personalizado. Você pode usar código personalizado para criar tabelas e divisores com HTML, estilizar partes do seu conteúdo com CSS, expandir a funcionalidade do seu site com JavaScript e incorporar conteúdo de terceiros.

Passos:

Coloque o cursor onde deseja adicionar o código
Clique no ícone de "mais" para abrir o menu de inserção e clique no botão de código personalizado
Adicione seu código

Scripts personalizados podem ser excluídos dos modos de visualização e comentário envolvendo seu código para que ele apareça apenas no site publicado. Os efeitos aparecem na visualização, mas só entram em vigor após a publicação.

Como adicionar listas

O menu de inserção oferece opções para adicionar listas não ordenadas (com marcadores) e ordenadas (numeradas). Você também pode aninhar ou desanexar listas.

Lista com marcadores: use o menu de inserção ou digite um traço - seguido de um espaço.
Lista numerada: use o menu de inserção ou digite um número inteiro seguido de um ponto e um espaço.
Aninhar uma lista: selecione o item e pressione Tab. Desanexar: selecione e pressione Shift + Tab.

Como adicionar conteúdo de texto rico de outras fontes

Você pode colar texto rico de outros sites ou processadores de texto (como o Google Docs). A formatação, links e imagens serão mantidos se colados no Designer ou no campo de texto rico do CMS.

As imagens não serão importadas ao colar conteúdo rico em um elemento de texto rico no Editor.

Colar de outras fontes pode trazer formatação indesejada. Para evitar isso, primeiro cole em um editor de texto simples e depois no elemento de texto rico, ou use o atalho para colar sem formatação (**Command + Option + Shift + V** no Mac, **Control + Shift + V** no Windows). Isso remove toda a formatação.

Como reorganizar e excluir elementos

Elementos em um elemento de texto rico podem ser reorganizados via arrastar e soltar na tela ou no Navegador, ou via atalhos de teclado. Elementos podem ser excluídos selecionando e pressionando Backspace ou Command + X (Control + X no Windows).

Como estilizar conteúdo RTE

Colegas ou editores de conteúdo podem formatar e criar/excluir elementos de texto/mídia em RTEs, mas não podem estilizar elementos RTE.

Estilizando elementos individuais dentro de um elemento de texto rico

Estilize elementos dentro do elemento de texto rico como qualquer elemento do Webflow: selecione na tela, vá para o Painel de Estilo, aplique ou crie uma classe e estilize.

Você também pode aplicar visibilidade condicional em elementos dentro de elementos de texto rico.

Estilizando elementos dentro de um elemento de texto rico com tags HTML

Elementos RTE herdam estilos de tags HTML. Você pode estilizar via seletores aninhados, limitando estilos padrão a RTEs com a mesma classe.

Passos:

Selecione o RTE na tela
Dê uma classe ao RTE
Selecione o elemento no RTE
Vá para o Painel de Estilo (S)
Clique no campo Seletor
Selecione a tag HTML
Clique em Aninhar seletor dentro de “nome da classe”
Estilize como desejar

Estilizar tags aninhadas afeta todos os elementos dentro dessa classe, não apenas RTEs. Para limitar ao RTE, crie uma classe dedicada ou use classes combinadas.

Como estilizar texto rico dinâmico

Elementos de texto rico podem se vincular a campos de texto rico em uma Coleção. A melhor forma de estilizar é desconectar, estilizar e reconectar—ou aplicar uma classe, estilizar e manter conectado. Saiba mais sobre texto rico dinâmico.

Crie um elemento de texto rico em uma página de guia de estilo para estilizar elementos RTE sem desconexões frequentes. Use a mesma classe e atualizações de estilo no guia de estilo RTE serão aplicadas aos RTEs da página de coleção.

Voltar para a ajuda do webflow

Last updated on 10/11/2025@mrbirddev