Como añadir imágenes 360° en WordPress

Utilizar imágenes 360 en tu sitio web puede sorprender a tus visitantes, puedes mostrar fotografías de tus viajes a los seguidores de tu blog, si tienes una tienda online es posible acercar más los productos a tus clientes, con una imagen 360 que les permita ver cada ángulo de tu producto.

Sin embargo, WordPress no muestra este tipo de imágenes correctamente, es por eso que en este tutorial, te mostraré como puedes añadir una imagen 360 desde el editor de bloques en WordPress.

Añadiendo imágenes 360

Para añadir imágenes 360 en tus artículos de WordPress, vamos a utilizar el plugin: Algori 360 Image

instalar el plugin algori 360 image

Gracias a este plugin podrás subir imágenes 360 a cualquier área de tu web WordPress en la que puedas utilizar el editor de bloques Gutenberg.

Añadir las imágenes es una tarea muy fácil de realizar, únicamente debemos entrar en el editor y seleccionar el nuevo bloque llamado: 360 images.

bloque 360 image en gutenberg

Al colocar el nuevo bloque a nuestro artículo, podremos añadir nuestra imagen 360 de 3 formas.

Es posible subir la imagen a nuestra biblioteca de medios, si ya hemos subido la imagen previamente, entonces puedes ir a la biblioteca de medios y seleccionarla, finalmente es posible colocar la URL de una imagen 360 externa.

seleccionar una imágenes 360

Una vez que seleccionas la imagen que deseas añadir a tu contenido, el plugin la cargará en tu editor de bloques.

biblioteca de imágenes 360

Este plugin nos permite previsualizar he interactuar con la imagen desde nuestra área de administración, gracias a esto podrás tener una buena idea de la forma en como tus visitantes experimentarán esta imagen.

editor de bloques imágenes 360

El bloque no tiene muchas opciones que podamos modificar, únicamente nos permite cambiar el ancho y alto de la ventana que muestra la imagen.

opciones del bloque algori

Sin embargo, aunque modifiquemos estos valores, el bloque es responsive, entonces se adapta a cualquier dispositivo desde el que nuestros usuarios visiten nuestro sitio web.

algori 360 es responsive

El bloque también viene equipado con un botón que nos permite colocar el visor de imágenes 360 en pantalla completa.

Si tus visitantes cuentan con equipo VR, como gafas de realidad virtual, entonces podrán utilizarlos para interactuar con la imagen.

full demo screen upempresa

¿Dónde encontrar imágenes 360 gratis?

Al momento de crear este tutorial, no hemos encontrado sitios web similares a Unsplash, Pexels o Pixabay, en los que se dediquen a compartir imágenes 360 gratuitas y con licencia pública o una licencia creative commons que nos permita publicar las imágenes en nuestros sitios web.

En las páginas como Pexels o Unsplash, puedes hacer una busqueda de imágenes 360, pero no podrás encontrar mucho contenido por el momento.

Sin embargo, hemos encontrado algunos lugares en los que puedes descargar este tipo de imágenes y utilizarlas en tu sitio web.

  • Pixexid.com en este sitio web podrás encontrar una colección con más de 190 imágenes que puedes utilizar para motivos personales o comerciales.
  • Eso.org podrás encontrar varias imágenes de dominio público que puedes utilizar en tu sitio web.

Seguiremos buscando lugares en los que puedas encontrar este tipo de imágenes para aumentar este listado, y si conoces sitios web adicionales, no dudes en colocarlos dentro de los comentarios.

Peso de las imágenes 360

Antes de añadir este tipo de imágenes en tu sitio web, debes tomar en cuenta que a diferencia de una foto normal, una imagen 360 puede tener un peso considerable.

Entonces, al igual que debes mejorar el peso de las fotos normales, debemos hacer lo mismo con una imagen 360.

En este tutorial, podrás encontrar una guía en la que te mostramos como mejorar el peso de tus imágenes.

Espero que este tutorial te sea de ayuda para añadir imágenes 360 en tu sitio web WordPress, y causar una experiencia inmersiva con tu sitio web o los productos de tu tienda online.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *