Elementos - Cabeçalho

Os níveis de cabeçalho estabelecem uma hierarquia que organiza o conteúdo e ajuda os mecanismos de pesquisa a indexarem cada página. Use o tipo de conteúdo Cabeçalho no Page Builder estágio para adicionar um contêiner de texto com um nível de cabeçalho de H1 a H6 ao estágio. Os títulos são formatados de acordo com a folha de estilos associada ao tema atual.

O campo Cabeçalho do Conteúdo na seção Content ​pode ser usado para adicionar um cabeçalho H1 à parte superior da página. No entanto, o campo é herdado das versões Commerce anteriores e é fornecido para dar suporte a conteúdo mais antigo. Este campo não aproveita os recursos avançados do Page Builder. É recomendável deixar o campo Cabeçalho do Conteúdo em branco e usar o tipo de conteúdo Cabeçalho Page Builder para adicionar cabeçalhos de qualquer nível à página.

O exemplo a seguir mostra como o Cabeçalho de conteúdo e o tipo de conteúdo Cabeçalho aparecem quando formatados pelo tema Luma.

Níveis de Cabeçalho e Cabeçalho de Conteúdo na loja {width="700" modal="regular"}

Você pode arrastar um cabeçalho da seção Elementos do painel Page Builder para uma linha, coluna ou conjunto de guias no estágio. O nível do cabeçalho e o alinhamento podem ser controlados na barra de ferramentas do editor no palco ou usando o controle Configurações ( Ícone de configurações {width="20"} ).

NOTE
Se você estiver fazendo alterações significativas no conteúdo de Page Builder, é recomendável aumentar o Tempo de Vida da Sessão de Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Editor de cabeçalho

Editor de cabeçalho com a barra de ferramentas {width="500" modal="regular"}

Caixa de ferramentas do contêiner de cabeçalho

Como em todos os contêineres de conteúdo, a caixa de ferramentas aparece quando você passa o mouse sobre o contêiner.

Caixa de ferramentas do contêiner de cabeçalho {width="500" modal="regular"}

Ferramenta
Ícone
Descrição
Mover
Ícone Mover {width="25"}
Move o container de cabeçalho para outro local válido na página.
(rótulo)
Cabeçalho
Identifica o contêiner atual como um cabeçalho.
Configurações
Ícone de configurações {width="25"}
Abre a página Editar cabeçalho, onde é possível alterar as propriedades do container.
Ocultar
Ícone Ocultar {width="25"}
Oculta o contêiner de cabeçalho.
Mostrar
Mostrar ícone {width="25"}
Mostra o contêiner de cabeçalho oculto.
Duplicar
Ícone duplicado {width="25"}
Faz uma cópia do contêiner de cabeçalho.
Remover
Ícone Remover {width="25"}
Exclui o contêiner de cabeçalho e seu conteúdo do estágio.
NOTE
Os elementos ocultos são armazenados no banco de dados e invisíveis para os clientes. No entanto, esses elementos são visíveis para mecanismos de pesquisa e outros bots que rastreiam seu site. Eles também são retornados como parte do conteúdo, se solicitado por meio de uma chamada de API com um atributo de invisibilidade, a menos que você os remova do estágio.

Adicionar um cabeçalho

  1. No painel Page Builder, expanda Elements e arraste um espaço reservado Heading para uma linha, coluna ou conjunto de guias no estágio.

    Arrastando um cabeçalho para o estágio {width="600" modal="regular"}

  2. No editor, insira o texto do cabeçalho sobre o espaço reservado Edit Heading Text.

    Por padrão, o texto de cabeçalho recebe um tipo de cabeçalho de nível dois (H2).

    Espaço reservado no editor de cabeçalho {width="500" modal="regular"}

  3. Na barra de ferramentas, escolha o tipo de cabeçalho apropriado entre H1 e H6.

  4. Altere o alinhamento, se necessário.

Editar configurações de cabeçalho

  1. Passe o mouse sobre o contêiner de cabeçalho para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações {width="20"} ).

    Caixa de ferramentas de cabeçalho {width="500" modal="regular"}

  2. Atualize o conteúdo do cabeçalho (Heading Type e Heading Text), se necessário.

    Você também pode atualizar esse conteúdo no editor de cabeçalho.

  3. Atualize as configurações de Advanced ​conforme necessário.

    • Para controlar o posicionamento do cabeçalho no contêiner pai, escolha um Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Opção Descrição
      Default Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
      Left Alinha a lista ao longo da borda esquerda do contêiner principal, com permissão para qualquer preenchimento especificado.
      Center Alinha a lista no centro do contêiner pai, com permissão para qualquer preenchimento especificado.
      Right Alinha o bloco ao longo da borda direita do contêiner principal, com permissão para qualquer preenchimento especificado.
    • Defina o estilo Border aplicado a todos os quatro lados do contêiner de cabeçalho:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      Opção Descrição
      Default Aplica o estilo de borda padrão especificado pela folha de estilos associada.
      None Não fornece nenhuma indicação visível das bordas do contêiner.
      Dotted A borda do contêiner aparece como uma linha pontilhada.
      Dashed A borda do contêiner aparece como uma linha tracejada.
      Solid A borda do contêiner aparece como uma linha sólida.
      Double A borda do contêiner aparece como uma linha dupla.
      Groove A borda do contêiner é exibida como uma linha com ranhura.
      Ridge A borda do contêiner aparece como uma linha estriada.
      Inset A borda do contêiner aparece como uma linha interna.
      Outset A borda do contêiner aparece como uma linha de saída.
    • Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Opção Descrição
      Border Color Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
      Border Width Insira o número de pixels para a largura da linha de borda.
      Border Radius Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.
    • (Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner.

      Separe vários nomes de classe com um espaço.

    • Insira valores, em pixels, para que Margins and Padding determine as margens externas e o preenchimento interno do contêiner de cabeçalho.

      Insira os valores correspondentes no diagrama.

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Área de contêiner Descrição
      Margins A quantidade de espaço em branco aplicada à borda externa de todos os lados do container. Opções: Top / Right / Bottom / Left
      Padding A quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner. Opções: Top / Right / Bottom / Left
  4. Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Duplicar um cabeçalho

Para um cabeçalho formatado com configurações específicas, é mais eficiente duplicar o cabeçalho, em vez de começar novamente com um novo espaço reservado.

  1. Passe o mouse sobre o contêiner de cabeçalho para exibir a caixa de ferramentas e escolha o ícone Duplicar ( Duplicar ícone {width="20"} ).

    A duplicata é exibida logo abaixo do original.

    Duplicando um contêiner de cabeçalho {width="500" modal="regular"}

  2. Passe o mouse sobre o novo contêiner de cabeçalho para exibir a caixa de ferramentas e escolha o ícone Mover ( Ícone Mover {width="20"} ).

    Movendo um cabeçalho {width="500" modal="regular"}

  3. Selecione e arraste o cabeçalho até que a linha de guia vermelha marque a nova posição.

    As bordas superior e inferior de cada contêiner são exibidas como linhas tracejadas enquanto o cabeçalho é movido.

    Movendo o cabeçalho duplicado para a posição {width="500" modal="regular"}

  4. Se quiser alterar o nível do cabeçalho, clique no texto do cabeçalho e escolha o novo nível na barra de ferramentas do editor.

    Escolhendo um novo nível de cabeçalho {width="500" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d