Añade contenido multimedia a las páginas
En el panel Blocks del editor de páginas, añade bloques Image, Hero, de galería o de vídeo y elige archivos de la biblioteca en Attr; cada bloque controla el diseño y la reproducción en la página publicada. Consulta Bloques de presentación multimedia para ver el catálogo completo.
Tu biblioteca de Media es la fuente principal; el Page Editor es donde compones la presentación de tu trabajo. Arrastra bloques al lienzo, selecciona recursos de Media y ajusta el diseño en el panel Attributes de la derecha, sin volver a subir archivos para cada ubicación.
Los archivos conservan sus dimensiones originales en Media. El recorte y el encuadre en tu sitio se controlan en cada bloque (Attributes → aspect ratio), no en la biblioteca.
¿No sabes qué bloque encaja con la historia? Empieza por el directorio Bloques de presentación multimedia compatibles y abre después la página de cada categoría para consultar sus características y opciones de diseño.
Requisitos previos
Recursos en Media (fotos, vídeos y colecciones de portfolio)
Panel → Pages → Edit → pestaña Page Editor
Resumen de bloques de presentación
| Categoría del editor | Bloque | Ideal para |
|---|---|---|
| Media | Image | Una imagen fija con relación de aspecto, texto alternativo y enlace opcional |
| Media | Video | Reproductor HTML5 integrado desde la biblioteca o una URL |
| Media | Video Lightbox | La miniatura abre una reproducción destacada |
| Media | Video Background | Fondo en bucle a ancho completo con contenido superpuesto |
| Portfolio | Image Portfolio | Una colección en cuadrícula, mosaico o carrusel |
| Portfolio | Image Gallery | Imágenes fijas elegidas de Media, sin vincularlas a una sola colección |
| Portfolio | Video Portfolio | Selección de vídeos de la biblioteca |
| Portfolio | Portfolio Listing | Varias colecciones en cuadrícula, lista o pestañas |
| Portfolio | Impact Map | Portfolio con geoetiquetas en un mapa (guía de Impact map) |
| Hero | Hero Image | Imagen hero fija a ancho completo con diseños preestablecidos |
| Hero | Hero Portfolio | Hero basado en una colección de portfolio |
| Hero | Hero Video | Hero de vídeo con reproducción en streaming |
| Hero | Glassmorphism Hero | Panel de cristal desenfocado sobre contenido multimedia de fondo |
| Hero | Hero Slider | Diapositivas hero rotativas a pantalla completa |
| Advanced | Bento Grid | Celdas con contenido multimedia, estadísticas y citas |
| Advanced | Before/After Slider | Comparaciones de retoque o edición |
| Advanced | Ad Embed | Iframe de un anuncio publicado |
| Sliders | Slider | Carrusel de imágenes dentro de una columna (preajuste de galería) |
| Video | Video Gallery | Cuadrícula de vídeos con varias columnas |
| Video | Video Testimonial | Cita y vídeo uno junto al otro |
Guías detalladas: Bloques multimedia estándar, Bloques multimedia para entrega de portfolios, Bloques de lienzo Hero y Bloques de visualización y comentarios.
Pasos de implementación
- Sube u organiza recursos en Media y colecciones de Portfolio cuando utilices bloques de portfolio. Para los vídeos, deja tiempo para la transcodificación; consulta Subir y gestionar vídeos.
- Abre Pages → Edit → Blocks en la barra lateral derecha y añade un bloque que se adapte a tu objetivo de diseño (consulta la tabla anterior).
- Selecciona el bloque en el lienzo y utiliza Attributes para elegir Media, el portfolio de origen, la relación de aspecto o las columnas.
- En los bloques de portfolio, elige la colección de Portfolio o varias colecciones en Portfolio Listing.
- En Image Gallery o Video Gallery, añade explícitamente los elementos de Media desde el panel del bloque.
- Previsualiza Desktop y Mobile, selecciona Save Page y publica cuando esté todo listo.
Presentación del portfolio en las páginas
Los bloques de portfolio obtienen su contenido de colecciones de Portfolio, no de una selección múltiple improvisada de la biblioteca general, excepto Image Gallery y Video Gallery.
| Bloque | Origen | Opciones destacadas |
|---|---|---|
| Image Portfolio | Un portfolio | Diseño: cuadrícula, mosaico o carrusel; columnas; espacio; relación de aspecto; paginación |
| Image Gallery | Imágenes seleccionadas de Media | Diseño de cuadrícula; texto alternativo por imagen; relación de aspecto |
| Video Portfolio | Vídeos de Media | Lista seleccionada; reproducción en cuadrícula |
| Portfolio Listing | Varios portfolios | Cuadrícula, lista o pestañas; estilo de tarjeta; controles de título, descripción y cantidad |
| Impact Map | Portfolio con datos geográficos | Diseños de mapa; cronología; CTA opcional para donar a una campaña |
Configura el lightbox de la colección y los datos EXIF del sitio público en Portfolio Settings. Consulta Configuración del lightbox del portfolio.
Solución de problemas y errores habituales
- Bloque vacío después de guardar: los bloques de Portfolio necesitan un Portfolio seleccionado; los bloques de galería necesitan al menos una imagen o un vídeo añadido en Attributes.
- Recorte incorrecto en el sitio publicado: comprueba aspect ratio y object-fit en el bloque; los heroes utilizan diseños preestablecidos independientes (Bloques de lienzo Hero).
- Carga lenta del hero: utiliza vídeos e imágenes de póster optimizados para la web; los originales muy grandes ralentizan la primera visualización.
- Slider frente a Hero Slider: utiliza Hero Slider para heroes de página a ancho completo y Slider dentro de columnas para carruseles integrados en el contenido.
Verificar la configuración
- Al menos un bloque utiliza la fuente de Media o Portfolio que quieres publicar.
- Las imágenes fijas principales tienen alt text y los bloques de vídeo tienen un póster o una URL.
- Las vistas previas para escritorio y móvil muestran la historia como quieres que la vean los visitantes.