Crear una galería en divi con efecto polaroid en las fotografías

por Pedro Hueso | Sep 13, 2017 | css, Divi, Galería Divi

Imagen-destacada-galeria-efecto-polaroid

La idea. Crear efectos galeria divi

Hace ya unos meses vi en el blog de Elegantthemes varios post relacionados con las bodas y los recién casados. En una parte de estos se comentaba como crear una galería aplicando un efecto de fotografía antigua, tipo Polaroid, a las imágenes.

Seguro que muchos recordáis aquellas fotografías que se hacían con las máquinas de fotos Polaroid. De modo que pensé que tal vez sería buena idea rescatar parte del artículo y adaptarlo para crear una especie de galeria con Divi. Un panel de fotografías estilo Polaroid distribuidas de forma irregular sobre un fondo. De aquí saque la idea.

Aquí puedes ver cómo va a quedar nuestra práctica una vez hayamos acabado.

efecto-polaroid-final. efectos galeria divi

Preparando los elementos

Necesitaremos evidentemente tener instalado el tema Divi en nuestro WordPress.

Respecto a las imágenes, yo he utilizado 8 de distintos tamaños y orientación. Exactamente he usado algunas imágenes de 500×500 pixeles, esto es, rectangulares. Otras tenían unas dimensiones de 600×400 px y alguna de 1024×600.

Para esta práctica es conveniente que no sean todas del mismo tamaño para que el efecto sea más «natural».

Crearemos primero una sección con una fila de una columna con un módulo de texto. Debajo pondremos la galería que será otra sección con una fila compuesta por cuatro columnas. En Cada columna habrá un módulo de imagen que personalizaremos. Cuando hayamos configurado nuestro primer módulo de imagen, el resto será coser y cantar. Solo tendremos que duplicar el módulo de imagen y ajustar algunos parametros para culminar nuestra composición.

Esta es la estructura final de las secciones.

La primera sección

Una vez hemos creado nuestra nueva página o entrada y hemos pueso un nombre, activamos usar constructor Divi y aprovechamos la sección que aparece por defecto, para, en el módulo fila, insertar estructura de una columna y a continuación insertar módulo > módulo de texto.

insertar-1-columna

ajustes-fila

Antes de configurar el módulo de texto, vamos a modificar el color de fondo de nuestra fila. De manera que pulsamos en ajustes de fila y, en la pestaña contenido, pulsamos en la primera opción de fondo y seleccionamos un color para el fondo. Yo he escogido un azul intenso, tú elige el que más te guste.

color-de-fondo-fila-divi

Y ahora sí, vamos a configurar el módulo de texto. Por lo tanto, pulsamos en ajustes de módulo (tres rayitas negras sobre la parte gris) y configuramos de la siguiente manera:

configuracion-texto-polaroid

Pestaña contenido: añadimos el texto, en mi caso he puesto Efecto fotografía Polaroid.

Pestaña diseño (en la imagen, a la izquierda):

Texto: orientación centro y en Color claro

Fuente: tangerine

Tamaño: 90, 80, 66 para desktop, tablet y smartphone, respectivamente.

Altura:1,4 em Estos son los valores que hemos usado nosotros. Puedes experimentar con otros ajustes según sea tus necesidades.

Bueno, estos valores son los que hemos usado nosotros para crear esta práctica pero tú puedes combinar estos ajustes y configurar tu módulo de texto como te parezca.

Eso sí, en función del color de fondo que elijas tal vez debas cambiar el color de texto a oscuro, etc.

De todas formas, no tengas miedo en experimentar. Siempre puedes volver sobre tus pasos desde las revisiones en tu escritorio de WordPress.

Las fotografías «polaroid»

Cuando ya tenemos nuestro titular creado, pulsamos en crear nueva sección (estándar) > insertar columnas > seleccionamos 4 y guardamos.

captura-insertar-4-columnas

Insertamos un módulo imagen en la primera columna y añadimos la primera imagen. Guardamos y salimos.

A partir de este momento cambiamos a la visualización del constructor visual como ves en la imagen inferior. De esta forma podremos ver de forma inmediata los cambios que vamos realizando y realizar los ajustes con mucha más comodidad.

constructor-visual

Una vez en modo constructor visual, ajustamos los espacios entre secciones a cero (si no lo tienes claro, mira el video al final del post) y ajustamos el color de fondo de la fila como ya hicimos en la anterior sección. Elije el mismo color y suavízalo con el dosificador que hay junto al de opacidad (o hazlo con el de opacidad, da igual).

Y ahora vamos a configurar nuestra imagen. De manera que pulsamos Ajustes del módulo (ver imagen inferior), activamos la pestaña Avanzado y en el campo ID y clases de CSS escribimos polaroid, que es la clase que se encarga de dar el aspecto que queremos a nuestras imágenes y que pondremos despues en el CSS de la página.

polaroid-clase-css

La primera foto

Ya sólo nos falta posicionar nuestra imagen y rotarla para terminar con la primera foto (módulo imagen). Asúi que, sin salir de la pestaña avanzado, pulsamos en CSS Personalizado y, en el campo Elemento principal pon el código que te proporcionamos a continuación:

z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

css-imagen-polaroid

Fíjate que la imagen ya ha girado. Clica aceptar (el check verde) y pulsa en el círculo purpura con los tres puntos blancos para expandir el menú y pulsar el botón del engranaje para abrir los Ajustes de página (1). Una vez ahí ve a la pestaña Avanzada (Advanced, 2) y, en CSS personalizado ponemos el CSS (3) de la clase polaroid (¿recuerdas?, lo referenciaste en el módulo de imagen).

Este es el CSS:

.polaroid {
background: white;
display: inline;
float: left;
margin: 0 15px 30px;
padding: 10px 10px 25px;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
  
.polaroid::after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
  
.polaroid.et_pb_image_2 {
display: block;
width: inherit;
}

Y para que no digas que no te lo ponemos fácil, aquí va otra captura:

css-pagina-polaroid

Y ya está, ahora sólo tienes que ir clonando los módulos de imagen y variando un poco los valores de cada módulo, sobretodo en separación (pestaña diseño del módulo), y el css cambiaremos apilamiento (index z) y giro.

Los parámetros

Aquí van los valores que nosotros hemos puesto en los 7 módulos restantes.

efecto-polaroid-final-numerado

FOTO 1 (500×500 px)

Es el módulo que hemos hecho, no hay más cambios

FOTO 2 (600×400 px)

Margen personalizado
Superior: -10%
Izquierda: -33%