Como usar o contêiner Elementor Flexbox em 6 etapas simples

Você já experimentou o novo  Contêiner Elementor Flexbox recurso?

Bem, o que dizem é que é um ótimo complemento para tornar seu site mais otimizado para todos os dispositivos e carregar mais rápido.

Como? 

Bem, o novo flex container funciona de uma maneira um pouco diferente (tanto front-end quanto backend) das seções anteriores/seção interna. E essas novas e diferentes formas de trabalhar são o que faz a mágica.

Neste blog você aprenderá sobre as novas opções que o contêiner flexbox Elementor traz para a mesa para construir um site e como usar o Elementor Flexbox Container em um guia passo a passo.

Então continue lendo…

O que é um contêiner Elementor Flexbox?

O contêiner Elementor Flexbox traz todos os recursos CSS Flexbox para o seu editor Elementor. Com a nova adição, você pode criar facilmente layouts avançados para garantir que as páginas da web tenham uma ótima aparência em todos os dispositivos, independentemente do tamanho.

Observação: O contêiner CSS flexbox, como o nome sugere, fornece flexibilidade avançada para criar um design responsivo ao dispositivo. Antes da introdução do flexbox, era bastante complicado criar um design responsivo usando vários modos de layout como Bloco, Inline, Tabela e Posição. Mas com os contêineres flexbox, você não precisa mais de vários modos de layout.

E quando se trata do contêiner flexbox Elementor, você não precisará mais usar seções. Você pode adicionar widgets em um contêiner sem nenhuma seção. Você também pode adicionar um número infinito de contêineres dentro do contêiner.

Depois de adicionar widgets e contêineres, você poderá controlar a distribuição de widgets dentro do contêiner junto com o layout de cada dispositivo. Além disso, você obtém configurações de personalização separadas para cada contêiner (até mesmo contêineres dentro de um contêiner). Isso lhe dá a melhor flexibilidade para tornar seu dispositivo de design responsivo. 

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

Você deve estar se perguntando quais são as diferenças entre containers e seções. Bem, existem algumas diferenças. Estas são algumas diferenças importantes:

• Você pode adicione widgets a contêineres com flexbox enquanto nas seções você precisa adicionar colunas e, em seguida, adicionar widgets a elas.
• No flex container, a largura do widget é embutida por padrão enquanto que, com a estrutura de seção de coluna, a largura do widget é largura total por padrão.
• Anteriormente, você poderia adicionar apenas uma seção interna dentro de uma seção, mas com os contêineres flexíveis mais recentes, você pode adicionar quantos contêineres desejar.
• Com a estrutura de seção de coluna, você pode alterar a direção do widget usando coluna ou posicionamento embutido. Agora, com o flex container mais recente, você pode alterar a direção do widget usando Coluna, Linha, Coluna Inversa ou Linha Inversa.
• Na estrutura da seção de colunas, Coluna Inversa ou Seções Duplicadas foram usadas para tornar as páginas da web responsivas. No método flex container mais recente, você pode usar um Ordem personalizada de widgets ou contêineres para cada dispositivo.
• As opções de alinhamento na estrutura de seção/coluna são Esquerda, Centro e Direita. Por outro lado, com contêineres flexíveis, você obtém opções de alinhamento como flex-start, flex-center e flex-End.

Agora, você deve estar pensando em como essas mudanças podem beneficiá-lo. Para saber mais sobre isso, vá para a próxima seção.

Vantagens de usar o contêiner Elementor Flexbox

Muita pesquisa é feita antes que um novo recurso seja adicionado a um plugin para garantir que o recurso seja útil para os clientes. O mesmo acontece com o contêiner flexível Elementor. Esse Elementor O recurso foi adicionado porque beneficiará em grande medida os usuários.

Aqui estão algumas das vantagens que você desfrutará se usar o contêiner flexbox Elementor:

• Como a seção e a seção interna serão substituídas por flex containers, você pode construir sites mais otimizados.
• Flexbox reduzirá o número de colunas Elementor Flexbox e seções internas. Como resultado, menos código será produzido no backend. E euess DOM resultará em melhor velocidade para o seu site WordPress.
• As configurações do contêiner Flexbox permitirão que você crie sites responsivos a dispositivos com mais flexibilidade do que antes.
• Agora você pode hiperlink para uma seção completa. Anteriormente, você só podia criar hiperlinks para widgets.
• Se você não estava satisfeito antes porque só podia adicionar uma seção interna em uma seção, então o flex container é para você. Com o contêiner flexível, você pode adicione contêineres dentro do contêiner indefinidamente.

