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