Bloques multimedia: video, audio, imágenes y más

Video y Audio

Cuando se trata de agregar archivos de video o audio a tu sitio, no es recomendable subirlos directamente a la biblioteca multimedia. En cambio, la mejor práctica —y que usamos en Indiegraf— es subir primero el archivo a una plataforma externa confiable, como YouTube o Vimeo.

Desde allí, puedes copiar el código de inserción que ofrecen y agregarlo a uno de los bloques disponibles de tipo Embed o a un bloque HTML.

Vista del bloque de diseño YouTube Embed:

¿Por qué hacerlo así?

Usamos este método porque garantiza que tu sitio se mantenga seguro y con buen rendimiento. Subir archivos multimedia grandes directamente puede generar riesgos de seguridad y ralentizar la carga del sitio, mientras que usar códigos de inserción mantiene todo más estable y confiable.

En resumen: por seguridad y rendimiento, los videos y audios deben agregarse siempre mediante códigos de inserción, nunca con cargas directas.

Nota adicional:

Si insertas una URL de YouTube o Vimeo directamente en un bloque de video, este se convertirá automáticamente en un bloque Embed. Esto modificará las opciones disponibles en la barra lateral de configuración.
Recuerda que subir archivos de audio o video directamente a tus publicaciones puede reducir la velocidad de carga de la página.

Bloque de Portada

Este es un excelente recurso visual para crear imágenes con impacto. El bloque de portada te permite combinar una imagen con una superposición de color, a la que puedes añadir texto, enlaces, íconos de redes sociales y más. Es ideal para atraer la atención de los lectores.

Vista del bloque de portada antes de elegir configuraciones:

Puedes subir un nuevo archivo multimedia o seleccionar uno que ya tengas en tu biblioteca multimedia.

Texto sobre imagen

Después de agregar una imagen al bloque de portada, puedes escribir texto directamente sobre ella haciendo clic en el centro.

Para agregar más líneas de texto, presiona la tecla Enter.
Puedes cambiar el color del texto seleccionándolo y ajustando los valores en la sección Color, de la barra lateral.
También puedes agregar enlaces: selecciona el texto, haz clic en el ícono de enlace en la barra de herramientas flotante y escribe la URL deseada

Otras Configuraciones de Diseño

En la barra lateral encontrarás opciones para:

Activar el efecto de fondo fijo (la imagen o video permanece en su lugar mientras el contenido se desplaza).
Activar el efecto de fondo repetido (la imagen o video se repite si el tamaño del bloque excede sus proporciones).
Seleccionar un punto focal para la imagen o video.
Definir la altura mínima del bloque de portada.
Elegir un color o patrón de superposición (sólido o degradado).
Ajustar la opacidad de la superposición.

Bloque de Archivo

El bloque de archivo permite crear un enlace de texto a un archivo multimedia, por ejemplo, un PDF o un documento de Word, con la opción de incluir un botón de descarga.

Puedes subir un nuevo archivo o seleccionar uno existente de tu biblioteca multimedia. Para cambiar el texto del botón de descarga, simplemente haz clic sobre él y escribe el texto que prefieras.

En la barra lateral encontrarás opciones para:

Enlazar al archivo directamente o a la página adjunta de ese archivo.
Abrir el enlace en una nueva pestaña.
Mostrar u ocultar el botón de descarga.

Bloque de Galería

El bloque de galería te permite crear una galería de imágenes.

Puedes subir nuevas imágenes, seleccionar imágenes ya cargadas en tu biblioteca multimedia o arrastrarlas y soltarlas directamente sobre el bloque (se subirán automáticamente a la biblioteca y se insertarán en la galería).

Para agregar un pie de foto general a toda la galería, escríbelo en el campo Write gallery caption, que aparece debajo del bloque.

Al hacer clic en cualquier imagen dentro de la galería, aparecerán botones que permiten:

Cambiar la posición de la imagen (con las flechas izquierda y derecha).
Reemplazar la imagen por otra.
Eliminarla del conjunto.

Para agregar un pie de foto individual a una imagen, haz clic sobre ella y escribe el texto en el campo correspondiente.

En la barra lateral encontrarás opciones para:

Seleccionar el número de columnas de la galería.
Recortar automáticamente las imágenes para que se alineen de forma uniforme.
Enlazar cada imagen al archivo multimedia o a su página adjunta.
Definir el tamaño de las imágenes.

Bloque de Imagen

El bloque de imagen te permite agregar imágenes individuales al contenido. Puedes subir una nueva imagen, seleccionar una de la biblioteca multimedia, insertar una desde una URL o arrastrarla directamente al bloque (se cargará automáticamente).

Para agregar un pie de foto, haz clic en el texto Write caption…, debajo de la imagen, y escribe el contenido.

Para agregar un enlace a la imagen, haz clic en el ícono de Insertar enlace en la barra de herramientas del bloque. Puedes vincularla al archivo original, a su página adjunta o a una URL personalizada.

En la barra lateral encontrarás opciones para:

Cambiar el estilo de la imagen (por defecto o con bordes redondeados).
Definir un estilo predeterminado para las próximas imágenes que agregues.
Agregar texto alternativo (alt text) para mejorar el SEO y la accesibilidad.
Especificar el tamaño de la imagen (evita usar tamaños superiores al original para no perder calidad).

Por defecto, las imágenes tendrán el mismo ancho que el texto. Si quieres que una imagen se extienda a todo el ancho, haz clic sobre ella en el editor y selecciona Full width (Ancho completo).

Bloque de Medios y Texto

El bloque de medios y texto te permite crear un diseño de dos columnas: una con texto y otra con un archivo multimedia (imagen o video). La columna de texto puede incluir otros bloques, como párrafos, encabezados o listas.

Puedes mostrar el archivo multimedia a la izquierda o derecha haciendo clic en los íconos correspondientes en la barra de herramientas: