Editor X: editar e personalizar imagens
8 min de leitura
O Editor X está em transição para o Wix Studio, nossa nova plataforma para agências e freelancers.Saiba mais sobre o Wix Studio
Depois de adicionar imagens ao seu site, você pode usar uma ampla variedade de opções para personalizá-las e editá-las. Ajuste os tamanhos das imagens, corte-as e defina seus pontos focais para que as áreas relevantes sejam sempre exibidas, independentemente do tamanho da tela.
Você também pode alterar os comportamentos de rolagem, editar com o Estúdio Fotográfico e adicionar marcas d'água para proteção de direitos autorais.
Neste artigo, saiba como:
- Ajustar o tamanho da sua imagem
- Esticar sua imagem para preencher uma seção, contêiner ou célula da grade
- Escolher o modo de ajuste da sua imagem
- Recortar uma imagem
- Definir o ponto focal
- Escolher o comportamento de rolagem
- Editar a imagem no Estúdio Fotográfico
- Adicionar marca d'água para proteção de direitos autorais
Ajustar o tamanho da imagem
Você pode ajustar o tamanho da sua imagem com a ferramenta Inspetor. Escolha entre medidas fixas ou responsivas para se adequar ao seu design. As imagens fixas permanecem as mesmas em cada janela de visualização e as imagens responsivas se ajustam a diferentes breakpoints.
Para ajustar o tamanho da imagem:
- Clique na imagem no seu Editor.
- Clique no ícone do painel Inspetor
no canto superior direito. - Escolha uma opção em Tamanho:
- Fixo: defina a largura e a altura do seu elemento em px.
- Responsivo: use unidades de medida relativas (% ou Auto) para definir a largura e a altura do seu elemento.
Dica: marque a caixa de seleção Dimensionar proporcionalmente para ajustar automaticamente a altura de acordo com a largura.
Observação:
Não é possível ajustar o tamanho de uma imagem que está esticada para uma célula da grade, contêiner ou seção. A altura e a largura de uma imagem esticada são definidas como automáticas, portanto, ela é redimensionada automaticamente, de acordo com as dimensões do elemento pai.
Esticar sua imagem para preencher uma seção, contêiner ou célula da grade
Usando a ferramenta de esticar, você pode definir sua imagem para preencher uma seção, contêiner ou célula da grade em seu site. Esticar sua imagem significa que ela é redimensionada automaticamente para as dimensões do elemento pai, então você não precisa se preocupar em ajustar o tamanho manualmente.
Para adicionar e esticar uma imagem:
- Clique em Elementos na parte superior da barra do Editor.
- Clique em Mídia.
- Arraste uma imagem para sua seção.
- Clique no ícone Esticar
no canto superior direito da imagem para preencher todo o espaço.
Dica:
Ao esticar uma imagem em uma seção, a cor do background carrega primeiro e, em seguida, a imagem. Na maioria dos casos, a imagem carrega rápido o suficiente para que você não veja a cor, mas alguns visitantes podem ver um flash de cor. Portanto, é importante definir a cor do background da seção, mesmo que não seja sempre visível.
Dica:
Você pode definir uma imagem como background da seção no painel Inspetor, adicionando sobreposições de cor e/ou padrão.
Escolher o modo de ajuste da sua imagem
No Editor X, cada imagem tem uma caixa delimitadora que funciona como um contêiner responsivo. Essas são as bordas azuis que você vê ao redor da imagem. Você pode escolher como sua imagem é exibida dentro da caixa delimitadora (por exemplo: Preencher, Ajustar).
Para escolher o modo de ajuste da sua imagem:
- Clique na imagem no seu Editor.
- Clique no ícone Configurações
.
- Selecione uma opção no dropdown Modo de exibição:
Preencher caixa delimitadora
Ajustar à caixa delimitadora
Manter proporção da imagem
Trabalhando com breakpoints:
O modo de exibição escolhido para sua imagem se aplica a todos os breakpoints.
Recortar sua imagem
Com o Editor X, você pode escolher como uma imagem é cortada para cada breakpoint. Isso permite que você personalize o site para funcionar com as suas especificações, além de fornecer uma experiência ideal para os visitantes em todos os dispositivos.
Para recortar uma imagem:
- Selecione o breakpoint no qual você deseja personalizar a imagem.
- Clique na imagem no seu Editor.
- Clique no ícone Recortar
.
- Personalize o corte de acordo com suas necessidades.
- Clique em Aplicar.
Definir o ponto focal da imagem
Você pode escolher o ponto focal da imagem para cada breakpoint. Isso permite que você selecione qual parte da imagem é visível quando ela é redimensionada para diferentes breakpoints em diferentes tamanhos de tela.
Para definir o ponto focal da imagem:
- Selecione o breakpoint no qual você deseja personalizar a imagem.
- Clique na imagem no seu Editor.
- Clique no ícone do Ponto focal
.
- Selecione a área da imagem que você deseja que permaneça visível quando ela for redimensionada.
Dica:
Sempre que um rosto dominante é detectado, nós o definimos automaticamente como o ponto focal da sua imagem, no entanto, você pode alterar ou ajustar o ponto focal conforme necessário.
Escolher o comportamento de rolagem
Selecione como sua imagem se comporta quando os visitantes rolam pelo seu site. Você pode escolher um efeito de rolagem (Paralaxe ou Mostrar) para que a imagem seja mais dinâmica e atraente, ou deixar esse dropdown em branco para uma aparência mais direta e minimalista.
Para escolher um efeito de rolagem para sua imagem:
- Clique na imagem no seu Editor.
- Clique no ícone Configurações
- Clique no menu dropdown Rolagem e escolha uma opção:
- Nenhuma: não há efeito de rolagem na sua imagem.
- Paralaxe: a imagem se move em uma velocidade diferente dos outros elementos, criando um efeito 3D.
- Mostrar: a imagem é mostrada à medida que você rola para baixo no seu site.
Imagem ampliada em paralaxe?
Ao escolher o comportamento de rolagem Paralaxe, é provável que a imagem apareça ampliada dentro do Editor. Essa alteração não reflete o que os visitantes veem no seu site online. Para ver o efeito em ação, visualize seu site.
Dica:
Mantenha sua imagem visível enquanto os visitantes rolam a página para cima e para baixo definindo sua posição como Fixa ou Sticky.
Editar uma imagem com o Estúdio Fotográfico Wix
Use o Estúdio Fotográfico Wix para criar belas imagens sem sair do Editor X. O Estúdio Fotográfico permite que você personalize imagens que você já fez upload e salva a versão recém-editada no seu Gerenciador de Mídia.
Há uma variedade de opções de edição disponíveis, como filtros, rotação e sobreposições, para que você possa criar uma imagem impressionante para realçar o seu site e despertar o interesse dos seus visitantes.
Para editar uma imagem:
- Clique na imagem no seu Editor.
- Clique no ícone Configurações
- Clique em Ajustar.
- (No Estúdio Fotográfico) Edite a imagem usando as opções disponíveis.
- Clique em Salvar.
Está no Gerenciador de Mídia?
Você também pode editar imagens diretamente do Gerenciador de Mídia clicando em Recortar e editar sob a miniatura da imagem.
Observação:
O Estúdio Fotográfico Wix faz alterações na imagem de origem, enquanto as alterações feitas na tela (no design ou recorte da imagem) fazem alterações por breakpoint.
Adicionar uma marca d'água para proteção de direitos autorais
Proteja suas imagens ao adicionar um texto de marca d'água usando o Estúdio Fotográfico. O texto pode ser projetado e personalizado para combinar com a sua marca e não pode ser removido do arquivo se o download for feito.
Para adicionar uma marca d'água a uma imagem:
- Clique na imagem no seu Editor.
- Clique no ícone Configurações
- Clique em Ajustar.
- (No Estúdio Fotográfico) Clique em Texto em Adicionar um elemento.
- Navegue pelos estilos de texto e clique para adicionar um à sua imagem.
- Digite a mensagem da sua marca d'água.
- (Opcional) Clique em Design para personalizar o texto.
- Clique em Salvar.
Esse artigo foi útil?
|