O painel de design aparece ao lado direito do modo flex e contém as propriedades do seu design para o elemento selecionado (seção, coluna, widget, flexbox ou grade avançada). Cada elemento tem propriedades diferentes, que podem ser ajustadas no painel de design. Por isso, as propriedades do design dependem do elemento selecionado. As propriedades do design podem incluir alinhamento, layout, espaçamento, ajuste do tamanho e muito mais.

Para abrir o painel de design, clique em um elemento no modo flex e, em seguida, clique em Design. O painel de design é aberto à direita do modo flex, para não atrapalhar você na hora de ver e editar o design. Você também pode clicar no ícone Editar design no menu flutuante. Após fechar o painel de design, você pode reabri-lo - basta clicar no ícone Editar design no canto superior direito.

Glossário referente ao design

Confira os termos e abreviações usados no painel de design:

• Px. Pixels são uma unidade de medida nunca muda, não importa o tamanho do aparelho. Por exemplo: um botão com 280 px terá o mesmo tamanho no celular, no tablet ou no desktop.

• Vw. Largura da viewport é uma unidade baseada na largura da tela (viewport) na qual o site é visto. Por exemplo: 10 Vw significa que o elemento se ajustará para ocupar 10% da largura da tela.
• Vh. Altura da viewport é uma unidade baseada na altura da tela (viewport) na qual o site é visto. Por exemplo: 25 Vh significa que o elemento será ajustado para ocupar 25% da altura da tela.
• %. Porcentagem do contêiner (seção, coluna, flexbox ou grade avançada) que o elemento ocupa. Por exemplo: se o tamanho do elemento for 10%, então ele será ajustado para ocupar 10% do contêiner.
• R. Unidade de medida automática determinada pela altura do conteúdo.

Alinhar

Disponível em cada elemento dentro de uma coluna ou flexbox. Cada elementos dentro de uma coluna ou flexbox vertical com layout automático vertical pode ser alinhado à esquerda, ao centro ou à direita; ou ser esticado na horizontal para preencher toda a largura do contêiner.

Layout

Preenchimento total

Disponível apenas nas seções, só pode ser alterado no ponto de interrupção principal no desktop. Quando Ligado, o conteúdo preenche toda a largura da tela. Quando Desligado, a largura do conteúdo preenche até 1.200 pixels. Como padrão, a configuração de preenchimento total vem como Desligado.

Saiba mais sobre pontos de interrupção em Ponto de interrupção no Flex.

Alinhar elementos

Alinha na vertical vários elementos em uma coluna ou flexbox de uma só vez. No editor clássico, os elementos só podem ser alinhados na horizontal, um de cada vez. O alinhamento vertical é útil porque organiza a posição dos elementos entre todos os pontos de interrupção sem precisar de outros ajustes. Saiba mais em Alinhamento e espaçamento no Flex.

Layout automático

Seleciona se elementos dentro de uma coluna ou flexbox serão automaticamente alinhados na horizontal ou na vertical. Como padrão, os elementos são alinhados na vertical. Os elementos só podem ser movidos na mesma direção do alinhamento do layout automático. Por exemplo: se os elementos estiverem na alinhados vertical, você só poderá mover na vertical, não na horizontal. O layout automático garante um design otimizado para seguir os pontos de interrupção.

Ajustar em volta

Disponível nas colunas e flexboxes somente com a opção Horizontal selecionada no layout automático. No modo Agrupar, os elementos dentro da coluna ou flexbox não mudam de tamanho e se agrupam quando a largura da tela muda.

Alinhar linhas

Disponível nas colunas e flexboxes somente com a opção Agrupar selecionada no layout automático. Fixa o alinhamento das linhas dentro da coluna ou flexbox. Esta configuração não afeta o alinhamento dos elementos dentro das linhas, apenas as linhas em si.

Espaçamento

Espaço entre itens

