El encabezado es la parte del sitio que contiene el logotipo y la navegación. Hay muchas maneras diferentes de controlar el estilo de tu encabezado para ayudarte a crear un encabezado atractivo para tu sitio.
En el Editor 2.0, el encabezado predeterminado ofrece diseños prediseñados, 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 eficiente y enfocada. También hay una opción de edición avanzada para los usuarios que buscan una mayor personalización, como agregar widgets o elementos adicionales, agregar secciones vacías o prediseñadas y guardar las secciones de encabezado para volver a utilizarlas. Para obtener más información, consulte Edición avanzada de encabezados.
Sugerencia
Toma nuestro Configure el encabezado del sitio Curso de Duda Academy para aprender sobre los tipos de encabezados y cómo usarlos.
Para ocultar un encabezado:
-
Pase el ratón por encima de la parte inferior del encabezado y haga clic Encabezado.
-
Haga clic Ocultar el encabezado de la página eny selecciona el dispositivo en el que quieres ocultar el encabezado.
Para mostrar el encabezado:
-
En el panel lateral, haga clic en Mostrar elementos (
) icono.
-
Haga clic en Ocultaricono en el pie de página y seleccione Sípara mostrar el encabezado.
Puede ocultar el encabezado de todas las páginas o solo de páginas específicas.
Para ocultar el encabezado:
-
Haga clic con el botón derecho en el encabezado para abrir el menú contextual.
-
Seleccione Ocultar en este dispositivoy, a continuación, selecciona una Solo desde esta página o Desde todas las páginas.
Para mostrar el encabezado:
-
Localiza el encabezado en el panel y, a continuación, haz clic en el icono con forma de ojo tachado situado junto a él.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como All-Flex Editor. Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
La flexibilidad de 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 simplificar su diseño o enfatizar ciertos elementos para dispositivos específicos.
Puntos importantes a tener en cuenta:
-
Cualquier elemento del encabezado, incluido el propio encabezado, se puede ocultar en cualquier tamaño de pantalla. Esto se puede hacer en el lienzo 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 desactivados con el 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ás en el escritorio, solo indicará los elementos ocultos en el escritorio.
Para ocultar los elementos del encabezado del panel Capas:
-
En la barra de herramientas superior, haz clic en el tamaño de pantalla deseado en el que deseas ocultar el elemento.
-
Haz clic en el elemento que quieras ocultar.
-
Haga clic en el icono de ocultar elemento (
Para mostrar los elementos del encabezado del panel Capas:
-
En la barra de herramientas superior, haz clic en el tamaño de pantalla deseado en el que deseas ocultar el elemento.
-
Haz clic en el elemento que quieras mostrar (aparecerá desactivado con el icono del ojo tachado antes de seleccionarlo).
-
Haga clic en el icono de ocultar elemento (
El encabezado que se reduce es una versión más pequeña del encabezado del sitio, que te 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 un encabezado fijo, pero condensa el tamaño de los logotipos y el tamaño general del encabezado. Es particularmente útil en los sitios que tienen encabezados grandes y en los sitios que están diseñados para desplazarse durante mucho tiempo
Nota
El encabezado que se reduce está disponible en computadoras de escritorio y solo para tabletas cuando se usa el diseño de encabezado de la barra superior.
Para habilitar un encabezado que se reduce en Classic Editor:
-
Pase el ratón por encima del encabezado y haga clic Encabezadoy, a continuación, haga clic Editar diseño.
-
En la pestaña Encabezado reducido, haga clic en Habilitar la reducción del encabezado alternar. Dispone de las siguientes opciones:
-
Mostrar solo la fila de navegación. Muestre la fila con navegación solo cuando el encabezado se reduzca. Esta función solo es aplicable si hay más de una fila en el encabezado
-
Color de fondo. Cambia 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 rollo. Especifica los colores del texto, el enlace seleccionado y el cursor, 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 del 66%
-
Cambiar logotipo en el pergamino. Seleccione un logotipo para mostrarlo en el rollo.
-
Espaciado de cabecera. Ajuste el acolchado superior e inferior del cabezal que se reduce. Puedes cambiar el espaciado de los encabezados por dispositivo.
-
Una vez que se habilita la reducción del encabezado, ocurre lo siguiente:
-
El espaciado del encabezado cambia el relleno superior/inferior y el margen a 0. Esto no se aplica a las filas del encabezado.
-
Las imágenes del encabezado se reducen al porcentaje de la barra de tamaño del logotipo (el valor predeterminado es del 66%).
-
Para gestionar plantillas con un valor de altura mínimo en el encabezado, la altura mínima del encabezado se establece en automática.
-
Si hay filas en blanco con columnas, las columnas ocupan todo el espacio de la fila.
-
Las propiedades de diseño anulan las propiedades de encabezado que se reducen. Por ejemplo, si establece un fondo de fila en el encabezado, el fondo de la fila se muestra sobre el fondo del encabezado que se reduce.
-
Las filas en blanco se muestran en el encabezado que se reduce.
-
Si no puedes ver la reducción del encabezado, puede deberse a que no tienes suficientes filas en tu sitio para poder desplazarte hacia abajo en el sitio y activar la reducción del encabezado. Si solo tienes una fila en la página, el sitio no se desplazará
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como All-Flex Editor. Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
La función Scroll on Header 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 por la página. Combina los logotipos y el tamaño general del encabezado para ahorrar espacio y garantizar un fácil acceso a la navegación sin resultar intrusiva. Ideal para sitios con encabezados grandes o aquellos diseñados para permitir un desplazamiento prolongado, mejora la experiencia del usuario al mantener la accesibilidad a las principales
Es importante tener en cuenta que el encabezado fijo ya debe estar habilitado para poder habilitar el desplazamiento por el encabezado.
Para habilitar el desplazamiento por el encabezado:
-
Pase el ratón por encima del encabezado y haga clic Encabezado.
-
Haga clic Editar diseño. Aparecerá el panel Diseño del encabezado.
-
Amplíe el Posiciónsección y habilite la Establecer como encabezado fijo cámbiala si aún no está habilitada.
-
Habilite el Cambiar el encabezado al desplazar alternar.
-
Configure las siguientes opciones de diseño:
-
Acolchado. Establezca los valores iniciales de los encabezados con relleno superior e inferior (esto no es específico de la opción de encabezado fijo
-
BG en rollo. 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 rollo. Defina el relleno superior e inferior en px,%, vh o vw. Si quieres anular la configuración del tamaño de la pantalla del escritorio, puedes modificarla en una tableta o un dispositivo móvil.
-
Tamaño del logotipo. Usa 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 desplazarte. El valor predeterminado es el 66%. Los cambios se deben realizar en los tamaños de pantalla individuales.
-
Mostrar solo la sección de navegación en el pergamino. En la sección Posición, habilita la Mostrar solo la sección de navegación en el pergamino activa esta opción para que solo quede visible la navegación al desplazarte. Todas las demás secciones del encabezado desaparecerán
Tenga en cuenta que esta opción solo está disponible para los encabezados avanzados.
-
Los cambios realizados en la sección Diseño del panel de diseño del encabezado no afectan a la configuración de posición.
Tienes la flexibilidad de configurar tu encabezado para que se superponga con el contenido de la primera fila de la página. Esto puede crear un efecto visualmente atractivo en el que el encabezado se integre perfectamente con el contenido. Si lo desea, puede configurar el encabezado para que se superponga a la primera fila. Esto debe habilitarse por página.
Para habilitar la superposición del encabezado con la primera fila:
-
Pase el ratón por encima del encabezado y haga clic Encabezado.
-
Haga clic Editar diseño. Aparecerá el panel Diseño del encabezado.
-
Amplíe el Posiciónsección y habilite el botón para Superponga la primera sección de la página.
-
(Opcional) Configure un color de fondo que se aplique a todos los tamaños de pantalla.
No todos los widgets son compatibles y aparecen en el encabezado que se reduce. Si tiene un widget en el encabezado que no es compatible con el encabezado que se reduce, aparecerá una columna en blanco en lugar del widget. No puede editar los widgets cuando el encabezado está reducido
Los siguientes widgets son compatibles y se mostrarán en un encabezado reducido tanto para el editor clásico como para el editor 2.0:
-
Navegación
-
Multilingüe
-
Iconos sociales
-
Haga clic para llamar
-
Botón OpenTable
-
Haga clic en el botón Enviar correo electrónico
-
cita
-
Botón PayPal
-
Botón Me gusta de Facebook
-
Imágenes y logotipos
-
Carrito de tienda
-
Widget de párrafo
-
Widget de título
-
Botones
Un encabezado fijo se vuelve estático y permanece en su lugar cuando te desplazas por las páginas de tu sitio.
Nota
En el editor clásico, Los encabezados móviles siempre aparecen fijos de forma predeterminada. En el Editor 2.0, tienes la opción de activar o desactivar un encabezado fijo para todos los tamaños de pantalla.
Para habilitar un encabezado fijo:
-
Pase el ratón por encima del encabezado y haga clic Encabezadoy, a continuación, haga clic Editar diseño.
-
En el Contenido pestaña, selecciona Establecer como encabezado fijo. Si la opción de encabezado fijo no está disponible, debe desactivar la opción Reducir el encabezado en la pestaña Reducir el encabezado
Hay varios diseños de cabecera flexibles prediseñados para elegir. Si cambias a uno de los diseños de cabecera flexibles prediseñados, no puedes volver a cambiar a una cabecera fija, solo puedes cambiar entre otros diseños de cabecera flexibles. Al cambiar de diseño, también se elimina el contenido existente de la sección de encabezados. Recomendamos crear una copia de seguridad antes de cambiar de diseño.
Para cambiar el diseño del encabezado:
-
Pase el ratón por encima del encabezado y haga clic Encabezado.
-
En el Diseño pestaña, seleccione un nuevo diseño de encabezado. Si vas a cambiar a un encabezado fijo, primero tienes que desactivar la Encabezamiento reducido en la pestaña Encabezado que se reduce.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como All-Flex Editor. Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Puedes habilitar el diseño de un sitio de hamburguesas en el escritorio. De forma predeterminada, las tabletas y los dispositivos móviles utilizan el diseño de hamburguesas
Para habilitar el diseño del sitio de Hamburger:
-
Haz clic en la etiqueta del encabezado y selecciona Cambiar ajuste preestablecido en el menú flotante. Tenga en cuenta que es lo mismo tanto si tiene un encabezado básico como avanzado.
-
En el panel de diseño, el Ajustes preestablecidos se abrirá la sección. Seleccione el Hamburguesa icono junto a Examinar los ajustes preestablecidos del menú. Tenga en cuenta que aún no se reflejará ningún cambio en el lienzo.
-
Seleccione el diseño de hamburguesa deseado. El diseño seleccionado se mostrará en el lienzo
-
Cuando esté satisfecho con el diseño, salga de la ventana emergente Presets.
Tenga en cuenta que al cambiar los ajustes preestablecidos, es posible que algunas personalizaciones se restablezcan. El color de fondo y el logotipo seguirán siendo los mismos
Para acceder al menú de diseño de la cabecera en Classic Editor, coloca el cursor sobre el encabezado y haz clic Encabezado, a continuación, haga clic en Diseño pestaña.
Para acceder al menú de diseño de la cabecera en Editor 2.0, sitúe el cursor sobre el encabezado y haga clic Encabezadoy, a continuación, haga clic Editar diseño. El panel de diseño se abrirá en un lateral del lienzo. Contiene las siguientes opciones de diseño:
-
Diseño: Explore las opciones de diseño que combinan los mejores estilos de navegación y hamburguesa de manera uniforme 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: Defina los márgenes y el relleno, y los cambios en el escritorio afectarán a otros tamaños de pantalla si su espaciado permanece inalterado.
-
Antecedentes: Elige el color o la imagen de fondo, añade 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 el desplazamiento. La activación del encabezado fijo en cualquier tamaño de pantalla influye en el comportamiento de las demás
Si el encabezado contiene una imagen, el logotipo del sitio se conservará al moverse entre los diseños de encabezado. En el caso de que haya más de una imagen o el logotipo sea textual, la imagen del logotipo se mantendrá igual que en el diseño. Es importante tener en cuenta que los encabezados entre los dispositivos no están conectados, por lo que si añades un logotipo en el escritorio, este no se añade automáticamente a los demás tipos de dispositivos. La única excepción es que si el diseño del encabezado de la barra superior se usa en una tableta, heredará cualquier cambio de logotipo realizado en
Si eliminas el logotipo, vuelve a añadir la imagen arrastrando el elemento de imagen al encabezado y configura el enlace para que vuelva a la página de inicio.
Nota
Esta información es específica del Editor clásico y no es relevante para el Editor 2.0 (anteriormente conocido como Editor All-Flex). Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Puedes añadir un menú ampliable en tus sitios de escritorio y tabletas, lo que facilita la creación de sitios modernos con una gran flexibilidad de diseño. Elige entre varios diseños de menú ampliables y personalízalos como quieras añadiendo widgets, filas
El diseño de menú ampliable para dispositivos móviles ofrece más personalización y una forma de mostrar los widgets 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, hacer clic para llamar, carrito de la tienda, íconos sociales y más. Puedes añadir cualquier widget al menú expandible desde el panel de widgets
Para seleccionar y configurar un encabezado y un diseño de menú ampliable para computadoras de escritorio y tabletas:
-
Haga clic Diseño del sitio.
-
En el Escritoriosección, selecciona menú ampliable diseño.
-
En el Tabletasección, selecciona la menú ampliable diseño.
-
Tras seleccionar el diseño del menú ampliable, aparece un icono de hamburguesa en el encabezado del sitio. Haz clic en
) para ver el menú ampliable.
-
En el Diseñopestaña, 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. Parte superior o Lado.
-
Efecto de entrada. Portada o Empuja.
-
Anchura. Mueva el control deslizante para establecer el ancho del menú expandible cuando esté expandido. El ancho del menú se define en porcentajes para adaptarse a
-
Antecedentes. Configura el color o la imagen de fondo.
-
Color del icono de cierre. Seleccione un color para el icono de cierre y el color de fondo del icono de cierre.
-
-
En el Espaciado pestaña, cambia el relleno.
El menú ampliable puede tener hasta 3 filas y cada una está totalmente personalizada. Si el escritorio y la tableta tienen el mismo diseño de sitio (ambos ampliables o ambos en la barra superior), todas las personalizaciones son iguales para ambos. En caso de que sean diferentes, cada dispositivo debe definirse por separado
Para editar la ubicación del menú expandible en el encabezado:
-
Pase el ratón por encima del encabezado y haga clic Encabezadoy, a continuación, seleccione Editar diseño.
-
En el Diseño sección, haga clic Izquierdao ¿Verdad?.
Para seleccionar y configurar un diseño de encabezado y menú ampliable para dispositivos móviles:
-
Pase el ratón por encima del encabezado y haga clic en Encabezadoetiqueta y, a continuación, selecciona Editar diseño.
-
En el Diseño pestaña, haga clic en el diseño existente para seleccionar un diseño de menú. La cabecera móvil ofrece diseños que muestran widgets como enlaces a redes sociales, números de teléfono y más. Los diseños de los encabezados son fijos, por lo que no puedes añadir nuevos widgets, pero puedes editarlos o eliminarlos. Cuando añades una tienda o utilizas la función multilingüe, hay más opciones de diseño disponibles, entre las que se incluyen los iconos del carrito de envío de la tienda y la función multilingüe. Si no tienes habilitada la tienda o la opción de varios idiomas, estos diseños no aparecen
-
Haga clic Izquierdao ¿Verdad?para la posición del icono del menú.
-
Si aún no lo has hecho, abre el menú en la vista móvil. Esto permite que se abra el editor de menús para que puedas editar el menú ampliable
-
En el Diseñopestaña, haga clic en el diseño existente para seleccionar un diseño de menú. El menú ampliable ofrece varios diseños que pueden mostrar los enlaces sociales, la información de contacto y más. Puedes 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 cambias de un diseño a otro, se elimina todo el contenido que has añadido al menú y solo se quedan con los widgets del diseño elegido
-
En el Estilo pestaña, tienes las siguientes opciones:
-
Entrar desde. Parte superioro Lado. Cuando esté seleccionado Top, mueva el control deslizante de altura. Cuando esté seleccionado Lado, mueva el control deslizante de anchura
-
Efecto de entrada. Portadao Empuja.
-
Nota
No se pueden agregar widgets adicionales al encabezado del dispositivo móvil.
Nota
Esta información es específica del Editor clásico y no es relevante para el Editor 2.0 (anteriormente conocido como Editor All-Flex). Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
Para mostrar los elementos del encabezado sobre las imágenes de los héroes, coloca el cursor sobre el encabezado y haz clic Encabezado, haga clic en Diseño pestaña y, a continuación, haga clic Superponga la primera fila. Esto da más visibilidad a las imágenes de tus héroes y facilita el diseño de sitios atractivos y modernos
Tenga en cuenta lo siguiente:
-
Para la cabecera.Defina el color de fondo como transparente o un color con opacidad.
-
Para la primera fila. Utilice un acolchado superior 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 hasta cada página y siga los pasos anteriores.
Nota
Esta información es específica del Editor 2.0, anteriormente conocido como All-Flex Editor. Para identificar la versión actual de su editor consulteCómo identificar la versión del editor que usa tu sitio .
edición avanzada le permite personalizar aún más el encabezado, como agregar widgets, elementos y secciones vacías o prediseñadas. También puedes guardar secciones de encabezado individuales y reutilizarlas.
Nota
-
Al cambiar el diseño del encabezado (en el panel Diseño del encabezado) se restablecerán los cambios que se hayan realizado y se deshabilitará la edición avanzada.
-
Como los encabezados se sincronizan según los tamaños de pantalla, se recomienda comprobar todos los tamaños de pantalla al utilizar la opción de edición avanzada.
Al utilizar la edición avanzada, se recomienda comprobar todos los tamaños de pantalla debido a la sincronización de los encabezados.
Para habilitar la edición avanzada:
-
Haga clic en el Cabecera pestaña.
-
Haga clic Editar diseño.
-
En la sección Diseño, haga clic en Habilita la edición avanzada.
Si planeas mostrar diferentes elementos en el escritorio y en el móvil (por ejemplo, un botón en el escritorio y un icono en el móvil), utiliza la función ocultar/mostrar para realizar transiciones fluidas. Para obtener más información, consulta Ocultar o mostrar elementos en el encabezado (Editor 2.0).
Para deshabilitar la edición avanzada y restablecer el encabezado, selecciona un diseño diferente:
-
Haga clic en Encabezado pestaña.
-
Haga clic 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 guardarán