Como utilizar o rich text editor

Esta página foi impressa em Jun 02, 2023. Para a versão atual, visite https://help.shopify.com/pt-PT/manual/productivity-tools/rich-text-editor.

Pode utilizar o editor de rich text para formatar e alterar o estilo do texto que surge na sua loja online.

Desktop iPhone Android

Nesta página

Onde utilizar o editor de rich text

Pode utilizar o editor de rich text para adicionar ou editar o texto em diversos locais na sua loja:

Adicionar conteúdo HTML com o editor de rich text

Pode introduzir conteúdos HTML para as suas publicações no blogue, descrições de produto e descrições de coleção com o editor de rich text.

Clique no botão Mostrar HTML para visualizar o código HTML para o conteúdo no interior do editor de rich text:

Na vista de HTML, pode efetuar muitas alterações ao conteúdo no editor de rich text. Pode adicionar imagens, vídeos ou tabelas utilizando o HTML e pode depurar ou ajustar a disposição e o estilo do conteúdo.

Integrar um widget multimédia

Se pretender integrar um widget de música ou vídeo, deve em primeiro lugar hospedá-lo num serviço, como por exemplo, Youtube, Vimeo, ou SoundCloud. Estes serviços geram um código integrado que pode copiar e colar no seu editor de rich text do Admin Shopify.

Passos:

  1. Encontre o código integrado para a multimédia que está a tentar integrar:

  2. Selecione todo o código integrado fazendo clique sobre o mesmo e pressionando ctrl + A num PC ou command + A num Mac.

  3. Copie o código integrado pressionando ctrl + C num PC ou command + C num Mac.

  4. No seu Admin Shopify, clique no botão mostrar HTML no editor de rich text para o conteúdo que está a editar.

  5. Cole o código integrado pressionando ctrl + V num PC ou command + V num Mac:

  6. Clique em Guardar na página que está a editar para guardar as suas alterações.

Formatar texto com o editor de rich text

Com o botão Formatação, pode rapidamente criar parágrafos, cabeçalhos ou blocos de citação. Utilizar os níveis de cabeçalho e formatação corretos pode ajudar as pessoas e os motores de pesquisa a ler o conteúdo do seu website.

Para escolher um formato para texto, destaque o texto e, em seguida, clicar no botão Formatação:

Opções de formatação

  • Parágrafo

    A maioria do conteúdo de texto no seu website é texto de parágrafo. O texto de parágrafo possui um tamanho de letra de 10–12 pt, mas alguns temas utilizam tamanhos de texto diferentes.

  • Cabeçalho (1-6)

    Os cabeçalhos são utilizados para estruturar conteúdos. Existem 6 níveis de cabeçalho. O Cabeçalho 1 é o nível mais importante e o Cabeçalho 6 é o menos importante.

  • Bloco de citação

    Um bloco de cotações é utilizado para apresentar texto que está atribuído a outra pessoa, como por exemplo, uma citação ou um excerto de um livro ou website.

Texto a negrito

Para criar texto a negrito, destaque o texto e clique no botão Negrito:

Colocar em itálico

Para criar texto em itálico, destaque o texto e clique no botão Itálico:

Criar uma lista com marcas

Para criar uma lista com marcas, clique no botão Lista com marcas:

Pode escrever para criar itens da lista com marcas:

Para criar novos itens de lista, pressione a tecla enter ou return. Para concluir a lista, pressione a tecla enter ou return duas vezes.

Criar uma lista numerada

Para criar uma lista numerada, clique no botão Lista numerada:

Pode escrever para criar itens de lista numerada:

Para criar novos itens de lista, pressione a tecla enter ou return. Para concluir a lista, pressione a tecla enter ou return duas vezes.

Texto avançado

Para avançar um texto, clique no botão Avançar:

Avançar um parágrafo vai dar-lhe uma margem do lado esquerdo.

Texto sem avanço

Para colocar um parágrafo sem avanço ou diminuir o avanço, clique no botão Diminuir avanço:

Diminuir o avanço de um parágrafo remove o avanço de quaisquer margens com avanço.

Alinhar texto

Para alinhar texto, selecione o texto, clique no botão Alinhamento e escolha Alinhar à esquerda, alinhar ao centro ou Alinhar à direita:

Alterar as cores de texto com o editor de rich text

Passos:

  1. Destaque o texto e clique no botão Cor:

  2. clique numa cor para alterar o texto "destacado" para essa cor:

Alterar as cores do texto de fundo

Passos:

  1. Destaque o texto e clique no botão Cor:

  2. Clique em cor de fundo…:

  3. Clique numa cor para alterar o fundo do texto destacado para essa cor:

