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.
{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 ( {width="20"} ).
Editor de cabeçalho
{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.
{width="500" modal="regular"}
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"}