Ajustar estilos para criação dinâmica

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é Todos > 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 IU 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.
4. Na parte superior, verifique se o ícone de criação dinâmica da área de trabalho está selecionado.
   
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 a Central de administração do espaço de operações críticas.

      

   6. Selecione Salvar.
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.
   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.

   

   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.

    

    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.
    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.