Eliminar formatação no editor de rich text

Para remover a formatação de texto ou imagens, destaque o conteúdo e clique no botão Eliminar formatação:

Inserir tabelas com o editor de rich text

Pode inserir tabelas nas suas publicações no blogue, páginas, produto, descrições e descrições de coleções com o editor de rich text. Pode colocar texto, imagens ou até vídeos na tabela após a ter criado.

Passos:

  1. No editor de rich text, clique no botão Inserir tabela:

  2. Clique em Inserir tabela para inserir uma tabela:

    Isto cria uma tabela com uma fila e uma coluna.

Quando criar uma tabela, clique no botão Inserir tabela novamente, para modificar as filas e colunas da tabela:

  • Inserir fila acima: Coloque o seu cursor numa fila e clique neste botão para inserir uma nova fila acima.
  • Inserir fila abaixo: Coloque o seu cursor numa fila e clique neste botão para inserir uma nova fila abaixo.
  • Inserir coluna antes: Coloque o seu cursor numa coluna e clique neste botão para inserir uma nova coluna abaixo.
  • Inserir coluna depois: Coloque o seu cursor numa coluna e clique neste botão para inserir uma nova coluna acima.
  • Eliminar fila: coloque o cursor na fila que deseja eliminar e clique neste botão.
  • Eliminar coluna: Coloque o cursor na coluna que pretende eliminar e, em seguida, clique neste botão.
  • Eliminar tabela: Coloque o cursor em qualquer posição na tabela e, em seguida, clique neste botão para eliminar toda a tabela.

Inserir ligações com editor de rich text

Pode inserir ligações (hiperligações) em publicações no blogue, páginas, descrições de produto e descrições de coleção com o editor de rich text. Pode adicionar ligações que dirigem clientes para páginas dentro da sua loja online da Shopify e para outros websites. Pode também adicionar ligações que abrem mensagens de e-mail ou fazer chamadas telefónicas para ajudar os clientes a entrar em contacto consigo.

Passos:

  1. Destaque o texto ou imagem que deseja transformar numa ligação.

  2. Clique em Inserir ligação.

  3. Introduza o URL de destino para a ligação no campo Ligar a:

- Para ligar a um website externo que se encontra fora da sua loja Shopify, introduza http:// seguido do endereço web, por exemplo http://www.example.com. - Para ligar a uma página na sua loja online Shopify, introduza o URL breve, por exemplo /collections/summer-collection. - Para criar uma ligação que abre uma mensagem de e-mail, introduza mailto: seguido do endereço de e-mail, por exemplo mailto:example@example.com. - Para criar uma ligação, que efetua uma chamada telefónica tel:, seguido de um número de telefone, por exemplo tel:+0-123-456-7890.

  1. Introduza uma breve descrição da ligação na caixa Título da ligação.

  2. Escolha como a ligação vai abrir no menu Abrir esta ligação em:

- a mesma janela: A ligação será aberta numa janela ou separador do navegador existente do utilizador. - a mesma janela: A ligação será aberta numa nova janela ou separador do navegador.

  1. Clique em Inserir ligação para converter o seu texto destacado numa ligação.

Adicionar ligações e ligações externas com o editor de rich text

Ligações para as páginas dentro da sua loja Shopify são denominadas ligações internas. Pode utilizar URL breves para criar ligações internas. Por exemplo, o URL /collections vai direcionar para as páginas de coleções da sua loja.

Para ligar a uma página específica da sua loja online, como por exemplo, uma coleção ou página de produto, utilize o formato URL /page-type/page-handle. Por exemplo, para ligar a uma coleção que criou denominada coleção de verão, utilize o URL /collections/summer-collection.

Ligações a websites que estão fora da sua loja Shopify são denominadas ligações externas. As ligações externas devem ser introduzidas por completo e começar com http://.

Ligação a um ficheiro no conteúdo da página

Após carregar um ficheiro, pode efetuar ligação aos conteúdos no editor de rich text para torná-los disponíveis para transferência a partir de um produto ou descrição de coleção, página web ou publicação no blogue.

