Você é novo nos contêineres Elementor Flexbox? Portanto, a nova estrutura de layout do construtor de páginas pode ser um pouco confusa. Mas nós temos o que você precisa.

Elementor Flexbox é a nova estrutura de layout que torna o design de sites mais fácil e amigável. Os contêineres Flexbox marcam uma atualização incremental do antigo layout de seção-coluna com o qual todos estamos familiarizados.

Embora o layout seção-coluna tornasse prático o design do site usando seções, subseções e colunas, ainda havia falta de flexibilidade em termos de design.

Uma seção no Elementor só pode ter colunas e uma subseção. Quanto mais você adicionar a uma página, mais lento será o carregamento do seu site.

Sem falar no quão difícil é criar designs compatíveis com dispositivos móveis com essa estrutura antiga.

Embora o layout de seção e coluna tenha servido bem aos designers, é hora de mudar para uma maneira melhor, mais eficiente e mais flexível de projetar sites usando o construtor de páginas Elementor.

Então, se você deseja dominar os contêineres Flexbox, adicione este blog aos favoritos. Neste guia Elementor Flexbox, iremos orientá-lo em todos os detalhes desta nova estrutura de layout.

Também entenderemos como ele é melhor do que o antigo layout de seção-coluna.

---

conteúdo

---

O que é um contêiner Elementor Flexbox?

Os contêineres Elementor Flexbox são a implementação da Elementor do modelo Flexbox CSS em seu construtor de páginas. CSS Flexbox ou Flexible Box Layout é um novo layout da web desenvolvido em CSS 3.

É otimizado para desempenho e capacidade de resposta, oferecendo layouts que se adaptam a diferentes dispositivos e tamanhos de tela.

Lançado com a atualização Elementor 3.6, Elementor Flexbox Containers permite que você crie páginas da web amigáveis ​​​​para dispositivos usando contêineres como Flexbox CSS.

Esses contêineres Elementor contêm todos os elementos da sua página, como texto, imagens, widgets, etc. Mas aqui está a melhor parte: você pode colocar containers dentro de containers.

Se você usou o layout padrão de seções-colunas, já sabe como é difícil trabalhar com vários layouts.

Embora tenhamos todos os tipos de layouts, como blocos, tabelas, inlines, etc., trabalhar com eles é um incômodo e é difícil garantir sua capacidade de resposta.

Mas, com o Flexbox, você pode colocar contêineres dentro de contêineres indefinidamente. Isso pode criar possibilidades infinitas quando se trata de layouts e designs exclusivos.

Simplificando, os contêineres são suas novas seções, mas são flexíveis tanto em nível individual quanto global. A flexibilidade é encontrada em quase todos os aspectos de um contêiner, seja no alinhamento, preenchimento ou posicionamento em linha.

Casos de uso comuns para contêineres Flexbox

Aqui estão alguns casos de uso populares para contêineres Flexbox:

---

Diferença entre seções antigas e novos contêineres Elementor Flex

Vamos ver as principais diferenças entre o contêiner Elementor e a seção sobre várias configurações.

1. Diferença técnica

As seções Elementor fornecem uma estrutura estrutural para organizar elementos como widgets, imagens, texto, etc. Você pode dividir uma seção em colunas e colocar elementos de páginas da web nelas.

Pelo contrário, os contêineres Elementor Flexbox oferecem uma maneira mais flexível e adaptável de organizar os elementos da página web. Um contêiner é como uma seção, mas sem uma grade predefinida.

Em vez disso, você tem a opção de colocar contêineres dentro de um contêiner.

Além disso, os widgets nas seções têm largura total, enquanto nos contêineres eles são embutidos por padrão. Portanto, você pode colocar quantos elementos desejar em um contêiner pai.

E à medida que você adiciona mais elementos, o alinhamento, o posicionamento e o tamanho do contêiner serão alterados automaticamente para acomodá-los.

