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 contêineres no Elementor, como incluir, 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 usar contêineres 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 contêineres:
- Começando pelo “modo pronto”, na tela principal do editor, você pode ver a uma opção no meio da tela, e para adicionar um (ou vários) contêiner(es), você pode clicar no +, como na imagem:
- Logo depois, clique em Flexbox
- E por fim, selecione o modelo de contêiner que deseja adicionar.
Nesse caso, esse seria o modo “pronto”, onde você adiciona um ou vários contêineres de uma vez, e todos já “encaixotados” para você poder trabalhar puxando os elementos. Porém, é importante dizer que mesmo já sendo “prontos”, você pode personalizá-los. Ainda assim, se nenhum desses modelos for da forma que você precisa, abaixo te mostramos como adicionar manualmente:
- No menu esquerdo, puxe o elemento Contêiner para tela de edição
- Ao adicionar, você pode editar a parte de Layout, como no exemplo abaixo:
Nesse caso, você pode escolher a largura do contêiner, a direção que os itens adicionados dentro dele terão, o alinhamento (se vai ser à esquerda, centralizado, à direita, justificado), também pode escolher o espaçamento (geralmente mudamos para 0), e se quer envolver os itens ou não.
Se você quiser que itens possam ficar lado a lado dentro deste contêiner, pode ser uma boa opção ativar o envolver. - Em nosso exemplo, adicionamos 4 contêineres dentro do principal, deixamos a estrutura nomeando cada um, dessa forma você pode visualizar melhor:
O contêiner do topo está com largura 100(%)
Os contêineres da esquerda e direita com 20 cada (%)
E o central está com 60 (%), totalizando os 100%
Além disso, o menu principal está selecionado para você poder ver o Layout e entender como fazer para a estrutura ficar dessa forma, lembrando, a opção de Envolver é essencial. - Abaixo um exemplo bem simples de como usar os contêineres, lembrando que são 4 dentro de um principal, cada 1 para comportar uma parte do site.
E pronto, esse foi um exemplo inicial de como lidar com os contêineres com o Elementor, lembrando que, o intuito deste artigo é apenas te mostrar como usar os contêineres do Elementor. Construir algo mais completo ou mudar o design, isso tudo vem com o tempo e prática.
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.