Un vistazo a los nuevos separadores entre secciones de Divi y un tutorial práctico
Introducción
Con la nueva actualización de Divi, los chicos de Elegant Themes han rizado aún más el rizo. Ahora es posible añadir separadores entre secciones de Divi creando transiciones dinámicas entre contenidos distintos. Esto va a añadir más valor a nuestro sitio dándole un plus adicional.
Características de la nueva herramienta
La nueva funcionalidad se aplica a las secciones. De modo que para encontrarla debes acceder a los ajustes de la sección y una vez ahí, la verás en la pestaña Diseño >> Dividers.
Puedes aplicar estas transiciones tanto a la parte superior de la sección como a la parte inferior (base) de forma independiente. Una vez seleccionada la zona a aplicar la transición, podemos elegir entre 26 formas distintas de separador. Además, cada una de estas formas podemos personalizarlas de varias maneras. Personalizar color, modificar tamaño, repetir el patrón, voltearlas horizontal o verticalmente, y alternar posición del eje z. Esto es, si queremos que se ponga encima del contenido afectado o detrás. Una gozada.
El panel dividers
Como comentaba un poco más arriba, si abrimos los ajustes de la sección, en la pestaña diseño ahora disponemos de una nueva funcionalidad, que han llamado Dividers (hasta que lo traduzcan). El interfaz de la funcionalidad es intuitivo y muy sencillo de usar. Para sacarle el mayor rendimiento posible es recomendable usar estas transiciones desde el constructor visual. De esta manera, veremos los cambios que vamos aplicando de manera simultánea y esto nos abre un montón de posibilidades de ajuste.
Otra característica muy útil que presenta esta funcionalidad es la herencia de color automática que proporciona. O sea, que sin hacer nada, cuando apliquemos una transición tomará automáticamente el color de la sección sobre la que va a transicionar. Lo verás más claro en la práctica que te hemos preparado.
Seguidamente tienes el panel Dividers con las distintas opciones comentadas.
- Selecciona la zona superior de la sección para aplicar el separador.
- Selecciona la zona inferior de la sección (base) para aplicar el separador.
- Elije un separador entre 26 posibles.
- Si quieres personalizar el color del separador puedes hacerlo aquí. Lo normal es dejarlo vacío para que se funda con el color de la sección colindante.
- Usa el deslizador para ajustar la altura de la forma (separador) seleccionado.
- Repite el patrón tantas veces como quieras. Efectivo para algunas formas. En otras no tanto.
- Voltea la forma verticalmente.
- Voltea la forma horizontalmente.
- Define si quieres que la transición esté encima de los contenidos con los que se cruce (los tapa) o debajo del contenido.
Adiós al efecto dientes de sierra
Otro aspecto que nos encanta es la perfecta definición de los bordes. Esto es debido a que las formas están basadas en el formato SVG. Son formas vectoriales (como eps). Así se garantiza una escalabilidad sin pérdida de calidad, un peso mínimo y una nitidez absoluta.
Un ejemplo
Y ahora que ya sabes cómo funciona esta nueva utilidad, vamos a hacer una práctica que refuerce lo que hemos visto. También podrás seguir este artículo en vídeo al final del post.
Abajo tienes una imagen con el resultado del tutorial. Y si quieres ver el resultado sobre una página real, pulsa aquí. Desde esta página donde está la demo del ejercicio puedes descargar las imágenes usadas pulsando con el botón derecho del ratón y seleccionando guardar imagen como.
Resultado final del tutorial
El tutorial. La estructura
Como puedes ver abajo, vamos a trabajar sobre tres secciones con dos columnas cada una. Combinan módulo texto+módulo imagen y se alternan derecha o izquierda según la sección.
No nos vamos a detener como en otras ocasiones en la creación pormenorizada de los contenidos. Simplemente mencionaremos los ajustes de sección, fila y módulo pero sin extendernos. Después, veremos los valores que hemos aplicado a cada sección para generar las transiciones. De todas formas, si te surje cualquier duda, puedes enviarme un comentario.
Tutorial. Usar los nuevos separadores entre secciones de Divi
Así que vamos al grano. Creamos una nueva página y activamos Usar constructor Divi.
La primera sección
Insertar columnas: 2 columnas, cada una ocupara la mitad del espacio disponible. Así que elegimos ½ y ½. Añadimos los dos módulos.
A la izquierda insertamos un módulo tipo imagen e importamos la imagen del melocotón.
A la derecha (columna 2) insertamos un módulo de texto y agregamos texto. La palabra “Melocotón” es un encabezado H2 y el resto(texto simulado) esta formateado como párrafo.
Guardamos y pulsamos en el botón usar Constructor visual para continuar la práctica en esta vista que nos va a permitir ver los cambios según vamos aplicándolos.
Veremos nuestro melocotón a la izquierda y el texto a la derecha.
Justifica el texto a la izquierda y cambia el tamaño e introduce más ajustes si lo consideras conveniente.
Vamos ahora a alinear al centro las dos columnas.
Alineando los contenidos de las columnas
Ya hicimos un tutorial sobre esta técnica. Puedes verlo con más detalle en este tutorial.
Copia este código y pégalo en la zona de CSS personalizado de la página.
.ds-vertical-align {
display: flex;
flex-direction: column;
justify-content: center;
}
Para ello (en vista constructor visual) haz click en el icono del engranaje en la zona inferior de tu pantalla.
propiedades de la página en constructor visual
Esto abrirá el panel de configuración de página. Pulsa en la pestaña Avanzado (Advanced) y pega el CSS en el campo CSS personalizado.
Ahora abre los ajustes de fila pulsando en el engranaje correspondiente (verde). Si mantienes el cursor sobre el engranaje aparecerá el texto en modo tooltip “ajustes de fila”.
Pulsa la pestaña avanzado y en ID y clase de CSS, busca los campos CSS class para columna 1 y CSS Class para columna 2 y escribe la clase ds-vertical-align. De momento no notarás ningún cambio. No salgas de la configuración de la fila; accede a la pestaña Diseño, y en tamaño, activa la opción Igualar las alturas de las columnas. Ahora sí verás como se alinean las dos columnas.
Como las siguientes secciones las haremos duplicando esta, ya no tendrás que hacerlo más.
Antes e salir de los ajustes de la fila, en Separación >> Relleno personalizado añade 120px a los campos superior y Base. De todas formas, puedes ir configurando a tu gusto. Tal vez prefieras más espacio, o menos.
Ajustes de la sección
A continuación vamos a elegir un color de fondo adecuado e incorporar la transición en la zona superior de la sección. Seguimos en la vista Constructor visual. Haz click ahora en el engranaje correspondiente de la sección (color azul) para abrir los ajustes de la sección.
El color de fondo
En fondo vamos a poner un color con una tonalidad como el de la piel del melocotón. En la primera pestañita del fondo (cubo de pintura) click en el signo + e introduce el color #ffe2a0.
La transición
Y por último, vamos a incorporar la nueva funcionalidad en la parte superior de esta sección. En la misma pestaña de Diseño, justo encima de Separación, tienes ahora Dividers, pulsa en él y ¡a enredar!
Aquí tienes la configuración que yo he usado. He seleccionado una forma y no he cambiado nada. Experimenta sin miedo. Te vas a divertir.
La segunda sección
Duplica la primera sección y cambia la posición de los módulos. Pon el módulo de texto a la izquierda y la imagen a la derecha. Tal vez te sientas más cómodo haciéndolo en la vista tradicional. Si es así , vuelve al constructor visual cuando lo hayas hecho.
Elimina el separador duplicado (Ajustes sección >> Diseño >> Dividers >> estilo separador >>none)
En los ajustes de fila >> separación >> Relleno personalizado, mantén solo la separación superior de 120px y el resto ponlo a cero*.
*[Nota: Dependiendo de tu entorno (con sidebars, anchura limitada, etc) a lo mejor no necesitas eliminar el espacio en la base. Prueba y decide.]
Ahora cambiamos la imagen del melocotón por las ciruelas. Así que abrimos la configuración del módulo de imagen y sustituimos la imagen.
Hacemos las modificaciones necesarias en el módulo de texto. O sea, cambiamos “Melocotón” por “Ciruelas” y alineamos a la derecha.
El color de fondo de la segunda sección
Abrimos ajustes de esta segunda sección y, en fondo ponemos un tono púrpura en consonancia con el color de las ciruelas. En esta ocasión vamos a usar un degradado, así que pulsa en la segunda pestañita de las opciones de fondo.
Primer color: #c294e8
Segundo color: #e4e3e8
El resto de opciones de degradado las dejamos por defecto.
La transición de la segunda sección
Y ahora, la configuración de los separadores. Para esta sección vamos a ponerlos tanto arriba como abajo. Aquí tienes nuestra configuración en ambos casos.
Fíjate que es el mismo estilo para cada zona (superior e inferior) pero con distintos ajustes (volteado, tamaño…). Es el séptimo estilo si cuentas desde arriba.
No te preocupes si ves que la transición se hace sobre negro la parte inferior. Se solucionará al crear la tercera sección.
La tercera sección
Duplica de nuevo la primera sección y posiciónala abajo del todo. Si duplicásemos la segunda, tendríamos que volver a cambiar la posición de los módulos, por eso duplicamos la primera. Elimina la transición superior como hicimos antes.
Ve a los ajustes de sección y cambia el color de fondo a #cec5ad.
En los módulos, sustituye la imagen por la que corresponda (Los cocos) y cambia el texto.
Ya sólo nos falta incorporar el separador en la zona inferior y habremos terminado.
HOLA! EXCELENTE EL TUTORIAL, GRACIAS, ME SUSCRIBIRÉ AHORA MISMO.
PREUNTA: ¿CÓMO ELIMINO UN DIVISOR?
gRACIAS POR SU ATENCIÓN, ¡SALUDOS!