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

 

Podremos establecer diferentes alturas para el divisor en función de si lo visualizamos en un dispositivo tipo escritorio, Tablet o móvil.

 

iii.- Divider horizontal repeat: este selector los podremos utilizar cuando queremos que la forma a utilizar se repita a lo largo de la sección. Es decir, se podría utilizar para diseños en formas repetitivas como dientes de sierra y otros.

Con el selector estableceremos el número de veces que queremos que se repita el diseño a lo largo de la sección.

Podremos establecer diferentes diseños en función del dispositivo en el que se muestre el divisor de secciones.

En el resultado final también va a influir mucho el selector de anchura del divisor (Divider height)

A continuación, tienes un ejemplo de dientes de divisor de sección en dientes de sierra:

 

cómo repetir la forma divisora de sección

Repetición de forma separadora de secciones en forma de dientes de sierra

 

iv.- Divider flip: con esta opción podemos voltear la forma en el eje x o en el eje y. Es decir, para poder conseguir una gama mucho más amplia de opciones de formas podremos obtener lo que serían los diseños abatidos (reflejados en un espejo) sobre el eje x (eje horizontal) y sobre el eje y (eje vertical).

La opción de la izquierda nos da la forma abatida en el eje vertical (eje y), mientras que la derecha nos muestra la forma abatida sobre el eje horizontal o eje x.

 

v.- Divider Arrangement: Esta opción nos permite poner el divisor de la sección por delante o detrás de las formas incluidas en la sección.

Es decir, podremos poner el divisor en primer plano (por delante de los módulos incluidos en la sección) o en segundo plano (por detrás de los módulos).

i.- On top of section content: en primer plano. Es decir, el divisor se colocará por delante del contenido de la sección.

ii.- Underneath Section content: en segundo plano. Es decir, el divisor se colocará por detrás del contenido de la sección.

 

separador de sección en segundo plano

Divisor de secciones en segundo plano por detrás de los módulos

 

separador de sección en primer plano

Divisor de sección en primer plano. Pasa por delante de los módulos del divi builder

 

 

2.- Separadores de secciones utilizando código con WordPress y Divi

 

Ahora vamos a ver cómo utilizar formas para emplearlas de separadores de secciones. Pero, utilizando código para formarlas. Antes de que Divi implementara la funcionalidad de divisores, era la única forma de implementar secciones más originales.

 

 

2.1.- Separador de sección Divi en punta de triángulo hacia arriba

 

En primer lugar, vamos a ver un separador de sección en forma de triángulo sobre la sección superior.

En la siguiente imagen he utilizado una sección superior con una imagen de fondo y una sección inferior con el color blanco de fondo.

 

como crear un divisor de secciones con divi en forma de triángulo

Separador de secciones con Divi en forma de triángulo

 

Este tipo de separador de secciones funciona bien utilizando en la sección superior una imagen de fondo o un color de fondo y en la sección inferior un color de fondo.

 

Amplía al máximo las funcionalidades de tu plantilla Divi con el Plugins Divi Booster: Divi Booster

 

Una vez hayas creado las dos secciones ve a la configuración de la sección superior y en la pestaña “Avanzado”, en el bloque CSS Personalizado busca el bloque denominado “Antes”.

En dicho bloque introduce el siguiente código:

display: block;
position: absolute;
content: '';
width: 100px;
height: 100px;
bottom: -50px;
left: 50%;
margin-left: -50px;
background-color: #ffffff; /** CAMBIA ESTE VALOR ***/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

 

NOTA: Verás en el código una línea donde dice: “CAMBIA ESTE VALOR”. En esa línea puedes cambiar el color del triángulo, que debe tener siempre el mismo color que el color de fondo de la sección inferior (en el ejemplo el color de fondo de la sección inferior es blanca y ese color es el que aparece en el código)

 

efecto triángulo separando secciones

introducir código CSS en area de texto “Antes”

 

Una vez insertado el código guarda y previsualiza.

 

 

2.2- Separador secciones de una web con esquina doblada con Divi

 

Este separador consiste en crear una esquina doblada al final de una sección y funciona bien sobre todo cuando la sección tiene un color de fondo y no una imagen de fondo.

 

separador secciones divi esquina hoja doblada

