Você pode personalizar o visual do seu site como editar as imagens já adicionadas, seja para trocar, redimensionar, ajustar a posição ou aplicar efeitos visuais de forma rápida.
Abaixo, clique na plataforma que utilizou para criar o seu site e confira como fazer:
Novo Criador de Sites com IA
1No Editor do Criador de Sites com IA, clique na imagem que deseja editar
2Na barra que aparece abaixo da imagem selecione a opção de edição e confira como fazer:
- Trocar a imagem
- Ajustar o foco da imagem
- Filtros
- Adicionar máscara
- Ajustes de destaque
- Adicionar link
- Alinhar
- Alterar o tamanho
- Ajustar estilo
- Adicionar efeitos
- Duplicar
- Excluir
Ajustar o foco da imagem
1Na barra “Ajustes da imagem”, clique no ícone de imagem
2Na seção “Imagem” mostra a imagem atual, sobre ela tem:
- Pontinho azul no centro - Para ajustar o foco da imagem, movimente ele - Principalmente útil para manter o ponto principal visível em diferentes tamanhos de tela.
- Personalizado - Escolha outros modos de exibição da imagem
Filtros
1Na barra “Ajustes da imagem”, clique no ícone de imagem
2Na parte superior, clique em Filtros
3Em seguida, clique no efeito que deseja:
- A) ícone de Matiz (Tonalidade de cor) - Serve para mudar a cor geral da imagem. Movendo para os lados, você pode deixar a imagem com tons diferentes, como azulados, esverdeados ou avermelhados.
- B) Ícone de gota (Saturação) - Controla a intensidade das cores. Se você diminuir, as cores ficam mais fracas, quase preto e branco. Se aumentar, as cores ficam mais vivas.
- C) Ícone de sol (Brilho) - Ajusta o quão clara ou escura a imagem fica - Use para clarear imagens escuras ou escurecer imagens muito claras.
- D) Ícone de círculo dividido (Contraste) - Aumentar o contraste dá mais destaque, diminuir deixa a imagem mais "suave".
Adicionar Máscara
Para definir o molde da imagem, que pode ser quadrado, retangular, circular, entre outros:
1Na barra “Ajustes da imagem”, clique no ícone de imagem
2Na parte superior, clique em Máscara
3Em seguida, em “Forma” clique no efeito que deseja
4Em “Tamanho” controla se a foto cobre todo o espaço ou mostra inteira, escolha entre as opções:
- Em forma: A foto se ajusta sem cortes
- Preencher: Preenche todo o espaço (pode cortar partes)
- Personalizar: escolha como deseja
5Em “Posição” defina qual parte da imagem aparece - útil se estiver cortada
Ajustes de destaque
Para alterar as cores e aspecto da imagem:
1Na barra “Ajustes da imagem”, clique no ícone de quadrado
2Em seguida, clique no efeito que deseja:
-
A) Sobreposição (Fundo Extra) - para uma camada de cor por cima da sua imagem, escolha:
- Sólido - para uma cor única, escolha a cor que deseja - Por exemplo: preto transparente
- Gradiente - para um efeito de cores misturadas
- Se não desejar clique em Nenhum
- B) Contorno (Borda) - Se deseja criar uma borda ao redor da sua imagem, selecione espessura e cor (o padrão é "Nenhum")
- C) Sombra - Se deseja adicionar profundidade, escolha a cor que deseja e ajuste a direção e intensidade
Adicionar link
Para adicionar link sobre a imagem:
1Na barra “Ajustes da imagem”, clique no ícone de link
2Em seguida, clique no tipo de link que deseja:
-
A) Página - Link para outra página do seu site:
-
Tipo: Escolha as opções para vincular conteúdo no seu site
- None - nenhum
- Pages - Link para outras páginas do seu site - por exemplo: Página "Sobre Nós"
- Posts - Link para artigos do blog (se você tiver um)
- Stories - Link para conteúdo em formato de stories, como no Instagram
- Categories - Link para categorias específicas - por exemplo: Todos os posts sobre "Dicas"
- Abrir em uma nova guia: Ativar essa opção (ícone azul) - Se o botão estiver desativado (cinza), a imagem não abrirá em outra guia
-
Tipo: Escolha as opções para vincular conteúdo no seu site
-
B) URL - Link para outra página do seu site:
- Link para: Adicione o link externo - Por exemplo: https://pedidos.com
- Abrir em uma nova guia: Ativar essa opção (ícone azul) - Se o botão estiver desativado (cinza), a imagem não abrirá em outra guia
- Torná-lo NoFollow: para SEO, avisa ao Google para não seguir esse link
- C) Popup - Abre uma janela flutuante. Ideal se deseja adicionar na imagem formulários de contato, promoções especiais e avisos importantes
Se deseja adicionar em “popup” clique em + e em seguida escolha um modelo ou crie seu próprio
Dica: Use popups com moderação.
- D) Arquivo - Link para baixar um PDF ou documento, se deseja adicionar, clique em + e escolha o arquivo
Alinhar
Define a posição da imagem em relação ao espaço do modelo:
1Na barra “Ajustes da imagem”, clique no ícone de alinhar:
- A) Alinhar à esquerda - a imagem encosta na margem esquerda
- B) Alinhar à direita - a imagem encosta na margem direita
Alterar o tamanho
Para ajustar o tamanho das imagens em altura e Largura:
1Na barra “Ajustes da imagem”, clique no ícone de engrenagem
2Em seguida escolha a opção:
- A) Largura: Define o tamanho horizontal da imagem - Ajuste como deseja
- B) Altura: Controla o tamanho vertical da imagem - Ajuste como deseja
Ajustar Estilo
Personalize o estilo das imagens do seu site, como girar, preenchimento de margem e opções mais avançadas, confira abaixo como fazer:
1Na barra “Ajustes da imagem”, clique no ícone de engrenagem
2Em seguida, clique em Estilo
3No painel “Estilo”, é apresentado 3 opções:
-
A) Básico - opções rápidas de ajuste fácil
- Mostrar na área de trabalho - Controla se o elemento aparece (em azul) ou é ocultado (cinza)
- Preenchimento - Espaço dentro do elemento
- Margem - Espaço fora do elemento (distância até outros itens) - Ajuste como deseja para Esquerda, Superior, Direita, inferior
- Canto - Arredonda as bordas
- Modo de mesclagem - Como o elemento se mistura com o fundo - Caso não deseje mudar deixe em "Normal"
- Posição - Fixa o elemento na tela ao rolar
-
B) Avançado - opções extras para quem quer ajustes mais precisos no design - Esta seção é opcional e pode ser deixada como padrão, caso não tenha conhecimento em CSS:
- Z-index (Camadas): Controla qual elemento fica na frente/atrás quando há sobreposição - Por exemplo se deseja que a imagem fique acima de outro elemento do fundo, deixe um número maior - Por exemplo 100
- ID e classe CSS Nomes para personalizar com código - Não altere se não souber
- Atributos Personalizados: Configurações extras em formato chave:valor
- CSS personalizados: Espaço para adicionar códigos de estilo avançados
- Transição: Suaviza mudanças - Por exemplo: 50 = meio segundo de animação
- Título Alternativo: Texto que aparece quando o mouse fica sobre o elemento
-
C) Transformar - girar, inclinar e ajustar imagens
- Girar: Roda o elemento no sentido horário ou anti-horário - Por exemplo: 90° vira o elemento de lado
- Deslocamento: Move o elemento para os lados ou verticalmente
- Inclinação: Cria um efeito de “perspectiva” - Valores positivos inclinam para direita e negativos para a esquerda
- Escalada: Aumente ou diminua o tamanho
- Virar: Crie um efeito de espelho
Adicionar efeitos
Para criar movimentos e transições nas imagens do site:
1Na barra “Ajustes da imagem”, clique no ícone de engrenagem
2Em seguida, clique em Efeitos
3Escolha o tipo de efeito no menu superior:
- Entrada - Animação da imagem (Nenhum, Salto, Esmaecer, Girar, Deslizar, Zoom, Atenção) - Por exemplo: Uma imagem que "escorrega" ao carregar a página
- Hover - Efeito ao passar o mouse sobre o elemento (Nenhum, Balançar, Pulso, Zumbido, Inclinação, Escala, Mover, Girar) - Por exemplo: imagem que muda de cor quando o cursor está em cima
- Rolagem - Animação que ocorre conforme você desce a página (Vertical, Horizontal, Transparente, Desfoque, Girar, Escala, MouseTrack, Inclinação 3D - Por exemplo: Imagem que gira ao chegar na altura certa
4Agora, selecione o efeito desejado - Por exemplo: Salto
5Ajuste a duração (se necessário)
Duplicar
1Na barra “Ajustes da imagem”, clique no ícone de duplicar
2Em seguida, arraste a cópia para a parte do site onde deseja posicioná-la
Excluir
Para remover a imagem:
1No Editor do Criador de Sites com IA, clique na Imagem - Para selecionar ela
2Na barra “Ajustes da imagem”, clique no ícone de lixeira
Criador de Sites Rápido (Descontinuado)
Confira abaixo como editar e personalizar imagens no site:
- Alterar formato da imagem
- Aumentar ou diminuir o zoom da imagem
- Anexar link na imagem
- Alterar imagem
Alterar formato da imagem
1Passe o mouse sobre imagem que deseja editar e na barra de ações que aparecer, clique no ícone de engrenagem
2Em seguida, escolha uma das opções de formato e defina se deseja deixar os cantos arredondados, com borda ou com sombra
Aumentar ou diminuir o zoom da imagem
1Passe o mouse sobre imagem que deseja aproximar e na barra de ações que aparecer, clique no ícone de imagem pontilhado
2Em seguida, na ferramenta de zoom, defina o nível de aproximação - você também pode arrastar a imagem para alterar a posição dentro da seleção definida
Anexar link na imagem
1Passe o mouse sobre imagem que deseja anexar o link e na barra de ações que aparecer, clique no ícone de link
2Em seguida, escolha uma das opções para adicionar um link – quando o usuário do seu site clicar sobre a imagem, será direcionado para opção definida