Cómo aplicar divisores de sección a módulos en Divi

por | 12 Jun, 2018 | Diseño Divi, Módulos, Tutoriales

Aplicar divisores de sección a módulos en Divi

A día de hoy, Divi se ha convertido en una referencia a seguir en el ámbito de  maquetadores visuales para WordPress. Sabemos que su nivel de calidad es altísimo. La facilidad de uso, las constantes mejoras y actualizaciones lo convierten en probablemente el tema más completo para WordPress. Para mí, con varios cuerpos de ventaja sobre sus perseguidores.

Pero no trata este post de las virtudes de Divi, que ya las conocemos. Vamos a utilizar una de las funcionalidades incorporadas recientemente de una manera diferente: los divisores de sección. Si necesitas refrescar cómo se aplica esta funcionalidad de manera básica, puedes visitar este tutorial: Un vistazo a los nuevos separadores entre secciones de Divi y un tutorial práctico.

Vamos a aprender cómo aplicar divisores de sección sobre módulos. A estas alturas seguramente ya sabéis que disponemos en los ajustes de sección de una funcionalidad interesante. Nos proporciona varios diseños que podemos insertar entre dos secciones y que actúan como transición entre ambas secciones. El efecto es fantástico y su uso muy sencillo.

La variación

Pero en esta ocasion vamos a usar estos divisores de otra forma. No vamos a  usar los divisores para transicionar entre secciones. Aplicaremos el diseño sobre una serie de módulos dispuestos en una fila con tres columnas. Mira cómo va a quedar en la imagen de cabecera de esta post.

Por lo tanto sólo necesitaremos una sección para esta práctica. Comentar también que si queremos que cada módulo tenga el efecto en la versión tablet y móvil, habría que crear estas versiones en secciones independientes. Pero no es imprescindible, por lo que nos va a servir una única versión. En las vistas tablet y móvil, solo se verá el efecto sobre el primer módulo. De todas formas, en el post de Elegant Themes en el que está basado este tutorial, aquí lo tienes, se explica cómo hacer esas versiones de las que te hablo.

Aquí puedes ver otra variante del ejercicio que haremos, aunque la referencia de esta práctica es la imagen que encabeza este post.

Ejemplo-divisores-de-seccion-en-modulos-divi

Las claves para nuestro tutorial

Los puntos claves para este tutorial son dos:

  • La disposición del divisor que usemos. Para este ejercicio, debe estar por encima del contenido de la sección para que sea visible.
  • El relleno superior de los módulos, que para esta práctica serán del tipo anuncio. Debe haber suficiente espacio en la zona superior para que el divisor de sección no se superponga a contenidos que deben estar a la vista.

Creando la base para el ejercicio

Creamos una nueva entrada o página y hacemos clic en el botón Usar el constructor Divi. 

usar-constructor-divi

Acto seguido añadimos una fila de 3 columnas pulsando en la barra de la fila que contiene el texto +insertar columnas.

captura-insertar-3-columnas

Ahora, añadimos un módulo anuncio pulsando en la primera de las tres columnas. Cuando se abra la configuración del módulo,sin salir de la pestaña activa, o sea, Contenido, pon un título (yo a este primer módulo le he puesto Separadores de Sección), inserta el texto que quieras en la parte del contenido (en nuestro caso, texto simulado), activa la opción Usar icono y elije uno. En fondo introduce el color #ffd05b, que es amarillo que puedes ver en el ejemplo. Ahora guardamos y salimos y continuaremos la práctica en modo constructor visual.

Activamos el constructor visual

usar-constructor-visualSi has seguido otros tutoriales nuestros, sabrás que usamos frecuentemente el constructor visual. Esto nos da más control sobre nuestras acciones. Nos permite ver de forma inmediata los cambios y ajustes que apliquemos.

De momento tenemos una sección que contiene una fila con tres columnas. Hemos creado un módulo tipo anuncio en la primera columna, que luego terminaremos de configurar. Así que activamos el constructor visual.

 

Ajustando la sección

Pulsamos en el engranaje de la sección (blanco sobre fondo azul) para abrir sus ajustes. En la primera pestaña, contenido, ponemos un color de fondo. Yo he usado un azul turquesa: #4aaecf

fondo-azul-turquesa

Ahora vamos a aplicar el dividor. Activamos la pestaña diseño y pulsamos en la opción divisores. Seguramente lo tendrás en inglés (Dividers). Selecciona un diseño de los posibles. El noveno empezando por arriba es el de esta práctica. El color del divisor debe ser el mismo turquesa que elegimos como fondo de sección. Esto es para este ejercicio. Por su puesto que en tus proyectos puedes hacer las variaciones que quieras. Todavía no verás ningún efecto.

En la opción Divider height, introduce, por ejemplo, unos 180 px. Esto es la altura del efecto. Divider flip volteará el efecto vertical u horizontalmente. Experimenta si quieres. Aquí no es necesario. La última opción, Divider Arrengement sí es importante, ya que determina si está debajo o encima de los contenidos de la sección. Cambia a On Top of Section Content y ya verás el efecto sobre el módulo. Pulsa el icono de guardar cambios (check blanco sobre verde).

aplicar divisores de sección a módulos en Divi

Terminando de ajustar el módulo anuncio

Ahora abre los ajustes del módulo anuncio (engranaje sobre fondo gris). Terminaremos de configurarlo y luego lo duplicaremos y cambiaremos el contenido.

Ya habíamos ajustado las opciones de la pestaña contenido, así que entramos en la pestaña diseño y configuramos de la siguiente manera:

Imagen e icono

En el apartado Color de icono, hemos usado un morado #8300e9

Activa Usar tamaño de fuente de icono y dale un tamaño de 56px

Texto

Orientación del texto: centrado

Título de texto

Nos ha parecido que iba bien la tercera opción en Título font Style.

en el apartado Título tamaño del Texto, ajustamos a  22px.

Cambia color y experimenta si lo deseas.

Cuerpo Texto

En Cuerpo Tamaño del Texto hemos usado 13 px.

Respecto al Cuerpo altura de línea, hemos reducido hasta 1,4 em

Separación

Relleno personalizado: superior: 110 px. Esto dará «aire» en la zona superior y permitirá que se aprecie el divisor sobre el módulo. Tal vez debas aumentar o reducir dependiendo de la configuración de tu módulo. En base, izquierda y derecha y añadido 20 px.

separacion-divisores-anuncio

En borde, redondeamos los bordes, así que en Rounded Corners, ponemos un valor de 12px.

Aplicamos un sombra (En box shadow). Posición Horizontal, 0px. Posición vertical 10 px, Blur Strength 18 y spread 0.

Como decía esto no es imprescindible, cambia los ajustes según te convenga. Ahora sólo tienes que duplicar el módulo dos veces y cambiar iconos y texto de cada nuevo módulo. Y ya lo tendrás. Como siempre, el vídeo bajo estas líneas.