EN
Procurando...

Como usar o editor de texto Pixpa?

Ao editar o conteúdo, é importante aprender a usar o editor de texto / WYSIWYG (o que você vê é o que obtém). Este editor de texto permite editar, alterar e adicionar conteúdo às suas páginas da Web (formulário de contato, calendário, livro de visitas), postagens de blog e banners de capa sem ter conhecimento de HTML.

Ao trabalhar com o editor de texto Pixpa, pressione ENTER (janelas) ou RETURN (mac) para criar um novo parágrafo, para inserir uma nova linha sem forçar um novo parágrafo, pressione e segure o SHIFT tecla e, em seguida, pressione enter ou return.

A maioria das funções do editor entrará em vigor no momento em que você clique no botão/ícone. Em outros casos, clicar no ícone abrirá um pequeno menu suspenso com opções adicionais.

Ao adicionar estilo ao seu texto, você pode clicar na opção do editor e começar a digitar para obter o resultado selecionado ou digitar seu texto, destacá-lo e clicar na opção do editor para adicioná-lo ao texto selecionado.

As opções explicadas são: 

  1. Formato – Altere o estilo da fonte
  2. Alinhar – Alinhamento do texto
  3. Negrito / Itálico / Tachado / Sublinhado
  4. Lista – Ordenada / Não Ordenada
  5. Imagem – Adicione uma imagem
  6. Vídeo – Adicionar um vídeo
  7. Tabela – Adicionar uma tabela
  8. Link – Adicione um link ao seu texto
  9. Cor do texto – Altere a cor do texto
  10. Clipes – Adicionar botões CTA
  11. Widget – Adicione um código personalizado
  12. Linha – Adicionar uma linha
  13. Modo tela cheia
  14. visualização do código HTML

1. Formato – Altere o estilo da fonte

Você pode usar quatro tipos diferentes de estilos de fonte em seu site (por vez) que seriam especificados no Seção de design. Esse é um estilo de design comum usado em todo o site.


Todos os estilos de fonte são especificados no seção de design. Você também pode clicar em Gerenciar fontes, que é a última opção no menu suspenso quando você clica no botão Texto botão. Agora você pode ver e definir as seguintes fontes e editar o estilo, tamanho, cor, espessura, altura da linha e espaçamento entre letras:

  • Título 1
  • Título 2
  • Título 3
  • Título 4
  • Texto do parágrafo (normal, pequeno e grande)

Aqui está uma captura de tela do estilo Título 1. Você também pode editar as outras fontes de parágrafo dos títulos aqui.


Observação: 'Código' e 'Citação' têm estilo padrão.

  • Code: Isso é usado para definir um pedaço de código de computador. O conteúdo interno é exibido na fonte monoespaçada padrão do navegador.
  • Parâmetros: é o mesmo que H3 junto com uma tag blockquote.

Depois de especificar o estilo da fonte na seção de design, você pode usá-los com eficiência em todo o site. Basta selecionar o texto e aplicar a formatação. O sistema aplicará automaticamente a cor, o tamanho e o peso da fonte desse estilo específico ao texto selecionado. Você pode revisar o mesmo no site.

Note: O estilo, o peso e a cor da fonte estarão visíveis apenas no site e NÃO no estúdio.

2. Alinhar – Alinhamento do texto

Você pode alinhar seu texto como esquerdo, direito, centralizado e justificado. Selecione o texto e escolha o alinhamento no menu suspenso.

3. Negrito / Itálico / Tachado / Sublinhado

  • Destemido – O texto realçado ficará em negrito quando for clicado. Em HTML, isso usa uma tag.
  • Itálico – O texto realçado ficará em itálico quando for clicado. Em HTML, isso usa a
  • Tachado – O texto realçado será marcado como excluído quando for clicado. Em HTML, isso usa o marcação.
  • Sublinhado – O texto realçado ficará sublinhado quando for clicado. Em HTML, isso usa a tag.

4. Lista – Ordenada / Não Ordenada

Você pode facilmente converter seu texto em listas com recuos para organizá-los.

  • Lista não ordenada – O texto realçado será formatado como uma lista com marcadores. Em HTML, isso usa um conjunto de e Tag.
  • Lista Ordenada – O texto realçado será formatado como uma lista numerada. Em HTML, isso usa um conjunto de e Tag.
  • Reentrância – Uma área de texto realçada não terá recuo.
  • parágrafo – Uma área de texto destacada será recuada.

5. Imagem – Adicione uma imagem

Você pode adicionar imagens múltiplas clicando nele. Clicar neste botão abrirá uma pequena janela modal onde você pode arrastar ou selecionar sua imagem de seu sistema. Em HTML, a tag utilizada é .

Você também pode redimensione sua imagem arrastando e soltando do ícone azul inferior direito nessa imagem específica.

O editor também permite que você adicione o título da imagem, legenda e link para a imagem carregada. Clique em qualquer imagem e você verá a opção de Editar (1) Apagar (2) e Redimensionar (3).

