Olá pessoal neste artigo vamos mostrar todas as funções do editor de texto que estão disponíveis na sua loja. Este editor está presente em várias telas da loja, seja no cadastro de produto, edição de páginas, áreas personalizadas, blog, e etc… você vai ver ele com esta aparência abaixo:

E neste artigo vamos detalhar cada função e dar dicas para melhorar o visual de descrição de produto usar melhor as áreas personalizadas ou conteúdos para criar melhor design para sua loja, vamos lá!

IDIOMAS

Antes de começar, se você tem uma loja com outro idioma, em geral terá abas para cada idioma que estiver ativado em sua loja, por exemplo ao editar uma página institucional teremos abas como a imagem abaixo

Desta forma teremos na mesma página, como o exemplo acima, duas áreas para editar uma para cada idioma, fique atento se sua loja possui dois idiomas ok? Para cada tela que temos um editor como este terá sempre uma aba para cada uma.

DICA DE EDIÇÃO BÁSICA

O editor de texto da loja, simula no navegador um editor avançado como o Word da Microsoft, logo ele possui alguns atalhos e comandos básicos de lá, um deles muito importante é a geração de parágrafos e quebras de linhas.

Quando estamos escrevendo com ele, e pressionamos a tecla ENTER ele vai gerar um novo parágrafo, mas se pressionamos SHIFT+ENTER geramos uma nova linha, mais próxima do texto, veja o exemplo abaixo.

Ou seja, fique atento a este detalhe, ele vai ser muito importante para que possa criar bons textos legíveis para sua descrição.

Alguns atalhos comuns também estão disponíveis, como negrito CTRL+B ou Command + B para negrito, CTRL+I ou Command+I para itálico.

LISTA DE ITENS DO EDITOR

Para facilitar vamos enumerar cada recurso do editor e detalhar ele, e no final vamos dar alguns exemplos práticos de como podemos combinar eles e melhorar o layout dos conteúdos, vamos lá

1 – CÓDIGO FONTE

Este item serve para ver de forma avançada os códigos de HTML que são gerados a partir dos textos e modificações que vamos fazendo ali, por exemplo se eu escrever um texto e negritar parte dele e apertar este botão teremos algo como assim:

Note que ao habilitar ele, as demais funções ficam desativadas, é usado mais para inserção de códigos de terceiros ou algum ajuste avançado de HTML + CSS.

2 – AMPLIAR

Este recurso serve para ampliar o editor no navegador, recomendado para quando temos uma boa quantidade de texto e edição da tela.

3 – ALINHAMENTO DE PARÁGRAFO

Este item serve para que possa alinhar um parágrafo, seja ele dentro de uma tabela, caixa ou apenas um texto simples, os comandos são texto a Esquerda, Centralizado, Direita ou Justificado. Note que se o mouse estiver sobre o texto, ele vai ficar sinalizado qual formatação ele terá.

4 – FORMATAÇÃO DE TEXTO

Aqui temos na sequência: Negrito, Itálico, Sublinhado e Texto “Cortado”

5- TEXTO SUB OU SOB ESCRITO

Usado para colocar o texto menor abaixo ou acima, usado para medidas, potência, ou dados técnicos específicos.

6 – LISTA NUMÉRICA OU PADRÃO

Este item vai criar uma lista seja ela numeral ou simples com “pontos”

7 – RECUO DE PARÁGRAFO E LISTAGENS

Este recurso serve para criar recuo tanto em parágrafos quanto a listas como mencionado acima. Indicado para criar uma “citação” em um texto grande. Veja o exemplo abaixo, usando o recuo, itálico, caractere especial e tamanho de fonte (vou falar mais abaixo deles), podemos ter uma combinação bem legal assim:

8 – CAIXA CONTEÚDO – DIV

Este recurso serve para criar uma caixa “invisível” em volta de elementos como parágrafos, tabelas, imagens, etc… ele é usada de forma avançada para colocar classes de CSS, Identificação única, estilo e indicação idiomática (para leitores de tela). Um exemplo de seu uso é criando conteúdo visível para mobile e desktop, neste artigo aqui temos um bom exemplo veja

