Crear efectos con CSS y Divi. Personalizar y animar el módulo persona de Divi.

por | 2 Oct, 2017 | animacion, css, Divi

Tutorial Divi. Introducción

Crear efectos con CSS y Divi es lo que haremos en la práctica de hoy. Vamos a jugar con un poco de código CSS para cambiar el aspecto del módulo persona del tema Divi y crear una apariencia como la que puedes ver en la práctica terminada un poco más abajo. Aunque no es la primera vez que abordamos el módulo persona de Divi, es esta ocasión vamos a ser un poco más originales. Si quieres ver el anterior tutorial sobre el módulo persona, puedes hacerlo aquí.

También aplicaremos un efecto de animación de zoom con sombra en el estado hover, esto es, cuando pasamos el ratón por el módulo.

Realmente puedes aplicar estos efectos sobre casi cualquier módulo, pero nosotros hemos pensado que el módulo persona de Divi nos iba a dar bastante juego.

Bajo estas líneas puedes ver algunas variaciones del tutorial terminado. Pasa el cursor por el módulo para ver el efecto de zoom y sombra que queremos generar.

Módulo Persona

Módulo Persona

Coordinador

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Módulo Persona

Módulo Persona

Director

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Módulo Persona

Módulo Persona

Director

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

imagen tutorial terminado

Configurando los elementos

Lo primero que necesitamos hacer es crear una página o entrada nueva, claro. Activamos el constructor Divi.

usar-constructor-divi

Verás que se ha generado automáticamente una sección, lista para añadir una nueva fila (insertar columnas). Así que pulsamos en insertar columna(s) y elegimos 3 columnas. Bueno, para este tutorial he optado por crear una fila de 3 columnas. Tú puedes variar esto en función de tus necesidades.

captura-insertar-3-columnas

Los ajustes tanto para la sección como para la fila pueden variar según las circunstancias. Por ejemplo, puedes desear ajustar el tamaño de tu fila de forma distinta en función del espacio disponible, si usas una barra lateral o si te decides por pantalla completa, como es mi caso. De todas formas, a grandes rasgos, estos son lo ajustes que yo he usado.

editar-fila-modulo-persona

He pulsado en ajustes de fila, y en la pestaña Diseño > Tamaño, he activado Usar anchura personalizada y la he ajustado a 760 pixeles. Insisto, tal vez tú necesites otros ajustes menores o mayores. Salimos de las opciones de configuración de la fila y continuamos.

Crear efectos con CSS y Divi. Configurar el módulo persona

Ahora insertamos en la primera columna un módulo persona y lo configuramos de la siguiente manera.

Pestaña Contenido

Rellenamos los campos de Nombre y Puesto.

