O Flex é um modo para criar seções responsivas e com precisão de pixels, com recursos de design adicionais. O Flex permite criar e editar sites Guesty rapidamente, mantendo as funcionalidades do editor clássico com as quais você já está familiarizado. Comparado ao editor clássico, o Flex oferece layout automático, alinhamento e distribuição de múltiplos elementos, unidades de tamanho responsivas e maior controle sobre as colunas. Isso permite criar e editar designs responsivos com mais rapidez do que no editor clássico.
Você pode adicionar uma seção flexível a um site existente ou criar um novo site usando um modelo flexível. Se usar um modelo flexível, todas as seções serão criadas com Flex. O cabeçalho não é criado com Flex e, se você adicionar uma nova página, loja, blog ou página de membros, elas não serão criadas com Flex por padrão, mas você poderá adicionar seções flexíveis a essas páginas.
Observação:
Este artigo é relevante apenas para usuários que começaram a usar o Flex após 18 de julho de 2022. Se você estiver na versão 1.0 do Flex, consulte Visão geral do Flex (1.0).
Terminologia flexível
A seguir, são apresentadas definições para a terminologia especificamente relacionada à Flexibilidade.
-
Modo flexível. Nele, você cria e edita seções flexíveis. No modo flexível, você tem acesso a recursos de design que não estão presentes no editor clássico, mas ainda mantém as funcionalidades de construção do editor clássico.
-
Seção flexível. Uma linha com colunas flexíveis padrão que criam um layout. Você pode adicionar, remover ou alterar a ordem das colunas flexíveis dentro de uma seção flexível. As seções flexíveis podem ser salvas como modelos para uso futuro.
-
Coluna flexível. Onde você adiciona widgets. As colunas flexíveis possuem um layout automático, o que significa que os widgets dentro delas são alinhados automaticamente na vertical ou na horizontal. Devido ao layout automático, você não pode mover elementos livremente dentro de uma coluna flexível; em vez disso, você precisa usar as configurações de alinhamento, espaçamento e margem para mover os elementos.
-
Flexbox vertical e horizontal. Um contêiner que alinha automaticamente os widgets dentro dele vertical ou horizontalmente. Devido ao layout automático, você não pode mover elementos livremente dentro de um flexbox vertical ou horizontal; em vez disso, você precisa usar as configurações de alinhamento, espaçamento e margem para mover os elementos.
-
Grade avançada. Usada para criar composições de formato livre ou elementos sobrepostos. A grade avançada não oferece layout automático ou alinhamento vertical como as colunas flexíveis. Por isso, recomendamos que você verifique seu design em todos os breakpoints.
-
Breakpoint. Intervalos de pixels que correspondem à largura de diferentes dispositivos, como desktops, tablets e celulares. Quando a largura de um dispositivo está dentro do intervalo de pixels predefinido de um breakpoint, o layout do site é ajustado para que o conteúdo e o design sejam otimizados para o tamanho e a orientação desse dispositivo.
-
Elementos flexíveis. Uma grade avançada ou um flexbox horizontal ou vertical que é colocado dentro de uma coluna flexível.
Hierarquia de elementos
No modo flexível, as seções flexíveis contêm colunas flexíveis, e as colunas flexíveis contêm widgets. Essa é a hierarquia padrão, o que significa que você não pode adicionar um widget a uma seção flexível sem que ela também contenha uma coluna flexível.
Selecionar elementos
Existem vários métodos para selecionar um elemento (seção flexível, coluna flexível ou widget):
-
Posicione o cursor sobre o elemento e clique. Ao posicionar o cursor sobre um elemento, procure o contorno azul que indica qual elemento o seu clique selecionará.
-
Selecione os elementos no painel Camadas. No painel lateral, clique em Camadas. A partir daqui, você pode selecionar qualquer elemento da seção selecionada.
-
Selecione elementos no painel de design. Clique nos ícones de navegação no painel de design para selecionar um elemento.
-
Selecione os elementos no menu flutuante. Se você já tiver um elemento selecionado, passe o cursor sobre o nome do elemento acima do menu flutuante e uma lista de elementos flexíveis será exibida.
Modo flexível
Painel de camadas
O painel de camadas é exibido no lado esquerdo do modo flexível e mostra os elementos flexíveis na seção selecionada. Os elementos são exibidos de acordo com sua hierarquia, com as seções como nível superior. No painel de camadas, você pode adicionar novos elementos, selecionar elementos, reorganizar elementos, renomear elementos e ocultar ou exibir elementos em determinados pontos de interrupção.
Painel de design
O painel de design é exibido no lado direito do modo flexível e contém os controles de design para o elemento selecionado (seção flexível, coluna flexível ou widget). As opções de design incluem layout, dimensionamento, alinhamento e muito mais, dependendo do elemento selecionado.
Menu flutuante
O menu flutuante aparece quando você seleciona um elemento. Através dele, você pode alternar entre elementos, adicionar elementos, abrir os painéis de conteúdo ou design, duplicar o elemento, ajustar o alinhamento, excluir o elemento e muito mais.
Perguntas frequentes
Qual é a diferença entre Flex e o editor clássico?
Em comparação com o editor clássico, Flex oferece recursos de design adicionais que permitem criar sites responsivos com mais rapidez e facilidade. A seguir, estão os recursos de design que Flex oferece, mas o editor clássico não:
-
Economize tempo. O Flex é baseado em layout automático, o que significa que o design é otimizado para se adequar a qualquer ponto de interrupção.
-
Alinhamento de conteúdo. Permite alinhar todos os elementos em uma coluna flexível simultaneamente. No editor clássico, você precisa alinhar cada elemento individualmente.
-
Alinhamento automático. Colunas flexíveis e caixas flexíveis alinham automaticamente os elementos vertical ou horizontalmente.
-
Número de colunas. No modo flexível, você pode adicionar mais de 4 colunas a uma seção com até 100% da largura da tela.
-
Espaço entre itens. Permite definir o espaço entre os itens uma única vez, e essa configuração se aplica a todos os elementos em uma coluna flexível.
-
Dimensionamento de elementos. Ajuste os tamanhos dos elementos para otimizar a altura da tela em pixels e a largura da tela em porcentagem.
-
Edição mais rápida. Com Flex e seus recursos avançados de design, você pode editar um projeto existente muito mais rapidamente do que no editor clássico.
Qual a diferença entre a versão 1.0 e a versão 2.0 do Flex?
Qualquer coisa criada com Flex antes 18 de julho de 2022, foi criada usando Flex versão 1.0. Os modelos ou seções de equipe criados anteriormente continuarão sendo editados usando Flex versão 1.0, mas, daqui para frente, os novos designs criados usarão a versão 2.0. Flex versão 2.0. Se você estiver editando um modelo ou seção de equipe criada em Flex 1.0, haverá um indicador que diz Flex A versão 1.0 aparece na barra superior, no nome da seção e no painel de camadas. Depois 18 de julho de 2022, todos os sites novos ou sites que não usavam o Flex anteriormente estão ativados. Flex versão 2.0 e não conseguem acessar Flex versão 1.0.
Flex A versão 2.0 é mais simplificada e semelhante ao editor clássico do que a versão 1.0. A versão 2.0 oferece mais componentes predefinidos para que os usuários possam criar e editar designs com mais rapidez. Em vez de usar uma grade para posicionar objetos, os usuários agora podem adicionar colunas que funcionam como um layout para inserir widgets. As colunas fornecem layout automático, o que significa que os objetos terão uma ótima aparência em cada ponto de interrupção sem necessidade de edição adicional.
Limitações
Atualmente, não é possível adicionar idiomas adicionais ao seu site enquanto estiver no modo flexível. Você precisará sair do modo flexível primeiro. Para saber mais sobre sites multilíngues, consulte Configure um site multilíngue.