2. Diferença visual

A próxima etapa na diferença entre o contêiner Elementor e a seção são as mudanças visuais.

O construtor de páginas Elementor com contêineres Flexbox mantém a IU clássica do construtor de páginas. Mas existem algumas mudanças notáveis.

Você ainda tem o painel do lado esquerdo, onde pode acessar todos os seus widgets, elementos e configurações. Mas o navegador agora mostra contêineres e elementos abaixo, em vez de divisões e seções.

Você sempre pode clicar no ícone + ou arraste e solte elementos para adicioná-los à sua página da web. A única diferença é que você deve escolher um contêiner e uma direção em vez de seções e número de colunas.

Além disso, você também obtém novas opções centradas no contêiner, como direção, alinhamento, justificação, lacuna de elemento, distorção, etc.

3. Diferença de desempenho

A diferença de desempenho entre os contêineres Flexbox e o layout de seção-coluna é enorme, especialmente se o design do seu site estiver cheio de layouts e subseções complexas.

Você deve ter notado que as seções tradicionais do Elementor têm uma propriedade de exibição definida como “ bloco ". Portanto, quando você adiciona uma nova seção ou widget, eles são empilhados uns sobre os outros.

Se quiser exibi-los lado a lado, você terá que criar várias divisões e DOMs, o que torna seu site final mais lento.

Por outro lado, os contêineres Flexbox usam uma propriedade de exibição chamada " flexível”, como em flexível. Portanto, ao adicionar novos componentes a um contêiner, você pode empilhá-los verticalmente ou colocá-los lado a lado horizontalmente.

Portanto, não há necessidade de criar divisões adicionais. Dessa forma, o código da página web permanece fácil de executar, reduzindo significativamente o tempo de carregamento.

---

Benefícios de usar contêineres Elementor Flexbox

Existem várias vantagens em usar contêineres Flexbox em vez de blocos tradicionais para design de sites. Algumas das principais vantagens são:

---

Como usar contêineres Elementor Flexbox (passo a passo)

A experiência do construtor de páginas Elementor Flexbox é semelhante ao construtor de blocos Elementor padrão. Portanto, quer você seja completamente novo no Elementor ou esteja mudando do construtor antigo, não terá problemas para se acostumar.

Você pode ter várias perguntas em mente, como: “Como habilitar/habilitar container no Elementor?” Como usar contêineres no Elementor? Como adicionar um contêiner no Elementor? » Esta seção irá ajudá-lo a respondê-las.

Para ajudá-lo a começar, aqui estão as etapas para usar contêineres Flexbox para criar um site:

Etapa 1. Habilite o Flexbox nas configurações do Elementor

O primeiro passo para usar o Flexbox no Elementor é ativar o Flexbox. Então, vá para as configurações do Elementor no painel do WordPress. Em seguida, clique na guia Experiência, role para baixo, encontre o contêiner Flexbox e selecione a opção Ativo no menu suspenso. Por fim, salve as alterações e passe para a próxima etapa.

Observação: Em novos sites, o contêiner Flexbox está ativo por padrão.

Etapa 2. Crie uma nova página da web

Agora precisamos criar uma nova página como costumamos fazer. Vá para a seção Páginas, selecione Todas as páginas e clique em Adicionar uma página.

Etapa 3. Abra o Elementor

Agora você terá a janela do construtor de páginas do WordPress em sua tela. Dê um título a esta nova página e clique em Editar com Elementor para acessar contêineres Flexbox.

Etapa 4. Adicionar um novo contêiner

Uma interface de usuário familiar do construtor de páginas Elementor aparecerá em sua tela. Além disso, você pode arrastar e soltar um contêiner da barra lateral para adicionar um novo contêiner ou clicar no ícone + e escolha a estrutura desejada.

Etapa 5. Estilize o contêiner

Depois de adicionar um contêiner, você poderá acessar muitas opções de personalização. Você pode alterar opções como tipo de contêiner, largura, altura, direção, alinhamento, etc.