Passos:

  1. A partir do admin Shopify, aceda a Definições > Ficheiros.
  1. A partir da aplicação da Shopify, aceda a Loja > Definições.
  2. Em Definições de loja, toque em Ficheiros.
  1. A partir da aplicação da Shopify, aceda a Loja > Definições.
  2. Em Definições de loja, toque em Ficheiros.

  1. Copie o URL para o ficheiro ao qual deseja efetuar ligação.

  2. No seu Admin Shopify, clique no produto, coleção, página web ou publicação no blogue onde pretende adicionar o ficheiro.

  3. No editor de rich text, introduza ou escolha o texto de ligação. Por exemplo, pode adicionar uma ligação a uma tabela de medidas em PDF a partir do texto de ligação. Click here to download our sizing chart.

  4. Selecione o texto de ligação.

  5. Clique em Inserir ligação:

  6. No campo Ligar a, cole o URL para o ficheiro que deseja ligar.

  1. Clique em Inserir ligação. No editor de rich text, o texto ligado aparece em azul e sublinhado.

Inserir imagens com o editor de rich text

Existem três formas de inserir uma imagem utilizando o editor de rich text. Pode:

  • carregar imagens
  • escolha a partir das suas imagens de produto
  • utilize um URL de imagem pública.

Carregar imagem

Passos:

  1. No editor de rich text, clique no botão Inserir imagem:

  2. Na caixa de diálogo Inserir imagem, clique no separador Imagens carregadas.

  3. Clique em Carregar ficheiro:

  4. Escolha um ficheiro de imagem JPG ou PNG a partir do seu computador.

  5. Clique na imagem que pretende carregar para a selecionar:

  6. A partir do menu Tamanho a inserir, selecione o tamanho de apresentação da imagem. Pode selecionar Original para inserir a imagem sem alterar o seu tamanho de apresentação.

  7. Clique em Inserir imagem para colocar a imagem no editor de rich text.

Escolher a partir de imagens de produto

Passos:

  1. No editor de rich text, clique no botão Inserir imagem:

  2. Na caixa de diálogo Inserir imagem, clique no separador Imagens de produto

  3. clique na imagem que pretende inserir:

    Se não vir a imagem de produto que pretende inserir, então pode utilizar os botões de seta para pesquisar em páginas diferentes:

  4. A partir do menu Tamanho a inserir, selecione o tamanho de apresentação da imagem. Pode selecionar Original para inserir a imagem sem alterar o seu tamanho de apresentação.

  5. Clique em Inserir imagem para colocar a imagem de produto no editor de rich text.

Utilizar um URL de imagem

Para inserir uma imagem utilizando um URL público:

  1. No editor de rich text, clique no botão Inserir imagem:

  2. Na caixa de diálogo Inserir imagem, clique no separador URL.

  3. Introduza um URL publicamente acessível do seu ficheiro de imagem:

  4. Clique em Inserir imagem para inserir a imagem no editor de rich text no seu tamanho original.

Mover e redimensionar uma imagem no editor de rich text

Após adicionar uma imagem a uma descrição de produto ou coleção, página web ou um blogue, pode movê-la para outra localização no conteúdo.

Passos:

  1. No seu Admin Shopify, clique no produto, coleção, página web ou publicação no blogue que inclui a imagem que pretende mover ou redimensionar.

  2. No editor de rich text, clique na imagem.

  3. Faça as suas alterações:

- Para mover a imagem, clique e arraste-a para outra localização no campo Conteúdo. - Para redimensionar a imagem, clique e arraste um dos cantos.

  1. Clique em Guardar.

Edite uma imagem no editor de rich text

Também pode alterar o tamanho, ajustar o texto e alinhar uma imagem dentro do editor de rich text. Também pode editar um URL de imagem ou adicionar ou editar o texto alternativo da imagem.

Passos:

  1. Faça duplo-clique na imagem no editor de rich text para abrir a caixa de diálogo Editar imagem.

  2. Utilize as opções de tamanho e alinhamento para editar uma imagem:

- Para alterar o tamanho da imagem, selecione a opção de tamanho. - Para alterar a imagem, um novo URL de imagem. - Para melhorar o SEO e acessibilidade da sua loja online, adicionar ou edite o texto alternativo da imagem. - Para adicionar espaçamento, introduza o número de píxeis de espaço que pretende de cada lado. - Para alterar o alinhamento da imagem, selecione a partir dos ícones que representam o alinhamento à esquerda, centro ou direita. - Para adicionar moldagem de texto, consulte Ajustar o texto em volta da imagem.

  1. Clique em Editar imagem para guardar as suas alterações.

Inserir vídeos com o editor de rich text

Pode inserir ligações ou integrar vídeos em publicações no blogue, páginas, descrições de produto e descrições de coleção utilizando o editor de rich text.

Se desejar integrar um vídeo que criou, em primeiro lugar deve carrega-lo para um site de streaming de vídeo, como por exemplo Youtube ou Vimeo.

