Tutorial Divi. Personalizar el módulo Persona

por | 13 Feb, 2017 | css, Divi, Tutoriales, Wordpress

Tutorial divi. Cómo personalizar el módulo Persona con un poco de CSS

El módulo persona es una manera sencilla de crear un perfil profesional y mostrar tus habilidades o las de tu equipo de forma ordenada.

Este módulo combina texto, imagen y enlaces a redes sociales. Solemos encontrarlo en las páginas «Quienes somos», «Nuestro equipo», y páginas similares.

Evidentemente, no es obligatorio utilizarlo solo en estas páginas. Podemos buscar otros usos en función de las necesidades que tengamos en nuestro site.

Bajo estas líneas puedes ver cuál es el aspecto predeterminado de este módulo. Ajustará el texto bajo la imagen o la derecha de éste en función del espacio disponible.

En este ejemplo hemos elegido dos columnas con formato 3/4 – 1/4. Después, hemos insertado el módulo persona en la columna mas grande. Y otro módulo de texto en la zona con menos espacio(1/4).

 

Modulo persona Divi predeterminado

El modulo persona del tema Divi es bastante versátil y útil. Seguramente lo usarás en varias ocasiones y por si quieres contar con algunas variaciones que podemos hacer para personalizar nuestro módulo, aquí te presentamos una propuesta añadiendo un poquito de código CSS.

A continuación puedes ver el aspecto que queremos conseguir modificando este módulo.

Vamos a recortar la imagen de forma circular, añadir una sombra a cada imagen y configurar la posición y alineación de los elementos que conforman el bloque.

modulo persona tema divi aspecto finalModulo persona Divi. Configurar nuestro primer módulo

Lo primero que vamos a hacer es crear una nueva página o entrada, activamos el constructor Divi y pulsamos en insertar columna donde elegimos 3 columnas como vemos en la captura de imagen.

captura-insertar-3-columnas

A continuación vamos a crear el primer módulo persona, que es el que vamos a configurar para mas tarde clonar y cambiar sólo los datos y la imagen. Así que pulsamos en la primera columna, donde veas insertar módulo, y seleccionamos el módulo persona en la pantalla activa.

insertar-columna-modulo-persona-divi

Se nos va a abrir la pantalla de ajustes del módulo persona y, en Ajustes generales añadimos un nombre, el puesto que ocupa, subimos la imagen desde la casilla URL de imagen, que para este tutorial debe ser cuadrangular (nuestras imágenes son de 200px de ancho por 200px de alto). Rellena los ajustes de las redes sociales que quieras incluir poniendo las urls y añade un texto como descripción.

En Ajustes avanzados de diseño hemos configurado de la siguiente manera:

  • Los ajustes para la cabecera. Fuente: Pacifico, tamaño, 28px, color #628ec4
  • Los ajustes para el texto del cuerpo. Fuente: Cherry Cream Soda, tamaño, 12px, caltura de línea 1.5 em
  • Los demás parámetros los dejamos tal cual están, si quieres experimentar, no dudes en hacerlo.

Este es aspecto que tiene nuestro módulo llegados a este punto.

modulo-persona-divi-defecto-paso-intermedio

El CSS

Ahora, para personalizarlo, abrimos los ajustes del módulo y pulsamos CSS personalizado. Te recomendamos que lo hagas desde el constructor visual para ir viendo los cambios que se van produciendo y entender mejor el código.

En el campo de la imagen de miembro añadimos:

border-radius: 100px;
overflow: hidden;
max-width : 200px;
margin: 0 auto 30px;
border: 4px solid #74bae6;
-webkit-box-shadow: 0px 0px 20px 1px rgba(38,37,38,0.39);
-moz-box-shadow: 0px 0px 20px 1px rgba(38,37,38,0.39);
box-shadow: 0px 0px 20px 1px rgba(38,37,38,0.50);

Esto hace que la imagen solo sea visible dentro de un círculo. Además, añade un contorno de 4px azul y crea una sombra. No tengas miedo en probar cambiando valores.

Por último, solo nos queda alinear el contenido a centro. Si quiesiéramos hacerlo de forma independiente, esto es, centrar elñ título, dar otra alineación distinta a los iconos de las redes sociales, etc, lo haríamos desde los campos personalizados. Por ejemplo si queremos centrar lo iconos pero no el resto pondríamos el código en el campo habilidades sociales de miembro.

Pero como queremos que afecte a toda la descripción del módulo, ponemos el CSS en el campo Descripción del miembro:

text-align: center;

Y eso es todo. Si te ha gustado comparte, por favor.