Como usar o contêiner Elementor Flexbox em 6 etapas

Siga as etapas abaixo para aprender como usar o contêiner Elementor Flexbox em seu site para obter uma aparência mais otimizada. O processo consiste em 6 etapas fáceis:

Etapa 1: ativar o contêiner Flexbox em experimentos Elementor

Primeiro, você precisará de um recurso de contêiner flexbox para aproveitar o contêiner flexbox no Elementor. Por isso, navegue até Elementor ⇒ Configurações no painel do WordPress. Agora vá para a guia Experimentos e role para baixo para encontrar a opção ‘Flexbox Container’.

Depois de encontrar a opção escolha Ativo no menu suspenso para ativar o Elementor Flexbox Container. Por fim, role para baixo até o final e clique em “Salvar alterações”Para salvar o status.

Etapa 2: crie uma nova página

Após ativar o flex container, é hora de criar uma nova página para que você possa utilizar esse recurso. Para isso, navegue até Páginas ⇒ Todas as páginas e então clique em Adicionar novo. Agora, forneça um título e clique em Editar com Elementor

Etapa 3: adicionar um contêiner

Agora, em vez de uma seção, você precisa adicionar um contêiner. Por isso,  clique no ícone + e escolha a estrutura de sua preferência.

Observação: Se você observar a estrutura no navegador, descobrirá que a estrutura é na verdade um contêiner que contém outros contêineres em vez de colunas. Você também pode arraste e solte um único contêiner no menu à esquerda. 

Você pode personalizar muitas opções para o contêiner, como

• Largura do contêiner: Você pode escolher a largura do contêiner como caixa ou largura total.
• Largura: Se você escolher Boxed como largura do contêiner, a largura será 928Px. Por outro lado, se você escolher Largura total, a largura do contêiner será 100% da largura da janela de visualização. No entanto, você pode alterar ambos os valores de largura.
• Transbordar: Você pode escolher o valor de estouro como Padrão, oculto ou automático.
• Etiqueta HTML: Você também pode alterar a tag HTML do contêiner. Você obtém opções como div, cabeçalho, rodapé, principal, artigo, seção, etc. Há uma nova adição de uma tag. Desta forma você pode transformar um econtêiner inteiro em um link com uma tag.

Observação:  Você também tem muitas opções em “Itens” (mais adiante). Além disso, você pode personalize todas as configurações acima para cada contêiner interno também.

Etapa 4: adicionar widgets

O processo de adição de widgets é igual ao da estrutura da seção de colunas. Você precisa procure o widget e arraste e solte no ícone + de cada contêiner. Por exemplo, adicionarei um título, um vídeo e um ícone de compartilhamento social.

Etapa 5: personalizar o conteúdo do contêiner 

Agora é hora de personalizar os widgets do contêiner. Para isso, edite o contêiner. Em seguida, vá em Layout no painel esquerdo e expanda a opção Itens. Aqui estão as opções com as quais você pode brincar:

• instruções: a direção padrão é linha. No entanto, você tem quatro opções, como Linha, Coluna, Linha Invertida e Coluna Invertida. Se você escolher a coluna ou coluna invertida, todos os contêineres dentro do contêiner principal aparecerão como colunas diferentes do Elementor flexbox.

Nota: Se você escolher uma coluna, será necessário ajustar a largura dos contêineres internos.

• Alinhar contêineres: Você pode definir o alinhamento como Flex Start, center, flex-end e Scratch. Flex começa a colocar seu elemento contêiner a partir do ponto inicialt, e com um valor central Flex você pode colocar os itens no centro. Por outro lado, com o Flex end, você pode exibir todos os contêineres internos na parte inferior. E com a opção extensível, os contêineres internos ocuparão qualquer espaço extra, se alocados. Tudo isso será aplicável se você escolher a direção como linha.

Por outro lado, se você escolher o direção como uma coluna, então os valores flex-start e center funcionarão da mesma forma que a linha. Mas com o flex-end, os containers serão deslocados para a direita e com scratch, ocupará qualquer espaço à esquerda.

