El Header recorre la parte superior de cada página de tu sitio y generalmente contiene tu logo y la navegación del sitio. Personalízalo para mostrar los colores y el logo de tu marca, dirigir a los visitantes a las páginas más importantes y mostrar anuncios que quieras que vea cada visitante.
Tu Header aparece en cada página del sitio web que lo usa. Aprende la diferencia entre las páginas en Kajabi.
Nota: Esta guía cubre las plantillas de Kajabi Pages. Si usas las plantillas de Premier Legacy, consulta Personalizar un encabezado en una página con Premier
Abrir el editor del encabezado
Desde el Dashboard, haz clic en la pestaña Website.
Selecciona la pestaña Website Pages o Landing Pages.
Abre el editor de páginas de tu página. Aprende a abrir el editor de páginas.
En el panel lateral, haz clic en Header.
Personalizar los colores y la posición del encabezado
Configurar los colores de texto y fondo del encabezado
Agrega los colores de tu marca a las configuraciones Header Text Color y Header Background Color.
Por defecto, Kajabi ajusta el color del texto según el brillo de tu color de fondo. Un fondo oscuro tiene texto claro y un fondo claro tiene texto oscuro:
Nota: Tu Encabezado se mostrará en todas las páginas de tu sitio web. Aprende la diferencia entre las páginas en Kajabi.
Para usar tus propios colores de texto y fondo, selecciona tanto Header Text Color como Header Background Color. Tus selecciones anulan el color de texto automático.
Elegir la posición del encabezado
Elige cómo se ubica el Header en tu página:
Normal es la opción predeterminada. El Header se mantiene alineado con tu página y desaparece de la vista a medida que los visitantes se desplazan hacia abajo.
Overlay coloca el Header sobre la primera Sección de tu página:
¿Quieres determinar tus propios colores de texto y fondo de marca?
Selecciona los colores deseados tanto para tu Color de Texto del Encabezado como para tu Color de Fondo del Encabezado, para anular el ajuste dinámico de los colores de texto.
Crear un encabezado fijo
Un Header fijo (sticky) permanece visible mientras los visitantes se desplazan, para que tu navegación esté siempre a mano. Funciona tanto en computadoras como en dispositivos móviles y no está disponible con la plantilla Premier legacy.
Abre el editor del encabezado.
Selecciona Enable sticky header.
Haz clic en Save para aplicar y conservar tus cambios.
Después de activar el sticky header, configura los colores que usa el Header cuando un visitante se desplaza:
Sticky Text Color establece el color del texto del Header cuando la página se desplaza.
Sticky Background Color establece el color de fondo del Header cuando la página se desplaza.
Nota: En una landing page, estas configuraciones están en la configuración de la sección Desktop layout. Selecciona Fixed on scroll para fijar el Header, configura los colores sticky y haz clic en Save para aplicar y conservar tus cambios.
Configurar el diseño y la tipografía del encabezado
Diseño de escritorio
Muestra u oculta el Header en computadoras y configura su alineación horizontal:
Diseño móvil
Muestra u oculta el Header en dispositivos móviles, configura el color del ícono del menú hamburguesa y el color del ícono cuando el sticky header está activado.
Tipografía
Ajusta el tamaño de fuente del texto de tu Header en computadoras y dispositivos móviles:
Agregar un bloque al encabezado
Diseña un Header que se adapte a tu negocio agregando bloques. Cada bloque agrega un elemento, como un logo o un menú.
Abre el editor del encabezado.
Haz clic en Add Block.
Selecciona el tipo de bloque que quieres agregar:
Tipos de bloque de encabezado
Agrega y reorganiza estos tipos de bloque para construir tu Header:
Anuncio o Barra de Hello
Muestra un anuncio o notificación importante como un banner encima de tu Header. Aprende a agregar un Anuncio o Barra de Hello.
Llamado a la Acción
Anima a los visitantes a tomar acción, como abrir una página o comprar una Oferta, con un botón en tu Header. Aprende más sobre cómo usar un Llamado a la Acción.
Menú Desplegable
Crea una experiencia de navegación fluida agregando un menú desplegable a tu Header. Aprende a agregar un bloque de Menú Desplegable.
Logo
Pon tu marca al frente de tu página.
Menú
Muestra un menú de navegación que ya creaste para que los visitantes exploren tu sitio.
Menú de Usuario
Se muestra como el avatar de tu cliente. Una forma rápida de iniciar sesión, cerrar sesión y acceder a su Library y a la configuración de su cuenta. Si un visitante aún no ha iniciado sesión, el bloque muestra un enlace Log In en lugar del avatar.
Agregar un logo al encabezado
Dale marca a tu página agregando un bloque de Logo a tu Header. Muestra tu logo como imagen o como texto.
Abre el editor del encabezado.
Haz clic en Add Block.
Selecciona Logo.
Selecciona Image o Text como tipo de Logo.
Si seleccionaste Image, haz clic en Select Image y elige un archivo nuevo o uno reciente.
Si seleccionaste Text, escribe tu texto en el campo Logo Text.
Nota: Si subiste una imagen de logo en la sección Branding de tu configuración de Site Details antes de crear la página, el tipo de logo Image usa ese logo por defecto. Para usar una imagen diferente en esta página, selecciona la imagen como se describe en el paso de Image anterior.
Atributo alt de la imagen
Escribe una breve descripción de la imagen de tu logo. La descripción ayuda al SEO y a la accesibilidad, y se muestra si la imagen no puede cargarse.
Ancho de la imagen del logo
Si seleccionaste Image como tipo de Logo, ajusta el ancho de la imagen para cambiar el tamaño con el que aparece tu logo en la página.
Color del texto del logo
Si seleccionaste Text como tipo de Logo, elige un color de la marca del sitio o un color personalizado para el texto de tu logo.
Cambiar el enlace del logo del encabezado
Por defecto, el logo de tu Header lleva a los visitantes a la página de inicio de tu sitio, ya sea tu Template Home o tu Custom Homepage. Para enviar a los visitantes a otra página cuando hagan clic en tu logo, cambia el enlace en el Code Editor.
Nota: Cambiar el enlace del logo del Header requiere el Code Editor, que está incluido en el plan Kajabi Pro. Consulta kajabi.com/pricing para ver los detalles de los planes.
Cambiar el enlace del logo en Kajabi Pages
Copia el enlace que quieres que abra el logo de tu Header.
Abre el Code Editor de tu sitio web o landing page.
Abre la carpeta Snippets.
Haz clic en el archivo
shared_block_logo.liquid.Busca
<a class="logo" href="/">en la línea 14 o cerca de ella.Reemplaza la barra diagonal (/) con tu URL completa, por ejemplo
https://help.kajabi.com.Haz clic en Save para conservar tus cambios.
Cuando el botón Save cambie de azul a blanco, haz clic en Preview para probar el nuevo enlace del logo de tu Header.
Alinear y estirar los bloques del encabezado
Controla dónde se ubica cada bloque en tu Header con la configuración Stretch block y la configuración de alineación de cada bloque.
Stretch block
Activa Stretch block para que un bloque ocupe el espacio restante en la sección del Header. Actívalo en el bloque que está más a la izquierda de tu Header. Por ejemplo, para colocar tu Logo a la izquierda y un bloque de Menu y de User Menu a la derecha, activa Stretch Block en tu Logo:
Stretch block desactivado:
Stretch block activado:
Alinear un bloque en el encabezado
Configura la alineación horizontal de un bloque a la izquierda, al centro o a la derecha. La posición y la alineación de los bloques que lo rodean también afectan esta configuración.
Alinear el menú desplegable de User Menu
Configura la alineación del texto de los elementos del menú desplegable de tu User Menu.
Personalizar el encabezado en una página de Premier
La plantilla Premier Legacy tiene su propia configuración de Header. Usa esta sección si tu página está creada con Premier.
Abrir el editor del encabezado de Premier
Desde el Dashboard, haz clic en Website.
Haz clic en Website Pages o Landing Pages.
Haz clic en el Title de la página para abrir el editor.
En la barra lateral, haz clic en Header.
En la sección Header de Premier, puedes agregar un logo, un menú, un User Menu, un anuncio y un Call to Action.
Agregar un logo a un encabezado de Premier
Abre el editor del encabezado de Premier.
Selecciona Text o Image como Logo Type.
Si seleccionaste Image, haz clic en Select Image y elige un archivo nuevo o uno reciente.
Si seleccionaste Text, escribe tu texto en el campo Logo Text.
Opcional: escribe un número en el campo Custom Logo Height, con el formato 10px o 10. El rango recomendado es de 30 a 100.
Mostrar un menú en un encabezado de Premier
Selecciona Show Menu para mostrar un menú de navegación en tu Header.
Nota: Para crear y editar los enlaces de tu menú, haz clic en Edit your link lists debajo de la configuración Menu en el editor de la barra lateral.
Mostrar el User Menu en un encabezado de Premier
Selecciona Show User Menu para mostrar el User Menu en tu Header, o desmárcalo para ocultarlo. Incluir un User Menu en el Header de una landing page personalizada les da a los clientes acceso fácil a los Products que compraron y a su configuración de cliente.
El User Menu se muestra como el avatar del cliente. Cuando los visitantes hacen clic en el avatar, se abre el menú desplegable para que puedan:
Abrir la Library
Editar y ver su Customer Settings
Iniciar o cerrar sesión en tu sitio
Personaliza el idioma y los colores del User Menu para que coincidan con tu marca.
Nota: Cuando previsualizas tu página como administrador con sesión iniciada, el User Menu muestra el avatar que subiste en tus Account Details, o el avatar predeterminado. Los clientes con sesión iniciada ven el avatar que subieron en su configuración de cliente, o el avatar predeterminado.
Agregar un anuncio a un encabezado de Premier
Selecciona Show Announcement en el editor de la barra lateral para mostrar un anuncio encima de tu Header. Aprende a agregar un anuncio a una página de Premier.
Enlaza el anuncio a:
Una Landing Page
Una Checkout Page
Un archivo descargable
Una URL de otra página
Un pop-up de Two Step Optin
Selecciona Show Announcement en el editor de la barra lateral para mostrar un anuncio encima de tu Header. Aprende a agregar un anuncio a una página de Premier.
Enlaza el anuncio a:
Una Landing Page
Una Checkout Page
Un archivo descargable
Una URL de otra página
Un pop-up de Two Step Optin
Configurar la apariencia del encabezado de Premier
Elige el Background Color y el color del texto, y configura la Alignment de la sección Header:
Inline mantiene todos los bloques del Header en una sola fila.
Stacked apila todos los bloques de la sección Header.
Agregar un Call to Action a un encabezado de Premier
Agrega un botón de Call to Action a tu Header para animar a los visitantes a abrir otra página, comprar una Offer y más.
Abre el editor del encabezado de Premier.
En la parte inferior de la barra lateral, haz clic en Add Call To Action.
Personaliza el Call to Action Text, el Button Action y la apariencia.
Haz clic en Save para conservar tus cambios.
Consejo: ¿Tienes más de un Call to Action? Arrastra y suelta los bloques de Call to Action en el editor del Header para cambiar su orden.
Preguntas frecuentes
¿Por qué un bloque del encabezado no se muestra en mi teléfono?
En teléfonos y otras pantallas pequeñas (de menos de 768 píxeles de ancho), tu Header muestra solo tu Logo, el ícono del menú de hamburguesa (tres líneas), el ícono del carrito si activaste el carrito, y cualquier Anuncio o Barra de Hello. Los bloques Menu, Dropdown menu, Call to action, User dropdown y Social icons se mueven dentro del menú de hamburguesa, así que los visitantes los ven después de tocar el ícono del menú. La configuración de bloque Alignment y Stretch no cambia esto.
Para mostrar un botón o una imagen en teléfonos sin abrir el menú, agrégalo a una Section en la parte superior de tu página, justo debajo del Header, en lugar de al Header, y asegúrate de que su configuración Hide on mobile esté desactivada. Luego quítalo del Header para que no aparezca dos veces en escritorio.
¿Por qué veo dos botones de Log In en mi Header?
El bloque User Menu muestra su propio enlace Log In cuando un visitante no ha iniciado sesión. Si tu menú de navegación también enlaza a tu página de inicio de sesión, tu Header muestra dos botones de Log In:
¿Cómo muestro un solo botón de Log In?
Elimina el enlace a tu página de inicio de sesión de tu menú de navegación y asegúrate de que tu Header incluya un bloque User Menu. Aprende a editar tu menú de navegación.
El bloque User Menu muestra Log In hasta que un visitante inicia sesión y luego cambia a su avatar. Al eliminar el enlace de inicio de sesión de tu menú y tener un bloque User Menu en tu Header, tu Header muestra un solo botón de Log In.