Depois de clicar em Editar, você verá uma janela pop-up onde poderá especificar:

  1. Título – Esta seria a tag alt dessa imagem específica.
  2. Subtítulo – Para mostrar a legenda junto com a imagem no site ao vivo.
  3. Posição – Selecione o alinhamento da imagem (esquerda, centro, direita ou nenhum).
  4. Ligação – Adicione um link para a imagem.
  5. Abrir em nova guia – Marque esta caixa de seleção se quiser abrir o link da imagem em uma nova guia.
  6. Salvar - Salve suas alterações
  7. Apagar - Excluir a imagem
  8. Substitua a imagem soltando uma nova imagem na própria miniatura.

O tamanho de imagem ideal para imagens de editor de texto de postagem de blog é 1500px de largura x qualquer altura. Este é o tamanho preferido para todos os layouts de blog. Os formatos de arquivo de imagem de site suportados são JPG, JPEG, PNG e GIF. Se você enviar imagens de tamanho maior, nós downsize para 1500 pixels de largura. 

6. Vídeo – Adicione um vídeo

Você pode adicionar seus vídeos do YouTube/Vimeo aqui. Clicar neste botão abrirá uma pequena janela modal onde você pode inserir o URL do vídeo do Youtube/Vimeo ou o código de incorporação.

Dica: Você também pode colocar diretamente o URL do YouTube no editor de texto. O sistema puxaria automaticamente a captura de tela do vídeo.  

7. Tabela – Adicionar uma tabela

Clique no ícone da tabela (7) para adicionar uma tabela de número N de linhas. Você pode estruturar seu conteúdo em linhas e colunas.

 

8. Link – Adicione um link ao seu texto

O Editor permite que você insira um link para qualquer texto. Você pode conectar as páginas do seu site existente ou qualquer outro site/blog/PDFs etc.

Destacar o texto e clicar neste botão abrirá uma pequena janela modal onde você poderá inserir a URL de destino, escolher se deseja ou não abrir em uma nova janela ou optar por um link para outra página em seu próprio site. Em HTML, a tag utilizada é Link Text

Atenção :

  • Para criar um link para um site externo que está fora do seu site Pixpa, digite http://seguido do endereço da web, por exemplo http://www.example.com.
  • Para vincular a uma galeria ou categoria de loja ou página em seu site, insira o slug de URL, por exemplo /gallery
  • Para criar um link que abre um cliente de desktop de e-mail, digite mailto: seguido do endereço de e-mail, por exemplo mailto:example@example.com.
  • Para criar um link que faz uma chamada telefônica, digite tel:, seguido do número de telefone com o código do país, por exemplo tel:+0-123-456-7890
  • Para criar um link que abra o Whatsapp, digite https://wa.me/<number> onde o <number> é um número de telefone completo em formato internacional. Omita quaisquer zeros, colchetes ou traços ao adicionar o número de telefone no formato internacional. Por exemplo: usar https://wa.me/15551234567 em vez disso https://wa.me/+001-(555)1234567. Saiba mais.
  • Para vincular ao seu PDF ou outro arquivo carregado na seção de arquivos, insira o link copiado aqui. Saiba mais.

9. Cor do texto – Altere a cor do texto

Por padrão, o sistema aplicará a cor da fonte especificada no seção de design. No entanto, você pode substituir a cor global com esta ferramenta. Selecione o texto e clique no ícone de cor, uma paleta padrão de cores aparecerá para você escolher.

Observação: Você pode especificar qualquer outra cor personalizada que não esteja disponível na paleta de cores na visualização do código HTML. Role para baixo até o ponto 12 para saber mais.

10. Clipes – Adicionar botões CTA

O editor também permite que você adicione botões CTA - quadrados ou arredondados para vincular qualquer página/galeria/site/pdf etc. Você pode personalizar seu tamanho e cor na visualização do código HTML. Role para baixo até o ponto 12 para saber mais.

Clicar neste ícone abrirá uma pequena janela modal onde você pode escolher o botão CTA.

11. Widget – Adicione um código personalizado

O Editor também permite que você adicione qualquer código personalizado, por exemplo, código de incorporação do Google Map, código de incorporação do Soundcloud, código de incorporação do Tweet, etc. Essencialmente, qualquer código de incorporação pode ser adicionado no editor com a ajuda do ícone do widget.

Clicar neste ícone abrirá uma pequena janela modal onde você pode colar seu código de incorporação.

12. Linha – Adicione uma linha

O Editor permite adicionar uma linha horizontal.

Clicar neste ícone adicionará uma linha onde o cursor é colocado.

13. Modo de tela cheia

O Editor permite alternar para o modo de tela cheia. Seria muito útil se você estiver organizando sua longa postagem no blog ou escrevendo um longo artigo.

14. Visualização do código HTML

A janela do editor pode funcionar como um Editor Visual (WYSIWYG) ou como um editor de HTML.

No entanto, você pode alternar para o editor de HTML clicando nele. Você pode alterar qualquer coisa na visualização do código, se souber como fazê-lo, ou também pode enviar um ping para a equipe de suporte do Pixpa, se precisar de ajuda.

Dica: Com a ajuda da visualização de código HTML, você pode adicionar qualquer tipo de código de incorporação em sua postagem no blog.  

Tagged:

Não consegue encontrar o que procura?

Entre em contato com um especialista da Pixpa.

Contate-nos