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
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE POST
- 1.- Herramienta para personalizar los divisores de secciones con Divi (Shape dividers)
-
2.- Separadores de secciones utilizando código con Wordpress y Divi
- 2.1.- Separador de sección Divi en punta de triángulo hacia arriba
- 2.2- Separador secciones de una web con esquina doblada con Divi
- 2.3.- Divisor de secciones de una web con 3 flechas hacia arriba
- 2.4.- Separador de secciones con Divi de 3 flechas hacia abajo
- 2.5.- Separador de secciones con curva en sección superior hacia sección inferior
- 2.6.- Divisor de secciones en una página web forma de pirámides o dientes de sierra 3D
- 2.7.- Separador de sección con línea inclinada ascendente de izquierda a derecha con Divi
- 2.8.- Separador de sección con línea inclinada ascendente de derecha a izquierda con 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.
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 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.
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.
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:
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.
Divisor de secciones en segundo plano por detrás de los módulos
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.
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.
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)
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 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%);
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 de secciones de 3 flechas hacia arriba
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 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.
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.
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.
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.
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.
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 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.
Separador con línea inclinada ascendente de izquierda a derecha
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).
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.
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 Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Muy chulo Joaquín. ¿Sería posible que la curva del ejemplo 5 tuviera forma de onda?
Gracias.
Hola Miguel,
Los diseños están sacados de la página oficial de Elegant Themes. No se como se podría implementar el diseño que comentas.
Buenas otra vez,
parece que los creadores de Divi te han escuchado y acaban de incoporar una nueva funcionalidad para hacer secciones mas personalizables: https://www.elegantthemes.com/blog/theme-releases/shape-dividers
En breve incorporaré esta nueva funcionalidad a este post
un saludo