Guía de Usuario: Bloque Botón/Link

Creado el 12 Febrero, 2025 • Guía de usuario • 78 visualizaciones • 3 minutos lecturas

Guía de Usuario: Bloque Botón/Link en Microweb.me

El bloque Botón/Link en Microweb.me permite agregar enlaces personalizados a tu Microweb para dirigir a los visitantes a diferentes páginas web, redes sociales o plataformas de mensajería, como WhatsApp.

En este manual, explicaremos cada opción disponible en la configuración del bloque Botón/Link y cómo utilizarlo correctamente.

📌 ¿Para qué sirve el bloque Botón/Link?

El bloque Botón/Link está diseñado para crear accesos rápidos y fáciles hacia sitios web, redes sociales y servicios de mensajería. Se puede utilizar para:

• Agregar un botón de contacto a WhatsApp, Telegram o email.
• Dirigir a los usuarios a una tienda online, un portafolio o una red social.
• Enlazar a formularios, documentos o videos.
• Destacar contenido clave dentro de la Microweb.

🎨 Pantalla Inicial del Bloque Botón/Link

Cuando el usuario hace clic en el botón Bloques y selecciona Botón/Link, aparece una pantalla con las siguientes opciones:

• URL de destino: Campo donde se introduce la dirección web del enlace. Ejemplo: https://wa.me/+598123456789 para enlazar a WhatsApp. (probar sin el símbolo + al comienzo del número)
• Nombre: Texto visible en el botón (Ejemplo: "WhatsApp").
• Guardar: Botón para confirmar los cambios y aplicar la configuración.

Esta pantalla es el primer paso para configurar el bloque Botón/Link en la Microweb. Luego de agregado el bloque, podrás personalizarlo con iconos, colores y animaciones.

⚙️ Configuración del Bloque Botón/Link

1. URL de destino

• Permite agregar un enlace externo o interno.
• Ejemplo: Un botón que enlaza a un perfil de Instagram (https://instagram.com/tuusuario).

2. Abrir en nueva pestaña

• Si se activa, la URL se abrirá en una nueva pestaña del navegador.

3. Nombre

• Texto que aparecerá en el botón.
• Se recomienda un nombre corto y claro.

4. Miniatura

• Permite subir una imagen para acompañar el botón. (Ver recomendaciones al final de la guía)
• Formatos admitidos: .jpg, .jpeg, .png, .svg, .gif, .webp.

5. Icono

• Permite elegir un icono de FontAwesome.
• Ejemplo: fa-solid fa-rocket para un botón con icono de cohete.

6. Color de Texto

• Permite seleccionar el color del texto del botón.

7. Alineación del texto

• Define la posición del texto dentro del botón:Centro (por defecto).IzquierdaDerechaJustificado
• Centro (por defecto).
• Izquierda
• Derecha
• Justificado

8. Color de Fondo

• Permite definir el color de fondo del botón.
• Se puede seleccionar con un código HEX.

9. Animación

• Permite agregar efectos visuales al botón.
• Opciones: Pulse, Bounce, Shake, RubberBand, Wobble y otros.
• Se puede configurar el número de repeticiones 1, 2, 3 o dejarlo en infinito.

10. Configuración de Borde

• Define el estilo del borde del botón:Ancho del bordeColor del bordeRadio de borde (Recto, Redondo o Puntas Redondeadas)Estilo del borde (Sólido, Punteado o Doble)
• Ancho del borde
• Color del borde
• Radio de borde (Recto, Redondo o Puntas Redondeadas)
• Estilo del borde (Sólido, Punteado o Doble)

11. Configuración de Sombra

• Desplazamiento X/Y: Mueve la sombra horizontal o verticalmente.
• Desenfoque: Ajusta la intensidad de la sombra.
• Difusión: Controla la propagación de la sombra.
• Color de sombra: Permite elegir el color de la sombra aplicada al botón.

12. Reglas de Visualización

• Permite definir qué usuarios pueden ver el botón según:Fecha y HoraUbicación (continente, país, ciudad)Dispositivo (escritorio, tablet, móvil)Sistema Operativo (iOS, Android, Windows, etc.)Navegador (Chrome, Firefox, Safari, etc.)Idioma del navegador
• Fecha y Hora
• Ubicación (continente, país, ciudad)
• Dispositivo (escritorio, tablet, móvil)
• Sistema Operativo (iOS, Android, Windows, etc.)
• Navegador (Chrome, Firefox, Safari, etc.)
• Idioma del navegador

✅ Conclusión

El bloque Botón/Link es una herramienta esencial para facilitar la navegación y conectar a los visitantes con redes sociales, servicios y tiendas online. Su configuración flexible permite adaptarlo a distintas necesidades.

Si deseas conocer más sobre la personalización en Microweb.me, explora otros bloques y sus configuraciones avanzadas. 🚀

🔹 Recomendaciones

• Utilizar nombres de botón claros y breves.
• Elegir colores contrastantes para mejorar la legibilidad.
• Mantener el tamaño de las miniaturas por debajo de 1 MB para optimizar la carga.
• Usar herramientas como Canva o Compressor.io para reducir el peso de las imágenes sin perder calidad.