---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Ajustar layout para criação dinâmica

# Ajustar layout para criação dinâmica {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Ao criar páginas com autoria dinâmica para diferentes fatores forma, saiba como ajustar o layout para melhorar a aparência da página em tamanhos menores.

## Antes de Iniciar

Função necessária: ui_builder_admin

## Por Que e Quando Desempenhar Esta Tarefa

Um método para aumentar a usabilidade da página é personalizar os componentes, ajustando o layout entre os pontos de interrupção. Existem várias opções para ajustar o layout. Neste procedimento, ajuste o layout do componente de guias para o fator forma móvel.  
A maioria das opções de layout de coluna no painel de propriedades pode ser editada para diferentes fatores forma. No entanto, as seguintes opções têm valores globais em todos os fatores forma:

* Número de colunas
* OpçãoEmpilhar colunas abaixo (pixels)
* Todas as opções em Acessibilidade
{#responsive-authoring-adjust-layout__ul_kgd_xdp_lcc}

## Procedimento

1. Navegar até TodosEstrutura do Now ExperienceConstrutor 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 IU](https://servicenow-prod.fluidtopics.net/lLqYhwc21ggWGJvxakpXWA "Saiba o que é uma experiência em Construtor de IU. Entenda o que uma experiência contém.") para obter mais informações sobre como criar experiências.
3. Crie uma página do zero com a criação dinâmica.  
   Para obter mais informações sobre como criar uma página, consulte [Criação de uma página no Construtor de IU](https://servicenow-prod.fluidtopics.net/oXLwDAYTDqDRVYtO2ECqbg "Crie uma página em Construtor de IU para um portal, espaço ou aplicação personalizada para que você possa criar uma experiência na Web para seus usuários.").
4. Na parte superior, verifique se o ícone do fator forma da área de trabalho está selecionado.  
   ![Seta preta apontando para o ícone do fator forma da área de trabalho na parte superior de uma página do Construtor de IU na exibição do editor.]()
5. Na fase, selecione + Adicionar conteúdo.
6. Na guia Layouts, selecione Coluna única.
7. Adicione o componente de guias.
   1. Selecione o ícone + no centro da coluna na fase.
   2. Na guia Componentes, localize e selecione o componente Guias.
   3. Selecione Salvar.
   {#responsive-authoring-adjust-layout__substeps_am5_1rv_sbc}
8. No painel de configuração, na guia Configurar, edite o nome da primeira guia selecionando o ícone de edição.  
9. Em Rótulo da guia, insira <kbd class="ph userinput">Guia 1</kbd>.
10. Em ID da guia, insira <kbd class="ph userinput">tab_1</kbd>
11. Selecione Salvar.
12. Adicione uma segunda guia.
    1. Na guia Configurar, selecione + Adicionar ao lado de Guias.
    2. Selecione Iniciar a partir de um contêiner vazio e Avançar.
    3. Em Rótulo da guia, insira <kbd class="ph userinput">Guia 2</kbd>.
    4. Verifique se o ID da guia foi preenchido automaticamente com tab_2.  
    5. Selecione Criar.
    {#responsive-authoring-adjust-layout__substeps_z3n_1cn_5bc}
13. Adicione uma terceira guia repetindo a etapa 12 e, no 12c, nomeie a guia <kbd class="ph userinput">Guia 3</kbd>.
14. Verifique se a árvore de conteúdo e a página estão precisas.  
15. Selecione o ícone do fator forma do tablet.  
    ![Seta preta apontando para o ícone do fator forma do tablet na parte superior de uma página do Construtor de IU na exibição do editor.]()

    O espaçamento e a posição das guias ficam bem na largura do tablet.
16. Selecione o ícone do fator forma móvel.  
    ![Seta preta apontando para o ícone do fator forma móvel na parte superior de uma página do Construtor de IU na exibição do editor.]()

    As guias ocupam mais espaço no tamanho menor.

17. Mude o layout das guias apenas para o tamanho móvel.
    1. Na árvore de conteúdo, selecione Coluna 1 em Layout de coluna 1.
    2. No painel de configuração, em Direção, selecione o ícone de linha.  
    3. Selecione Salvar.

    {#responsive-authoring-adjust-layout__substeps_mf2_tzm_5bc}  
    A fase é atualizada automaticamente, mostrando que a guia 1 está visível e que há um novo menu suspenso.

18. Selecionar Exibição.
19. Selecione Mais.  
    As outras duas guias estão disponíveis.

20. Selecione os ícones de fator forma da área de trabalho e do tablet para ver se o menu suspenso Mais não aparece.
21. Selecione o X para fechar a sobreposição de visualização.