---
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 estilos para criação dinâmica

# Ajustar estilos 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 alterar as opções de estilo para aumentar a usabilidade 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 usando estilos diferentes em pontos de interrupção. Existem várias opções para editar estilos. Neste procedimento, edite a margem ao redor do componente de texto estilizado e reduza o tamanho do texto para que ele use menos espaço em fatores forma menores.

## 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 de criação dinâmica 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 texto estilizado.
   1. Selecione o ícone + no centro da coluna na fase.
   2. Na guia Componentes, localize e selecione o componente de texto estilizado.
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente.
   4. No painel de configuração, na guia Configurar, clique duas vezes (ou use o atalho do teclado) no campo Texto para selecionar o texto padrão.
   5. Substitua o texto padrão inserindo <kbd class="ph userinput">a Central de administração do espaço de operações críticas</kbd>.  
   6. Selecione Salvar.
   {#responsive-authoring-adjust-styles__substeps_z3n_1cn_5bc}
8. Adicione algum espaço ao redor do componente de texto estilizado e centralize-o.
   1. Na árvore de conteúdo, selecione Texto estilizado 1.
   2. No painel de configuração, selecione a guia Estilos.
   3. Em Espaçamento, selecione Margem.
   4. Selecione Grande na lista.  
   5. Em Alinhamento, selecione o ícone central.  
   6. Selecione Salvar.

   {#responsive-authoring-adjust-styles__substeps_zt1_dym_5bc}  
   A fase é atualizada automaticamente, mostrando o espaço em branco adicional ao redor do componente de texto estilizado e centralizando-o.
9. 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 o tamanho do título do componente de texto estilizado ficam bem no tamanho do tablet.
10. 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.]()

    O componente de texto estilizado usa muito espaço vertical no tamanho menor.

11. Remova o espaço de margem extra e diminua o título apenas para o fator de forma móvel.
    1. Na árvore de conteúdo, selecione Texto estilizado 1.
    2. No painel de configuração, selecione a guia Estilos.
    3. Em Espaçamento, selecione Margem.
    4. Selecione 0 na lista.
    5. Selecione a guia Configurar.
    6. Na guia HTML, selecione H3.
    7. Selecione Salvar.

    {#responsive-authoring-adjust-styles__substeps_mf2_tzm_5bc}  
    A fase é atualizada automaticamente, mostrando que o componente de texto estilizado usa menos espaço.

12. Selecione o tablet e os ícones de fator de forma da área de trabalho na parte superior para confirmar que nenhuma mudança foi feita nos fatores de forma maiores.