fbpx
Publicado em 3, março, 2022.
Última atualização em 3, março, 2022.

Containers no Elementor: Saiba Tudo Sobre a Nova Atualização

Uma nova atualização está chegando no Elementor e está deixando muitos web designers com o cabelo em pé e cheios de perguntas que precisam de respostas.

Por que afinal, todos os trabalhos que você já fez vão ser perdidos ? O que vai realmente mudar com essa atualização ? A plataforma vai ficar melhor ? Você vai poder testar essa nova versão antes de mudar de vez ?

Enfim… Todas essas questões eu vou estar respondendo com todos os detalhes para que você tenha todas as informações possíveis sobre essa nova fase do Elementor.

Então, para que você fique ligado no que fazer, saber o que esperar dessa nova atualização e como você pode ter um gostinho do novo jeito de desenvolver sites, leia esse post até o final.

O que é essa nova atualização e o que vai mudar no Elementor

Como nosso primeiro tópico vamos falar um pouco sobre o que é essa nova atualização que a equipe do Elementor está trabalhando.

Basicamente, o que vai acontecer é a mudança no modelo de criação de sites que o Elementor usa atualmente.

Em que hoje, usamos as colunas e seções para fazer a construção de uma página, o que em alguns casos pode ser um problema quando existem muitos blocos sobrepostos.

Por esse motivo, a equipe de desenvolvimento do Elementor está com esse novo projeto que está vindo com a proposta de um sistema chamado de FlexBox Containers.

Que não faz o uso de colunas, seções e seções internas para desenvolver o layout de um website, e sim somente contêineres maiores e menores que vão moldar todo o design.

Esse novo modelo de criar sites é um conceito de programação que já existe no mercado há um tempo.

E está para chegar na plataforma por diversos motivos que estarei mostrando no decorrer do post.

Mas, antes de tudo, você precisa entender que: Esse novo modelo de criação está em fase Alpha, o que nem chega perto de ser uma fase Beta em questão de desenvolvimento.

Ou seja, isso que vou te mostrar agora não chegou oficialmente no Elementor, e é muito provável que vá ocorrer erros e bugs no programa enquanto você testar essa nova funcionalidade.

Quais as melhorias que essa nova atualização irá trazer 

As melhorias que serão feitas em relação ao modelo antigo são direcionadas para facilitar sua vida como web designer e ainda otimizar o desempenho dos seus sites criados.

E tudo isso, sem tirar a simplicidade que o Elementor já oferece para a nova geração de criadores de sites que usam a ferramenta.

Mas, a pergunta que fica é: “ Por que é necessário essa atualização ? “

Bom… se você já é um profissional que usa diariamente essa ferramenta, você pode ter reparado que o Elementor não é o plugin mais otimizado que temos atualmente.

Por que muitas vezes, é necessário usar de outros artifícios e fazer vários ajustes logo depois de ter terminado o serviço.

Como por exemplo ajustar o modo responsivo ( deixar o site funcionando em todos os dispositivos ) e melhorar o tempo de carregamento do site com plugins cache.

Porém, com essa atualização muitos desses detalhes que o Elementor deixa a desejar vão ser corrigidos e melhorados com os seguintes tópicos que vou listar abaixo:

  • Layout Otimizados
  • Redução do inchaço do DOM
  • Otimização do modo responsivo
  • Aprimoramento de Containers
  • Hiperlink do Container

Todas essas 5 melhorias vão mudar para melhor o desempenho de qualquer página que você criar. 

Em que irá deixar seu site carregando mais rápido pela diminuição da quantidade de códigos que estão presentes nos recursos que o Elementor oferece.

Além de tudo isso, essa nova proposta tem como principal objetivo deixar mais fácil e flexível o modo que você constrói um website.

Como você pode testar os Containers no Elementor

Além de todas as informações sobre essa nova atualização, eu quero te mostrar como você pode fazer o teste do novo modelo de containers.

Siga esse passo a passo que vou passar para você a seguir:

  1. Procure por “ Elementor BETA “ na biblioteca de plugins
  2. Clique em instalar e ativar
  3. Atualize o Elementor e o Elementor PRO
  4. Clique em “ Configurações “ do Elementor
  5. Vá na aba de “ Experimentos “ e procure por “ Container “
  6. Salve as alterações
  7. Crie uma nova página de teste
  8. Entre no Elementor normalmente

