Usar seudoelementos para crear separadores de sección en Divi

Cómo crear separadores de seccion

A veces añadir separadores de seccion nos permite estructurar nuestros contenidos de una forma más práctica y visual. En esta ocasión vamos a crear un separador con un seudoelemento, esto es, un cuadrado del mismo color del fondo de la sección y rotado 45º para crear el efecto de punta de flecha apuntando a la sección siguiente. Puedes  ver el resultado al final del post.

Como vas a ver, es súpersencillo.

Sólo tienes que abrir los ajustes de la sección donde vas a poner el separador y pulsar en la pestaña CSS personalizado. A continuación, en el bloque que pone Antes inserta el código CSS y ¡ya está!

Este es el código que debes introducir:

display: block;
position: absolute;
content: ”;
width: 100px;
height: 100px;
bottom: -50px;
left: 50%;
margin-left: -50px;
background-color: #dddddd; /** cambia tu color ***/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

Configurar el separador

Si quieres reducir un poco la flecha (el rectángulo en realidad) cambia los valores width y height, pero si lo haces reduce también el valor bottom a la mitad de estos valores para que sea proporcional. Por ejemplo, si pones 80px en altura y anchura, cambia el valor bottom a 40.

No olvides cambiar el color para que coincida con el de tu fondo.

Este es sólo un ejemplo, tienes muchos más en Divi Guide, en ingés. Este tutorial se ha creado a partir de los contenidos de esta página.

Como decía antes, puedes ver abajo el resultado final. Y como siempre, invitarte a compartir si te ha sido útil. ¡Hasta el próximo tutorial Divi!