Ir al contenido principal

El taller

#Recursos

Generador de Placeholders SVG – Imágenes temporales para tus diseños

Flowtitude v2 incluye una herramienta integrada para generar imágenes SVG personalizadas que puedes usar como placeholders (imágenes de relleno) en etapas de desarrollo o presentación de proyectos. Estas imágenes se crean dinámicamente mediante URLs, sin necesidad de archivos físicos en el servidor.

🎯 ¿Para qué sirve?

  • Proporcionar espacios visuales temporales en maquetados o prototipos.
  • Sustituir imágenes finales mientras se define el contenido real.
  • Usar como fondos neutros en diseños con Tailwind o Bricks Builder.
  • Crear vistas previas en componentes reutilizables.

Compatible con WordPress y perfectamente integrado con Bricks, este generador ahorra tiempo y mantiene tus diseños ordenados mientras están en construcción.

🔧 ¿Cómo se usa?

El sistema genera imágenes SVG mediante URLs con parámetros personalizables o rutas amigables. Puedes acceder al generador así:

✅ Vía URL directa:

https://tusitio.com/placeholder/?width=900&height=500&theme=dark

Parámetros disponibles:

  • width: ancho en píxeles
  • height: alto en píxeles
  • theme: light o dark

✅ Vía URL amigable:

/placeholder/dark 
/placeholder/1200x600/light 
/placeholder/hd

Estas rutas son más limpias y fáciles de recordar, especialmente útiles en entornos colaborativos o con componentes dinámicos.

📐 Tamaños abreviados soportados

El generador también incluye códigos abreviados para tamaños comunes:

Código Dimensiones sv 400x600 sh 600x400 sc 400x400 mv 600x900 mh 900x600 mc 600x600 lv 900x1200 lh 1200x900 lc 900x900 hd 1920x1080

Puedes combinar estos códigos con los temas light o dark, por ejemplo:

/placeholder/hd/dark

✨ Características visuales del placeholder

  • Fondo con color según el tema (light o dark)
  • Líneas diagonales que generan una textura visual
  • Totalmente escalable al tamaño solicitado
  • Sin carga adicional de imágenes externas

🧠 Recomendaciones de uso

  • Úsalo en secciones donde aún no tienes imágenes definitivas.
  • Combínalo con clases utilitarias de Tailwind para ajustar márgenes, bordes o filtros.
  • Útil para diseñar style guides, skeletons o interfaces en desarrollo.