Logo abaixo, vou deixar disponível um passo a passo com imagens explicativas para facilitar o seu aprendizado.

1º Passo
2º Passo
3º Passo

Elementor

Elementor PRO

4º Passo
5º Passo
6º Passo
7º Passo
8º Passo

Visão geral dos Containers do Elementor

Assim que você abrir o Elementor Beta, eu vou te mostrar como você pode fazer as modificações principais e como você vai moldar todo o design do seu site com containers.

O ponto principal que você precisa entender, é que serão containers menores dentro de containers maiores.

Ou seja, ao invés de ser uma seção grande em que você coloca outras colunas para colocar fotos, textos, títulos e etc.

Será um container maior com diversos containers menores que você colocará todos os artifícios que você desejar. 

Sem mais delongas vamos ver o que tem de novo no Elementor !

Novas estruturas 

 Assim como mostrado na imagem com o número 1, não temos mais a opção de “ seção “, e sim a de “ container “, que a partir dela você irá fazer todas as suas criações.

Enquanto no número 2, é uma pequena demonstração de quantas estruturas novas foram colocadas nessa versão Beta do Elementor.

Como deixar duas colunas de containers

Nesse tópico é muito importante que você preste atenção em como você pode deixar os containers enfileirados e como criar estruturas mais complexas.

Mas, primeiro você precisa duplicar o container interno que você criou.

Para isso, clique com o botão direito do mouse em cima do container que você quer duplicar,e em seguida escolha a opção de “ Duplicar “.

Logo depois de fazer a duplicação, você pode seguir com a sequência de imagens:

1. No quadrado em vermelho, é onde você irá configurar seus containers para deixá-los com tamanhos maiores ou menores, seja isso em altura ou largura.

2. Dentro do círculo amarelo é onde você configura o container principal, e também  onde você deve clicar para começar a criar duas “ colunas “ de containers.

3. O local sinalizado por uma seta é a aba que está todo o segredo desse novo sistema de criação.

Nessa aba é onde você vai selecionar para abrir as novas opções chamadas de “ Direções” que vão criar as “ colunas “ de containers.

E a partir dessas “ Direções “, é que vão surgir as estruturas mais complexas que irão moldar todo o design de um site que você fizer quando a atualização oficial dos containers for lançada.

4. Essa é a parte fundamental do sistema de containers, as “ Direções “, que está sinalizada pelo quadrado vermelho.

Nas direções você terá 4 opções de alterações dos containers menores dentro do container principal, a opção certa para deixá-los em colunas é “ Row “, como mostrado na imagem.

E lembrando sempre, que é nas configurações do container principal, que você irá montar o posicionamento dos containers menores.

5. A função “ Wrap “ que está destacada em amarelo, é fundamental para que você coloque limites laterais.

Mas, aí você me pergunta: “ O que isso quer dizer ? “

Quando você duplica várias vezes os containers internos para que fiquem em fileiras como te ensinei, eles vão seguindo infinitamente para as laterais.

E com essa opção “ Wrap “, você impede que esses containers duplicados sigam para as laterais infinitamente, parando nos limites da sua tela.

Colocando elementos dentro dos Containers

Logo que você criar toda a estrutura de blocos que você achar mais adequada para o seu projeto, o que te resta é somente fazer o que você já fazia antes.

Arrastar os elementos nos lugares certos, como o exemplo abaixo:

Portanto, a única coisa que é preciso para começar a fazer as páginas nesse modelo de construção é se acostumar, pois a essência ainda continua a mesma.

Transferência de um site oficial para o novo conceito do Elementor

Como fazer a transferência de um site já pronto para o modelo de container foi uma dúvida muito recorrente nos fóruns e comentários de vídeos desse novo assunto.

E essa também pode ser uma dúvida sua. Por esse motivo, eu separei esse tópico para te ensinar como fazer a transferência de um site oficial para o novo conceito.

É extremamente simples de se fazer… porém a equipe do Elementor e aEscoladeSites não recomendamos que você faça essa mudança em sites oficiais.

Por que como eu já disse anteriormente, esse conceito ainda está em fase de teste, ou seja, é natural que problemas apareçam.

