As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Configurar layouts de colunas, cores e definições de dados em uma visualização
Este tópico explica como configurar layouts de colunas, cores e campos de dados dinâmicos no construtor de interface de usuário do Amazon Connect para personalizar visualizações para agentes da central de atendimento.
No construtor de interface do usuário, o painel **Personalizar** está localizado no lado direito, conforme mostrado na imagem a seguir.
Use o painel **Personalizar** para definir:
+ Configurações globais para todo o recurso de visualização.
+ Configurações locais no nível do componente. Cada componente tem seu próprio conjunto de propriedades.
Use o painel **Personalizar** para definir uma variedade de configurações para a visualização, incluindo:
+ Layouts de colunas
+ Cores
+ Mapeamento dinâmico de dados
+ Dados de exemplo
+ Definições de dados estáticos
## Configurar layouts e cores globais para uma visualização
Para definir configurações globais, navegue até o painel **Personalizar** e escolha o ícone de configurações globais, conforme mostrado na imagem a seguir.
Use as configurações globais para definir o layout e as cores gerais da sua visualização:
+ Use a seção **Alinhamento** para especificar a localização relativa dos componentes à esquerda, no centro ou à direita da visualização.
+ Escolha três campos de cores:
+ Cor primária
+ Cor secundária
+ Cor neutra
Cada componente na visualização aplica essas configurações por padrão. No entanto, ao personalizar um componente, você pode substituir essas configurações globais de cores.
## Colunas de layout
O recurso de exibição usa um padrão flexbox com 12 colunas. Os componentes ocupam uma posição relativa entre si. Eles não são colocados na tela de maneira perfeita em termos de pixels. Isso permite que a visualização seja ampliada ou reduzida de forma responsiva, sem perder a composição da visualização.
Nas configurações globais, você pode determinar como deseja agrupar as colunas. Por exemplo, na seção **Coluna**, você pode dividir a visualização em duas seções de seis colunas cada, conforme mostrado na imagem a seguir.
A imagem a seguir mostra um exemplo de como esse layout seria exibido para um atendente.
Você também pode usar o controle deslizante **Personalizar** para alterar as proporções desses agrupamentos. Por exemplo, você pode defini-lo para que o lado esquerdo da visualização tenha quatro colunas e o lado direito tenha oito, conforme mostrado na imagem a seguir:
A imagem a seguir mostra um exemplo de como esse layout seria exibido para o usuário.