Añadimos links provisionales (almohadilla #) en los campos de las redes sociales. Si tienes cuentas puedes incluir las urls en lugar de la almohadilla, que es lo que he usado yo para el ejercicio para que aparezcan los iconos de redes sociales.

modulo-persona-divi-contenido-1

Todavía en la pestaña Contenido, agregamos nuestra descripción (1) (yo he puesto texto simulado) y Subimos la foto desde el panel imagen (2). Las mías las he bajado de freepik. Yo te recomiendo que, para esta práctica, uses una imagen rectangular, ya que de otra forma, el aspecto puede cambiar y tal vez no ser el deseado. De todas formas, está bien que experimentes y veas por tí mismo los efectos que vas consiguiendo. Las imágenes que yo he utilizado en cada uno de los módulos tienen un tamaño de 300×300 pixeles de altura y anchura.

modulo-persona-divi-contenido-2

Pestaña Diseño

En la pestaña Contenido ya no tenemos que hacer nada más. Así que pulsamos ahora en la pestaña Diseño y, en el panel de texto ajustamos la orientación del texto en el centro. Si tienes una versión anterior a la 3.075 de Divi puedes centrar el título, cargo ye iconos con CSS. Envía un comentario si tienes dudas.

disenio-modulo-persona-divi

Desde este panel también podemos configurar otras opciones: color de los iconos de las redes sociales, estilos de texto para la cabecera y cuerpo de texto, borde, separación y animación (opción nueva). Juega si quieres con los ajustes para adecuar el módulo a tu gusto.

modulo-persona-sin-css

Llegados a este punto nuestro módulo tendrá un aspecto parecido al de la imagen que puedes observar a la izquierda de estas líneas.

De forma que vamos a aplicarle un poco de código CSS para ir dándole la forma que queremos y ver cómo su aspecto va a ir cambiando.

A continuación veremos el código CSS que necesitamos asociar a nuestro módulo y una vez que esté listo duplicaremos este primer módulo con pequeñas variaciones para que ves como un pequeño cambio en el código CSS cambia la apariencia de nuestro módulo.

Aplicando y entendiendo el código CSS

Para conseguir el aspecto de nuestros módulos persona, vamos a incluir el siguiente código en la pestaña Avanzado del módulo. De manera que accedemos a la pestaña Avanzado del módulo y, en CSS personalizado pegamos el código que ves a continuación en el campo Elemento principal.

border-radius: 100px;
overflow: hidden;
max-width : 200px;
margin: 0 auto 30px;
border: 4px solid #74bae6;

Y en descripción  de miembro añadimos

margin: 10px;

Esto añade «aire» en los márgenes del texto principal mejorando el aspecto. Ahora se ve más limpio.

css-personalizado-modulo-persona

Entendiendo el código

  • La primera línea determina la forma circular del objeto al que se le asigna. Como es sobre todo el módulo (rectangular) el resultado será la forma oval. Si lo hiciéramos sobre un objeto rectangular el resultado sería circular como veras más adelante.
  • La segunda línea CSS oculta la parte sobrante (de la imagen en este caso) la que queda fuera del óvalo.
  • La tercera línea limita la anchura a 200 pixeles.
  • La cuarta configura márgenes
  • Y por último el borde, que de momento lo tenemos general, no específico a la parte superior, inferior, etc (sería border-top, border-bottom…). Podemos cambiar por supuesto el color del borde.

Vamos a cambiar un poco este CSS en cada módulo para modificar el aspecto en cada uno de ellos, pero antes ponemos la clase que animará el módulo.

Por lo tanto, en la misma pestaña  Avanzado, en ID y clases de CSS, escribimos zoom-sombra en el campo Clase CSS. Esto es la clase que hará que se anime el módulo al pasar sobre él y será igual para los tres módulos persona.

clase-css-modulo-persona

Estas son 3 variaciones del mismo código CSS. Te comentamos los cambios de cada módulo, que hemos numerado en rojo en la imagen.

efectos-modulo-persona

Módulo 1

border-radius: 100px;
overflow: hidden;
max-width : 200px;
margin: 0 auto 30px;
border: 4px solid #74bae6;

Es el mismo código que tienes arriba, no hemos tocado nada. Prueba a cambiar la propiedad border por border-left y aumenta el grosor a 10 px.

Módulo 2

border-radius: 100px;
overflow: hidden;
max-width : 200px;
margin: 0 auto 30px;
border: 4px solid #74bae6;

Aplicado en el campo elemento principal (Ajustes Módulo > Avanzado > CSS personalizado > Elemento principal) , como el primero. Se ha cambiado la última línea de código. Border por border-bottom, se ha aumentado el valor a 10 px y hemos asignado el color del fondo de la imagen, verde. (chulo, ¿eh?)

Módulo 3

border-radius: 100px;
overflow: hidden;
max-width : 200px;
margin: 0 auto 30px;
border: 4px solid #74bae6;

Aplicado en esta ocasión en el campo Imagen de miembro (Ajustes Módulo > Avanzado > CSS personalizado > Imagen de miembro). Por esta razón, al aplicarse sobre una imagen rectangular, es circular y no ovalado y solo se aplica a este objeto, claro. el borde también se aplica sobre la imagen sólamente. En el campo Descripción de miembro hemos aumentado el margen a 20 píxeles.

La animación on Hover

Y ahora sólo nos falta añadir el CSS para la animación. Esto lo podemos hacer en nuestra hoja de estilos de tu tema hijo (Apariencia > Editor), en opciones del tema Divi. Divi > Opciones del tema >  CSS personalizado o en la página, que es donde yo lo he puesto.

Este es el código que debes copiar y pegar en los ajustes de la página (imagen abajo). Recuerda que ya pusimos la clase zoom-sombra en los módulos.

.zoom-sombra {
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
 -webkit-transition: all 0.6s;
 transition: all 0.6s;}
 .zoom-sombra:hover {
 -webkit-transform: scale(1.1, 1.1);
 transform: scale(1.1, 1.1);
 box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
 z-index: 1;}

ajustes-css-divi-builder-pagina

Y ya está, si tienes alguna sugerencia, puedes enviar un comentario. ¡ Y no olvides compartir!

A continuación, el vídeo, pero usando el constructor visual, por si se te ha escapado algo.