Ejercicio Divi. 3 imagenes en una columna

por | 21 Feb, 2017 | Divi, Tutoriales | 0 comentarios

Ejercicio Divi. 3 imagenes en una columna

Tutorial Divi. Varias imagenes en una columna. En esta práctica vamos vamos a insertar una sección con dos columnas. En la columna de la derecha pondremos una imagen grande. En la de la izquierda añadiremos un texto. Y debajo de éste, tres imágenes que distribuiremos por la columna. Serán imágenes independientes porque queremos que se pueda hacer zoom al pulsar sobre ellas. Como en otras prácticas que hemos realizados en otros posts, añadiremos también algunos efectos para ir cogiendo soltura con las posibilidades que nos ofrece Divi.

Justo bajo estas líneas puedes ver el resultado final de nuestra práctica.

Tutorial Divi. Varias imagenes en una columna. Final

Propuesta de diseño Divi. Insertar 3 imágenes en una columna. La estructura

Aquí puedes ver cuál es la estructura que tendrá la sección una vez acabado el ejercicio.

estructura-seccion-ejercicio-divi-columnas

usar-constructor-visual

Vamos entonces al grano. Si quieres seguir el tutorial con las mismas imágenes que yo he utilizado, puedes descargarlas aquí.

Obviamente, como siempre, creamos una nueva página y activamos el constructor Divi.

En la sección que nos aparece por defecto, pulsamos en insertar columnas y elegimos dos columnas (1/2, 1/2)

insertar-dos-columnas

Una vez tenemos nuestras columnas, en la de la derecha, insertamos un módulo de imagen y a continuación configuramos las opciones.

La columna de la derecha

ajustes-generales-modulo-texto

Así que pulsamos en Ajustes del módulo desde donde añadimos la imagen del perro boxer. Prácticamente dejamos todo como está por defecto. Lo único que yo he cambiado es desactivar animación y ajustar la alineación de la imagen al centro. Busca combinaciones si no te convence el aspecto.

Verás que el fondo de la imagen es de un color plano. Usaremos más adelante una extensión de chrome para capturar muestras de color y que me parece muy útil, pero eso será un poco más adelante.

La columna de la izquierda

Ahora vamos a insertar el módulo de texto en la columna de la izquierda. Así que creamos el módulo de texto y ponemos un título h1 y el texto normal. Como ves, no tiene mucho misterio. Experimenta con los ajustes, tipografías, colores, etc. Ajustaremos los espacios alrededor del texto, más adelante, ya que lo haremos en los ajustes de fila para que afecte al contenido de toda la columna, no sólo al texto.

texto-ejercicio

 

Es ahora el turno de nuestras 3 imágenes bajo el texto y distribuidas en la misma columna. Vamos a crear un módulo de imagen y cuando esté completamente configurado, lo duplicaremos dos veces para optimizar nuestro tiempo. Así no tendremos que repetir el proceso con cada imagen.

De manera que insertamos un módulo de imagen bajo el módulo de texto. Añadimos la imagen del perro Yorkshire (o la imagen que quieras). Si decides usar tus propias imágenes, asegúrate de que sus dimensiones sean iguales.

En Ajustes generales activamos Abrir en capa emergente, ponemos si queremos superposición de imagen (que al pasar el mouse por la imagen se atenúe con algún color) y en alineación de imagen ponemos en el centro.

En Ajustes avanzados de diseño activamos Usar borde, color blanco y anchura de borde 2 px. No necesitamos hacer más aquí.

El código CSS

Ahora pulsamos la pestaña CSS personalizado, donde vamos a poner el código CSS en el campo Elemento principal:

tutorial-columnas-insertar-css

Este es el código, cópialo y pégalo en tu proyecto:

width: 30%; margin-right: 5%; float: left;
-webkit-box-shadow: 0px 4px 20px 1px rgba(38,37,38,0.50);
-moz-box-shadow: 0px 4px 20px 1px rgba(38,37,38,0.50);
box-shadow: 0px 4px 20px 1px rgba(38,37,38,0.50);

Con la primera línea de código le decimos que ocupe un 30% del espacio que disponemos para esa imagen, es la que va a permitir distribuir las tres imágenes así que lo pondremos en cada uno de los módulos.

El resto del código aplica una sombra a la imagen. Recuerda que los valores son: desplazamiento x (a izquierda o derecha, en este caso 0px), desplazamiento y (arriba >valor negativo, abajo > positivo, aquí desplazamos 4 px hacia abajo). El siguiente valor es el difuminado, que en este ejemplo hemos puesto 20px, después la extensión de la sombra, y por último el color, expresado en parámetros RGBA y con valor de opacidad (0.50). Experimenta en modo constructor visual para ver cómo afectan los cambios de los valores.

pantalla-clonar-moduloAhora que tenemos nuestro módulo de imagen configurado duplicamos dos veces el módulo y cambiamos la imagen en los dos módulos duplicados. Al ser módulos duplicados conservarán todas las propiedas que tenía el módulo original, incluidos los efectos aplicados con el código CSS, así que verás que cuando cambies las imágenes mantendrán los efectos de la original. Sin embargo cuando previsualices, también comprobarás que la última imagen no se adapta a la columna y pasa a ocupar otra línea. Para solucionar esto, abrimos los ajustes del módulo (dela tercera imagen) y, en CSS personalizado, cambiamos la primera línea de código por esta:

width: 30%; margin-right: 0; float: left;

Observa que hemos cambiado el margen derecho del 5% a 0, de esta forma encajará sin problemas.

Ajustes de la fila

ajustes-fila-captura-de-pantallaSeguidamente pulsamos en el botón de ajustes de la fila y configuramos de la siguiente manera:

Ajustes generales: activamos Hacer que esta fila tenga anchura completa, esto dará un poco más de espacio (dependiendo del dispositivo y resolución de pantalla) para la distribución de las imágenes.

eye-dropper-extensionEn ajustes avanzados de diseño, cambiamos el Color de fondo al mismo que el fondo de la imagen del boxer (columna derecha). Yo he usado una extensión para google chrome, que se llama eye dropper, y que coloca un icono en el navegador. Con esta extensión es muy fácil y rápido tomar una muestra y copiar el valor hexadecimal o el que necesitemos. También existe para otros navegadores, como Firefox.

eye-dropper-pasos-usoAquí puedes ver cómo usarlo. Una vez lo instales, clicas en la zona marcada (1) y clicas en la muestra que quieres capturar.

Aparecerá en la librería de muestras de color junto con las capturadas previamente (2).

Finalmente copias el valor y lo pegas donde lo necesitas. (3).

De manera que copiamos el color del fondo de la foto del boxer, que es #d8c686 y lo pegamos en la casilla de color de fondo de la fila (en ajustes avanzados de diseño).

Seguimos en esta pestaña de ajustes y en Columna1 relleno ponemos en superior e izquierda, 5%, así daremos un poco de aire al contenido de nuestra columna. Con esto hemos terminado con la fila.

Ajustes de la sección

Ya sólo nos queda cambiar el color de fondo de la sección por el mismo de la fila (#d8c686) para eliminar el blanco y hacer nuestra composición más homogénea.

Y ahora sí que hemos acabado. No olvides visitarnos a menudo. Subimos frecuentemente nuevos tutoriales. Si te ha gustado, comparte, por favor