Fixa o espaço entre as colunas ou widgets uma vez. Afeta todas as colunas em uma seção ou a todos os widgets em uma coluna. Nas colunas, se a propriedade do layout automático estiver como "vertical", o espaço entre os widgets será medido em pixels. Se o layout automático for horizontal, o espaço entre os widgets será medido em porcentagem. Esta propriedade não vale para elementos dentro de um flexbox ou grade avançada.

Definir margens e preenchimento

Margens são o espaço entre a borda do elemento e a ponta da seção, coluna, flexbox ou grade avançada dentro da qual ele está.

Preenchimento é o espaço interno do elemento. Clique na margem ou no número do preenchimento para informar um novo valor; em seguida, use o menu suspenso para selecionar a unidade de medida do espaço (px, %, vh ou vw). Por padrão, o espaçamento horizontal é medido em porcentagens, e o espaçamento vertical é medido em pixels.

Por exemplo: se você selecionar uma coluna e ficar o preenchimento esquerdo em 5 px, ele adicionará 5 px de espaço entre a ponta esquerda da coluna e a ponta externa dos elementos dentro dela. Se essa mesma coluna ficar com a margem esquerda em 5 px, ele adicionará 5 px de espaço entre a ponta da coluna e a ponta da seção que a contém.

Zere o preenchimento ou a margem

Quando clicado no painel do projeto ou no menu flutuante, ele zera o preenchimento ou as margens do elemento selecionado.

Tamanho

Dependendo do elemento selecionado, você pode ajustar a altura e a largura e os valores máximo e mínimo. No modo flex, a altura pode ser medida em px, vh, porcentagem e A. Entretanto, a altura das colunas flex e o espaço entre as colunas só são medidos em porcentagem.

Nas seções, você só pode mudar a altura. A largura da seção depende do aparelho; já a largura do conteúdo na seção depende da configuração "Largura do conteúdo" em "Tema do Site". Nas colunas, você só pode alterar a largura; já a altura depende da altura da seção ou dos elementos internos. Nos flexboxes e widgets, você pode ficar a altura e a largura, além dos valores mínimo e máximo de cada um. Pode-se usar qualquer unidade de tamanho.

Animação e fundo

No modo flex, as propriedades de animação e de plano fundo são as mesmas do editor clássico. Saiba mais sobre as propriedades de animação e de plano de fundo em Adicione uma animação e Personalize o plano de fundo.

Painel de design para grades avançadas

Devido à capacidade de criar composições em estilo livre e elementos sobrepostos, o painel de design das grades avançadas tem propriedades que outros tipos de elemento não têm. Recomendamos conferir seu design em diferentes pontos de interrupção.

Alinhar

Na grade avançada, cada elemento pode ser alinhado e esticado em qualquer direção, pois não são limitados pelo layout automático.

Pedido

Na seção "Arranjo" do painel de design, essa propriedade só pode ser usada quando houver vários elementos dentro de uma grade avançada. Leva um elemento selecionado para a frente ou para trás; ou para o primeiro ou último da fila. Saiba mais em Crie elementos sobrepostos no Flex

Reorganizar layout

Seleciona como as colunas e linhas são organizadas na grade avançada para criar um layout.

Personalizar layout

Use os menus suspensos para selecionar o número de colunas e linhas na sua grade avançada. Você também pode usar o campo Intervalo para especificar o espaço entre as colunas. A lacuna das colunas pode ser em pixels ou vw; a lacuna das linhas pode ser em pixels ou vh.

PIN

Fixa a posição do elemento dentro da grade. O elemento permanecerá na mesma posição mesmo quando o tamanho da grade for alterado.

Localização da grade

Disponível nos elementos dentro de uma grade avançada que foram divididas em colunas e/ou linhas para criar um layout. Mostra onde o elemento está na grade.

Manter Proporções

Quando Ligado, os elementos dentro da grade avançada mantêm a proporção mesmo quando o tamanho da grade muda.