El encabezado es la parte de su sitio que contiene el logotipo y la navegación. Hay muchas maneras diferentes de controlar el estilo de su encabezado, las que le ayudan a crear un encabezado atractivo para su sitio.
En Editor 2.0, el encabezado predeterminado ofrece diseños prefabricados, lo que minimiza el riesgo de cambios accidentales. Los usuarios pueden elegir diseños con acciones limitadas, lo que garantiza una experiencia de diseño enfocada y eficiente. También está disponible una opción de edición avanzada para los usuarios que buscan más personalización, lo que permite agregar widget o elementos adicionales más allá de los diseños prefabricados. Para obtener más información, consulte Edición avanzada de encabezados.
El encabezado reductor es una versión más pequeña del encabezado del sitio, lo que le permite mantener fija la información de navegación importante sin distraer a los usuarios a medida que se desplazan hacia abajo en una página y sin ocupar demasiado espacio. Actúa como una función de encabezado pegajoso, pero condensa el tamaño de los logotipos y el tamaño general del encabezado. Es particularmente útil en sitios que tienen encabezados grandes y sitios que están diseñados para desplazamientos largos.
Nota
El encabezado reducido está disponible en desktop y solo para tabletas cuando se utiliza el diseño de encabezado de barra superior.
Para habilitar un encabezado de reducción en el Editor tradicional:
-
hover sobre el encabezado, haga clic en Encabezado y, a continuación, haga clic en Editar diseño.
-
En la pestaña Encabezado de reducción, haga clic en el botón de alternancia Habilitar encabezado de reducción . Tiene las siguientes opciones:
-
Mostrar solo fila de navegación. Solo muestra la fila con navegación cuando el encabezado se reduce. Esta función solo es aplicable si hay más de una fila en el encabezado.
-
Color de fondo. Cambie el color de fondo del encabezado que se reduce. Tenga en cuenta que el color de fondo de la fila anula el color de fondo del encabezado que se reduce.
-
Más colores de encabezado en el desplazamiento. Especifique los colores del texto, el enlace seleccionado y hover, los iconos, el texto de los botones, etc.
-
Tamaño del logotipo. Cambie el tamaño al que se reduce el logotipo o la imagen cuando se reduce el encabezado (el valor predeterminado es 66%).
-
Cambiar el logotipo en el desplazamiento. Seleccione un logotipo para mostrarlo en el desplazamiento.
-
Espaciado de encabezado. Ajuste el relleno superior e inferior del cabezal de contracción. Puede cambiar el espaciado de encabezado por dispositivo.
-
Una vez habilitado el encabezado de reducción, ocurre lo siguiente:
-
El espaciado del encabezado cambia el relleno superior/inferior y el margen a 0. Esto no se aplica a las filas dentro del encabezado.
-
Las imágenes del encabezado se reducen al porcentaje indicado en la barra de tamaño de logotipo (el valor predeterminado es 66%).
-
Para manejar plantillas con un valor de altura mínima en el encabezado, la altura mínima del encabezado se establece en auto.
-
Si hay filas vacías con columnas, las columnas abarcan todo el espacio de la fila.
-
Las propiedades de diseño de las filas anulan las propiedades del encabezado minimizado. Por ejemplo, si usted establece un fondo de fila en el encabezado, el fondo de fila se muestra sobre el fondo del encabezado minimizado.
-
Se muestran filas vacías en el encabezado minimizado.
-
Si no puede ver el encabezado minimizado, puede deberse a que no tiene suficientes filas para poder desplazarse hacia abajo en el sitio y activar el encabezado minimizado. Si solo tiene una fila en la página, el sitio no se desplazará.
No todas las widget son compatibles y aparecen en el encabezado de contracción. Si tiene un widget en el encabezado que no es compatible con el encabezado que se reduce, aparece una columna vacía en lugar del widget. No se pueden editar widget cuando el encabezado está reducido.
Los siguientes widget son compatibles y se mostrarán en un encabezado reductor tanto para el Editor tradicional como para el Editor 2.0:
-
Navegación
-
Multilingüe
-
Iconos Sociales
-
Botón Clic para llamar
-
Botón OpenTable
-
Botón Clic para correo electrónico
-
vCita
-
Botón PayPal
-
Botón me gusta para Facebook
-
Imágenes y logotipos
-
Carrito de compras
-
Widget de párrafo
-
Título widget
-
Botones
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como Editor All-Flex. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio .
La función Scroll on Header de Editor 2.0 mantiene los elementos de navegación esenciales, como el logotipo y el menú, visibles en la parte superior de la pantalla a medida que los usuarios se desplazan hacia abajo en la página. Condensa los logotipos y el tamaño general del encabezado para ahorrar espacio y garantizar un fácil acceso a la navegación sin ser intrusivo. Ideal para sitios con encabezados grandes o aquellos diseñados para un desplazamiento prolongado, mejora la experiencia del usuario al mantener la accesibilidad a las opciones de navegación clave.
Es importante tener en cuenta que el encabezado adhesivo ya debe estar habilitado antes de que se habilite el desplazamiento en el encabezado.
Para habilitar el desplazamiento en el encabezado:
-
hover sobre el encabezado y haga clic en Encabezado.
-
Haga clic en Editar diseño. Aparecerá el panel Diseño de encabezado.
-
Expanda la sección Posición y habilite la opción Establecer como encabezado fijo si aún no está habilitada.
-
Habilite el botón de alternancia Cambiar encabezado en el desplazamiento .
-
Configure las siguientes opciones de diseño:
-
Acolchado. Establezca los valores iniciales de los encabezados padding-top y padding-bottom (esto no es específico de la opción de encabezado pegajoso).
-
BG en el desplazamiento. Selecciona el color de fondo y la opacidad. Los cambios realizados en cualquier tamaño de pantalla afectarán a los demás.
-
Espaciado en el desplazamiento. Defina el relleno superior e inferior en px,%, vh o vw. Si desea anular la configuración de tamaño de pantalla desktop , puede realizar ediciones en tabletas y dispositivos móviles.
-
Tamaño del logotipo. Emplee el control deslizante o el cuadro de texto para especificar el tamaño al que se reduce el logotipo cuando el encabezado se reduce al desplazar. El valor predeterminado es 66%. Los cambios deben realizar en tamaños de pantalla individuales.
-
Los cambios realizados en la sección Diseño del panel Diseño de encabezado no afectan a la configuración de posición.
En Editor 2.0, tiene la flexibilidad de configurar su encabezado para que se superponga con el contenido de la primera parte de la página. Esto puede crear un efecto visualmente atractivo en el que el encabezado se integra a la perfección con el contenido. Si lo desea, puede configurar el encabezado para que se superponga a la primera fila. Esto debe estar habilitado por página.
Para habilitar el encabezado superpuesto con la primera fila:
-
hover sobre el encabezado y haga clic en Encabezado.
-
Haga clic en Editar diseño. Aparecerá el panel Diseño de encabezado.
-
Expanda la sección Posición y habilite el botón de alternancia para Superponer 1ª sección en la página.
-
(Opcional) Configure un color de fondo que se aplicará a todos los tamaños de pantalla.
Un encabezado fijo se vuelve estático y permanece en su lugar cuando te desplazas por las páginas de tu sitio.
Nota
Los encabezados de los dispositivos móviles siempre son fijos de forma predeterminada.
Para habilitar un encabezado fijo:
-
hover sobre el encabezado, haga clic en Encabezado y, a continuación, haga clic en Editar diseño.
-
En la pestaña Contenido , seleccione Establecer como encabezado permanente. Si la opción de Encabezado fijo no está disponible, debe deshabilitar el botón de alternancia para Encabezado encogido en la pestaña Encabezado encogido.
Hay varios diseños de encabezado flexibles prediseñados para seleccionar. Si cambia a uno de los diseños de cabecera flexibles prediseñados, no puede volver a una cabecera fija, sólo puede cambiar entre otros diseños de cabecera flexibles. Al cambiar los diseños, también se elimina el contenido existente de la sección del encabezado. Recomendamos crear una copia de seguridad antes de cambiar de diseño.
Para cambiar el diseño del encabezado:
-
hover sobre el encabezado y haga clic en Encabezado.
-
En la pestaña Diseño , seleccione un nuevo diseño de encabezado. Si está cambiando a un encabezado fijo, primero debe deshabilitar el interruptor para Encabezado encogido en la pestaña Encabezado encogido.
Para acceder al menú de diseño de encabezado en Editor tradicional, hover sobre el encabezado, haga clic en Encabezado y, a continuación, haga clic en la pestaña Diseño .
Para acceder al menú de diseño del encabezado en el Editor 2.0, hover el cursor sobre el encabezado, haga clic en Encabezado y luego en Editar diseño. El panel de diseño se abrirá en el lateral del lienzo. Contiene las siguientes opciones de diseño:
-
Diseño: Explora las opciones de diseño que combinan los estilos de navegación superior y hamburguesa de forma coherente en todos los tamaños de pantalla. Si bien los diseños predeterminados tienen capacidades limitadas, una opción de edición avanzada mejora la flexibilidad.
-
Espaciado: Establezca márgenes y relleno, con cambios en el desktop que afecten a otros tamaños de pantalla si su espaciado permanece inalterado.
-
Fondo: Elige el color de fondo o la imagen, agrega bordes o sombras y observa cómo los cambios se reflejan sin problemas en todos los tamaños de pantalla.
-
Posición: habilite un encabezado fijo con cambios basados en desplazamiento. La activación de encabezados fijos en cualquier tamaño de pantalla influye en el comportamiento de los demás.
Si el encabezado contiene una imagen, el logotipo del sitio se mantendrá al cambiar entre diseños de encabezado. En caso de que haya más de una imagen o el logotipo sea textual, la imagen del logotipo se mantiene como en el diseño. Es importante tener en cuenta que los encabezados entre dispositivos no están conectados, por lo que si añade un logotipo en el desktop no se agrega automáticamente a los otros tipos de dispositivos. La única excepción es si el diseño del encabezado de la barra superior se utiliza en la tableta, heredará cualquier cambio de logotipo realizado en el desktop.
Si elimina el logotipo, para volver a añadir la imagen, arrastre el elemento de imagen nuevamente al encabezado y configure el enlace para volver a la página de inicio.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio .
Puede agregar un menú expandible en sus sitios de desktop y tabletas, lo que facilita la creación de sitios modernos que tienen una gran flexibilidad de diseño. Elija entre varios diseños de menú expandibles y personalícelos como desee, agregue widget, filas y columnas.
El diseño de menú expandible para dispositivos móviles ofrece más personalización y una forma de mostrar widget en el encabezado y un menú que siempre está visible.
Puede cambiar el diseño del encabezado a un diseño predefinido que incluya botones, clic para llamar, store carrito, íconos sociales y más. Puedes agregar cualquier widget al menú desplegable desde el panel widget .
Para seleccionar y configurar un encabezado y un diseño de menú expandible para desktop y tableta:
-
En el panel lateral, haz clic en Tema y, a continuación, en Diseño del sitio.
-
En la sección desktop , seleccione el diseño de menú Expandible.
-
En la sección Tableta , seleccione el diseño de menú Expandible .
-
Luego de seleccionar el diseño de menú expandible, se muestra un icono de hamburguesa en el encabezado del sitio. Haga clic en el icono de hamburguesa (
) para ver el menú expandible.
-
En la pestaña Diseño , haga clic en el diseño existente para seleccionar un diseño de menú.
-
En la pestaña Estilo, tiene las siguientes opciones:
-
Entrar desde. Seleccione Superior o Lateral.
-
Efecto de entrada. Seleccione Cubrir o Empujar.
-
Ancho. Mueva el control deslizante para establecer el ancho del menú expandible cuando se expande. El ancho del menú se define en porcentajes para adaptar a todos los tamaños de pantalla.
-
Antecedentes. Configure el color de fondo o la imagen.
-
Cerrar el color del icono. Seleccione un color para el icono de cierre y el color de fondo del icono de cierre.
-
-
En la pestaña Espaciado , cambie el relleno.
El menú expandible puede tener hasta 3 filas, y cada una se personaliza completamente. Si los sitios para Escritorio y tableta tienen la misma disposición (ambos expandibles o de barra superior), todas las personalizaciones son iguales para ambos. En caso de que sean diferentes, cada dispositivo se debe definir por separado.
Para editar la ubicación del menú expandible en el encabezado:
-
hover sobre el encabezado, haga clic en Encabezado y, a continuación, seleccione Editar diseño.
-
En la sección Diseño , haga clic en Izquierda o Derecha.
Para seleccionar y configurar un encabezado y un diseño de menú expandible para dispositivos móviles:
-
hover sobre el encabezado, haga clic en la etiqueta Encabezado y, a continuación, seleccione Editar diseño.
-
En la pestaña Diseño , haga clic en el diseño existente para seleccionar un diseño de menú. El encabezado móvil ofrece diseños que muestran widget como enlaces sociales, números de teléfono y más. Los diseños de encabezado son fijos, por lo que no puede agregar nuevos widget, pero puede editarlos o eliminarlos. Al agregar un store o emplear la función multilingüe, hay más opciones de diseño disponibles que incluyen los iconos para el carrito de envío store y la función multilingüe. Si no tiene habilitada la store o el multilingüe, estos diseños no aparecen.
-
Haga clic en Izquierda o Derecha para la posición del icono Menú.
-
Si aún no lo hizo, abra el menú en la vista móvil. Esto permite que se abra el editor de menú para que pueda editar el menú expandible.
-
En la pestaña Diseño , haga clic en el diseño existente para seleccionar un diseño de menú. El menú expandible ofrece múltiples diseños que pueden mostrar los enlaces sociales, la información de contacto y más. Puede agregar cualquier widget al menú expandible, agregar columnas, ordenar las columnas para que estén una al lado de la otra o una encima de la otra. Sin embargo, cuando cambia de un diseño a otro, elimina todo el contenido que agregó al menú, tomando solo el widget en el diseño elegido.
-
En la pestaña Estilo , tiene las siguientes opciones:
-
Entrar desde. Seleccione Superior o Lateral. Cuando se selecciona Superior, mueva el control deslizante de altura. Cuando se selecciona Lado, mueva el control deslizante de ancho.
-
Efecto de entrada. Seleccione Cubrir o Empujar.
-
Nota
No se pueden agregar widget adicionales al encabezado móvil.
Nota
Esta información es específica del Editor tradicional y no es relevante para el Editor 2.0 (antes conocido como Editor All-Flex). Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio .
Para mostrar los elementos de encabezado sobre las imágenes principales, hover sobre el encabezado, haga clic en Encabezado, haga clic en la pestaña Diseño y, a continuación, haga clic en Superponer primera fila. Esto le da más visibilidad a sus imágenes principales y facilita el diseño de sitios modernos y atractivos.
Tenga en cuenta lo siguiente:
-
Para el encabezado. Establezca el color de fondo en transparente o en un color con opacidad.
-
Para la primera fila. Emplee un relleno superior que sea igual o similar a la altura del encabezado.
Nota
Para mayor flexibilidad, esta configuración solo se aplica a la página actual. Para habilitarlo en otras páginas, navegue a cada página y siga los pasos anteriores.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como Editor All-Flex. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio .
Se puede habilitar la edición avanzada para que la cabecera acceda a más opciones de personalización, como la posibilidad de agregar más widget y elementos. Al cambiar el diseño del encabezado (en el panel Diseño del encabezado), se restablecerán los cambios realizados y se deshabilitará la edición avanzada.
Nota
Debido a que los encabezados se sincronizan en todos los tamaños de pantalla, se recomienda verificar todos los tamaños de pantalla cuando se use la opción de edición avanzada.
Cuando se emplea la edición avanzada, se recomienda comprobar todos los tamaños de pantalla debido a la sincronización de encabezados.
Para habilitar la edición avanzada:
-
Haga clic en la pestaña Encabezado .
-
Haga clic en Editar diseño.
-
En la sección Diseño, haga clic en Habilitar edición avanzada.
Si planea mostrar diferentes elementos en desktop y dispositivos móviles (por ejemplo, un botón en desktop y un ícono en dispositivos móviles), emplee la función de ocultar/mostrar para transiciones perfectas. Para obtener más información, consulte Ocultar o mostrar elementos en el encabezado (Editor 2.0).
Para deshabilitar la edición avanzada y restablecer el encabezado, seleccione un diseño diferente:
-
Haga clic en la pestaña Encabezado .
-
Haga clic en Editar diseño.
-
En la sección Diseño, haga clic en la flecha para acceder a las opciones de diseño.
-
Seleccione un diseño diferente para deshabilitar la edición avanzada y restablecer el encabezado. Los cambios realizados mediante la edición avanzada se revertirán y no se almacenarán.
Para ocultar el encabezado en la página:
-
hover sobre la parte inferior del encabezado y haga clic en Encabezado.
-
Haga clic en Ocultar encabezado de página en y seleccione el dispositivo en el que desea ocultar el encabezado. En Editor 2.0, esto oculta el encabezado en todas las páginas.
Para mostrar el encabezado:
-
En el panel lateral, haga clic en el icono Mostrar elementos (
) en Configuración.
-
Haga clic en el icono Ocultar en el pie de página y seleccione Sí para mostrar el encabezado.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como Editor All-Flex. Para identificar su versión actual del editor, consulte Cómo identificar la versión del editor que emplea su sitio .
En Editor 2.0, la flexibilidad para ocultar o mostrar elementos dentro del encabezado le proporciona un control granular sobre los componentes visuales en diferentes tamaños de pantalla, ya sea que desee optimizar su diseño o enfatizar ciertos elementos para dispositivos específicos.
Puntos importantes a tener en cuenta:
-
Cualquier elemento del encabezado, incluido el encabezado en sí, se puede ocultar en cualquier tamaño de pantalla. Esto se puede hacer en la superficie de trabajo o en el panel Capas.
-
Los elementos incluidos en la opción de encabezado predeterminada también se pueden ocultar.
-
Los elementos que están ocultos se mostrarán como deshabilitados con un icono de ocultar elemento (
-
El panel de capas solo indicará los elementos ocultos para el tamaño de pantalla en el que se encuentra actualmente. Por ejemplo, si está en desktop, solo indicará los elementos ocultos en desktop.
Para ocultar elementos de encabezado del panel Capas:
-
En la barra de herramientas superior, haga clic en el tamaño de pantalla deseado en el que quiere ocultar el elemento.
-
Haga clic en Capas en la barra de herramientas lateral.
-
Pulse sobre el elemento que quiera ocultar.
-
Haga clic en el icono de ocultar elemento (
Para mostrar elementos de encabezado del panel Capas:
-
En la barra de herramientas superior, haga clic en el tamaño de pantalla deseado en el que quiere ocultar el elemento.
-
Haga clic en Capas en la barra de herramientas lateral.
-
Haga clic en el elemento que quiera volver a mostrar (se mostrará desactivado con el icono del ojo tachado antes de ser seleccionado).
-
Haga clic en el icono de ocultar elemento (