Separador de secciones con forma de esquina doblada

 

Para implementar este efecto iremos a la configuración de la sección del Divi builder en la que quieres que aparezca la esquina doblada.

Ve a la pestaña “Avanzado” y al apartado CSS Personalizado.

 

En el bloque “antes” introduce el siguiente código CSS:

 

position:absolute;
content:'';
bottom: 0;
width: 100px;
height: 100px;
right: 0;
background-image: -webkit-linear-gradient(top left, #ffffff 50%, #DFE9DE 50%);
background-image: linear-gradient(315deg, #DFE9DE 50%, #ffffff 50%);

 

Ahora, en el bloque “después” introduce el siguiente código:

 

display:block;
position:absolute;
content: '';
bottom: 0;
width: 100px;
height: 100px;
right: 100px;
background-image: -webkit-linear-gradient(top left, transparent 50%, #a7ada6 50%);
background-image: linear-gradient(315deg, #a7ada6 50%, transparent 50%);

 

codigo css esquina hoja doblada con divi

Código separación con efecto de esquina de hoja doblada

 

Después guardaremos.

 

En el código se han utilizado los siguientes colores, pero tú los puedes personalizar a tu gusto:

  • i.- Color de fondo: #DFE9DE en ejemplo se ha puesto este color de fondo que se muestra tras el doblado de la página. Este color de fondo para que quede bien deber ser igual que el de la sección o un poquito más claro.
  • ii.- Color de la esquina doblada: #ffffff en el ejemplo se ha utilizado el color blanco para mostrar la esquina doblada.
  • iii.- Color de la sombra proyectada por la esquina doblada: #a7ada6 en el ejemplo se ha utilizado este color para el sombreado proyectado por la doblez

 

 

2.3.- Divisor de secciones de una web con 3 flechas hacia arriba

 

Este separador de secciones está formado por 3 flechas de color blanco que apuntan hacia arriba.

Para que se vea bien este divisor debemos tener 2 secciones:

  • i.- Sección superior: en la superior pondremos una imagen de fondo o un color de fondo
  • ii.- Sección inferior: en la sección inferior pondremos un color de fondo blanco (#ffffff) para que quede bien con el color de las flechas que también es blanco.

 

separador secciones en divi 3 puntas hacia arriba

Separador de secciones de 3 flechas hacia arriba

 

Añade un montón de funcionalidades a Divi específicas de tienda online para Woocommerce con el Plugin: Divi Shop Extended

 

El código CSS lo introduciremos en la configuración de la sección inferior, no en la superior. Por lo que haremos clic en el botón de configuración de la sección inferior.

A continuación, iremos a la pestaña “Avanzado” y al bloque “CSS Personalizado”.

 

En el bloque “antes” introduciremos el siguiente código:

display:block;
position:absolute;
content:'';
top: -25px;
background: inherit;
box-shadow: -50px 50px 0 #FFFFFF, 50px -50px 0 #FFFFFF;
left: 50%;
width: 50px;
height: 50px;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);

 

Después guardaremos.

 

NOTA: Para modificar los colores de fondo de las flechas modifica la línea box-shadow.

 

 

 

2.4.- Separador de secciones con Divi de 3 flechas hacia abajo

 

Este separador está formado por 3 flechas que apuntan hacia abajo.

Para este tipo de separador conviene tener dos secciones, una superior y otra inferior:

  • i.- Sección superior: Para que funcione bien lo suyo es que la sección superior esté formada por un color de fondo, y que las puntas de flecha tengan ese mismo color de fondo (en el código de ejemplo se ha utilizado el color #F5F5F5)
  • ii.- Sección inferior: en la sección inferior podremos utilizar una imagen de fondo o un color de fondo.

 

separador secciones divi con 3 puntas hacia abajo

Separador con forma de tres puntas de flecha hacia abajo

 

El código CSS lo tendremos que añadir a la sección situada en la parte superior.

Para ello haremos clic en el botón de configuración de la sección superior, haremos clic en la pestaña “Avanzado”, buscaremos el bloque “Después” y añadiremos el siguiente código.

 

display:block;
position:absolute;
content:'';
left: 50%;
width: 50px;
height: 50px;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
bottom: -25px;
z-index: 10;
background: inherit;
box-shadow: -50px 50px 0 #f5f5f5, 50px -50px 0 #f5f5f5;

 

Después guardaremos.

 

Aprende a crear un mega menú con wordpress y Divi: Mega menú Divi

 

NOTA: Para modificar los colores de fondo de las flechas modifica la línea box-shadow.

 

 

2.5.- Separador de secciones con curva en sección superior hacia sección inferior

 

Vamos a dividir ahora dos secciones con una curva que parece nacer en la sección superior y que invade la sección inferior.

 

Vamos a tener dos secciones:

  • Sección superior: la sección superior tendrá un color de fondo
  • Sección inferior: la sección inferior podría estar formada por una imagen de fondo o un color de fondo.

 

El código lo añadiremos en esta sección inferior en un módulo de texto que colocaremos en dicha sección inferior.

 

divisor de secciones divi en forma de curva

Separador de secciones divi builder en forma curvada

 

Como antes he comentado para crear este separador de secciones tenemos que tener dos secciones.

En la sección superior hemos utilizado el color de fondo: #DD9933 y en la inferior en color de fondo blanco.

 

Este divisor tiene algún paso más que los anteriores, que son:

  • Módulo texto sección inferior: en la sección inferior añadiremos una fila de una sola columna.
  • Insertar código: En dicha columna insertaremos un “módulo de texto” y en la pestaña de HTML del editor introduciremos el siguiente código:

 

<svg id="curveDownColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" style="position:absolute; padding-top:0; margin-top:0;fill: #dd9933; stroke: #dd9933; top:0px;" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 0 C 50 100 80 100 100 0 Z"></path></svg>

 

Y guardaremos.

NOTA: en el código hemos utilizado el color: #dd9933 que es el usado en el fondo de la sección superior, pero puede personalizar el color a tu antojo.

 

a.- Otras filas y módulos: debajo de la fila anterior podemos añadir más filas e insertar otros módulos. En nuestro ejemplo hemos añadido un módulo de imagen.

b.- Corregir márgenes: no te preocupes por que la curva no llegue a los extremos, eso lo arreglaremos después. Ahora desde el constructor visual corrige los márgenes para que el borde se ajuste a la sección superior.

 

como arreglar margenes curva

Corregir márgenes curva en sección

 

c.- Divisor de anchura completa: para que el divisor en forma de curva tenga anchura completa accederemos a la configuración de la fila en la cual hemos puesto el módulo de texto con el código.

Accedernos a la pestaña “Diseño” y modificaremos los siguientes apartados:

i.- Hacer que esta fila tenga anchura completa: pondremos el selector en “SI”

ii.- El uso personalizado del canalón de ancho: pondremos el selector en “SI” y en “espacio entre columnas” seleccionaremos “1” y guardaremos.

 

hacer que el divisor curvado de la página tenga anchura completa

curva separadora con anchura completa

 

 

NOTA: si has añadido un módulo de imagen en la sección inferior y la imagen se te monta sobre el efecto curvado puedes añadir una fila que separe el módulo de texto del módulo de imagen para aumentar la separación entre ambos.

 

 

2.6.- Divisor de secciones en una página web forma de pirámides o dientes de sierra 3D

 

Este separador está formado por pequeñas pirámides o dientes de sierra den 3D. Para implantarlo necesitaremos una sección superior y otra inferior.

En la sección superior podremos poner imagen de fondo o color de fondo, y en la sección inferior un color de fondo.

 

Guía para conseguir el efecto parallax con WordPress y Divi: Parallax

 

El color de fondo de la sección inferior será el mismo que el utilizado en la frontal de las pirámides (en el ejemplo #f5f5f5)

 

separador entre secciones de página web con figuras 3D

Separador en página web de pirámides o triangulos 3D

 

Iremos a la configuración de la sección inferior y en la pestaña “Avanzado” iremos al bloque “CSS Personalizado”.

En el área de texto “Antes” introduciremos el siguiente código:

 

display:block;
position:absolute;
content:'';
right: 0;
left: 0;
z-index: 10;
display: block;
height: 90px;
background-size: 50px 100%;
top: -90px;
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #f5f5f5));
background-image:
linear-gradient(315deg, #f5f5f5 25%, transparent 25%),
linear-gradient( 45deg, #cbc5c5 25%, transparent 25%);
background-position: 50%;

 

En este código se han utilizado los siguientes colores, pero tu puedes personalizarlos a tu gusto.

  • #f5f5f5 es el color que hemos utilizado para el fondo de la sección inferior y el frontal de las pirámides
  • #cbc5c5 este color gris se ha utilizado para la cara en sombra de las pirámides.

 

 

2.7.- Separador de sección con línea inclinada ascendente de izquierda a derecha con Divi

 

Vamos ahora a implementar un separador que consiste en una línea inclinada de derecha a izquierda.

Para este separador tendremos dos secciones, una superior y otra inferior.

 

divisor pagina web con divi línea incluinada

Separador con línea inclinada ascendente de izquierda a derecha

 

Aprende a crear un blog con WordPress y la plantilla Divi: Blog Divi WordPress

 

Para implementarlo primero debes ir a “Divi > Opciones del tema” y en la pestaña general busca el área de texto “CSS Personalizado”.

Pega el siguiente código:

 

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */

.diagonal-shadow::before,
.diagonal-shadow::after {
position: absolute;
content: '';
pointer-events: none;}

.diagonal-shadow {
z-index: 1;
padding-top: 6em;
background: #2072a7;}

.diagonal-shadow::before,
.diagonal-shadow::after {
top: 0;
left: -25%;
z-index: -1;
width: 150%;
height: 75%;
background: inherit;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;}

.diagonal-shadow::before {
height: 50%;
background: #535353;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 3% 0;
transform-origin: 3% 0;}

 

Puedes personalizar los colores a tu gusto

 

Ahora iremos a la configuración de la sección inferior y en la pestaña “Avanzado” iremos al campo “Clase CSS” y pondremos:

diagonal-shadow

 

a continuación guardamos y ya lo tenemos listo

 

 

2.8.- Separador de sección con línea inclinada ascendente de derecha a izquierda con Divi

 

Separador similar al anterior pero con la línea separadora de secciones inclinada en el otro sentido y con el mismo color que la sección inferior (automáticamente).

 

linea inclinada en divi en borde de seccion

Separador secciones de página web con línea inclinada ascendente de derecha a izquierda

 

Para implementar esta división inclinada haremos algo parecido al o realizado en el apartado 7.

 

Aprende a crear una landing page con WordPress y Divi: Landing page wordpress + Divi

 

Para implementarlo como en el caso anterior primero debes ir a “Divi > Opciones del tema” y en la pestaña general busca el área de texto “CSS Personalizado” y pega el siguiente código:

 

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */

.left-diagonal {
z-index: 1;
padding-top: 0px;}

.left-diagonal::after {
position: absolute;
content: '';
pointer-events: none;
top: -150px;
left: -25%;
z-index: -1;
width: 150%;
height: 50%;
background: inherit;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
-webkit-transform-origin: -3% 0;
transform-origin: -3% 0;}

@media only screen and ( min-width: 1901px ) and ( max-width: 2500px ) {.left-diagonal::after {top: -150px; height: 85%;}}
@media only screen and ( min-width: 1501px ) and ( max-width: 1900px ) {.left-diagonal::after {top: -131px; height: 68%;}}
@media only screen and ( min-width: 1001px ) and ( max-width: 1500px ) {.left-diagonal::after {top: -116px;}}
@media only screen and ( max-width: 1000px ) {.left-diagonal::after {top: -90px;}}

 

Después accederemos a la configuración de la sección inferior y en la pestaña “Avanzado” buscaremos el apartado “ID y Clase CSS”.

En el campo “Clase CSS” pondremos:

left-diagonal

 

y ya lo tendrás listo.

 

 

Soy un bloguer al que le encanta el diseño web, me apasiona WordPress y la formación. Me encantaría que este blog (horizonweb.es) te sirviera de ayuda, seas un profesional en el sector o no. Me encantaría poder ayudarte a desarrollar tu proyecto online, ya sea una web de empresa o autónomo, un blog, una plataforma de cursos online o cualquier otro tipo de proyecto.

Compártelo ya!!

RECIBE GRATIS CURSO DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.