Adicione e edite uma seção Flex (1.0)

Para adicionar uma seção Flex:

1. Passe o cursor entre as linhas e clique no botão Adicionar seção. As seções aparecerão no painel lateral. Você também pode clicar com o botão direito do mouse para abrir o menu de contexto e depois clicar em Adicionar seção.
2. No painel lateral, clique em Seções Flex.
3. Clique na seção Flex a ser adicionada e, no topo da página, clique em Salvar.
4. O Modo Flex será aberto com a seção a ser editada.

Adicione um recipiente ou flexbox

Após adicionar uma seção Flex ao site, você pode criar uma grade e adicionar recipientes e flexboxes para botar os widgets da seção.

Para criar a grade na seção: no painel Design, selecione um layout predefinido na seção Reorganizar layout; ou selecione colunas e linhas e a lacuna desejada entre cada uma na seção Personalizar layout.

Para adicionar um recipiente ou flexbox à grade:

1. Pare o cursor na grade e clique no botão Adicionar ().
2. Na seção Itens Flex, clique em Recipiente, Flexbox vertical ou Flexbox horizontal. Saiba mais sobre como escolher um recipiente ou flexbox em Recipiente e flexbox (1.0).
3. Arraste o recipiente ou flexbox até onde o local desejado na grade. Enquanto você move o recipiente ou o flexbox, aparecem pontos azuis para você fixá-lo nas áreas da grade. Você pode ver onde o elemento está preso no painel Design, ao lado de Fixar (seção Posição).
   
4. Para ajustar o tamanho do recipiente ou flexbox, arraste as pontas até ficar do tamanho desejado.

Adicione e edite um widget

Após adicionar uma seção Flex ao site, criar uma grade e adicionar um recipiente ou flexbox, você já pode adicionar um widget ao recipiente ou flexbox.

No editor clássico, você pode arrastar um widget do painel esquerdo e soltar em uma grade; você entrará automaticamente no modo flex.

Para adicionar um widget:

1. Pare o cursor no recipiente ou flexbox e clique no botão +.
2. Procure e selecione o widget a ser adicionado.
3. Arraste e ajuste o tamanho do widget no recipiente até o local desejado.
4. Enquanto você move o widget, aparecem pontos azuis para você fixá-lo nas áreas do recipiente. Você pode ver onde o elemento está preso no painel Design, ao lado de Fixar (seção Posição).
   
5. Nota

   Os elementos dentro do flexbox são automaticamente colocados numa lista vertical ou horizontal.

6. Ao se adicionar um widget, o Editor de conteúdo aparece para você configurar o widget.
7. Use o painel Design para editar o design do widget.

Selecione elementos

São vários os métodos para selecionar um elemento:

• Passe o cursor sobre o elemento e clique nele. O primeiro clique seleciona a camada principal do elemento; o segundo clique seleciona a camada aninhada; o terceiro clique seleciona a camada aninhada seguinte e assim por diante.

• Passe o cursor sobre o elemento e clique duas vezes. Isso seleciona o elemento sobre o qual você passou o cursor, não importa como esteja aninhado.

• Passe o cursor sobre o elemento e clique em Comando/controle + Selecionar. Isso seleciona o elemento sobre o qual você passou o cursor, não importa como esteja aninhado.

Copie e cole elementos e widgets Flex

É possível copiar e colar elementos flex (grades, recipientes, flexboxes) e widgets no modo flex. Você pode, por exemplo, copiar a grade de uma página e colar na seção flex de outra página. Você também pode copiar widgets do editor comum e colar em seções flex. A funcionalidade "copiar e colar" agiliza o trabalho; assim, você recria projetos complexos e cria sites com mais rapidez.

Para copiar e colar elementos ou widgets flex no modo flex, clique com o botão direito do mouse no elemento ou widget e selecione Copiar ou Colar no menu. No caso dos widgets, para acessar "Copiar e colar", você também pode selecionar o widget e clicar em Mais ().

Para copiar um widget do editor comum e colar em uma seção Flex, clique no widget nesse editor para abrir o menu "Conteúdo e design". Clique no ícone das configurações () e selecione Copiar no menu. Vá até a seção flex desejada, clique com o botão direito do mouse e selecione Colar no menu.

Reorganize elementos

Você pode usar setas para mover elementos aninhados em flexboxes, seções e grades. As setas podem ser acessadas na barra flutuante ou clicando com o botão direito do cursor para abrir o menu de contexto. Usando as setas para reorganizar os elementos, as edições ficam mais fáceis e evita o aninhamento inesperado de elementos.

Os elementos podem ser movidos nas seguintes direções:

• Elementos aninhados no flexbox. Nos flexboxes horizontais, os elementos podem ser movidos da esquerda para a direita. Nos flexboxes verticais, os elementos podem ser movidos para cima ou para baixo.

• Grades aninhadas em uma seção. Podem ser movidas para cima ou para baixo.

• Elementos aninhados em uma grade ou contêiner. Podem ser movidos em qualquer direção, desde que haja dois elementos próximos um do outro e que eles estejam esticados sobre toda a célula.