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.
Alineación del menú desplegable de User Menu
Configura la alineación del texto de los elementos del menú desplegable de tu User Menu.
Preguntas frecuentes
¿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.