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.
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 ( {width="20"} ).
Editor de cabeçalho
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.
Adicionar um cabeçalho
-
No painel Page Builder, expanda Elements e arraste um espaço reservado Heading para uma linha, coluna ou conjunto de guias no estágio.
{width="600" modal="regular"}
-
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).
{width="500" modal="regular"}
-
Na barra de ferramentas, escolha o tipo de cabeçalho apropriado entre H1 e H6.
-
Altere o alinhamento, se necessário.
Editar configurações de cabeçalho
-
Passe o mouse sobre o contêiner de cabeçalho para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).
{width="500" modal="regular"}
-
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.
-
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
-
-
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.
-
Passe o mouse sobre o contêiner de cabeçalho para exibir a caixa de ferramentas e escolha o ícone Duplicar ( {width="20"} ).
A duplicata é exibida logo abaixo do original.
{width="500" modal="regular"}
-
Passe o mouse sobre o novo contêiner de cabeçalho para exibir a caixa de ferramentas e escolha o ícone Mover ( {width="20"} ).
{width="500" modal="regular"}
-
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.
{width="500" modal="regular"}
-
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.
{width="500" modal="regular"}