E é justamente por isso que o nome dado para esse plugin separado do Elementor original é chamado de Elementor Beta.

Sabendo disso, podemos concluir que erros e bugs são comuns nesse estágio do experimento e podem acabar comprometendo todo o seu trabalho que você fez com tanta dedicação.

O que recomendo que você faça é criar uma página à parte para experimentar e explorar um pouco dessa nova funcionalidade.

Desse modo, você não corre o risco de perder nenhum site por causa de problemas que estão fora da sua capacidade de resolver.

Agora que você sabe o por que é importante fazer essa transferência em sites de teste, vamos para o tutorial de como fazer-lo:

1º Abra o Elementor no site feito em seções e colunas

Nessa etapa você precisa abrir o Elementor com as opção de “ containers ” ativa, como já fizemos anteriormente.

2º Clique na seção principal

Assim que o Elementor abrir clique na seção principal sinalizado pela seta vermelha, e em seguida clique em “ Convert “ indicado pelo quadrado vermelho da imagem:

Depois que clicar nessa opção, a seção que você escolher já estará no modelo novo de construção.

Mas, se você quiser fazer a transformação do seu site todo para o modelo de containers, você precisa fazer duas etapas que estão abaixo:

Primeiro você precisa abrir as configurações da página indicado pela seta, e depois clicar em “ Convert “ que está dentro do quadrado vermelho.

Feito todo esse processo, o seu site como um todo já estará no modelo novo de containers.

Você irá perder sites que foram feitos em Seções e Colunas

O medo de perder sites desenvolvidos para clientes ou próprio site que foram feitos no modelo antigo de criação, é algo que está preocupando muitos web designers.

Mas, uma coisa que eu posso te adiantar é que você não irá perder nenhum site que você produziu.

O que se sabe até agora sobre esse assunto, é que os projetos que foram construídos no conceito de seções e colunas vão continuar funcionando normalmente.

Porém, não será mais possível fazer modificações no modelo antigo, sendo a única maneira de você conseguir fazer as mudanças é fazendo a conversão para o sistema FlexBox ( Containers ).

Em relação a toda essa mudança que o Elementor está sofrendo, você pode ficar tranquilo… porque as mudanças vão ser graduais e você conseguirá se adaptar sem problema nenhum.

Além disso, nós da aEscoladeSites estaremos te informando sobre todos os detalhes e atualizações que estão por vir tanto no Blogs quanto nas outras mídias.

Conclusão

Até o momento essas são todas as informações que tivemos da equipe de desenvolvimento do Elementor sobre essa nova atualização.

Com tudo o que te passei neste post, você já pode instalar e ativar o plugin Elementor Beta para começar a explorar a nova forma de criação de web sites.

Além de tudo isso, eu deixei separado exclusivamente para você um super bônus que está no próximo tópico.

Trata-se de um tutorial em que você pode ter mais um pouco de informações sobre as funcionalidades que o Elementor Beta tem para te oferecer.

Se você gostou desse conteúdo e quer mais como esse, não deixe de compartilhá-lo e fazer um comentário sobre o que você achou, críticas construtivas são bem vindas!

Também não deixe de nos seguir no Instagram, Youtube e no Telegram, porque estamos toda semana postando conteúdos que vão enriquecer seu conhecimento no desenvolvimento do seu site !

Super Bônus: Atualização que irá mudar o Elementor para Sempre !

Primeiramente, eu quero te parabenizar por ter lido esse post até o final. 

Isso significa que você está procurando se desenvolver e se atualizar sobre as ferramentas da sua profissão.

Tenho certeza que isso te trará bons frutos e te deixará na frente de muitos concorrentes !

E por esse motivo, eu deixei esse presentão pra você !

Compartilhe:

// POSTAGENS RELACIONADAS

// SEUS PROFESSORES

Copyright © 2022. Todos direitos reservados.

AES CRIAÇÃO DE SITES LTDA. CNPJ 27.494.390/0001-50

Fique por dentro!

Quer receber todas as nossas novidades por email?
Se inscreve ai e não perca nenhuma de nossas atualizações! :D

Este site usa cookies para garantir que você tenha a melhor experiência em nosso site, clique aqui para ler mais.