Soporte prioritario
Help Center > Themes > Tema Hello Biz > Widget de contacto

Widget de contacto

Última actualización: septiembre 3, 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.

Añadir el widget

Para acceder y usar un widget:

  1. En el editor de Elementor, haga clic en +.
    Se muestran todos los widgets disponibles.

  2. Haga clic o arrastre el widget al lienzo. Para obtener más información, consulte Añadir elementos a una página.

¿Qué es el widget de contacto?

En general, los sitios web deben proporcionar una forma sencilla para que los clientes potenciales se pongan en contacto contigo. El widget de contacto es una forma rápida de añadir tus datos de contacto a una página web.

Consulta todas las opciones disponibles con el widget de contacto.

Caso de uso común

Blake está creando un sitio web para un bar de deportes. Utiliza el widget de contacto para crear una página de contacto, de modo que los clientes puedan escribir o llamar al bar para hacer reservas.

Ejemplo

Casos de uso adicionales

  • Añade información de contacto al encabezado y/o pie de página de un sitio.

Añadir un widget de contacto: paso a paso

En el siguiente ejemplo, crearemos una página de contacto.

Añadir un widget de contacto

Para añadir un widget de contacto:

  1. Arrastra el widget de contacto al lienzo.
  2. En la sección Diseño del panel, elige uno de los tres ajustes preestablecidos para la información de contacto.
  3. Abre la sección Texto.
  4. En el campo Encabezado, introduce: Contáctanos.
  5. En el campo Descripción, introduce: Escribe o llama para hacer reservas u otras consultas.
  6. Abre la sección Datos de contacto.
    De forma predeterminada, hay cuatro secciones en el widget de contacto. Hay tres tipos de secciones:
    1. Enlaces de contacto: Diseñado para mostrar direcciones de correo electrónico, números de teléfono y otros datos de contacto.
    2. Texto: Diseñado para mostrar texto libre.
    3. Iconos sociales: Diseñado para mostrar enlaces a varios sitios de redes sociales.
  7. Grupo 1 contiene enlaces de contacto, aquí añadiremos formas para que los clientes envíen un correo electrónico o llamen al bar.
  8. En el cuadro de texto Subtítulo, introduce: Llámanos.
  9. En la sección Enlaces, haz clic en el campo Llamar.
  10. En el campo Número, introduce tu número de teléfono.
  11. Haz clic en el campo Correo electrónico e introduce tu correo electrónico y una línea de asunto. Dejaremos el campo Mensaje en blanco.
    Los datos de contacto te permiten añadir diferentes formas de ponerte en contacto contigo. Vamos a añadir un número de WhatsApp
  12. Haz clic en Añadir elemento.
  13. Haz clic en el campo Icono y selecciona Biblioteca de iconos.
    Esto abre la biblioteca de iconos.
  14. Selecciona el icono de WhatsApp de la biblioteca y haz clic en Insertar.
  15. Selecciona WhatsApp en la biblioteca desplegable Plataforma.
  16. Introduce un número de WhatsApp en el campo Número.
  17. En nuestro caso, no queremos mostrar el horario de apertura. Activa Grupo 2 para Ocultar.
  18. Vamos a añadir una forma para que los visitantes encuentren el bar. En la sección 3, selecciona Waze en el menú desplegable Plataforma.
  19. En el campo Enlace, añade un enlace de Waze. Consulta la documentación de Waze para obtener más información sobre cómo crear un enlace de Waze.
  20. La sección 4 contiene enlaces a las redes sociales. El bar solo tiene una cuenta de Instagram, así que primero haz clic en los iconos de eliminar junto a los iconos de X y TikTok.
  21. Haz clic en el campo Instagram y, en el campo Enlace, introduce un enlace a una cuenta de Instagram.
  22. En la sección Mapa, puedes añadir un enlace a Google Maps. Para obtener más información, consulta Integración de Google Maps.

Ajustes para el widget de contacto

Puedes personalizar tus widgets utilizando contenido, estilo y otros parámetros avanzados, lo que te ofrece una gran flexibilidad para adaptarlos a tus necesidades. Haz clic en las pestañas de abajo para ver todos los ajustes disponibles para este widget.

