Editor de Wix: agregar y configurar un botón de ícono

6 min de lectura
Los botones con iconos son una forma divertida y visual de ayudar a los visitantes a navegar por el sitio. Para asegurarte de que sepan lo que hace el botón con icono, puedes agregar texto flotante (tooltip) que aparece al pasar el cursor.
Configura el enlace en el botón con icono y personaliza el icono que se muestra para cada uno de sus estados: Habitual y Efecto cursor. 

Paso 1 | Agregar un botón con icono

Para comenzar, elige un botón con icono en el panel Agregar y arrástralo a tu página. Hay varios diseños para elegir, según la acción y el aspecto deseado. 

Para agregar un botón con icono a tu sitio:

  1. Selecciona Agregar  a la izquierda del Editor.
  2. Haz clic en Botón.
  3. Haz clic en Botones con iconos.
  4. Haz clic o arrastra el botón para agregarlo a la página.

Paso 2 | Configurar el texto y el icono del botón con icono

Configura lo que te gustaría mostrar en el botón. Puedes mostrar un icono, texto o ambos.
El texto y los iconos que se muestran en los botones deben contener una llamada a la acción clara y permitir a los visitantes saber a dónde serán dirigidos. 

Para configurar el texto y el icono del botón:

  1. Selecciona el botón con icono.
  2. Haz clic en Cambiar ícono y texto.
  3. Selecciona ¿Qué muestra el botón? y elige una opción del menú desplegable: 
    • Texto e icono: muestra tanto el texto como un icono en el botón. Configura las siguientes opciones: 
      • ¿Qué dice?: ingresa el texto que deseas mostrar en el botón.
      • Elegir icono: selecciona el icono Cambiar el icono para elegir un nuevo icono para tu botón. Puedes elegir entre los archivos multimedia gratuitos disponibles en Wix o subir los tuyos.
    • Solo icono: muestra solo un icono en el botón. Configura las siguientes opciones: 
      • Elegir icono: selecciona el icono Cambiar el icono para elegir un nuevo icono para tu botón. Puedes elegir entre los archivos multimedia gratuitos disponibles en Wix o subir los tuyos.
      • ¿Cuál es el alt text?: ingresa una descripción de texto alternativo del icono.
    • Solo texto: muestra solo texto en el botón. Ingresa el texto que deseas mostrar en el botón debajo de ¿Qué dice?.
    • Nada: crea un botón transparente que no muestre texto ni un icono. Ingresa una descripción de texto alternativo del botón en ¿Cuál es el alt text?

Agrega un enlace a tu botón de ícono para dirigir a los visitantes de tu sitio a la ubicación pertinente. Puedes enlazar el botón a muchos lugares diferentes, como una página de tu sitio, una dirección web externa, un documento o un correo electrónico.

Para agregar un enlace al botón:

  1. Selecciona tu botón con icono.
  2. Selecciona el icono Enlace .
  3. Selecciona un tipo de enlace a la izquierda.
  4. Dependiendo del tipo de enlace que hayas seleccionado, agrega la información correspondiente.
  5. Selecciona Hecho.
Nota:
Si el enlace de tu URL contiene un carácter no compatible, se muestra el siguiente mensaje de error: Verifica la URL y vuelve a intentarlo. Para evitar la validación, utiliza un servicio de acortamiento de enlaces como bit.ly o goo.gl
Consejo:
Obtén más información sobre los tipos de enlaces que puedes agregar.

Paso 4 | Personalizar tu botón con icono

Una vez que hayas agregado un enlace al botón con icono, personalízalo según tus necesidades exactas. Puedes elegir el relleno de fondo, diseñar el texto y mucho más.

Para personalizar tu botón con icono:

  1. Selecciona el botón.
  2. Selecciona el icono Diseño .
  3. Elige un diseño preestablecido diferente o selecciona Personalizar diseño para ajustar el diseño existente.
  4. En Personalizar diseño, elige el estado del botón en el menú desplegable.
    • Habitual: cómo se ve el botón antes de que los visitantes interactúen con él.
    • Efecto cursor: cómo se ve el botón cuando los visitantes pasan el cursor por encima de él.
5. Selecciona una de las pestañas para personalizar el diseño:

¿Te ha sido útil?

|