O Youtube não lhe permite desativar vídeos relacionados, mas pode especificar que os vídeos relacionados devem partir do mesmo canal que o vídeo que acabou de reproduzir.

Passos:

  1. Copiar o URL do vídeo pressionando ctrl + C num PC ou command + C num Mac.

  2. Visite Embed Responsively. A Embed Responsively é uma ferramenta que lhe vai dar um código de integração melhorado para o seu vídeo.

  3. Na Embed Responsively, clique para selecionar o website do vídeo onde o vídeo está localizado.

  4. Cole o URL do vídeo que copiou para a caixa de URL da página em Embed Responsively pressionando ctrl + V num PC ou command + V num Mac.

  5. Clique em Embed. A Embed Responsively vai criar um código de integração para si.

  6. Se o vídeo for do YouTube e desejar apresentar apenas vídeos relacionados do mesmo canal do YouTube então localize o URL do vídeo no código integrado. Copie e cole ?rel=0 no final e dentro das aspas:

  7. Copie todo o código no interior da caixa Integrar código.

  8. No seu Admin Shopify, clique no botão Inserir vídeo no editor de rich text:

  9. Cole o código integrado na caixa de diálogo Inserir vídeo.

  10. Clique em Inserir vídeo.

  11. Clique em Guardar quanto vier concluído para guardar as suas alterações para o item que está a editar.

Insira os ficheiros de áudio no editor de rich text

Pode utilizar o editor de rich text para inserir ou integrar ficheiros de áudio nas publicações no blogue, páginas, descrições de produto e descrições de coleção.

Passos:

  1. A partir de Admin Shopify, clique em Definições e, em seguida, clique em Ficheiros.

  2. Clique em Carregar itens para carregar o ficheiro de áudio que pretende inserir ou integrar na sua loja.

  3. A partir da secção Loja online, abra o editor de rich text para a página ou publicação no blogue que pretenda que tenha o ficheiro de áudio.

  4. Copie <div id="player"><audio controls="controls"> e cole o código no editor de rich text para integrar um leitor de áudio na sua página.

  5. Copie o código que se segue:

    <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

    Cole este código no seu editor de rich text após o código para o leitor de áudio e, em seguida, substitua https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 com o URL que criou para o seu ficheiro áudio quando o atualizou para o Shopify. Pode encontrar o URL do seu ficheiro áudio a qualquer momento na página Ficheiros.

  6. Clique em Guardar.

  7. Clique em Ver para garantir que o seu ficheiro áudio é reproduzido corretamente.

Adicione ou remova comentários internos no editor de rich text

Pode utilizar a etiqueta de comentários <!-- e --> para texto interno que não deseja publicar para a sua loja.

Passos:

  1. No seu editor de rich text editor, clique no botão Mostrar HTML.

  2. Para adicionar um comentário interno, inclua o texto que pretende manter oculto em <!-- e -->. Por exemplo: <!--yourtext-->.

  3. Clique em Guardar.

As tags de HTML incluídas com as etiquetas comentários são guardadas como texto interno. Para essas tags de HTML funcionarem corretamente, deve remover as etiquetas de comentários <!-- e --> à volta das mesmas.

Remover etiquetas de comentário

Onde utilizar o editor de rich text

Atualmente, pode utilizar o editor de rich text na Aplicação Shopify para adicionar descrições aos seus produtos. Se pretender adicionar texto às páginas, blogues ou coleções, então deve fazê-lo a partir do seu Admin Shopify num navegador web.

Formatar texto com o editor de rich text

Pode utilizar o editor de rich text para formatar o seu texto de diversas formas:

  • Texto a negrito
  • Colocar em itálico
  • Sublinhar texto
  • Alinhar texto
  • Criar listas

Texto a negrito

Para colocar o seu texto a negrito, destaque o texto e toque no botão de negrito:

Colocar em itálico

Para colocar o seu texto em itálico, destaque o texto e, em seguida, toque no botão de itálico:

Sublinhar texto

Para sublinha o seu texto, destaque o texto e, em seguida, toque no botão sublinhar:

Alinhar texto

Passos:

  1. A partir do editor de texto, destaque o texto que pretende alinhar.
  2. Toque no botão de alinhamento:
  3. Toque numa das opções de alinhamento para selecionar o alinhamento à esquerda, alinhamento ao centro ou alinhamento à direita.

Criar listas

Pode utilizar o editor de texto parar adicionar listas numeradas e com marcas ao seu texto.