Obs: Este recurso é melhor aproveitado usando o Mostrador de blocos de código, que explico logo abaixo.

9 – MOSTRADOR DE BLOCOS DE CÓDIGO

Este recurso, quando ativado, vai mostrar exatamente onde está cada item “invisível” que estaria por trás do código fonte daquele bloco de informação, muito útil para ver onde começa e termina um parágrafo ou DIV por exemplo.

10 – DESFAZER ou REFAZER

Comandos para voltar ou avançar um ou mais ações, também pode ser acessado pelo CTRL+Z, ou Command + Z e CTRL+Y ou Command + Y

11 – FONTE

Este recurso vai mudar a fonte do seu texto, porém só deixamos algumas fontes mais comuns em todos os computadores, fontes fora deste padrão podem não ser exibidas corretamente em outros computadores. Aconselhamos a não usar essas fontes, só se necessário, o layout da loja já tem um integração com o Google Fonts com uma variedade muito grande.

12 – TAMANHO DA FONTE

Este recurso vai trabalhar com o tamanho do texto que escrever no seu editor, você pode combinar tamanho, com FONTE e criar títulos, chamadas, citações e várias outras combinações, por exemplo a imagem abaixo

Aqui foi usado o negrito no título com tamanho 24 (fonte padrão), fonte Times New Roman, itálico tamanho 20 para a chamada e o texto fonte padrão

13 – COR DA FONTE E COR DE FUNDO DA FONTE

Neste recurso podemos colorir as fontes, tanto a cor da fonte em sim, quanto a cor de fundo, assim podemos trabalhar bem o destaque dela, veja o exemplo abaixo com o mesmo exemplo de texto anterior

Para usar o recurso é muito simples, basta selecionar o texto que deseja e usar as cores da ferramenta, caos não tenha a cor que deseja, no link “mais cores” você pode usar o espectro de cores ou colocar o código dela, ao clicar teremos uma tela como esta abaixo:

Se souber o código Hexadecimal da sua cor, basta colocar no campo acima do “limpar” e depois clicar OK.

14- LINKS

Este recurso é um dos mais importantes do editor, é aqui que vamos criar e colocar links para dentro ou fora da loja virtual, para começar, você pode criar link com texto e imagens, vamos começar com imagem, crie um texto selecione este texto e clique no primeiro ícone de “corrente”, vamos ter uma janela com 3 abas, a primeira temos o texto que selecionamos, no campo Exibir Texto, no campo Tipo de Link temos trê tipos, a URL que é o link comum que leva para fora ou dentro do site, nesta opção temos mais abaixo o protocolo que é usado para o navegador, não coloque nada se for usar uma URL completa ele sabe identificar qual, a URL em si, e se desejar abrir uma imagem pode usar o botão Localizar no servidor .

Dicas importante: Sempre usa o protocolo HTTPS para manter seus ite sempre com o selo de segurança ativo e verde.

Agora se mudarmos para o Tipo ncora nesta Página, ele vai vasculhar se no editor temos uma âncora, na próximo ferramenta, explico com mais detalhes sobre âncora e como criá-las, em geral são links que levam para um ponto específico da página. Neste caso, se tiver uma âncora ele vai listar aqui para você

E por fim se escolhermos a opção de E-mail teremos outra configuração que quando clicado, abre o leitor e e-mail do cliente (outlook por exemplo), já com o campo de destinatário, assunto e corpo de e-mail pré-preenchido, facilitando a comunicação.

Além dos tipos de links temos mais duas abas uma delas é de destino, que só funciona para URL e ncora, com esta aba podemos fazer com que o link abra na mesma janela do navegador, em outra janela, frame, etc…

Já na aba Avançado temos algumas configurações que podem ser útil para você, caso tenha um conhecimento mais avançado em HTML e CSS, mas de vias gerais o que mais poderá precisar é o ID que poderá servir de âncora ou para CSS avançado, Título para SEO, Classe de CSS (para estilos adicionais), Estilos para CSS in-line no link (código dentro do link) e a opção de “Forçar Download”, usado para que a pessoa possa baixar um PDF ou arquivos que esteja disponibilizando.

