Crie uma bela experiência visual em seu site mobile ao refinar as imagens transportadas da sua versão para desktop e personalize as que você adicionar usando o editor mobile.
A personalização de imagens transportadas do desktop é limitada - você pode ajustar suas configurações de imagem, recortá-la e incluir animações divertidas. Com imagens adicionadas a partir do editor mobile, você tem controle total sobre a personalização - adicione filtros e quadros, personalize o que acontece quando uma imagem é clicada e até mesmo adicione links.
Saiba mais sobre imagens:
Imagens transportadas da sua versão desktop
As imagens que você adiciona à versão desktop do seu site são automaticamente transferidas para o seu site mobile. Você pode personalizar as configurações da imagem, recortá-la e adicionar uma animação para deixá-la diferente da versão desktop.
Para personalizar imagens transportadas do desktop:
- Clique na imagem no seu Editor mobile.
- Dependendo do que você deseja personalizar, siga as etapas relevantes:
Alterar as configurações da imagem
Personalize como seus visitantes interagem com suas imagens e o que acontece quando as imagens são redimensionadas em diferentes dispositivos móveis.
Para alterar suas configurações de imagem:
- Na visualização mobile, clique na imagem.
- Clique no ícone Configurações
. - Personalize o seguinte:
- Comportamento da imagem: decida como seus visitantes interagem com as imagens.
- Quando uma imagem é tocada:
- Não acontece nada: a imagem não é clicável, nada acontece quando ela é clicada.
- Abrir link: a imagem atua como um botão e pode ser vinculada a uma página, âncora em seu site, um URL externo e muito mais.
- Abre em modo expansão: a imagem é aberta em uma janela pop-up.
- Redimensionamento: decida o que acontece quando suas imagens são redimensionadas.
- Mantenha as proporções: a imagem e a forma permanecem nas proporções originais quando redimensionadas.
- Preenchimento automático: a imagem se ajusta automaticamente para preencher o espaço no dispositivo do visitante.
Apresente uma nova versão da sua imagem na visualização mobile ao cortar sua imagem manualmente ou usar um recorte usando formas.
Para recortar uma imagem manualmente:
- Na visualização mobile, clique na imagem.
- Clique no ícone Recortar
. - Arraste o slider para ampliar ou reduzir a imagem.
- Mova a imagem para exibir a parte desejada.
- Clique em Aplicar.
Para recortar uma imagem usando formas:
- Na visualização mobile, clique na imagem.
- Clique no ícone Recortar .
- Arraste o slider para ampliar ou reduzir a imagem.
- Clique no ícone Ajustar forma
e escolha uma forma. - Clique em Aplicar.
Adicionar uma animação de imagem
Adicione uma animação divertida à sua imagem para deixar seu site mais dinâmico.
Para adicionar uma animação:
- Na visualização mobile, clique na imagem.
- Clique no ícone Animação
. - Selecione a animação que deseja aplicar.
- Clique em Personalizar para ajustar sua animação.
Imagens adicionadas a partir do editor mobile
Escolha entre uma variedade de tipos de imagem para adicionar ao seu site, diretamente do editor mobile. As imagens adicionadas dentro do editor mobile são totalmente personalizáveis. Ajuste as configurações e o design da sua imagem, adicione filtros, recorte e até mesmo adicione animações.
Que tipos de imagens estão disponíveis?
- Meus uploads: faça upload de seus próprios arquivos de imagem para usar em seu site.
- Acervos de imagens: escolha entre centenas de fotos e ilustrações disponíveis no Wix, Shutterstock e Unsplash.
- Redes sociais: conecte as contas das suas redes sociais para exibir imagens de plataformas como Facebook e Instagram.
Para adicionar e personalizar imagens apenas para dispositivos móveis:
- Clique no ícone Adicionar ao Mobile
à esquerda. - Clique em Imagem.
- Selecione o tipo de imagem que você deseja adicionar.
- Clique na imagem que você deseja fazer upload e clique em Adicionar à página.
- Dependendo do que você deseja personalizar, siga as etapas relevantes:
Alterar as configurações da imagem
Decida o que acontece quando sua imagem é clicada, adicione uma tooltip e/ou alt text para ajudar o Google a ler sua imagem. Você também pode escolher o que acontece com suas imagens quando elas são redimensionadas.
Para definir o que acontece quando uma imagem é clicada:
- Clique na imagem.
- Clique no ícone Configurações .
- Clique no menu dropdown Ao clicar na imagem e selecione uma opção:
- Não acontece nada: nada acontece quando a imagem é clicada.
- Abrir link: a imagem atua como um botão e pode ser vinculada a uma página, posição ou âncora em seu site, um URL externo, um documento ou um endereço de email.
- Abre em modo expansão: a imagem abre em uma janela pop-up.
- Pode ser ampliada: o cursor se torna uma lupa quando um visitante passa o mouse sobre a imagem. A imagem é ampliada quando clicada.
Para adicionar alt text à sua imagem:
- Clique na imagem.
- Clique no ícone Configurações .
- Insira o texto na seção O que há na imagem? Diga ao Google.
Para adicionar uma tooltip a uma imagem:
- Clique na imagem.
- Clique no ícone Configurações .
- Insira o texto no campo de texto Tooltip da imagem.
Para redimensionar suas imagens:
- Clique na imagem.
- Clique no ícone Configurações .
- Clique na alavanca relevante para escolher o que acontece com suas imagens quando elas são redimensionadas.
- Mantenha proporções: a imagem e a forma permanecem nas proporções originais quando redimensionadas.
- Preenchimento automático: a imagem se ajusta automaticamente para preencher o espaço.
Observação: o preenchimento automático só pode ser ativado depois que Mantenha proporções estiver ativada.
Adicionar um design de moldura de imagem
Altere o design da sua imagem e personalize a aparência da moldura da imagem no seu site mobile.
Para personalizar o design da moldura da imagem:
- Clique na imagem.
- Clique no ícone Design
. - Selecione um design predefinido ou clique em Personalizar design.
- Personalize a imagem:
- Opacidade e cor: selecione as cores e a opacidade da imagem.
- Borda: faça o design das bordas da sua imagem.
- Cantos: arredonde os cantos da sua imagem.
- Sombra: crie uma sombra para sua imagem.
Apresente uma nova versão da sua imagem na visualização mobile ao cortar sua imagem manualmente ou usar um recorte usando formas.
Para recortar uma imagem:
- Clique na imagem.
- Clique no ícone Recortar .
- Arraste o slider para ampliar ou reduzir a imagem.
- Mova a imagem para exibir a parte desejada.
- Clique em Aplicar.
Para recortar uma imagem usando formas:
- Na visualização mobile, clique na imagem.
- Clique no ícone Recortar .
- Arraste o slider para ampliar ou reduzir a imagem.
- Clique no ícone Ajustar forma
e escolha uma forma. - Clique em Aplicar.
Adicionar filtros e animações
Transforme sua imagem aplicando um de nossos filtros e adicione uma animação legal para animar seu site mobile.
Para adicionar um filtro:
- Clique na imagem.
- Clique no ícone Filtros
. - Clique em qualquer filtro para adicioná-lo à sua imagem.
Para adicionar uma animação:
- Na visualização mobile, clique na imagem.
- Clique no ícone Animação .
- Selecione a animação que deseja aplicar.
- Clique em Personalizar para ajustar sua animação.
Adicionar um link para minha imagem
Adicione links às suas imagens para incentivar a interação do visitante no seu site.
Para adicionar um link a uma imagem:
- Clique no ícone Link
. - Selecione o tipo de link e insira os detalhes.
- Clique em OK.
Saiba mais sobre os tipos de links que você pode adicionar a uma imagem.
quando você clica neles.
