Mude o layout de uma página criada em Quebecou Rome

Adicione e modifique seu design de layout para mudar a aparência da sua página. Escolha como os componentes são exibidos em uma página por meio de tecnologias de layout da web de Folhas de estilo em cascata (CSS), como Flexbox e Grade CSS.

Antes de Iniciar

Função necessária: ui_builder_admin

Por Que e Quando Desempenhar Esta Tarefa

Os layouts controlam quais contêineres e componentes estão disponíveis em uma página e onde eles estão. As regras CSS se aplicam a eles. Você pode mudar o layout da seguinte forma.

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Construtor de IU.
2. Abra uma experiência para trabalhar ou crie uma experiência selecionando Criar > Experiência.
   Consulte Configure como os usuários interagem com suas aplicações no Construtor de IUpara obter mais informações sobre como criar experiências.
3. Criar ou abra uma página.
4. Selecione Layout .
5. Dependendo do tipo de página, siga um destes procedimentos para selecionar um contêiner para atualizar.

   Tipo de página	Instrução
   Página existente	Selecione o contêiner na página cujo layout você deseja mudar. Nota: Como alternativa, você pode selecionar o contêiner na árvore de conteúdo à esquerda da área da página principal. Quando a estrutura da página está na árvore estruturada, você pode encontrar mais facilmente o contêiner que deseja mudar. Se você tiver muitos componentes e contêineres na árvore de conteúdo, use a barra de pesquisa para encontrar um contêiner específico.
   Nova página	Na árvore de conteúdo à esquerda da área da página principal, selecione Corpo da sua página. Corpo é o elemento raiz da página.

   Se você estiver iniciando uma nova página, poderá selecionar o layout no nível da página e, posteriormente, no nível do contêiner. Se você não for o proprietário de uma página existente, esteja ciente do impacto de mudar o layout no nível da página.
6. Mude o layout do contêiner.
   1. No painel Configuração da página, selecione Layout para selecionar o layout que você deseja usar.

      Você pode mudar o layout atual de uma página existente para uma nova. Por exemplo, em um layout de três colunas, você pode clicar no layout de quatro colunas para mudar o layout.

      Você também pode definir o layout de um contêiner. A imagem a seguir mostra as opções de layout do Construtor de IU.

      

   2. Se você estiver criando uma página, adicione componentes às novas áreas do layout.
   3. Clique em Salvar.
   4. Para exibir e testar sua página, selecione .
   Para mudar uma página existente, o vídeo a seguir mostra como você pode mudar o layout do contêiner de três para quatro colunas e adicionar um novo componente à quarta coluna.

   

   Para definir o layout de uma nova página, o vídeo a seguir mostra como definir o layout desejado para a página. Por exemplo, você pode definir sua página para ter dois slots ou colunas. Em seguida, você pode adicionar contêineres a cada slot e mudar o layout de cada contêiner. Você também pode definir o layout no nível do contêiner depois de adicionar contêineres à sua página.

   Figura 1. Mude o layout de uma página

   

7. Adicione componentes aos slots.
   Você cria sua página com componentes de contêineres. Para obter mais informações, consulte Personalize Construtor de IUpáginas que usam componentes.

   Você pode adicionar componentes usando uma das seguintes maneiras.

   Para adicionar um componente	Faça o seguinte
   Diretamente da sua página (opção 1)	Selecione o ícone de adicionar conteúdo (mais) e selecione Componentes e selecione um componente.
   Diretamente da sua página (opção 2)	Em um layout de coluna ou componente, selecione o ícone Adicionar antes (mais) ou Adicionar depois (mais) e selecione um componente.
   Da árvore de conteúdo	Na árvore de conteúdo, selecione - Adicionar conteúdo e, em seguida, selecione um componente.
   No menu flutuante acima da página	Em um layout de coluna ou componente, selecione o ícone Menu e selecione Adicionar antes ou Adicionar após e selecione um componente.

8. Modifique as opções de estilo de layout de qualquer uma das seguintes maneiras.

   Opção	Instrução
   Mude o estilo do layout	Clique em um contêiner para o qual você deseja mudar o layout. Você pode clicar no contêiner na árvore de conteúdo ou clicar no contêiner na página. No menu flutuante acima da página, clique em Layout . Escolha exibir seu conteúdo como Flexível ou Grade. Para obter mais informações sobre opções flexíveis ou de grade, consulte Usando layouts Flexbox em Construtor de IUou Usando layouts de grade CSS para criar uma página.
   Escolha Flexível	Na lista Exibição, selecione Flexível . Selecione as seguintes opções com base em como você deseja exibir o conteúdo do contêiner na página. As opções também podem ser inseridas na caixa Estilos CSS: Direção flexível: Escolha Linha , Linha-reversa , Coluna , ou Coluna-reversa . Justificar conteúdo: Escolha uma das opções a seguir: Flex-start : Os itens estão no início da direção flexível, semelhante ao conteúdo justificado à esquerda. Esta é a configuração padrão. Flex-end : Os itens estão no final da direção flexível, semelhante ao conteúdo justificado à direita. Espaço entre : Os itens são distribuídos uniformemente. Espaço ao redor : Os itens são distribuídos uniformemente com espaço igual ao redor deles. Uniformemente no espaço : O espaçamento entre os itens é igual. Alinhar itens: Define como você deseja que o conteúdo flexível seja exibido ao longo do eixo cruzado. Estas são as opções: Estique : Estique seu conteúdo para preencher o contêiner. Esta é a configuração padrão. Flex-start : Coloque seu conteúdo no início do eixo cruzado. Flex-end : Coloque seu conteúdo no final do eixo cruzado. Center : Centralize seu conteúdo no eixo cruzado. Linha de base : Alinhe seu conteúdo da mesma forma que o alinhamento da linha de base. Altura: Defina a altura automaticamente ou manualmente. Largura: Defina a altura dos itens do flexbox automaticamente ou manualmente. Margem: Defina a distância mínima entre os itens do flexbox. Preenchimento: Defina o preenchimento para cada lado dos itens do flexbox.
   Selecione Grade	Na lista Exibição, selecione Grade . Preencha as seguintes informações: Altura: Defina a altura automaticamente ou manualmente. Largura: Defina a altura dos itens da grade automaticamente ou manualmente. Margem: Defina a distância mínima entre os itens da grade. Preenchimento: Defina o preenchimento para cada lado dos itens da grade.