Usando o editor de Texto e Imagem, é possível ilustrar seu conteúdo de texto com imagens, criando páginas de apresentação e artigos visualmente atraentes.
Você tem algumas opções para adicionar uma imagem ao seu site:
- Como um elemento em linha por meio do elemento Texto, da categoria Texto e Imagens
- Por meio do elemento Imagem e Texto, onde imagens adicionais podem ser adicionadas como elementos em linha
- Como um único elemento de imagem da categoria Texto e Imagens
É importante observar que, se você adicionar uma imagem por meio do elemento Imagem, conforme o exemplo acima, não poderá ter elementos de conteúdo adicionais ao lado dela, como texto ou vídeo. Esse não é o caso das outras duas alternativas.
Há algumas opções para carregar as imagens desejadas:
- Arraste e solte imagens de pastas locais ou de outras páginas da Web no painel de propriedades.
- Procure imagens dos arquivos locais em seu computador clicando na área de adição de imagens.
- Adicione a partir do URL de uma imagem publicada em outro site. Basta copiar o endereço da imagem, colar no campo da URL e clicar em Adicionar Imagem. (Imagens com um sustenido "#" ou um ponto de interrogação "?" em seu nome só podem ser carregadas por meio de Arrastar e Soltar ou URL)
Outra alternativa seria aproveitar a guia Biblioteca de imagens e escolher entre uma variedade de imagens Stock.
Depois de carregar uma imagem, ela será automaticamente ajustada ao tamanho padrão. Escolha entre 3 tamanhos de imagem predefinidos: pequeno, médio, grande e real ou defina o seu próprio tamanho de imagem (tamanho personalizado). Mesmo que uma imagem possa ser redimensionada, o sistema mantém a imagem original, assim pode ser ajustada mais tarde. Todas as imagens redimensionadas irão aparecer com melhor detalhe em uma tela de retina de alta resolução.
Ao clicar em uma imagem, um painel de edição será aberto à direita com opções de personalização, definição de tamanho, borda, estilos e efeitos de moldura.
É possível alterar a imagem selecionada a qualquer momento ao clicar no botão Alterar. Escolha Editar e a imagem irá abrir um editor externo, onde é possível aplicar edições básicas de imagem, como cortar, inverter, girar, redimensionar e efeitos especiais limitados.
As opções Padrão permitirão ajustar as Dimensões da Imagem personalizadas ao especificar a largura e a altura desejadas. Ao alterar o tamanho, é recomendado clicar no ícone de cadeado para restringir as proporções da imagem e evitar distorção, por ex.: ao alterar a largura, a altura será ajustada proporcionalmente para garantir que a relação e a perspectiva continuem relativas à da imagem original. Para voltar ao tamanho original da imagem, clique no link Redefinir.
Alterar a largura e o tamanho de uma imagem no editor apenas irá ajustá-la às novas dimensões visualmente quando o navegador carregar a página, mas o arquivo mantém seu tamanho original. Para otimizar imagens maiores para um carregamento mais rápido, recomenda-se redimensionar as imagens em um programa externo de edição de imagens antes de carregar o arquivo no editor de Texto e Imagem.
O campo Mouse-over caption permite especificar algum texto de descrição relacionado à imagem que irá aparecer quando um usuário colocar o cursor sobre a imagem. Os textos explicativos também têm uma função na otimização adequada do mecanismo de pesquisa do seu site. Portanto, é recomendável adicioná-los às principais imagens das suas páginas.
Para modificar ainda mais a imagem, você pode aplicar um Efeito da Imagem, que ficará visível depois que a alteração for salva, ao clicar fora do elemento editado.
Definir um alinhamento de imagem e adicionar um link sobre a imagem são algumas das outras opções que você tem à sua disposição. Ao selecionar o ícone para adicionar um link, o seguinte submenu será exibido na parte inferior do menu à direita.
Ajuste o espaçamento em torno da imagem em relação ao conteúdo adicional no elemento especificando o preenchimento superior, inferior, esquerdo e direito em pixels.
Você pode adicionar uma borda às suas imagens especificando a largura da borda da imagem em pixels e selecionando a cor da borda desejada. Clicar no ícone Cor da Borda abrirá uma caixa de ferramentas de cores na qual você poderá aplicar ou remover a cor da borda.
As imagens com recurso mouse-over acrescentam o elemento de interatividade a um site e também podem indicar que algo acontecerá se a imagem for clicada. Isso pode ser útil nos casos em que o link foi adicionado sobre a imagem.
Crie uma imagem com "mouse-over" com efeitos de transição ao carregar um segundo arquivo de imagem na opção de Imagem com Mouse-Over. Quando a imagem com Mouse-Over tiver sido carregada, é possível selecionar a partir da lista de Transições a serem usadas entre as duas imagens.
À primeira vista, os efeitos Fade In e Dissolve parecem muito semelhantes, mas há uma diferença significativa quando são aplicados a imagens que têm partes transparentes. Com Fade-in, a imagem normal continua, enquanto que com o "mouse-over" a imagem desbota na parte superior e as duas são combinadas. Com With Dissolve, a imagem normal desaparece enquanto a imagem com mouse-over desbota na parte superior.
Dependendo do tamanho da imagem selecionada, os controles permitem ajustar a imagem no Editor de Texto e Imagem. É possível cortar facilmente uma imagem e aproximar uma área específica sem usar outra ferramenta. O resultado ficará disponível imediatamente para visualização no contexto da página. Este recurso também se aplica às imagens com mouse-over. O recurso de cortar e aproximar a imagem está disponível quando a Opção Avançada está habilitada e a imagem fonte precisa ser maior que a visualizada.
As imagens maiores que o tamanho exibido irão mostrar uma barra de deslizamento de zoom ao serem clicadas, permitindo aproximar ou afastar, e arrastar e posicionar a imagem dentro das dimensões especificadas. Isso facilita o foco em uma área específica, conforme exibido no exemplo abaixo. As imagens com uma variação do "mouse-over" irão exibir um ícone de mudança no canto superior direito, quando selecionado. Clicar no ícone irá habilitar as opções de edição completa para a imagem com mouse-over.