Help Center > Tema Hello Biz > Personaliza el encabezado de hello biz

Personaliza el encabezado de hello biz

Última actualización: agosto 24, 2025

Esta publicación ha sido traducida mediante traducción automÔtica, por lo que puede haber ligeras inexactitudes o diferencias en la redacción en comparación con el original. Pedimos disculpas por cualquier inconveniente que esto pueda causar. Por favor, contÔctenos si necesita que aclaremos algo para usted.

¿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