Cómo crear una galería de imágenes de estilo Pinterest en WordPress

Cuando tiene imágenes que desea mostrar en su sitio web de WordPress, colocarlas en una galería de imágenes al estilo de Pinterest es una de las formas más populares de hacerlo. Tan popular, de hecho, que encontrarás muchos temas premium de WordPress que lo usan.

Crearlo también puede ser muy sencillo: lo hemos hecho de esa manera con nuestro complemento Qi Addons para Elementor. Entre los sesenta complementos de Elementor que obtienes en el complemento: lo máximo que encontrarás en un complemento gratuito – encontrará un widget de galería de imágenes de Pinterest.

Le mostraremos cómo puede usar el widget para crear una galería de imágenes al estilo de Pinterest en WordPress en solo unos pocos pasos. Hemos creado un video tutorial para cualquiera que prefiera el video, y lo insertaremos aquí si desea verlo.

Si desea leer cómo hemos creado una de las galerías de muestra que puede ver en la página del widget, puede quedarse con este artículo.

Agregar una galería de imágenes de estilo Pinterest en WordPress

Galería de imágenes de Pinterest

Para poder seguir esta demostración y crear impresionantes galerías de imágenes al estilo de Pinterest, necesitará dos componentes clave: Elementor y nuestro Complementos Qi para Elementor enchufar. También puede consultar nuestro tema gratuito de Qi WordPress si aún no se ha decidido por uno para su sitio web y desea algo que se vea y se sienta premium sin la etiqueta de precio premium.

Entonces, su primer paso sería instalar y activar Elementor y luego instalar y activar el complemento Qi Addons para Elementor. Una vez hecho esto, puede continuar con la creación de una nueva página o publicación en la que desee agregar la galería de imágenes o abrir una publicación o página que desee editar. De cualquier manera, Si busca «Pinterest» en la pestaña Elementos, aparecerá el widget Galería de imágenes de Pinterest, y arrastrarlo a una sección gratuita será suficiente para comenzar.

Agregar widget de galería de imágenes de Pinterest

El hecho de que no hayamos creado ninguna columna antes de agregar el widget no debería preocuparte. Tampoco debería el aspecto algo simple y vacío del widget antes de que se agreguen imágenes a la galería.

Este sería un buen momento para señalar que probablemente tendrá que investigar algunas configuraciones si desea que su galería de imágenes sea realmente de ancho completo como la que le mostramos aquí. De forma predeterminada, la galería puede estar encuadrada, dejando algo de espacio entre los bordes de la galería y los bordes de la página. Puede depender del tema que estés usando y del diseño que hayas elegido.

En relación :  La actualización de GTA Online viene con una nueva misión con el Dr. Dre y sus canciones

Le mostraremos cómo hemos configurado nuestro diseño y sección para que la galería ocupe todo el ancho de la pantalla. Primero, en la configuración de la página, puede encontrar las opciones de diseño que le permiten elegir la más amplia. En nuestro caso, con el tema Qi, fue la opción Qi de ancho completo. Si está usando un tema diferente, seleccione la plantilla Elementor Full Width o una opción similar que venga con su tema.

Diseño de página

Si bien la elección de este diseño hizo que la sección tuviera el ancho completo, su contenido permaneció en caja. Así es como se veía cuando estábamos haciendo nuestra galería.

Vista previa de cuadrícula

Para solucionarlo, necesitábamos acceder al menú Editar sección presionando el botón central en la parte superior de la sección, el que no es ni el «+» para agregar una nueva sección ni la «x» para eliminar la sección existente. En las opciones de Editar sección, elegimos Ancho completo para nuestro Ancho de contenido en lugar de la opción Encuadrada predeterminada, y configuramos la opción Espacio entre columnas en Sin espacio.

Editar ancho de sección

Eso funcionó y nos dio la galería más amplia posible sin huecos. Por supuesto, puede dejar la configuración en caja o elegir diferentes opciones para los huecos. así es como lo hicimos cuando creamos el ejemplo.

Configuración de la galería de imágenes

Ahora a la parte divertida: agregar imágenes y configurar la galería. En la pestaña Contenido de la Galería de imágenes de Pinterest, verá que las opciones Generales le permiten seleccionar imágenes. Presionar el botón para crear una galería lo llevará a un menú donde puede elegir imágenes de su biblioteca de medios o cargar otras nuevas. Hemos elegido diez imágenes que ya estaban en nuestra biblioteca multimedia.

Seleccionar imágenes

Después de crear la nueva galería e insertarla en el widget, verá cómo se ve una galería predeterminada. Debido a que hicimos los ajustes de ancho de antemano, el nuestro era de ancho completo y venía en tres columnas con algo de espacio entre los elementos.

Imágenes agregadas

El siguiente lote de configuraciones es donde puede realizar algunos cambios bastante importantes en la galería. La primera opción en la configuración de la galería, por ejemplo, le permite elegir si desea habilitar enlaces personalizados para las imágenes. Sin embargo, al hacerlo, se desactivará la opción emergente de la caja de luz de forma predeterminada. Las otras opciones que puede elegir incluyen la cantidad de columnas, que puede configurar para que sean diferentes para pantallas de diferentes tamaños, el espacio entre los elementos, el efecto de desplazamiento de la imagen y los colores superpuestos para la vista normal y al desplazar el cursor.

En relación :  Cómo activar / desactivar Google Now On Tap [Android]

Activamos la ventana emergente Lightbox porque es una opción muy útil. Elegimos cinco columnas para nuestra galería, pero Hicimos bastantes ajustes en las opciones de Columns Responsive. Para los dos tamaños de pantalla más grandes, elegimos cinco columnas. Para el siguiente, configuramos tres y seguimos con dos antes de terminar con dos columnas individuales. Queríamos utilizar el espacio adicional que ofrecen las pantallas más grandes para mostrar más columnas y lograr un efecto estético agradable y, al mismo tiempo, mantener las imágenes lo suficientemente grandes. Intentar hacer lo mismo con una pantalla más pequeña y estrecha haría que las imágenes fueran demasiado pequeñas. Por eso, cuanto más estrecha es la pantalla, menos columnas usamos. Sin embargo, todavía estarán allí, solo uno debajo del otro, en lugar de uno al lado del otro.

Número de columnas

Hemos establecido el espacio entre los elementos en cero, y hemos elegido la imagen para alejar la imagen al pasar el mouse, siendo el centro el origen del zoom de la imagen. Optamos por no agregar un color de superposición, tanto regular como al pasar el mouse., pero siéntase libre de agregarlo si desea darle un poco de sabor a su galería. Solo recuerde agregar un grado de transparencia a cualquier color que elija, a menos que desee que bloquee completamente las imágenes en su galería.

Desplazamiento de la galería de Pinterest

El toque final que aplicamos fue reordenar las imágenes. Si regresa a las opciones generales, al hacer clic en la ventana de la Galería podrá editar la galería. El simple hecho de mover las imágenes cambiará el orden en el que aparecen en la página. Después de terminar y volver a insertar la galería, este fue el resultado.

Final de la galería de Pinterest

¡Vamos a envolverlo!

Dependiendo de su profesión y el propósito de su sitio web, las imágenes pueden ser el tipo de contenido más importante que puede alojar. Es por eso que debes tener una forma rápida y fácil de crear galerías y mostrarlas. En este artículo, hemos demostrado cómo nuestro complemento Qi Addons para Elementor puede proporcionar esa opción gracias al widget de la Galería de imágenes de Pinterest.