Olá, Kangaroozinho, como vai? Se você tem um site WordPress, utiliza o Elementor, mas ainda não tem tanta familiaridade com a tela de criação/edição do plugin, neste artigo vamos te mostrar como trabalhar com imagens no Elementor, como dimensionar, posicionar, etc.
Se você está começando a usar o Elementor, ele é um plugin que te permite montar o seu site puxando elementos para a tela, sem a necessidade de usar códigos para a construção. E a principal ferramenta para essas construções são os contêineres, visto que eles basicamente estruturam o seu site de modo a ficar mais organizado e de melhor visualização.
Como trabalhar com imagens no Elementor
Certo, antes de seguir, nossa equipe já preparou outros 2 artigos onde mostramos Como instalar o Elementor e dando os primeiros passos no plugin, se você ainda não sabe como instalar ou começar a editar uma página com ele, esses dois artigos com certeza vão te ajudar. Se você já possui o plugin e sabe como acessar a página de edição, siga os passos abaixo para entender como manusear suas imagens:
- Para começar, adicionamos um contêiner principal com outros 3 contêineres dentro. No popup da estrutura você pode ter uma melhor ideia, nomeamos cada contêiner para fazer mais sentido.
- Com o contêiner principal selecionado, na aba Layout, desça até a opção Direção, e aponte para a direita, depois em espaçamento e altere para 0, além disso, na parte de “envolver”, marque a opção para Envolver. Isso é essencial para que os containers possam ficar lado a lado.
- Agora, selecione o contêiner que você vai adicionar as imagens, e ainda na parte de Layout, mude a “Largura” para a que você deseja. No meu caso, vou alterar para 80 (esse valor é em porcentagem), pois as imagens serão o destaque, digamos assim.
- Se você tiver seguindo o modelo do nosso tutorial, agora faça o mesmo com o contêiner da descrição, porém, você deve colocar em “Largura” apenas o valor restante, se colocou 80 para as imagens, sobra apenas 20 para a descrição (totalizando 100%).
- Agora clique no “+” dentro do contêiner, e clique no elemento Imagem no menu. Se preferir, você pode puxar a imagem do seu dispositivo diretamente para o contêiner.
- Se você apenas adicionou o elemento, agora é só clicar no menu em Escolher imagem para selecionar sua imagem.
- Após escolher a imagem, é aqui que começa. Você deve ir para a aba Estilo da imagem, e aqui você pode gerenciar a posição, tamanho da imagem, opacidade, entre várias outras coisas
- Abaixo um exemplo de 3 imagens iguais, mas com medidas e posições diferentes:
E pronto, agora você já sabe como editar imagens na tela de publicação do Elementor. Note que neste artigo apenas usamos alguns exemplos, você pode se aprofundar no plugin e verificar várias outras opções de edição, alterando o fundo do site, colocando bordas nos contêineres, fazendo carroceis (com a versão PRO), etc.
Além disso, a nossa organização de contêineres neste artigo foi só para exemplificar, você pode criar os seus da forma que preferir, mesmo que tanto as imagens como descrições fiquem apenas em um contêiner, ou todos separados, enfim. O ideal é consultar o seu programador para que ele garanta que o site vai ficar leve, bonito e organizado.
E antes de finalizar, uma dica: Se você é um cliente Kangaroo Host e possui um serviço de hospedagem ou revenda, você tem direito a pelo menos 1 licença do Elementor PRO. Sendo assim, caso deseje solicitar a instalação para o seu site WordPress, acesse este artigo: Como solicitar as licenças incluídas no seu plano.