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.
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.