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.

In this blog, you will learn about the new options Contêiner Elementor Flexbox brings to the table to build a responsive website and follow a complete Elementor Flexbox Container tutorial to create modern layouts using flexbox elementor features.

Então continue lendo…

O que é um contêiner Elementor Flexbox?

Elementor Flexbox Recipiente brings all the CSS Flexbox facilities to your Elementor editor and helps users create advanced responsive layouts using a modern flexbox container system. With the new addition, you can easily create advanced layouts to ensure that web pages look great on all devices irrespective of size.

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.

And when it comes to the Elementor flexbox container, you won’t have to use sections anymore. You can add widgets within a container without any section. This nested container Elementor structure gives you more flexibility than traditional sections and columns.

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

Understanding Elementor section vs container layouts is important because containers provide lighter code structure, better responsiveness, and more design flexibility compared to older sections.

. Well, there are quite a few differences. These are some key differences :

• Você pode add widgets to containers with Elementor 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 will reduce the number of Elementor Flexbox columns and inner sections. As a result, less code will be produced in the backend. And less DOM will result in better speed 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

First, you need to enable the Elementor Flexbox Container feature to start using Elementor containers inside the editor.

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 choose Active from the dropdown menu to enable flexbox container elementor support on your website. Por fim, role para baixo até o final e clique em “Salvar alterações”Para salvar o status.

Step 2: Create a New Page

After activating the flex container, it’s time to create a new page so you can use this feature. This is the starting point for any beginner following an Elementor container tutorial or learning how to use Elementor’s flexbox containers effectively.

For that, Navigate to 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.

Step 3: Add a Container

Now, instead of a section, you need to add container layouts using the new Elementor container flexbox system. If you are wondering how to add a container in Elementor, simply click the plus icon and select your preferred structure.

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: You can choose overflow value as Default, hidden, or auto. Advanced users often use Elementor container overflow hidden settings to improve animation and scrolling effects.
• Etiqueta HTML: You can also create an Elementor container link by assigning clickable HTML tags. You get options such as div, header, footer, main, article, section, etc. There is a new addition of a 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.

Step 4: Add Widgets

O processo de adição de widgets é igual ao da estrutura da seção de colunas. Você precisa search for the widget then and drag widgets directly into the Elementor-widget-container area inside each container. This makes Elementor widget container management easier compared to older section-based layouts.

For example, I am going to add one heading, one video, and one social share icon.

Step 5: Customize Container Contents 

The Flexbox controls are the core of Flexbox WordPress layouts inside Elementor. For this, edit the container. Then, go to Layout on the left panel and expand the Items option. Here are the options you get to play with:

• 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.

How to Convert Section-based Elementor Page to 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:

Step 1: Select the Section you Want to Convert

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).

Step 2: Click on Convert to Make the Conversion

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

Step 3: Delete the Previous Section

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

You can repeat steps 1 to step 3 for all the sections of your page. Once you are done with converting all the sections into WordPress Flexbox container layout, click on the 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.

Can You Use Elementor Add-on Features with the New 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 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It extends the Elementor page builder with multilevel mega menus, custom headers & footers, versatile content elements, and trendy animations like liquid glass ou paralaxe to build powerful WordPress websites. You can easily crie um site completo using the ElementsKit premade template in just a few minutes.

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.

Perguntas frequentes

What is the difference between flexbox vs grid Elementor layouts?

Flexbox is a one-direction layout that allows you arrange items in a row or column. Whereas, Elementor grid is a two-dimentional layout where you can arrange items both in columns or rows at the same time.

Why Elementor flexbox container not showing?

Elementor flexbox container might not show due to plugin conflict, browser cache, outdated Elementor version, disabled flexbox container, etc. So, if you encounter such error, check and resolve the issue related to it.

How to reduce space between container in Elementor?

You can reduce space between Elementor container by adjusting padding and margin settings. Besides, you can also edit column gaps and container layout controls to reduce space between containers in Elementor.

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.