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.
El encabezado retráctil es una versión más pequeña del encabezado del sitio, que le permite mantener fija la información de navegación importante sin distraer a los usuarios mientras se desplazan hacia abajo en una página y sin ocupar demasiado espacio. Actúa como una función de encabezado fijo pero condensa el tamaño de los logotipos y el tamaño general del encabezado. Es especialmente útil en sitios que tienen encabezados grandes y sitios que están diseñados para un desplazamiento prolongado.
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 reductor:
-
hover sobre el encabezado, haga clic en Encabezado y, a continuación, haga clic en Editar diseño.
-
En la pestaña Encabezado retráctil, haga clic en el botón Habilitar encabezado retráctil . Tienes las siguientes opciones:
-
Mostrar sólo la 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. Cambiar el color de fondo del encabezado encogido. 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 al desplazar. Especifique los colores del texto, el enlace y el hoverseleccionados, los iconos, el texto de los botones y mucho más.
-
Tamaño del logotipo. Cambia 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 al desplazar. Seleccione un logotipo para mostrar al desplazar.
-
Espaciado del encabezado. Ajuste el relleno superior e inferior del encabezado retráctil. Puede cambiar el espaciado del encabezado por dispositivo.
-
Una vez que se habilita el encabezado reductor, 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 todos los widget son compatibles y aparecen en el encabezado de reducció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 puede editar widget cuando el encabezado está reducido.
Los siguientes widget son compatibles y se mostrarán en un encabezado reducible:
-
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
Un encabezado fijo se vuelve estático y permanece en su lugar cuando usted se desplaza por las páginas de su 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 fijo. Si la opción Encabezado fijo no está disponible, debe deshabilitar la opción Encabezado retráctil en la pestaña Encabezado retráctil.
Hay varios diseños de encabezado flexibles prediseñados para seleccionar. Si cambia a uno de los diseños de encabezado flexibles prediseñados, no podrá volver a un encabezado fijo, solo podrá cambiar entre otros diseños de encabezado flexibles. Al cambiar los diseños también se elimina el contenido existente de la sección de 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 va a cambiar a un encabezado fijo, primero debe desactivar la opción Encabezado retráctil en la pestaña Encabezado retráctil.
Para acceder al menú de diseño de encabezado, hover sobre el encabezado, haga clic en Encabezado y, a continuación, haga clic en la pestaña Diseño .
-
Diseño: Explore opciones de diseño que combinen los estilos de navegación superior y hamburguesa de manera consistente 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 los márgenes y el relleno, y los cambios en el desktop afectan a otros tamaños de pantalla si su espaciado permanece inalterado.
-
Fondo: Elija el color de fondo o la imagen, añada bordes o sombras y observe los cambios reflejados sin problemas en todos los tamaños de pantalla.
-
Posición: Habilita un encabezado fijo con cambios basados en desplazamiento. La activación del encabezado fijo en cualquier tamaño de pantalla influye en el comportamiento en 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 eliminas el logotipo, vuelve a agregar la imagen arrastrando el elemento de la imagen de nuevo al encabezado y configura el enlace para que vuelva a la página de inicio. Para obtener más información, consulte widget: Imagen.
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, carrito de store , íconos sociales y más. Puede agregar cualquier widget al menú expandible 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, haga clic en Tema y luego 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 del menú expandible, aparecerá un ícono de hamburguesa en el encabezado de su sitio. Haga clic en la 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 esté expandido. El ancho del menú se define en porcentajes para adaptar a todos los tamaños de pantalla.
-
Fondo. Configure el color o la imagen de fondo.
-
Cerrar 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 ícono del Menú.
-
Si aún no lo hiciste, abre 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, 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 los widget en el diseño elegido.
-
En la pestaña Estilo , tienes 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.
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 la primera fila. Esto le da a sus imágenes principales más visibilidad y hace que sea más fácil diseñar sitios atractivos y modernos.
Tenga en cuenta lo siguiente:
-
Para el encabezado. Establezca el color de fondo en transparente o 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 se aplica solo a la página actual. Para habilitarlo en otras páginas, navegue a cada página y siga los pasos anteriores.
Para ocultar el encabezado en la página:
-
hover sobre la parte inferior del encabezado y haga clic en Encabezado.
-
Haga clic en Ocultar el encabezado de página en y seleccione el dispositivo en el que desea ocultar el encabezado. En el Editor 2.0, esto oculta el encabezado en todas las páginas.
Para mostrar el encabezado:
-
En el panel lateral, haga clic en Mostrar elementos (
) en Configuración.
-
Haga clic en el icono Ocultar en el pie de página y seleccione Sí para mostrar el encabezado.