Guía de Usuario: Bloque Avatar en Microweb.me

Creado el 12 Febrero, 2025 • Guía de usuario • 80 visualizaciones • 4 minutos lecturas

Guía de Usuario: Bloque Avatar en Microweb.me

El bloque Avatar en Microweb.me permite agregar una imagen de perfil personalizada dentro de tu Microweb. Es útil para mostrar la identidad de una marca, foto de un profesional, avatar de una comunidad o cualquier elemento gráfico representativo.

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

Al final del artículo encontrarás un video-tutorial para visualizar mejor cómo funciona.

📌 ¿Para qué sirve el bloque Avatar?

El bloque Avatar está diseñado para mostrar una imagen representativa de una persona, empresa o comunidad en una Microweb. Se puede utilizar para:

• Personalizar una Microweb con una imagen de perfil.
• Agregar un logotipo o identidad visual.
• Crear un elemento visual atractivo en una página.
• Enlazar una imagen a una URL externa.

🖼️ Pantalla Inicial del Bloque Avatar

Cuando el usuario hace clic en el botón Avatar, aparece una pantalla con las siguientes opciones:

• Imagen: Permite seleccionar y subir una imagen desde el dispositivo.
• Formatos Admitidos: .jpg, .jpeg, .png, .svg, .gif, .webp.
• Tamaño Máximo: 5 MB.
• Tamaño: Permite elegir el tamaño del avatar (Ejemplo: 75x75px).
• Radio de Borde: Define la forma del avatar. Puede ser recto, redondo o redondeado. Ver recomendaciones al final del artículo.
• Guardar: Botón para confirmar los cambios y aplicar la configuración.

Esta pantalla es el primer paso para configurar y personalizar la imagen del avatar en la Microweb. Luego de agregado el bloque, podrás editar todas las configuraciones del botón y personalizarlo al extremo.

⚙️ Configuración del Bloque Avatar

1. Imagen

• Permite subir una imagen para usar como avatar.
• Formatos admitidos: .jpg, .jpeg, .png, .svg, .gif, .webp.
• Tamaño máximo: 5 MB.

2. Borrar Archivo

• Opción para eliminar la imagen actual y cargar una nueva.

3. Image Alt (Texto Alternativo)

• Texto que describe la imagen para accesibilidad y SEO.
• Recomendado para mejorar el posicionamiento en buscadores y accesibilidad para personas con discapacidad visual.

4. Tamaño

• Permite seleccionar el tamaño de la imagen en píxeles.
• Opciones predeterminadas: 125x125px y otros tamaños ajustables.

5. Ajustado

• Cubierto: La imagen se ajusta para cubrir todo el espacio disponible.
• Contenido: La imagen se muestra en su tamaño original dentro del contenedor.
• Llenar: La imagen se ajusta completamente al contenedor, aunque pueda distorsionarse.

6. URL de destino

• Permite agregar un enlace a la imagen.
• Cuando un usuario haga clic en el avatar, será redirigido a la URL configurada.

7. Abrir en nueva pestaña

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

8. Configuración de Borde

• Ancho del borde: Define el grosor del borde de la imagen.
• Color del borde: Permite seleccionar el color del borde. Al hacer click en el color de borde, aparece la paleta de colores y transparencia. También puedes utilizar el código HEX para elegir un color específico de tu manual de marca.
• Radio del borde:Recto: Mantiene las esquinas en ángulo recto.Redondo: Convierte la imagen en un círculo o con bordes curvos.Puntas Redondeadas: Suaviza las esquinas de la imagen.
• Recto: Mantiene las esquinas en ángulo recto.
• Redondo: Convierte la imagen en un círculo o con bordes curvos.
• Puntas Redondeadas: Suaviza las esquinas de la imagen.

9. Configuración de Sombra

• Desplazamiento X/Y: Mueve la sombra en horizontal o vertical.
• Desenfoque: Ajusta la intensidad del difuminado de la sombra.
• Difusión: Controla la propagación de la sombra.
• Color de sombra: Permite elegir el color de la sombra aplicada al avatar. Al hacer click en el color de sombra, aparece la paleta de colores y transparencia. También puedes utilizar el código HEX para elegir un color específico de tu manual de marca.

10. Reglas de Visualización

• Permite establecer quién puede ver el avatar dependiendo de:Fecha y Hora: Programar cuándo debe mostrarse.Ubicación: Filtrar por continente, país o ciudad.Dispositivos: Mostrar solo en escritorio, tablet o móvil.Sistema Operativo: Filtrar por iOS, Android, Windows, etc.Navegador: Restringir a Chrome, Firefox, Safari, Edge, etc.Idioma del navegador: Mostrar el avatar solo a usuarios con un idioma específico.
• Fecha y Hora: Programar cuándo debe mostrarse.
• Ubicación: Filtrar por continente, país o ciudad.
• Dispositivos: Mostrar solo en escritorio, tablet o móvil.
• Sistema Operativo: Filtrar por iOS, Android, Windows, etc.
• Navegador: Restringir a Chrome, Firefox, Safari, Edge, etc.
• Idioma del navegador: Mostrar el avatar solo a usuarios con un idioma específico.

📺 Video-tutorial

Video Tutorial del bloque Avatar

✅ Conclusión

El bloque Avatar es una excelente herramienta para personalizar y mejorar la identidad visual de una Microweb. Con sus múltiples configuraciones, puedes adaptarlo a diferentes necesidades y optimizar la experiencia de los visitantes.

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

🔹 Recomendaciones

• Utilizar imágenes con relación de aspecto 1:1, por ejemplo, 500x500 píxeles.
• Asegurarse de que las imágenes no superen 1 MB de tamaño para mejorar la velocidad de carga de la Microweb.
• Usar herramientas como Canva o Compressor.io para reducir el tamaño de los archivos sin perder calidad.