Ajuste estilos para criação responsiva

Ao criar páginas com criação responsiva para diferentes fatores de forma, saiba como mudar 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 de aumentar a usabilidade da página é personalizar componentes usando estilos diferentes entre pontos de interrupção. Existem inúmeras 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 de forma menores.

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. Crie uma página do zero com criação responsiva.
   Para obter mais informações sobre como criar uma página, consulte Crie uma página no Construtor de IU .
4. Na parte superior, verifique se o ícone de criação responsiva na área de trabalho está selecionado.
   
5. Na fase, selecione - Adicionar conteúdo .
6. Em Layouts , selecione Coluna única .
7. Adicione o componente de texto estilizado.
   1. Selecione E ícone no centro da coluna na fase.
   2. Em Componentes , localize e selecione Texto estilizado componente.
   3. No painel de configuração, selecione Nenhum - Configure o componente manualmente .
   4. No painel de configuração, no Configurar clique duas vezes (ou use o atalho de teclado) em Texto campo para selecionar o texto padrão.
   5. Insira o texto padrão Central de administração do espaço de operações críticas .

      

   6. Selecione Save (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 Estilos .
   3. Em Espaçamento , selecione Margem .
   4. Selecione Grande na lista.

      

   5. Em Alinhamento , selecione o ícone central.

      

   6. Selecione Save (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 de forma do tablet.

   

   O espaçamento e o tamanho do cabeçalho do componente de texto estilizado parecem bons no tamanho da mesa gráfica.

10. Selecione o ícone do fator de forma móvel.

    

    O componente de texto estilizado usa uma grande quantidade de espaço vertical no tamanho menor.

    

11. Remova o espaço de margem extra e reduza 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 Estilos .
    3. Em Espaçamento , selecione Margem .
    4. Selecione 0 na lista.
    5. Selecione Configurar .
    6. Em Guia HTML , selecione H3 .
    7. Selecione Save (Salvar).
    A fase é atualizada automaticamente, mostrando que o componente de texto estilizado usa menos espaço.

    

12. Selecione os ícones de fator de forma do tablet e desktop na parte superior para confirmar que nenhuma mudança foi feita nos fatores de forma maiores.