O painel de design é exibido no lado direito do modo flexível e contém as propriedades de design do elemento selecionado (seção, coluna, widget, flexbox ou grade avançada). Cada elemento possui propriedades diferentes que podem ser ajustadas no painel de design, ou seja, as propriedades de design variam dependendo do elemento selecionado. As propriedades de design incluem alinhamento, layout, espaçamento, dimensionamento e muito mais, dependendo do elemento selecionado.
To open the design panel, clique em um elemento no modo flexível e, em seguida, clique em Design. O painel de design será aberto à direita do modo flexível para não interferir na visualização e edição do seu design. Ou, você pode clicar no Editar design ícone no menu flutuante. Após fechar o painel de design, você pode abri-lo novamente clicando no Editar design ícone no canto superior direito.
Termos de projeto
A seguir, são apresentados os termos e abreviações de design utilizados no painel de design:
- Px. Pixels são uma unidade de medida que permanece a mesma, independentemente do tamanho do dispositivo. Por exemplo, se um botão tem 280px, ele terá o mesmo tamanho em um celular, tablet ou computador.
- A largura da viewport (Vw) é uma unidade baseada na largura da tela (viewport) em que o site é visualizado. Por exemplo, 10 Vw significa que o elemento será dimensionado para ocupar 10% da largura da tela em que é visualizado.
- A altura da viewport (Vh) é uma unidade baseada na altura da tela (viewport) em que o site é visualizado. Por exemplo, 25 Vh significa que o elemento será dimensionado para ocupar 25% da altura da tela em que é visualizado.
- %. Porcentagem do contêiner (seção, coluna, flexbox ou grade avançada) que o elemento ocupa. Por exemplo, se o tamanho de um elemento for 10%, significa que o elemento será dimensionado para ocupar 10% do contêiner em que está inserido.
- A. Unidade de medida automática determinada pela altura do conteúdo.
Alinhar
Disponível para elementos individuais dentro de uma coluna ou flexbox. Elementos individuais dentro de uma coluna ou flexbox vertical com layout automático vertical podem ser alinhados à esquerda, ao centro, à direita ou esticados horizontalmente para preencher 100% da largura do contêiner.
Observação:
Os elementos também podem ser alinhados a partir do menu flutuante clicando no ícone Alinhar (
).
Layout
Sangramento total
Disponível apenas para seções e só pode ser alterado a partir do ponto de interrupção principal da área de trabalho. Quando ativado, permite que o conteúdo ocupe toda a largura da tela. Quando desativado, a largura do conteúdo pode ocupar no máximo 1.200 pixels. Por padrão, a configuração de sangria total está desativada.
Para saber mais sobre pontos de interrupção, consulte Pontos de interrupção do Flex.
Alinhar elementos
Permite alinhar verticalmente vários elementos em uma coluna ou flexbox simultaneamente. No editor clássico, os elementos só podem ser alinhados individualmente e horizontalmente. O alinhamento vertical é útil porque mantém a posição dos elementos consistente entre todos os breakpoints sem a necessidade de ajustes adicionais. Para mais informações, consulte Alinhamento e espaçamento flexíveis.
Layout automático
Permite selecionar se os elementos dentro de colunas e flexboxes serão alinhados automaticamente na horizontal ou na vertical. Por padrão, os elementos são alinhados verticalmente. Os elementos só podem ser movidos na mesma direção do alinhamento automático. Por exemplo, se os elementos estiverem alinhados verticalmente, você só poderá movê-los verticalmente e não horizontalmente. O layout automático ajuda a garantir que seu design esteja otimizado para corresponder a qualquer breakpoint.
Enrolar
Disponível apenas para colunas e flexboxes quando a opção Horizontal estiver selecionada para o layout automático. Quando definida como Quebrar, permite que os elementos dentro da coluna ou flexbox mantenham suas dimensões e se ajustem conforme a largura da tela muda.
Alinhar linhas
Disponível apenas para colunas e flexboxes quando a opção "Quebrar" estiver selecionada para o layout automático. Permite definir o alinhamento das linhas dentro de uma coluna ou flexbox. Essa configuração não afeta o alinhamento dos elementos dentro das linhas, apenas as próprias linhas.
Espaçamento
Espaço entre os itens
Permite definir o espaço entre colunas ou widgets uma única vez, e essa configuração se aplica a todas as colunas de uma seção ou a todos os widgets de uma coluna. Para colunas, se a propriedade de layout automático estiver definida 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. Essa propriedade não se aplica a elementos dentro de flexboxes ou grids avançados.
Defina as margens e o preenchimento.
As margens são o espaço entre a borda do elemento e a extremidade da seção, coluna, flexbox ou grade avançada em que ele está contido.
O preenchimento (padding) é o espaço interno do elemento. Clique no valor da margem ou do preenchimento para digitar um novo valor e, 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 porcentagem e o espaçamento vertical em pixels.
Por exemplo, se você selecionar uma coluna e definir o preenchimento esquerdo para 5 px, serão adicionados 5 px de espaço entre a borda esquerda da coluna e a borda externa dos elementos dentro da coluna. Se, para essa mesma coluna, você definir a margem esquerda para 5 px, serão adicionados 5 px de espaço entre a borda da coluna e a borda da seção que a contém.
Redefina o preenchimento ou a margem.
Ao clicar nesta opção no painel de design ou no menu flutuante, o espaçamento interno ou as margens do elemento selecionado são redefinidos para zero.
Tamanho
Dependendo do elemento selecionado, você pode ajustar a altura e a largura, bem como os valores máximo e mínimo. No modo flexível, a altura pode ser medida em pixels (px), altura vertical (vh), porcentagem e acentos (A). No entanto, a altura das colunas flexíveis e o espaço entre elas só podem ser medidos em porcentagem.
Observação:
As unidades de tamanho padrão são diferentes para cada elemento. Por exemplo, por padrão, as caixas de texto têm 100% de largura e os botões têm 280px de largura.
Para seções, você só pode alterar a altura. A largura da seção é definida pelo dispositivo, enquanto a largura do conteúdo na seção é definida pela configuração Largura do Conteúdo em Design Global. Para colunas, você só pode alterar a largura, enquanto a altura é definida pela altura da seção ou por seus elementos internos. Para flexboxes e widgets, você pode definir a altura e a largura, juntamente com os valores mínimo e máximo para cada um. Qualquer unidade de medida pode ser usada.
Animação e fundo
As propriedades de animação e plano de fundo no modo flexível são as mesmas do editor clássico. Para saber mais sobre as propriedades de animação e plano de fundo, consulte Adicionar animações e Personalizar plano de fundo.
Painel de design para grades avançadas
As grades avançadas possuem propriedades de painel de design que não estão disponíveis para outros tipos de elementos, devido à capacidade de criar composições livres e sobrepor elementos. Recomendamos que você revise seu design em diferentes pontos de interrupção.
Alinhar
Em uma grade avançada, os elementos individuais podem ser alinhados e esticados em qualquer direção, pois não são limitados pelo layout automático.
Ordem
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. Permite trazer um elemento selecionado para a frente, para a frente, para trás ou para trás. Para obter mais informações, consulte Criar elementos sobrepostos no Flex.
Reorganizar o layout
Permite selecionar 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 que você deseja para sua grade avançada. Você também pode usar o campo Espaçamento para especificar o espaço entre as colunas. O espaçamento entre colunas pode ser definido em pixels ou vw e o espaçamento entre linhas pode ser definido em pixels ou vh.
Alfinete
Permite definir a posição do elemento dentro da grade. Uma vez definida, o elemento permanecerá na mesma posição mesmo quando o tamanho da grade for alterado.
Localização da grade
Disponível para elementos dentro de grades avançadas que foram divididas em colunas e/ou linhas para criar um layout. Mostra onde o elemento está localizado na grade.
Mantenha as proporções
Quando ativada, essa opção garante que os elementos dentro de uma grade avançada mantenham suas proporções mesmo quando o tamanho da grade for alterado.
Observação:
O widget de imagem também contém uma opção "Manter proporção", que preserva as proporções originais.