Pestaña Contenido

Añade, elimina y edita elementos y controles.

Elige uno de los tres diseños básicos para tu widget de contacto.

Un título corto para tu widget de contacto.

Utiliza el menú desplegable para choose una etiqueta HTML para tu encabezado. Las opciones incluyen H1 a H6, Div, Span o Párrafo. Recomendamos utilizar la configuración predeterminada.

Una o dos frases que describan el contenido del widget de contacto. Por ejemplo, si quieres que los visitantes se pongan en contacto contigo para hacer reservas, este sería el lugar donde lo mencionarías.

Utiliza el menú desplegable para choose una etiqueta HTML para tu encabezado. Las opciones incluyen H1 a H6, Div, Span o Párrafo. Recomendamos utilizar la configuración predeterminada.

De forma predeterminada, el widget de contacto tiene 4 secciones: Grupos 1-4. El Grupo 1 debe ser visible, pero los otros grupos tienen un interruptor que te permite ocultarlos.

Utiliza el menú desplegable para elegir uno de los tres tipos para cada grupo:

  • Enlaces de contacto: Diseñado para mostrar información como:
    • Correo electrónico
    • Números de teléfono
    • Números de Whatsapp
    • Enlaces de Facebook Messenger
    • Enlaces de Viber
    • Enlaces de Google Maps
    • Posición de Waze
    • URL
  • Texto: Añade texto de forma libre al grupo.
  • Iconos sociales: Añade iconos y enlaces a tus sitios de redes sociales. Por ejemplo, si tienes una cuenta de Instagram, puedes añadir un icono de Instagram con un enlace a tu cuenta.

Añade un título a un grupo.

Los enlaces aparecen en los grupos Datos de contacto e Iconos sociales.

  • Haz clic en un enlace para editar la información del enlace. Por ejemplo, haz clic en el enlace Llamar para añadir un número de teléfono. También puedes cambiar la etiqueta del enlace y el tipo de enlace.
  • Haz clic en el icono de eliminar para eliminar un enlace.
  • Haz clic en el icono de copiar para duplicar un enlace.

Utiliza el cuadro de texto para añadir algunas frases a la sección. Por ejemplo, puedes utilizar esto para añadir el horario de apertura al grupo.

Se utiliza para marcar tu ubicación en Google Maps. Para obtener más información, consulta Integración de Google Maps.

Pestaña Estilo

Determina el aspecto de los elementos y controles del menú.

El contenido de esta sección depende del ajuste preestablecido que hayas seleccionado.

Controla si los grupos de tu widget de contacto están configurados en los bordes del widget (Inicio o Fin) o en el Centro del widget.

Para algunos ajustes preestablecidos, también puedes establecer la posición del contenido, que controla el bloque de texto, ya sea en el borde inicial o en el centro del widget.

La información del widget de contacto se puede dividir en hasta 4 columnas y un número determinado de filas, dependiendo del ajuste preestablecido elegido.

Utiliza el menú desplegable Columnas para determinar el número de columnas.

Utiliza los contadores de Espacios para establecer una distancia entre las columnas y filas del widget.

En los ajustes preestablecidos que incluyen un mapa, determina si el mapa está situado al principio o al final del widget.

Determina el tamaño, el color y la fuente del encabezado.

Determina el tamaño, el color y la fuente del texto de la descripción.

Utiliza el control deslizante para aumentar y disminuir la cantidad de espacio entre las líneas de texto.

Establece el color y la fuente del texto del subtítulo.

  • Color del texto: Para obtener más información, consulta Elegir un color o Utilizar fuentes y colores globales.
  • Tipografía: Establece el tipo y el tamaño de la fuente del subtítulo. Para obtener más información, consulta Tipografía
  • Espaciado: Utiliza el control deslizante para establecer una distancia entre el subtítulo de un grupo y el contenido.

