Haga más con imágenes en su sitio web de WordPress

Como dice el viejo refrán, “una imagen vale más que mil palabras”. En el caso del diseño web, se utilizan imágenes de todo tipo para ayudar a contar una historia. Las publicaciones de blog a menudo las usan para resumir un punto, mientras que los ejemplos más orientados a las ventas utilizan imágenes para ilustrar por qué vale la pena comprar un producto o servicio. Son una parte indispensable de cualquier sitio web..

Por suerte para nosotros, entonces, WordPress le da a nuestras imágenes el tratamiento real. Sus capacidades de medios incorporadas nos permiten catalogar nuestras imágenes, buscarlas e incluso realizar algunas ediciones menores..

Si bien eso nos proporciona bastante poder, los complementos adecuados pueden ayudarnos a hacer aún más. Hoy, analizaremos cinco de estos complementos de WordPress que puede usar para brindar más flexibilidad y funcionalidad a las imágenes de su sitio. Cada complemento está disponible para descargar con su suscripción anual a Envato Elements. Los suscriptores tienen acceso a más de 450 temas y complementos de WordPress, junto con cientos de miles de elementos de diseño de alta calidad, todo por un precio bajo.

1. Construir una galería de imágenes de gama alta

WordPress tiene una forma integrada de crear galerías de imágenes. Pero el resultado final es algo muy básico. Las galerías tienen el potencial de hacer mucho más. Pueden mostrar su tema (ya sea sus habilidades de fotografía o su colección de autos clásicos) y agregar un poco de interactividad seria a la mezcla. Pero necesitarás usar un complemento para crear algo que sea hermoso y funcional a la vez..

Galería global - Wordpress Responsive Gallery

Global Gallery es un plugin que puede hacerlo todo. Úselo para crear galerías de imágenes, controles deslizantes o carruseles altamente personalizados. Puede importar imágenes de redes sociales y sitios para compartir fotos o subirlas directamente a través de la galería de medios de WordPress. El complemento también le permite etiquetar imágenes, que puede utilizar para crear una interfaz de cartera que se pueda filtrar. También encontrará que hay una variedad de diseños y configuraciones disponibles para modificar. Además, todo responde y funcionará en cualquier pantalla..

2. Añade interactividad a tus imágenes

Los mapas de imágenes han existido durante bastante tiempo y siguen siendo increíblemente útiles. Para los no iniciados, un mapa de imagen se parece a cualquier otra imagen de su sitio web, pero su magia proviene del hecho de que puede dibujar a su gusto áreas de "zona interactiva" personalizables en esa imagen. Esto significa que puede vincular diferentes partes de una imagen a diferentes lugares o agregar otros efectos. Por ejemplo, puede tener una foto de grupo del personal de su empresa. Podría usar un mapa de imagen para colocar un enlace en la cara de cada persona que dirija a su biografía específica.

Mapa de imagen pro

Por defecto, WordPress no maneja muy bien los mapas de imágenes. Y también está el problema de que no responden en absoluto, lo que hace que los hotspots no se ajusten correctamente a pantallas más pequeñas. Ahí es donde Image Map Pro es tan útil. Dibuje formas personalizadas en sus imágenes que se pueden usar para agregar enlaces o para mostrar información de herramientas multimedia enriquecida. También es totalmente sensible y soporta eventos táctiles.

3. Hacer comparaciones una experiencia más visual

Uno de los métodos más efectivos para demostrar la diferencia entre sujetos es la imagen clásica de antes y después. Los vemos por todas partes por una buena razón: funcionan. Es altamente visual y, a menudo, tan fácil de entender que no es necesaria una explicación adicional. Entienden mejor el punto que las palabras.

Comparación de imágenes antes y después del complemento de WordPress

La comparación de imágenes no solo proporciona una manera fácil de agregar imágenes de antes y después a su sitio web de WordPress, sino que también las hace interactivas. Los usuarios pueden arrastrar una línea de comparación (ya sea horizontal o verticalmente, dependiendo de su configuración) para revelar partes ocultas de una imagen combinada. Esto trae un poco más de atención al usuario que asegura mejor su atención..

Y si te interesa ensuciarte las manos con un poco de JavaScript y crear el tuyo, consulta este tutorial de Adi Purdila:

  • Cómo crear un control deslizante de pantalla dividida con JavaScript

    En el video tutorial de hoy, te mostraré cómo crear un elemento de "pantalla dividida" (o UI, como prefieras llamarlo) usando JavaScript. Inspiración…
    Adi purdila
    JavaScript

4. Crea efectos especiales impresionantes

Agregar efectos especiales a las imágenes puede darle a su sitio un aspecto único al mismo tiempo que ayuda a atraer la atención de un usuario a un área específica de una página. Hay una variedad de cosas que puedes hacer, desde los filtros de imagen tipo Instagram hasta la implementación de la animación. Lo bueno es que ya no necesitas ser un experto en Photoshop para hacerlo. Con CSS3, muchos de estos efectos están integrados.

Imager - Herramienta de imagen increíble para WordPress

Con Imager, puede agregar fácilmente más de 60 efectos especiales a las imágenes de su sitio. Los filtros, las animaciones y los efectos de mouseover están al alcance de su mano. El complemento también sirve como una utilidad de imagen en toda regla al permitirle crear tamaños de imagen personalizados, regeneración de miniaturas, marcas de agua y más.

Y nuevamente, aquí está Adi Purdila para explicar más sobre los filtros y CSS:

  • Cómo aplicar filtros de Instagram en el navegador usando Pure CSS

    Veamos cómo puedes crear efectos de filtro similares a Instagram en el navegador usando nada más que CSS. Vamos a ver!
    Adi purdila
    CSS

5. Haz que la participación del público sea más divertida

Si las redes sociales nos han enseñado una cosa, es que a la gente le encanta compartir imágenes. Los memes y GIF nos hacen reír y se utilizan a menudo para ayudar a difundir ideas. En la situación correcta, tiene sentido aprovechar esta tecnología para aumentar la participación de los usuarios en nuestros propios sitios web. Sin embargo, parece que este es un recurso relativamente sin explotar fuera del espacio social.

WP Comentar Imágenes y Videos

Para los sitios que alientan los comentarios de los lectores, las imágenes y los videos de comentarios de WP podrían ser lo que más estimule la conversación. No solo permite que el usuario cargue archivos multimedia, sino que también permite compartir contenido multimedia de sitios como YouTube y Vimeo. Este poco de diversión adicional puede hacer una gran diferencia cuando se trata de la participación del usuario..

Más que solo decoración

Tradicionalmente, las imágenes se han utilizado para agregar un elemento decorativo a los sitios web. Pero, como hemos visto, también son capaces de ser una herramienta eficaz en todos los aspectos. Los complementos anteriores te ayudarán a usarlos de manera que te ayuden a contar tu historia y a agregar nuevos niveles de interactividad a tu sitio..