Soporte prioritario
Help Center / Tema Hello Biz / Personaliza el encabezado de hello biz

Personaliza el encabezado de hello biz

Última actualización: agosto 24, 2025

¿Qué es el encabezado de hello biz?

Los encabezados aparecen en la parte superior de las páginas de tu sitio. Normalmente, contienen el logotipo de tu sitio, enlaces de navegación para acceder rápidamente a las páginas importantes y un botón de llamada a la acción.

Consulte todas las opciones disponibles para el encabezado.

Personalización del encabezado

Para personalizar el encabezado:

  1. Vaya a WP admin.
  2. En el panel, haga clic en Hello Biz.

  3. En la sección Site Parts, debajo de Header, haga clic en Edit.
    Se abre el editor de Elementor con el encabezado visible.
    Las opciones del encabezado aparecen en el panel.

Personalice las opciones del encabezado

El encabezado tiene cinco secciones:

  • Diseño: Selecciona un diseño básico para tu encabezado.
  • Identidad del sitio: Use un logotipo o el nombre de la empresa para identificar el sitio.
  • Navegación: Cree enlaces rápidos a las páginas del sitio.
  • Botón de contacto: Opcionalmente, añada un botón para que los visitantes puedan ponerse en contacto con usted fácilmente.
  • Llamada a la acción: Proporcione a los visitantes una forma rápida de interactuar con usted.
  1. En la sección Diseño, dale a tu encabezado una estructura básica seleccionando un diseño básico.
  2. En la sección Site Identity, en el campo Brand, el menú desplegable debe estar en la posición predeterminada de Site Logo.

    Seleccionar un logotipo forma parte de la personalización de tu sitio.
    Puedes cambiar tu logotipo haciendo clic en Cambiar el logotipo del sitio en el panel. Para obtener más información, consulta Añadir imágenes e iconos.

    Si prefieres utilizar el nombre del sitio en el encabezado, utiliza el menú desplegable para elegir Nombre del sitio.
  3. La sección navigation controla los enlaces rápidos a las otras páginas del sitio “. Por ahora, dejaremos eso en la configuración predeterminada. Consulte a continuación todas las opciones de navegación.
    El botón Contact ofrece a los usuarios la oportunidad de ponerse en contacto con nosotros o de navegar a nuestro pub. Les daremos a los usuarios una forma fácil de encontrarnos usando Waze.”

  4. Abre el campo Botón de contacto y actívalo a Sí.

  5. Selecciona Waze en el menú desplegable Plataforma.
    La sección Llamada a la acción controla el botón en el encabezado. Dado que este es un encabezado para un bar de deportes, pondremos un enlace al formulario de reserva aquí.

  6. Abra la sección Call to Action.

  7. En el cuadro de texto Primary CTA, introduzca Reserve Now.

  8. En el campo Link, introduzca la URL del formulario de reserva.
    Ahora, vamos a cambiar el estilo del botón Llamada a la acción para que cambie cuando los usuarios pasen el ratón por encima del botón.

  9. Haz clic en la pestaña Estilo.
  10. Abre la sección Llamada a la acción.
  11. Haga clic en Hover.
    Hacer clic en Hover significa que está editando el estilo cuando los usuarios pasan el ratón por encima del botón.

  12. Haga clic en el icono del globo terráqueo junto a Text Color y seleccione Accent.

  13. Haga clic en el icono del globo terráqueo junto a Color y seleccione Primary.
    Cuando los usuarios pasen el ratón por encima del botón, los colores de fondo y de texto se invertirán.

Ajustes para la cabecera

Puede personalizar sus widgets utilizando contenido, estilo y otros parámetros avanzados, lo que le ofrece una gran flexibilidad para adaptarlos a sus necesidades. Haga clic en las pestañas siguientes para ver todos los ajustes disponibles para este widget.

Pestaña Contenido

Añada, elimine y edite elementos y controles del encabezado.

Elige uno de los diseños básicos. Podrás dar estilo a este diseño utilizando las otras secciones de las pestañas Contenido y Estilo.

Marca: Utiliza el menú desplegable para elegir:

  • Logotipo del sitio: muestra su logotipo en el encabezado.
  • Nombre del sitio: Muestra el nombre de su empresa en el encabezado. Puede usar el menú desplegable para cambiar la etiqueta HTML del nombre del sitio. Recomendamos usar la etiqueta predeterminada.
  • Cambiar el logotipo del sitio: Si está usando un logotipo, haga clic para seleccionar un logotipo diferente. Para obtener más información, consulte Añadir imágenes e iconos.

Esto ayuda a las aplicaciones de accesibilidad a identificar el menú. Puede cambiar el nombre del menú, pero recomendamos usar el predeterminado.

El encabezado usa el menú de WordPress para crear sus enlaces rápidos. Si tiene más de un menú de WordPress, use el menú desplegable para seleccionar qué menú usar. Para obtener más información, consulte Crear un menú de navegación

Controla la navegación cuando se accede al sitio desde un dispositivo móvil.

Menú: De forma predeterminada, el menú está representado por un icono de hamburguesa. Para cambiar esto:

  • Haga clic en el icono de carga para cargar y usar su propio archivo svg.
  • Haga clic en el icono de hamburguesa para abrir la biblioteca de iconos y elegir un icono de allí.

Punto de interrupción: Utiliza el menú desplegable para elegir:

  • Móvil: Haga que el encabezado use su configuración móvil cuando se acceda desde un dispositivo de menos de 767 píxeles de ancho.
  • Tableta: Haga que el encabezado use su configuración móvil cuando se acceda desde un dispositivo de menos de 1024 píxeles de ancho.
  • Ninguno: No use la configuración móvil del encabezado.

Icono indicador de submenú: Los menús a veces contienen submenús. Por ejemplo, el menú para Contacto puede contener elementos de submenú como: Reservas, fiestas y oportunidades de empleo. De forma predeterminada, estos submenús se indican con una flecha hacia abajo, pero esto se puede cambiar:

  • Haga clic en sin icono para eliminar este indicador.
  • Haga clic en el icono de flecha hacia abajo para abrir la biblioteca de iconos y elegir un icono de allí.

Activa On si quieres añadir un icono(s) de contacto a tu encabezado.

Puedes activar una serie de aplicaciones o acciones desde tu encabezado. Estas acciones/aplicaciones se denominan Plataforma:

  • Correo electrónico: Permite a los visitantes enviarle un correo electrónico. Si usa esto, deberá añadir:
    • Icono: Elija una imagen para representar el envío de un correo electrónico.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione Correo electrónico en el menú desplegable.
    • Correo electrónico: La dirección de correo electrónico a la que se envía el correo electrónico.
    • Asunto: Cree una línea de asunto predeterminada para el correo electrónico.
    • Mensaje: Cree una línea de asunto predeterminada para el correo electrónico.
  • Teléfono: Permite a los visitantes llamar fácilmente a su empresa. Si usa esto, deberá añadir:
    • Icono: Elija una imagen para representar la realización de una llamada telefónica.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione Teléfono en el menú desplegable.
    • Número: El número de teléfono al que están llamando.
  • SMS: Permite a los visitantes enviarle mensajes.
    • Icono: Elija una imagen para representar el envío de un SMS.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione SMS en el menú desplegable.
    • Número: El número de teléfono al que están enviando mensajes de texto.
  • WhatsApp: Permite a los visitantes enviarle mensajes de Whatsapp
    • Icono: Elija una imagen para representar el envío de un mensaje de WhatsApp.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione WhatsApp en el menú desplegable.
    • Número: El número de teléfono al que están enviando mensajes.
  • Messenger: Permite a los visitantes enviarle mensajes de Facebook.
    • Icono: Elija una imagen para representar el envío de un mensaje.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione Messenger en el menú desplegable.
    • Nombre de usuario: El nombre de usuario de Facebook de su empresa. Aquí es donde se envían los mensajes.
  • Viber: Permite a los visitantes enviarle mensajes de Viber o llamarle a través de Viber.
    • Icono: Elija una imagen para representar el envío de un mensaje de Viber o la realización de una llamada de Viber.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione Viber en el menú desplegable.
    • Número: El número de Viber al que están enviando mensajes o llamando.
    • Acción: Use el menú desplegable para elegir si los visitantes chatearán o llamarán con Viber.
  • Mapa: Abra Google Maps para guiar a los visitantes a su ubicación.
    • Icono: Elija una imagen para representar el lanzamiento de Google Maps.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione Maps en el menú desplegable.
    • Enlace: Enlace a la aplicación Google Maps. Para obtener más información, consulte Integración de Google Maps.
  • Waze: Abra la aplicación Waze para guiar a los visitantes a su ubicación.
    • Icono: Elige una imagen para representar el lanzamiento de Waze.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione Waze en el menú desplegable.
    • Enlace: Enlace a la aplicación Waze.
  • URL: Icono con un enlace a una página web.
    • Icono: Elija una imagen para representar un enlace.
    • Etiqueta: Dé un nombre a la acción/aplicación. Esto ayudará a los programas de accesibilidad a entender lo que representa el icono.
    • Plataforma: Seleccione URL en el menú desplegable.
    • Enlace: La URL de la página a la que se enviarán los visitantes.

De forma predeterminada, no aparece ningún icono en el botón. Puede cambiar esto:

  • Haga clic en el icono de carga para cargar y usar su propio archivo svg.
  • Haga clic en el icono de punto para abrir la biblioteca de iconos y elegir un icono de allí.