• Justifique o conteúdo:  Você tem seis opções para justificar o conteúdo: início flexível, centro, final flexível, espaço entre, espaço ao redor e espaço uniforme. O espaço entre adicionará o mesmo espaço entre cada um dos itens. No entanto, isso não adicionará nenhum espaço na parte superior ou inferior dos itens.

A opção de espaço ao redor adicionará espaço na parte superior e inferior de cada contêiner. E a opção de espaço uniforme adicionará o mesmo espaço ao redor de todos os widgets e contêineres internos.

• Lacuna de elementos:  Você pode usar esta opção para adicionar espaço entre os elementos (widgets e seções internas).

• Enrolar: Escolher Sem embrulho colocar todos os itens em uma única linha e Enrole para permitir que o conteúdo flua em várias linhas.

Etapa 6: publicar e visualizar

Você pode repetir a etapa 4 para personalizar todas as configurações do contêiner. Assim que terminar a personalização, clique no botão publicar para publicar a página. Em seguida, você pode clicar no botão de visualização para ver sua página com a nova estrutura do flex container.

Como converter a página Elementor baseada em seção para Flexbox Container

Converter a estrutura baseada em seção/coluna para o novo contêiner Elementor Flex é super fácil. Você pode fazer isso seguindo as 4 etapas simples mostradas abaixo:

Etapa 1: selecione a seção que deseja converter

Você precisa converter cada seção separadamente. Então, primeiro, selecione a seção que deseja converter. Você pode clique nos seis pontos para selecionar uma seção ou selecione uma seção do navegador (você pode encontrar a opção no canto inferior esquerdo).

Passo 2: Clique em Converter para fazer a conversão

Agora para converter, no painel esquerdo, você encontrará um Opção Converter em contêiner no layout. Clique no CONVERTER botão.

Etapa 3: exclua a seção anterior

Após a conclusão do processo de conversão, você encontrará duas versões da mesma seção. Um é baseado em seção e outro é baseado em contêiner. A versão no topo é baseada em seções. Exclua a versão anterior/original.

Etapa 4: atualização e visualização

Você pode repetir as etapas 1 a 3 para todas as seções da sua página. Quando terminar de converter todas as seções no layout do contêiner Flexbox, clique no botão botão atualizar para salvar. Agora você pode clicar no botão de visualização para ver a mesma página, mas com um layout de contêiner.

Você pode criar um contêiner Flexbox horizontal e vertical no Elementor?

Sim, o Elementor oferece suporte à criação de contêineres flexbox horizontais e verticais em menos de alguns segundos. Você só precisa selecionar os seis pontos do contêiner Elementor e selecionar a direção horizontal ou vertical na guia de layout. Assim você pode fazer seu container flexbox sem problemas.

Posso usar recursos complementares do Elementor com o novo Flexbox Container?

Sim. Você absolutamente pode. 

Você pode usar ElementsKit – o complemento definitivo para Elementor para adicionar widgets adicionais e outros recursos ao construtor de páginas Elementor. Este elemento adicionar é 100% compatível com o novo container Flexbox da Elementor.

Você pode usar o mesmo processo de conversão de qualquer seção Elementor em layout Container (mostrado na seção acima) para converter seções/páginas ElementsKit. 

ElementsKit vem com Mais de 500 seções prontas, mais de 35 páginas prontas e mais de 85 complementos personalizados recursos para facilitar sua vida. Você pode facilmente crie um site completo usando o modelo ElementsKit Premade em apenas alguns minutos.

Aqui está um exemplo que você pode ver como as páginas pré-fabricadas do ElementsKit são convertidas facilmente para o Elementor Flexbox Container.

Embrulhar

Tenho certeza de que agora você percebe por que há tantas coisas em torno desta nova adição do Elementor. O contêiner Elementor Flex é realmente uma bênção para todos os construtores de sites WordPress que estavam procurando maneiras de criar sites mais otimizado, mais rápido e responsivo independentemente do tamanho do dispositivo.

E a cereja do bolo é que você pode transformar seu site criado anteriormente em um site otimizado baseado em contêiner rapidamente. Porém, o flex container ainda está em modo experimental. Portanto, não é recomendado usá-lo em um site ativo até que seja publicado como um recurso ativo

Até então, fique à vontade para brincar com o contêiner flexível Elementor em seu site de teste. E experimente Kit de Elementos para obter mais flexibilidade para criar um site de aparência incrível que prenda a atenção do cliente e aumente o sucesso do seu site.