Esto se aplica a los grupos que utilizan la configuración Enlaces de contacto.

  • Espaciado: Utiliza el control deslizante para establecer una distancia entre los diferentes campos de contacto.
  • Tipografía: Establece el tipo y el tamaño de la fuente del campo de contacto. Para obtener más información, consulta Tipografía
  • Normal: Haz clic para establecer el color predeterminado del icono y del texto.
  • Hover: Establece el color del icono y del texto cuando los visitantes pasan el ratón por encima del campo de contacto.
  • Tamaño del icono: Utiliza el control deslizante para establecer el tamaño del icono que simboliza el tipo de contacto.
  • Color del texto: Para obtener más información, consulta Elegir un color o Utilizar fuentes y colores globales.
  • Tamaño del icono: Utiliza el control deslizante para establecer un tamaño para los iconos que simbolizan el tipo de contacto.
  • Espacio entre iconos: Utiliza el control deslizante para establecer la distancia entre los iconos que simbolizan el tipo de contacto y el texto del tipo de contacto.

Esto se aplica a los grupos que utilizan la configuración Texto.

Establece el color y la fuente del texto.

Esto se aplica a los grupos que utilizan la configuración Iconos sociales.

  • Normal: Haz clic para establecer el color, el tamaño y el espacio predeterminados del icono.
  • Hover: Haz clic para establecer el color, el tamaño y el espacio del icono cuando los visitantes pasan el ratón por encima de los iconos.
  • Color del icono: Establece el color de los iconos que representan las redes sociales. Para obtener más información, consulta Elegir un color o Utilizar fuentes y colores globales.
  • Tamaño del icono: Utiliza el control deslizante para establecer el tamaño de los iconos que representan las redes sociales.
  • Espacio entre iconos: Utiliza el control deslizante para establecer la cantidad de espacio que hay entre los iconos de las redes sociales.

Determina el área representada en el mapa.

Activa Sí para que el mapa cubra el ancho de su sección.

Utiliza los controles deslizantes para establecer el tamaño del mapa.

Añade un borde alrededor del mapa. Si añades un borde, tendrás que seleccionar un tipo de borde. Obtén más información sobre los tipos de borde.

También tendrás que seleccionar una forma de borde:

  • Redondo: Los botones aparecen con esquinas suaves.
  • Redondeado: Los botones aparecen con bordes uniformemente curvados.
  • Ovalado: Esquinas muy redondeadas.
  • Afilado: Botones rectangulares.
  • Personalizado: Ajusta el radio, utilizando los cuatro contadores para ajustar cada esquina individual. Obtén más información sobre estos métodos de medición.

Haz clic en el icono de lápiz para añadir una sombra al mapa. Obtén más información sobre las sombras.

Añade un fondo al widget de contacto. Para obtener más información, consulta Crear un fondo.

Añade un fondo parcialmente transparente. Para obtener más información, consulta Crear un fondo.

Utiliza el control deslizante para determinar la cantidad de espacio entre el área del encabezado y los grupos.

Utiliza el control deslizante para establecer la cantidad de espacio que hay entre el mapa y el resto de los elementos.

Activa Sí para añadir un borde alrededor del widget de contacto. Obtén información sobre los tipos de borde.

Si añades un borde, tendrás que elegir un ancho y un color de borde.

Elige cómo aparecen las esquinas del widget de contacto:

  • Redondeado: Los botones aparecen con bordes uniformemente curvados.
  • Afilado: Botones rectangulares.
  • Personalizado: Ajusta el radio, utilizando los cuatro contadores para ajustar cada esquina individual. Obtén más información sobre estos métodos de medición.

Haz clic en el icono de lápiz para añadir una sombra de caja al widget de contacto. Obtén más información sobre las sombras.

Añade o resta relleno en el widget de contacto. Aprende a crear espacio con relleno y márgenes

Activa Sí si quieres que el widget de contacto ocupe toda la altura de la pantalla.

Pestaña Avanzado

Controla la colocación de tu widget, inserta enlaces, añade código personalizado y mucho más.

Obtén más información sobre los ajustes de la pestaña Avanzado.

En esta página

Compartir este artículo

Hosted with