Comentei mais acima que podemos fazer link com imagem, vou falar disso logo mais a frente, vamos usar a ferramenta apropriada 😉

Dica: Para editar novamente um link, basta dar um duplo clique sobre ele que a caixa abre novamente com os parâmetros que configurou.

15 – ANCORA

Como citei acima, o link de uma página pode apontar para uma âncora, âncoras servem para marcar pontos chaves de uma página que quando passado junto com a URL faz com que ela “desça’ ou carregue naquele exato ponto.

Por exemplo, podemos colocar no rodapé da loja um link que leva para a âncora para abaixo do banner, para uma promoção ou cadastro de newsletter, assim a pessoa não precisa rolar até lá em cima. É muito útil quando estamos em uma página ou enviamos um link para que quando a pessoa abra o link ele cai no exato ponto que ela precisa, por exemplo um banner no meio da página inicial ou o link de download do manual de um produto na sua descrição.

Para criar, é muito simples, basta colocar o cursor na parte do texto que deseja, clicar no símbolo de “bandeira” e dar um nome, tente não usar caracteres especiais, sempre coloque um nome único na mesma página e salvar, ele vai ter uma marcação vermelha no editor mas não aparecerá no site.

16 – IMAGEM

Este também é um dos mais importantes itens do editor, é com ele que vamos colocar imagens e textos juntos na descrição de produto, em banners nas áreas personalizadas na página inicial da loja, criar postagens do blog com imagens e textos, e etc…

Ao clicar no recurso vamos ter uma tela com 3 abas e algumas opções, vamos explorar a primeira aba, a de Informações da Imagem. Aqui a primeira ação é clicar em “Localizar no Servidor” é aqui eu vamos puxar a imagem que está no editor de imagens, você pode neste campo de URL também colocar uma URL externa, mas cuidado tenha certeza qeu possa usar a imagem e coloque ela em HTTPS. assim garantimos a segurança da loja.

Logo abaixo temos o texto alternativo, que é bom para SEO, leitores de tela e em caso da imagem falhar, tem um texto do que se trata a imagem. Note também que temos um campo de pré-visualização logo abaixo na direita, e na esquerda temos a largura e altura, o cadeado fechado, mantém a imagem proporcional, se mudarmos os valores de largura e altura e do lado dele podemos “resetar” o tamanho original da imagem.

Abaixo podemos colocar uma borda na imagem, nos campos de HSpace e VSpace podemos controlar o espaço de borda na vertical e horizontal e no campo Alinhamento podemos colocar a imagem a esquerda ou direita do texto, todas essas opções podemos observar ao vivo no campo de visualização.

Agora na aba de Link, é onde podemos colocar link nesta imagem, temos o campo URL que pode ser de uma página interna ou externa da sua loja, ou podemos abrir uma outra imagem clicando em “localizar no servidor”, os campos de Destino segue os mesmos parâmetros da ferramenta de link.

E por fim na aba de Avançado, temos mais configurações como colocar um ID único da imagem, que pode ser usado com âncora, temos de importante o campo de Descrição da UTL que serve para o link, se usarmos na aba de link, Classe de CSS (para estilos adicionais), Estilos para CSS in-line no link (note que as dimensões, espaços e borda que colocamos estão aqui, para um ajuste mais avançado use este campo)

Dica: Para editar novamente uma imagem, basta dar um duplo clique sobre ele que a caixa abre novamente com os parâmetros que configurou.

17 – TABELAS