Active Mostrar para añadir un segundo botón CTA.

Introduzca el texto que quiere que aparezca en el botón.

Introduzca la URL a la que quiere que accedan los visitantes cuando hagan clic en el botón.

De forma predeterminada, no aparece ningún icono en el botón. Puede cambiar esto:

  • Haga clic en el icono de carga para cargar y usar su propio archivo svg.
  • Haga clic en el icono de punto para abrir la biblioteca de iconos y elegir un icono de allí.

Active Mostrar para añadir un segundo botón CTA.

Pestaña Estilo

Determine el aspecto del encabezado.

Controle el ancho del logotipo si está usando un logotipo o alinee el nombre del sitio si está usando el nombre del sitio.

  • Normal: Determine cómo aparece el logotipo o el nombre del sitio de forma predeterminada.
  • Hover: Determine cómo aparece el logotipo o el nombre del sitio cuando se pasa el ratón por encima.

Cuando use un logotipo, determine:

  1. Filtros CSS: Una serie de controles deslizantes que le permiten controlar:
    1. Desenfoque: Aplica un efecto de enfoque suave difuminando los elementos según el radio de píxeles.
    2. Brillo: Ajusta el brillo de un elemento modificando su intensidad de luz.
    3. Contraste: Mejora o reduce el contraste de color de la imagen y del elemento para una mejor distinción visual.
    4. Saturación: Ajusta los colores de la imagen o del elemento aumentando o disminuyendo su intensidad de color.
    5. Tono: El filtro de tono CSS ajusta los colores girando su tono alrededor del espectro.
  2. Borde: Use el interruptor para determinar si el logotipo tendrá una línea a su alrededor. Si añade un borde, tendrá que establecer el ancho y el color del borde.
  3. Forma: Establezca una forma para el logotipo:
    1. Redondo: Los botones aparecen con esquinas suaves.
    2. Redondeado: Los botones aparecen con bordes uniformemente curvados.
    3. Afilado: Botones rectangulares.
    4. Personalizado: Ajuste el radio, usando los cuatro contadores para ajustar cada esquina individual. Obtenga más información sobre estos métodos de medición.
  4. Sombra de caja: Haga clic en el icono de lápiz para añadir sombra a la alternancia. Obtenga más información sobre sombras.

Cuando utilice el nombre de su sitio, establezca:

  1. Tipografía: Cuando use el nombre del sitio, establezca el tipo y el tamaño de la fuente. Para obtener más información, consulte Tipografía.
  2. Sombra de texto: Sombra de texto: Añada profundidad a su texto con sombras. Para obtener más información, consulte ¿Qué es Sombra, Sombra de texto y Sombra de caja?
  3. Color de texto: Cuando use el nombre del sitio, establezca el color de la fuente. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

Establezca el tipo y el tamaño de la fuente del menú. Para obtener más información, consulte Tipografía.

  • Normal: Determine cómo aparece el menú de navegación de forma predeterminada.
  • Hover: Determine cómo aparece el menú de navegación cuando se pasa el ratón por encima.
  • Activo: Determine cómo aparece el menú de navegación cuando se selecciona.

Establezca el color del menú de navegación. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

Use el control deslizante para establecer la distancia entre los elementos individuales del menú.

Diseño: Si hay un submenú, use el menú desplegable para determinar si los elementos del submenú aparecerán:

  • Horizontalmente, de arriba a abajo.
  • Verticalmente, de lado a lado.

Forma: Si hay un submenú, determine la forma del submenú:

  • Redondeado: Los botones aparecen con esquinas suaves.
  • Redondeado: Los botones aparecen con bordes uniformemente curvados.
  • Afilado: Botones rectangulares.

Puede ver cómo se verá su sitio en diferentes dispositivos haciendo clic en los iconos de móvil, tableta y escritorio en la barra superior del editor.

Alineación del texto: Cuando se accede al sitio desde un dispositivo móvil, determine si los elementos del menú aparecen al principio del encabezado o en el centro del encabezado.

Divisor: active Sí si quiere añadir un divisor entre los elementos del menú cuando se accede al sitio desde un dispositivo móvil. Si añade un divisor, también podrá elegir:

Color: El color del divisor. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

Grosor: El grosor de los divisores.

Tamaño del icono de alternancia: En el móvil, el menú se sustituye por un icono de alternancia. Los visitantes tocan la alternancia para abrir el menú. Use el control deslizante para ajustar el tamaño del icono.

Normal/activo:

  • Normal: Determine cómo aparece de forma predeterminada el botón de alternancia que muestra el menú.
  • Al pasar el ratón: Determine cómo aparece el botón de alternancia que muestra el menú al pasar el ratón por encima.

Color del icono de alternancia: Determine el color del botón de alternancia que muestra el menú. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

Tipo: Use el menú desplegable para determinar si el contacto se mostrará como un icono o una etiqueta.

  • Normal: Determine cómo aparece el botón o el enlace de forma predeterminada.
  • Al pasar el ratón: Determine cómo aparece el botón o el enlace al pasar el ratón por encima.

Determine el aspecto del icono:

  • Color: Establezca el color del icono. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.
  • Tamaño: Establezca el tamaño del icono.
  • Espaciado: Determine la cantidad de espacio entre el botón de contacto y la llamada a la acción.
  • Visualización adaptable: Establezca el aspecto del menú en el móvil:
    1. Barra de navegación: El botón de contacto aparece junto al menú de hamburguesa.
    2. Desplegable: El botón de contacto aparece en el menú de hamburguesa.

Establezca el aspecto de la etiqueta del botón de contacto:

  • Color: Establezca el color de la etiqueta. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.
  • Espaciado: Establezca la cantidad de espacio entre la etiqueta y el botón de llamada a la acción.
  • Visualización adaptable: Establezca el aspecto del menú en el móvil:
    1. Barra de navegación: La etiqueta del botón de contacto aparece junto al menú de hamburguesa.
    2. Desplegable: La etiqueta del botón de contacto aparece en el menú de hamburguesa.

Use el menú desplegable para seleccionar Estirar si desea que el botón de llamada a la acción se extienda por todo el ancho del encabezado cuando se acceda desde un dispositivo móvil.

Tipo: Use el menú desplegable para determinar si la llamada a la acción aparecerá como un botón o como un enlace.

Establezca el tipo de fuente y el tamaño del botón o enlace. Para obtener más información, consulte Tipografía.

  • Normal: Determine cómo aparece el botón o el enlace de forma predeterminada.
  • Al pasar el ratón: Determine cómo aparece el botón o el enlace al pasar el ratón por encima.

Establezca el color del texto del botón o enlace. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

(Solo botón)

Use para alternar entre:

  • Fondo sólido (clásico)
  • Fondo combinado (degradado).

Para obtener más información, consulte Crear un fondo.

El color del fondo. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

(Solo botón)

Alternar a Sí para añadir un borde al botón de llamada a la acción. Si añade un borde, tendrá que determinar:

  • Color: Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.
  • Forma:
    • Redondeado: Los botones aparecen con esquinas suaves.
    • Redondeado: Los botones aparecen con bordes uniformemente curvados.
    • Nítido: Botones rectangulares.

Haga clic en el icono de lápiz para añadir sombra al botón de alternancia. Obtenga más información sobre sombras.

Añada espacio entre los bordes del botón y el texto. Para obtener más información, consulte Relleno y márgenes.

Use el menú desplegable para seleccionar Estirar si desea que el botón de llamada a la acción se extienda por todo el ancho del encabezado cuando se acceda desde un dispositivo móvil.

Tipo de fondo: Establezca un fondo para el encabezado. Use los iconos para alternar entre un fondo sólido (clásico) o un fondo combinado (degradado). Para obtener más información, consulte Crear un fondo.

Color: El color del fondo. Para obtener más información, consulte Elegir un color o Usar fuentes y colores globales.

Active Sí para añadir un borde alrededor del encabezado. Si añade un borde, tendrá que determinar:

Haga clic en el icono de lápiz para añadir sombra al encabezado. Obtenga más información sobre sombras.

Añada espacio entre el borde del encabezado y el contenido. Para obtener más información, consulte Relleno y márgenes.

Pestaña Avanzada

Controle la ubicación de su widget, inserte enlaces, añada código personalizado y mucho más.

La mayoría de las opciones disponibles en la pestaña Avanzado se pueden encontrar en Configuración de la pestaña Avanzado.

Comportamiento es una función adicional. Le permite seleccionar:

Flotar: Active Sí para permitir que el encabezado se desplace sobre otro contenido de la página.

Si activa Flotar Sí, tendrá estas opciones:

  • Desplazamiento: La distancia entre la parte superior del encabezado y la parte superior de la pantalla.
  • Ancho: Establezca el ancho del área flotante.
  • Forma: Establezca que el área flotante sea:
    • Redondeado: Esquinas suaves.
    • Redondeado: Bordes uniformemente curvados.
    • Nítido: rectangular.

Fijo: La propiedad fijo mantiene el encabezado visible incluso cuando el visitante se desplaza por el contenido. Las opciones son:

  • Al desplazarse hacia arriba: El encabezado se vuelve fijo tan pronto como el visitante empieza a desplazarse hacia arriba en la página.
  • Siempre: El encabezado siempre es fijo.
  • Nunca: El encabezado no es fijo.

Obtenga más información sobre la configuración de la pestaña Avanzado.

En esta página

Compartir este artículo

Hosted with