Los contenidos que muestra una página web se dividen en diferentes bloques, que llamamos secciones. Estos bloques o secciones se caracterizan por tener diferentes colores de fondo o incluso imágenes.

Los cambios de sección son siempre divisores horizontales. Pero es una tendencia en el diseño web ir rompiendo esa horizontalidad, e ir sustituyéndola por otras formas más dinámicas y atractivas de transición entre secciones.

Para la mayoría de las plantillas wordpress, esto es una cuestión peliaguda. Incluso también lo era para Divi hace algún tiempo. Pero ahora el constructor de Divi a incluido una herramienta sensacional para poder diseñar estas transiciones entre secciones de una manera sencilla, y sin tener que incluir ningún tipo de código.

 

Este post está dividido en dos partes muy diferentes.

En la primera parte podrás conocer la herramienta que incorpora Divi para poder diseñar y personalizar los divisores de secciones con WordPress. Es decir, para poder personalizar la parte superior e inferior que delimita una sección realizada con el constructor de Divi.

 

En la segunda parte del post verás como introducir algunos divisores de secciones en wordpress a través de código CSS. Has de tener en cuenta que antiguamente Divi no disponía de esta fabulosa herramienta para personalizar el diseño de la parte superior e inferior de las secciones creadas con el Divi builder.

DESCUENTOS DIVI

 


 

 

 

1.- Herramienta para personalizar los divisores de secciones con Divi (Shape dividers)

 

Esta herramienta permite crear formas y efectos en las páginas creando transiciones dinámicas entre diferentes bloques de contenido.

Los divisores de secciones se pueden incluir al inicio (parte superior) de una sección y/o al final (parte inferior) de la misma.

Puedes elegir entre 26 diseños de formas diferentes para emplearlos en la parte superior o inferior de cada sección. Pero cada una de estas formas se puede modificar con diferentes selectores de diferentes tipos: volteado, redimensionado, repeticiones y personalizado, generando a través de la combinación de varias de ellas formas únicas.

Los divisores están creados con SVG`S, lo que quiere decir que se podrán escalar sin que pierdan calidad. La visión en dispositivos “retina” es perfecta y no retrasarán la carga de tus páginas.

¡Increíble!, la herramienta utiliza un sistema por el cual, de manera automática, el divisor de la sección mostrará por defecto el color de la sección adyacente. Evidentemente, este color lo podremos cambiar si queremos.

Otra opción sorprendente que nos ofrece esta fabulosa herramienta es la posibilidad de que el divisor de la sección pase por delante o detrás de los elementos que tengamos en la sección. Con esta opción podremos cresar diseños muy interesantes.

 

 

1.1.- La interface del personalizador de divisores de secciones con Divi (Divi shape Dividers)

 

Puedes trabajar el diseño de divisores de secciones con Divi desde el constructor tipo backoffice o desde el constructor visual. Pero te recomiendo encarecidamente que lo hagas a través del constructor visual, ya que así verás los cambios en tiempo real y además las opciones de elección de formas también es mucho más visual.

Abre el constructor visual y haz clic en el botón de configuración de la sección cuyos divisores o separadores quieras personalizar.

En la pestaña: “Diseño” verás un apartado denominado: “Dividers” (Divisores). Si despliegas este bloque verás 2 únicas opciones:

 

i.- Dividers: selector con dos opciones. Si seleccionas “Superior” estarás personalizando el divisor situado en la parte superior de la sección. Si seleccionas “Base” estarás personalizando el diseño del separador inferior de la sección.

 

poner una forma en la parte superior o inferior de la sección

Con la opción Dividers seleccionaremos si queremos modificar la parte superior o inferior de la sección

 

 

ii.- Estilo de separador: si haces clic sobre el selector se mostrarán todos los diseños (formas) posibles para establecer como separadores de secciones.

Hasta que no elijas un diseño de separador no se mostrarán el resto de las opciones.

En la siguiente imagen puedes ver todos los diseños de divisores de secciones que puedes utilizar de base para comenzar la personalización de la parte superior y/o inferior de cada sección de una página.

 

 

 

 

1.2.- Opciones de personalización del diseño o forma utilizado para separar secciones

 

Una vez que hayamos elegido si queremos personalizar el divisor superior o inferior de la sección y que elijamos una forma o diseño, nos aparecerán las siguientes opciones:

 

i.- Divider color: como antes he comentado, la herramienta dispone de un sistema automatizado para mostrar por defecto el color de la sección adyacente, que es el que habitualmente utilizarás.

Pero el color lo puedes personalizar desde esta opción de “Divider color”. Desde aquí estableceremos el color de la parte marcada como gris oscuro en el “estilo del separador” (que elegimos en el apartado 1.1)

 

color divisor de la sección

Color de la forma separadora entre secciones

 

En el caso de que el divisor tenga más de un área, como puedes ver en la siguiente imagen, el color que elijamos será para la zona que en el “Estilo de separador” aparece más oscura. Para el resto de zonas la herramienta utilizará un degradado del color que hayamos establecido.

 

separadores de secciones de colores

Formas separadores de secciones con varios colores

 

ii.- Divider Height: con este selector estableceremos la Altura de la forma que utilizaremos como separador.

En la siguiente imagen puedes ver a que me refiero con un ejemplo.

 

cómo cambiar la altura del separador de secciones

Establecer la altura del separador de secciones

 

Podremo