AS tabelas são poderosas ferramentas para te ajudar a montar um bom layout, use-as para criar colunas, linha de uma forma simples para montar banners, imagens uma do lado da outra e se não colocar tamanho nas colunas elas vão se “empilhar” no mobile ficando com uma aparência melhor (Obs: Mas lembre-se de sempre preparar conteúdo desktop e mobile separados, veja mais neste artigo aqui.

Para exemplificar uma forma de fazermos um layout bacana usando tabelas de uma forma avançada vamos criar tabela e fazer elas ficarem assim:

Um banner grande, dois pequenos no meio e um comprido na lateral usando as tabelas, antes de começar vamos pensar no Excell, imagine que temos uma tabela por cima deste desenho, temos algumas células, logo teremos o seguinte:

Vendo por este ângulo podemos criar uma tabela e mesclar algumas células para atingir o resultado que queremos, vamos a ferramenta

Ao abri teremos uma janela com duas abas, a primeira é a formatação da tabela, é onde vamos desenhar o GRID acima, logo vamos colocar então 3 linhas 3 colunas. em cabeçalho se usar este recurso como tabela, para exibir dados estes serão o cabeçalho os dados que colocamos no topo de uma coluna de planilha, não é nosso caso aqui, em em borda vamos colocar 0, pois quero que as “linhas” da borda sejam transparentes para que se tenha apenas as imagens.

Em Largura, como eu já tenho as imagens no tamanho correto, vou colocar a largura em 100% assim ela vai ocupar toda a extensão da tela e em altura não vou colocar nada, deixando as imagens definirem a altura. Em espaçamento vou colocar 0, isso define o espaço entre as células, e o margem interna, como o próprio nome diz, é o espaço interno da célula aqui vou colocar 10, para dar uma boa margem entre as imagens.
Em legenda e resumo, use apenas para Leitores de tela, coloque a descrição da tabela, campos opcionais

Em Avançado temos os mesmos campos de Id único, estilo e classe. Bom agora que criamos vamos ter a grande que desenhamos por cima dos banners

Agora basta mesclar as células, assim como fazemos no excel, mas da seguinte forma:

Para isso, selecione as células, clicar com o botão direito do mouse ir em Célula e depois em Mesclar Células.

Repetindo o mesmo processo para as células 3 e 6 teremos o seguinte resultado:

Agora como bônus, cada célula por padrão alinha a imagem no meio dela, para corrigir basta clicar com o botão direito do mouse em cima da célula (ou selecionar todas), ir em Célula e depois Propriedades da Célula, na janela que vai abrir temos as configurações isoladas da (ou das) célula que escolheu, como sugestão use o alinhamento vertical como superior, assim terá um alinhamento melhor dos banners que colocar ali

Agora é fácil vamos colocar as imagens em cada uma das células, usando o recurso de imagens que mencionamos acima ficando assim:

Lembre-se de criar as imagens já no tamanho correto e ao usar o recurso não use o tamanho fixo, deixe vazio assim a imagem vai adaptar automaticamente em telas menores ou maiores.

18 – LINHA

Este recurso vai gerar uma linha para separar textos.

19 – VÍDEO YOUTUBE

Este é um recurso poderoso para incorporar vídeos do youtube no texto, ao clicar irá abrir uma janela com algumas opções, primeiro podemos optar por colocar o vídeo de duas formas uma o código de incorporação que o próprio youtube gera para você e o segundo a URL completa, em qualquer um dos casos ele vai gerar o Iframe que roda o vídeo.

Temos algumas opções ao incorporar o vídeo, podemos definir largura e altura, mas se escolhermos que ele é responsivo ele vai ignorar estes valores e vai sempre deixar o vídeo com 100% de largura de onde ele tiver, dica aqui, use ele dentro de uma tabela, metade vídeo outra metade texto, assim no mobile um fica embaixo do outro.

Temos também a opção de mostrar apenas a imagem e um link para o vídeo, isso é bom para que a página fique mais leve e não traga peso de fora a ela. Mas se mesmo assim quer que seja reproduzido dentro do site temos a opção de reprodução automática, cuidado para não irritar o seu cliente.

E por fim a opção de iniciar em um determinado ponto do vídeo, ótimo para quem quer mostrar apenas uma parte do vídeo, mas isso não limita que o cliente possa voltar e ver do início o vídeo.

Dica: Use com cuidado, especialmente na página inicial do site. Qualquer recurso, seja vídeo, instagram, feeds que vem de sites externos pode prejudicar o carregamento da loja e na página inicial pode ser um problema e tanto que pode fazer com que caia nos ranks de pesquisas.

20 – CARACTERES ESPECIAIS

E por fim uma janela para caracteres especiais mais comuns e usados na web, como ordinais, setas, fontes com acentos especiais, etc… Para usar basta deixar o cursor do texto no ponto que deseja adicionar e clicar na janela, ao abrir escolha o caractere e clique sobre ele