Passos:

  1. A partir do editor de texto, toque no botão de lista para mostrar as duas opções de lista:

  2. Toque na opção de lista com marcas ou lista numerada para selecionar o tipo de lista que deseja adicionar.

  3. Introduza a sua lista de itens. Após cada item, toque em enter para se mover para a próxima linhas e introduzir outro item.

  4. Quando tiver terminado de introduzir a sua lista toque em enter duas vezes.

Inserir ligações com editor de rich text

Pode utilizar o editor de texto para adicionar ligações ao seu texto:

  1. A partir do editor de texto, selecione as palavras que deseja tornar numa ligação.

  2. Toque no botão de ligação:

  3. A partir do ecrã Inserir ligação, introduza o URL da ligação.

  4. Introduza um título de ligação que é utilizado para acessibilidade e SEO.

  5. Por predefinição, o destino da ligação vai abrir na mesma janela. Para definir uma ligação para abrir numa janela diferente, ative a opção Abrir ligação numa nova janela.

  6. Tocar em Guardar.

Criar ligações internas e externas

Ligações para as páginas dentro da sua loja Shopify são denominadas ligações internas. Pode utilizar URL breves para criar ligações internas. Por exemplo, o URL /collections vai direcionar para as páginas de coleções da sua loja.

Para ligar a uma página específica da sua loja online, como por exemplo, uma coleção ou página de produto, utilize o formato URL /page-type/page-handle. Por exemplo, para ligar a uma coleção que criou denominada coleção de verão, utilize o URL /collections/summer-collection.

Ligações a websites que estão fora da sua loja Shopify são denominadas ligações externas. As ligações externas devem começar com http://.

Onde utilizar o editor de rich text

Atualmente, pode utilizar o editor de rich text na Aplicação Shopify para adicionar descrições aos seus produtos. Se pretender adicionar texto às páginas, blogues ou coleções, então deve fazê-lo a partir do seu Admin Shopify num navegador web.

Formatar texto com o editor de rich text

Pode utilizar o editor de rich text para formatar o seu texto de diversas formas:

  • Texto a negrito
  • Colocar em itálico
  • Sublinhar texto
  • Alinhar texto
  • Criar listas

Texto a negrito

Para colocar o seu texto a negrito, destaque o texto e toque no botão de negrito:

Colocar em itálico

Para colocar o seu texto em itálico, destaque o texto e, em seguida, toque no botão de itálico:

Sublinhar texto

Para sublinha o seu texto, destaque o texto e, em seguida, toque no botão sublinhar:

Alinhar texto

Passos:

  1. A partir do editor de texto, destaque o texto que pretende alinhar.
  2. Toque no botão de alinhamento:
  3. Toque numa das opções de alinhamento para selecionar o alinhamento à esquerda, alinhamento ao centro ou alinhamento à direita.

Criar listas

Pode utilizar o editor de texto parar adicionar listas numeradas e com marcas ao seu texto.

Passos:

  1. A partir do editor de texto, toque no botão de lista para mostrar as duas opções de lista:

  2. Toque na opção de lista com marcas ou lista numerada para selecionar o tipo de lista que deseja adicionar.

  3. Introduza a sua lista de itens. Após cada item, toque em enter para se mover para a próxima linhas e introduzir outro item.

  4. Quando tiver terminado de introduzir a sua lista toque em enter duas vezes.

Inserir ligações com editor de rich text

Pode utilizar o editor de texto para adicionar (hiperligações) ao seu texto:

  1. A partir do editor de texto, selecione as palavras que deseja tornar numa ligação.

  2. Toque no botão de ligação:

  3. A partir do ecrã Inserir ligação, introduza o URL da ligação.

  4. Introduza um título de ligação que é utilizado para acessibilidade e SEO.

  5. Por predefinição, o destino da ligação vai abrir na mesma janela. Para definir uma ligação para abrir numa janela diferente, ative a opção Abrir ligação numa nova janela.

  6. Toque na marca de verificação para guardar as suas ligações.

Criar ligações internas e externas

Ligações para as páginas dentro da sua loja Shopify são denominadas ligações internas. Pode utilizar URL breves para criar ligações internas. Por exemplo, o URL /collections vai direcionar para as páginas de coleções da sua loja.

Para ligar a uma página específica da sua loja online, como por exemplo, uma coleção ou página de produto, utilize o formato URL /page-type/page-handle. Por exemplo, para ligar a uma coleção que criou denominada coleção de verão, utilize o URL /collections/summer-collection.

Ligações a websites que estão fora da sua loja Shopify são denominadas ligações externas. As ligações externas devem começar com http://.

Está pronto para começar a vender na Shopify?

Experimente gratuitamente