Layout de Componentes
1. Geral
As funcionalidades de layouts da tela descritas aqui têm como objetivo principal auxiliar o usuário na construção de seus layouts no Page Builder, permitindo a criação de telas mais versáteis e interativas. Cada uma dessas funcionalidades proporciona ferramentas específicas para organizar, alinhar, e gerenciar componentes, garantindo uma experiência de design mais fluida e eficiente. A seguir, abordaremos separadamente cada funcionalidade.
2. Agrupar Componentes
A funcionalidade "Agrupar Componentes" permite que múltiplos componentes sejam combinados em um grupo, facilitando sua movimentação e edição conjunta. Isso é especialmente útil para organizar e manter um design coeso, pois componentes agrupados podem ser manipulados como um único elemento enquanto mantêm suas configurações específicas.
2.1. Como Usar
Selecione mais de um componente na tela. Clique com o botão direito do mouse sobre um dos componentes selecionados para abrir o menu drop de opções. Escolha a opção "Agrupar" para combinar os componentes selecionados. A partir deste momento, os componentes se comportam como uma unidade para efeitos de layout, mas cada um mantém suas configurações e funcionalidades específicas.
2.2. Como Desagrupar
Clique com o botão direito do mouse sobre o grupo de componentes para abrir o menu drop de opções. Escolha a opção "Desagrupar" para separar os componentes agrupados.
3. Alinhar Componentes
A funcionalidade "Alinhar Componentes" é uma ferramenta essencial para organizar elementos na tela, garantindo um layout mais ordenado e visualmente agradável. Esta funcionalidade permite alinhar componentes em relação a outros elementos ou à própria tela, proporcionando um controle preciso sobre o posicionamento.
3.1. Como Usar
Selecione mais de um componente na tela. Clique com o botão direito do mouse sobre um dos componentes selecionados para abrir o menu drop de opções. Escolha a opção "Alinhar" para alinhar os componentes seguindo uma das opções abaixo:
Alinhar à Esquerda: Alinha todos os componentes selecionados à esquerda, tomando como referência o componente que está mais à esquerda.
Alinhar ao Topo: Alinha todos os componentes selecionados ao topo, tomando como referência o componente que está mais acima.
Centralizar Horizontalmente: Alinha todos os componentes selecionados horizontalmente, baseando-se na distância total entre o componente que está mais acima e o que está mais abaixo.
Centralizar Verticalmente: Alinha todos os componentes selecionados verticalmente, baseando-se na distância total entre o componente que está mais à direita e o que está mais à esquerda.
Alinhar à Direita: Alinha todos os componentes selecionados à direita, tomando como referência o componente que está mais à direita.
Alinhar à Base: Alinha todos os componentes selecionados à base, tomando como referência o componente que está mais abaixo.
Espaçamento Horizontal: Realinha os componentes de forma que fiquem equidistantes horizontalmente, considerando o espaço entre o componente que está mais à direita e o que está mais à esquerda.
Espaçamento Vertical: Realinha os componentes de forma que fiquem equidistantes verticalmente, considerando o espaço entre o componente que está mais abaixo e o que está mais acima.
Sair do modo alinhamento: para sair deste modo, clique em algum espaço vazio da tela.
4. Padronizar Altura e Largura
A funcionalidade "Padronizar Altura e Largura" é usada para uniformizar as dimensões de dois ou mais componentes, garantindo uma aparência consistente. Esta ferramenta ajusta todos os componentes selecionados para o tamanho do maior componente em largura ou altura, conforme a opção escolhida.
4.1. Como Usar
Selecione mais de um componente na tela. Clique sobre um dos componentes selecionados para abrir o menu drop de opções. Selecione uma das opções:
Padronizar Largura: Ajusta a largura de todos os componentes selecionados para a largura do componente mais largo.
Padronizar Altura: Ajusta a altura de todos os componentes selecionados para a altura do componente mais alto.
5. Bloquear Componentes
A funcionalidade "Bloquear Componentes" é projetada para fixar componentes em uma posição específica na tela, evitando que sejam movidos ou alterados acidentalmente durante o processo de design. Essa funcionalidade é especialmente útil para garantir a estabilidade e a consistência do layout.
5.1. Como Usar
Após selecionar os componentes desejados, clique na opção "Bloquear Componente". Observe que as bordas dos componentes bloqueados ficarão cinza, indicando que estão fixos. Enquanto estiverem bloqueados, é impossível alterar a posição, altura ou largura desses componentes.
5.2. Como Desbloquear Componentes
Após selecionar os componentes desejados, clique na opção "Desbloquear Componente". As bordas dos componentes desbloqueados voltarão a exibir quadrados nas bordas, permitindo novamente mover e alterar o tamanho dos componentes.
6. Congelar Componentes
A funcionalidade "Congelar Componentes" permite que certos componentes permaneçam estáticos enquanto o usuário navega por uma tela extensa. Essa funcionalidade é ideal para cabeçalhos ou menus de navegação que precisam estar sempre visíveis.
6.1. Como Usar
Selecione pelo menos um componente na tela (também funciona para componentes agrupados). Escolha a opção "Congelar". As bordas do componente ficarão roxas, indicando que o componente está congelado. A partir de agora, ao navegar pela tela, o componente permanecerá estático na mesma posição.
6.2. Como Descongelar o Componente
Selecione pelo menos um componente na tela (também funciona para componentes agrupados). Escolha a opção "Descongelar". As bordas roxas dos componentes serão desabilitadas, e agora, ao navegar pela tela, o componente acompanhará o fluxo normal de rolagem.