• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

Cómo crear una galería responsive en WordPress

Hoy veremos cómo puedes insertar una galería de fotos responsive en tu Wordpress con un diseño atractivo tanto en móvil como en PC

29/11/2018 Por Ramón 2 comentarios

https://roptex.com/podcast/podcast41.mp3

Apple Podcasts | Google Podcasts | Spotify | Pandora | RSS

Hoy vamos hablar de cómo puedes insertar una galería de fotos responsive en tu WordPress, pero antes un poco de autobombo!!!:

Si quieres que te ayude a crear o mejorar tu página web pásate por Pampua.es

Te ofrezco garantía de satisfacción total (hasta que no esté a tu gusto no pagas el último 50%) y soporte ilimitado por mail. El 100% de los clientes terminan contentos. Lee sus reseñas!

Cómo crear una galería responsive en WordPress

Crear una galería de fotos desde el propio WordPress es  muy fácil.

Dentro de la página o entrada en las que quieras incluirla, solo tienes que hacer clic en el botón “Añadir objeto” como si fueras a añadir una imagen normalmente.

En la menú de la izquierda, selecciona “Crear galería”:

Ahora podrás seleccionar todas las fotos que quieras incluir. Cuando las hayas escogido todas, haz clic en el botón “Crear una nueva galería”.

En la siguiente ventana podrás editar algunas cosas, como el orden de las imágenes, las leyendas (que se mostrará como si fuera el título de la imagen), el número de columnas a mostrar, el tamaño de las miniaturas y hacia dónde enlazan, aunque esta última opción está muy limitada.

Pero la verdad es que la galería así queda un poco cutre, vamos a mejorar el aspecto un poco añadiendo un efecto “mesa de luz” o “Lightbox” para que cada vez que hagas clic en una imagen de la galería, se amplíe mostrándose en el centro de la pantalla con todo alrededor oscurecido, añadiendo además unas flechas de navegación para que puedas pasar a la siguiente o a la anterior foto.

Para activar este efecto, solo tienes que instalar este plugin llamado WP Featherlight, y en la edición de la galería seleccionar la opción “Enlazado a: Archivo multimedia”. Es un plugin muy ligero y que funciona nada más instalarlo sin tener que configurar nada.

Si queremos mejorar aún más su aspecto os recomiendo que también instaléis el plugin de “Tiled Gallery” que nos muestra la galería con un interesante efecto de mosaico:

tiled gallery

La configuración de este plugin para que funcione correctamente es muy sencilla, dejamos solo activada la primera opción llamada “Tiled Galleries” y desactivamos el resto:

configuración plugin tiled gallery
Configuración del plugin tiled gallery

Y ahora una forma distinta de mostrar las imágenes:

Importar las fotos automáticamente desde Instagram

Esto tampoco tiene mucho misterio, simplemente tenemos que instalar el plugin “Instagram Feed” https://es.wordpress.org/plugins/instagram-feed/ y configurarlo. Sólo tienes que conectarlo con tu cuenta de instagram, configurar cuantas fotos y columnas quieres que muestre (te recomiendo que sea el mismo número en ambos campos para mostrar una tira de imágenes; 5 queda bien)

Y ahora…

EL PODCAST DE LA SEMANA

Hoy quiero recomendaros Disrupt everything del gran Isra García.

Semanalmente Disrupt Everything te ayuda a cambiar y mejorar todo lo que te propongas. Es una guía para vivir en un estado permanente de reinvención. Un proyecto diseñado para facilitar las claves, estrategias, técnicas, habilidades, rituales, nuevos fundamentos, procesos, sistemas o trucos que te ayuden a reinventarte a ti mismo, y todo lo demás. La meta final de este podcast es: incomodarte, educarte, molestarte, lanzarte, liderarte, desarrollarte, optimizarte, mentorizarte, potenciarte, propulsarte, elegirte y reinventarte. Vamos a ello.

Como siempre, los puedes escuchar en iTunes, iVoox, Spotify, Youtube, etc.

Y esto ha sido todo por hoy, si ya conocías cómo modificar los tipos de letra y has echado algo en falta, cuéntamelo! O si te ha quedado alguna duda o te gustaría que tratase algún tema en concreto pásate por pampua.es y déjame un mensaje; estaré encantado de comentarlo contigo.

O si lo prefieres en los comentarios de iVoox, en twitter @pampua, o en nuestra página de Facebook: facebook.com/pampua

Si te ha gustado este episodio compártelo al menos con una persona a la que pueda resultarle interesante. Por whatsapp, por mail, por  Facebook, twitter o incluso por SMS, como quieras, pero compártelo! Recuerda que puedes escucharlo y suscribirte en iTunes, iVoox, Spotify, Youtube y desde la web de pampua.es/podcast.

Y por último estaré inmensamente agradecido si me dejas una reseña de 5 estrellas en iTunes o un me gusta y un comentario en iVoox. Puedes ver cómo dejar una reseña en www.pampua.es/resena

El jueves que viene hablaremos de cómo alinear elementos con CSS en nuestro WordPress.

Muchísimas gracias por escuchar hasta el final, por comentar, por tus “Me gusta” y reseñas. Nos escuchamos la semana que viene llueva, nieve o truene!

Quizá te interese:

Cómo crear una copia de tu web para hacer pruebas
Introducción al growth hacking y embudos de ventas
Qué son los rich snippets y cómo nos ayudan

Publicado en: Podcast Etiquetado como: fotos, galeria, responsive

Interacciones con los lectores

Comentarios

  1. Marcelo Juarez dice

    14/07/2020 a las 17:03

    Buenos dias
    la herramienta de wordpress para crear galerias de imagenes, si bien es responsive no es posible que desde el movil las imagenes se desplacen con el dedo, hay que cerrar la imagen y abrir otra.
    Hay algun codigo o plugin para que las imagenes puedan desplazarse desde el movil.
    gracias

    Responder
    • Ramón dice

      14/07/2020 a las 17:12

      Hola Marcelo, justo ayer actualicé el Rural Theme y le incluí un código para que la galería de imágenes que tiene Gutenberg abriera las fotos con un efecto lightbox que permite pasar las imágenes pulsando en el lateral de la foto (una vez ampliada)
      Ejemplo de galería lightbox en el móvil

      Responder

Deja una respuesta Cancelar la respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!