¿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.
Personalización del encabezado
Para personalizar el encabezado:
- Vaya a WP admin.

- En el panel, haga clic en Hello Biz.

- 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.
- En la sección Diseño, dale a tu encabezado una estructura bÔsica seleccionando un diseño bÔsico.

- 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. - 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.ā
- Abre el campo Botón de contacto y actĆvalo a SĆ.

- 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Ć.
- Abra la sección Call to Action.

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

- 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.
- Haz clic en la pestaƱa Estilo.

- Abre la sección Llamada a la acción.

- 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.
- Haga clic en el icono del globo terrƔqueo junto a Text Color y seleccione Accent.

- 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.
Preestablecido
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.
Identidad del sitio
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.
Nombre accesible
Esto ayuda a las aplicaciones de accesibilidad a identificar el menĆŗ. Puede cambiar el nombre del menĆŗ, pero recomendamos usar el predeterminado.
MenĆŗ
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
Icono de alternancia adaptable
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Ć.
Mostrar
Activa On si quieres aƱadir un icono(s) de contacto a tu encabezado.
Elementos
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.
Icono
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Ć.
CTA secundario
Active Mostrar para añadir un segundo botón CTA.
CTA principal
Introduzca el texto que quiere que aparezca en el botón.
Enlace
Introduzca la URL a la que quiere que accedan los visitantes cuando hagan clic en el botón.
Icono
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Ć.
CTA secundario
Active Mostrar para añadir un segundo botón CTA.
PestaƱa Estilo
Determine el aspecto del encabezado.
Alinear el logotipo/nombre del sitio
Controle el ancho del logotipo si estĆ” usando un logotipo o alinee el nombre del sitio si estĆ” usando el nombre del sitio.
Normal/hover
- 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.
Logotipo del sitio
Cuando use un logotipo, determine:
- Filtros CSS: Una serie de controles deslizantes que le permiten controlar:
- Desenfoque: Aplica un efecto de enfoque suave difuminando los elementos segĆŗn el radio de pĆxeles.
- Brillo: Ajusta el brillo de un elemento modificando su intensidad de luz.
- Contraste: Mejora o reduce el contraste de color de la imagen y del elemento para una mejor distinción visual.
- Saturación: Ajusta los colores de la imagen o del elemento aumentando o disminuyendo su intensidad de color.
- Tono: El filtro de tono CSS ajusta los colores girando su tono alrededor del espectro.
- 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.
- Forma: Establezca una forma para el logotipo:
- Redondo: Los botones aparecen con esquinas suaves.
- Redondeado: Los botones aparecen con bordes uniformemente curvados.
- Afilado: Botones rectangulares.
- 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.
- 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.
Nombre del sitio
Cuando utilice el nombre de su sitio, establezca:
- 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.
- 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?
- 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.
TipografĆa
Establezca el tipo y el tamaƱo de la fuente del menĆŗ. Para obtener mĆ”s información, consulte TipografĆa.
Normal/hover/activo
- 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.
Color del texto
Establezca el color del menú de navegación. Para obtener mÔs información, consulte Elegir un color o Usar fuentes y colores globales.
Espaciado de elementos del menĆŗ
Use el control deslizante para establecer la distancia entre los elementos individuales del menĆŗ.
SubmenĆŗ
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.
MenĆŗ adaptable
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 de enlace
Tipo: Use el menĆŗ desplegable para determinar si el contacto se mostrarĆ” como un icono o una etiqueta.
Normal/activo
- 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.
Estilos de icono
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:
- Barra de navegación: El botón de contacto aparece junto al menú de hamburguesa.
- Desplegable: El botón de contacto aparece en el menú de hamburguesa.
Estilos de etiqueta
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:
- Barra de navegación: La etiqueta del botón de contacto aparece junto al menú de hamburguesa.
- Desplegable: La etiqueta del botón de contacto aparece en el menú de hamburguesa.
Visualización adaptable
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.
Llamada a la acción principal
Tipo: Use el menú desplegable para determinar si la llamada a la acción aparecerÔ como un botón o como un enlace.
TipografĆa
Establezca el tipo de fuente y el tamaƱo del botón o enlace. Para obtener mĆ”s información, consulte TipografĆa.
Normal/activo
- 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.
Color del texto
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.
Tipo de fondo
(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.
Color
El color del fondo. Para obtener mÔs información, consulte Elegir un color o Usar fuentes y colores globales.
Borde
(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.
Sombra de la caja
Haga clic en el icono de lÔpiz para añadir sombra al botón de alternancia. Obtenga mÔs información sobre sombras.
Relleno
Añada espacio entre los bordes del botón y el texto. Para obtener mÔs información, consulte Relleno y mÔrgenes.
Ancho adaptable
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.
Fondo
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.
Borde
Active Sà para añadir un borde alrededor del encabezado. Si añade un borde, tendrÔ que determinar:
- Ancho del borde: Use el control deslizante para establecer el grosor del borde.
- Color: El color del borde. Para obtener mÔs información, consulte Elegir un color o Usar fuentes y colores globales.
Sombra de la caja
Haga clic en el icono de lÔpiz para añadir sombra al encabezado. Obtenga mÔs información sobre sombras.
Relleno
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.
Comportamiento
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.
Avanzado
Obtenga mÔs información sobre la configuración de la pestaña Avanzado.