As funcionalidades de layouts da tela descritas aqui têm como objetivo 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, serão abordados separadamente cada funcionalidade.
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.
Como configurar
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.
Como desagrupar
Clique com o botão direito do mouse sobre o grupo de componentes para abrir o menu de opções. Escolha a opção "Desagrupar" para separar os componentes agrupados.
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.
Como configurar
Selecione mais de um componente na tela. Depois, clique com o botão direito do mouse sobre um dos componentes selecionados para abrir o menu 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.
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.
Como configurar
Selecione mais de um componente na tela. Em seguida, clique sobre um dos componentes selecionados para abrir o menu 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.
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.
Como configurar
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.
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.
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.
Como configurar
Selecione pelo menos um componente na tela (também funciona para componentes agrupados). Em seguida, escolha a opção "Congelar". As bordas do componente ficarão verdes, indicando que o componente está congelado.
A partir de agora, ao navegar pela tela, o componente permanecerá estático na mesma posição.
Como descongelar o componente
Selecione pelo menos um componente na tela (também funciona para componentes agrupados). Depois, selecione a opção "Descongelar". As bordas verdes dos componentes serão desabilitadas, e agora, ao navegar pela tela, o componente acompanhará o fluxo normal de rolagem.
Acesse também:
Comentários
0 comentário
Por favor, entre para comentar.