Etapa 6. Arraste e solte widgets em contêineres

Adicionar widgets a contêineres também é simples. Basta escolher o widget desejado na guia Elementos e arrastá-lo e soltá-lo no ícone + no recipiente.

Etapa 7. Personalizar widgets

Assim como as configurações globais do contêiner, você também pode personalizar o conteúdo de um contêiner. Você pode personalizar opções como direção, alinhamento, justificação, lacuna, quebra automática, etc.

Etapa 8. Publique sua primeira página Flexbox

Você pode criar vários contêineres, duplicá-los e trocar suas localizações. Repita as etapas à medida que adiciona mais itens e, quando terminar, clique no botão publicar para colocar sua página da web online. Você também pode clicar no botão Visualizar para interagir com sua nova página da web do Flexbox.

---

Como converter uma página Elementor baseada em seção em um contêiner Flexbox?

Você pode converter facilmente uma estrutura de seção-coluna em um contêiner Flexbox. Basta seguir estas etapas simples:

Etapa 1. Selecione a seção

Selecione a seção que deseja converter em um contêiner clicando nos seis pontos na parte superior da seção. Alternativamente, você também pode escolher a seção no pop-up Elementor Navigator.

Etapa 2. Converter seção em contêiner

Depois de selecionar uma seção, você verá o botão CONVERTER na guia Layout. Clique nele para converter a seção em um contêiner.

Etapa 3. Atualizar layout

Assim que a conversão for concluída, você verá duas versões separadas da seção selecionada. A seção superior é a original, enquanto a seção inferior é o novo contêiner. Exclua a seção original e clique em Atualizar para salvar o layout.

Repita as etapas para cada seção que você planeja converter em um contêiner.

---

Posso combinar complementos Elementor com o novo contêiner flexbox?

Sim, você pode combinar complementos Elementor com contêineres Flexbox. Não há necessidade de solução alternativa, pois os contêineres Flexbox se integram perfeitamente com complementos e plug-ins de terceiros.

Na verdade, os complementos são necessários para habilitar recursos avançados e opções de personalização no construtor de páginas Elementor. Você pode instalar

---

Recursos relacionado

• Como usar fontes globais no Elementor
• Como criar um botão flutuante com índice Elementor Z
• Como criar uma página 404 no Elementor
• Como criar um acordeão de imagem com JetTabs no Elementor
• Como criar um menu de tela cheia no Elementor 

Conclusão

O contêiner Flexbox da Elementor é uma ferramenta poderosa que transforma a maneira como você projeta e estrutura suas páginas da web. Com seus recursos flexíveis, você pode gerenciar alinhamento, distribuição e de seus elementos com precisão excepcional. Se você deseja criar layouts complexos ou simplesmente melhorar a capacidade de resposta dos seus designs, o Flexbox oferece uma solução elegante e intuitiva.

Usando o contêiner Flexbox, você tem acesso a uma variedade de controles que facilitam o gerenciamento de espaços e alinhamentos, ao mesmo tempo que simplificam os ajustes necessários para uma apresentação perfeita em todos os dispositivos. Este nível de personalização não só melhora a experiência do usuário, mas também otimiza o processo de design, tornando suas páginas mais dinâmicas e adaptáveis.

Sinta-se à vontade para explorar as diversas opções oferecidas pelo Flexbox para descobrir como elas podem enriquecer seus projetos Elementor. Com o uso correto dessas ferramentas, você pode criar layouts suaves e profissionais que cativam e envolvem seus visitantes. Continue experimentando e aproveitando as possibilidades que o Elementor oferece para aproveitar ao máximo seus designs web.

Então ! Acabamos de mostrar como usar o contêiner Elementor Flexbox. Se você tiver alguma dúvida sobre como chegar lá, avise-nos dentro Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

---

Perguntas Frequentes