Elementos: encabezado
Los niveles de encabezado establecen una jerarquía que organiza el contenido y ayuda a los motores de búsqueda a indexar cada página. Use el tipo de contenido Encabezado en la Page Builder fase para agregar un contenedor de texto con un nivel de encabezado de H1 a H6 a la fase. El formato de los encabezados depende de la hoja de estilos asociada al tema actual.
El campo Encabezado de contenido de la sección Content se puede usar para agregar un encabezado H1 a la parte superior de la página. Sin embargo, el campo es un heredado de versiones anteriores de Commerce y se proporciona para admitir contenido antiguo. Este campo no aprovecha las características avanzadas de Page Builder. Se recomienda dejar en blanco el campo Encabezado de contenido y utilizar el tipo de contenido Encabezado Page Builder para agregar encabezados de cualquier nivel a la página.
El siguiente ejemplo muestra cómo aparecen el encabezado de contenido y el tipo de contenido de encabezado cuando se les aplica formato mediante la temática de Luma.
Puede arrastrar un encabezado desde la sección Elementos del panel Page Builder hasta una fila, columna o conjunto de pestañas del escenario. El nivel de encabezado y la alineación se pueden controlar desde la barra de herramientas del editor en el escenario o mediante el control Settings (
Editor de encabezado
Cuadro de herramientas Contenedor de encabezado
Al igual que con todos los contenedores de contenido, la caja de herramientas aparece al pasar el ratón por encima del contenedor.
Añadir un encabezado
-
En el panel Page Builder, expanda Elements y arrastre un marcador de posición Heading a una fila, columna o conjunto de pestañas en el escenario.
{width="600" modal="regular"}
-
En el editor, escriba el texto del encabezado sobre el marcador de posición
Edit Heading Text.De forma predeterminada, al texto del encabezado se le asigna un tipo de encabezado de nivel dos (H2).
{width="500" modal="regular"}
-
En la barra de herramientas, elija el tipo de encabezado adecuado entre H1 y H6.
-
Cambie la alineación si es necesario.
Editar configuración de encabezado
-
Pase el ratón sobre el contenedor del encabezado para ver la caja de herramientas y elija el icono Configuración (
{width="20"} ).
{width="500" modal="regular"}
-
Actualice el contenido del encabezado (Heading Type y Heading Text) si es necesario.
También puede actualizar este contenido en el editor de encabezados.
-
Actualice la configuración de Advanced según sea necesario.
-
Para controlar el posicionamiento del encabezado dentro del contenedor principal, elija un Alignment:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Opción Descripción DefaultAplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual. LeftAlinea la lista a lo largo del borde izquierdo del contenedor principal, con margen para cualquier relleno que se especifique. CenterAlinea la lista en el centro del contenedor principal, con margen para cualquier relleno que se especifique. RightAlinea el bloque a lo largo del borde derecho del contenedor principal, con margen para cualquier relleno que se especifique. -
Establezca el estilo Border aplicado a los cuatro lados del contenedor de encabezado:
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 Opción Descripción DefaultAplica el estilo de borde predeterminado especificado por la hoja de estilos asociada. NoneNo proporciona ninguna indicación visible de los bordes del contenedor. DottedEl borde del contenedor aparece como una línea de puntos. DashedEl borde del contenedor aparece como una línea discontinua. SolidEl borde del contenedor aparece como una línea sólida. DoubleEl borde del contenedor aparece como una línea doble. GrooveEl borde del contenedor aparece como una línea ranurada. RidgeEl borde del contenedor aparece como una línea discontinua. InsetEl borde del contenedor aparece como una línea de margen. OutsetEl borde del contenedor aparece como una línea de inicio. -
Si establece un estilo de borde distinto de
None, complete las opciones de visualización de borde:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Opción Descripción Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente. Border Width Introduzca el número de píxeles de la anchura de la línea del borde. Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde. -
(Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor.
Separe los distintos nombres de clase con un espacio.
-
Escriba valores, en píxeles, para que Margins and Padding determine los márgenes externos y el margen interno del contenedor de encabezado.
Introduzca los valores correspondientes en el diagrama.
table 0-row-2 1-row-2 2-row-2 layout-auto Área del contenedor Descripción Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor. Opciones: Top/Right/Bottom/LeftPadding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor. Opciones: Top/Right/Bottom/Left
-
-
Una vez finalizado, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.
Duplicación de un encabezado
Para un encabezado con formato y con una configuración específica, es más eficaz duplicarlo, en lugar de empezar de nuevo con un nuevo marcador de posición.
-
Pase el ratón sobre el contenedor del encabezado para mostrar la caja de herramientas y elija el icono Duplicar (
{width="20"} ).
El duplicado aparece justo debajo del original.
{width="500" modal="regular"}
-
Pase el ratón sobre el nuevo contenedor de encabezados para mostrar la caja de herramientas y elija el icono Mover (
{width="20"} ).
{width="500" modal="regular"}
-
Seleccione y arrastre el encabezado hasta que la guía roja marque la nueva posición.
Los bordes superior e inferior de cada contenedor aparecen como líneas discontinuas mientras se mueve el encabezado.
{width="500" modal="regular"}
-
Si desea cambiar el nivel de encabezado, haga clic en el texto del encabezado y elija el nuevo nivel en la barra de herramientas del editor.
{width="500" modal="regular"}