5 Ejemplos de diseños originales para las secciones de Divi

El tema Divi cada vez incluye más opciones de diseño y efectos desde su propio constructor, sin necesidad de tocar código alguno.

Recientemente, por ejemplo, ha incluido la funcionalidad de añadir un degradado al color o imagen de fondo de la sección.

En este aspecto, cuantas más funciones añadan al constructor de Divi los chicos de Elegant Themes, más fácil lo tendremos todos los usuarios que usamos esta plantilla web.

Mientras tanto, hay algunas ideas de diseño que necesitan código CSS. En este post, haremos un repaso a 5 ejemplos de diseños originales para las secciones de Divi, ya que por el momento, la plantilla no incluye ninguna.

5 Formas de diseñar secciones de Divi diferentes

Si ya has comenzado a crear una web con la plantilla Divi, habrás visto que utiliza un constructor web que funciona con secciones, filas y módulos.

Las secciones se utilizan para dividir los contenidos de la web y en principio, todas se separan de la sección superior e inferior con una línea recta.

¿Y si quieres añadir algún detalle que diferencie a una sección del resto?

No soy partidaria de sobrecargar las webs con demasiados adornos, pero añadir pequeños toques de personalidad a tu web, seguro que no vienen mal 😉

Los 5 ejemplos de diseños webs con Divi que se muestran a continuación son muy sencillos de implementar y solo tendrás que seguir 3 pasos:

1. Entrar en los ajustes de la sección de Divi en la que desees añadir el diseño.
   
2. Dirigirte al apartado de CSS Personalizado de dicha sección.
   
3. Añadir el código CSS del diseño que quieras incluir en el campo correspondiente.

Son sencillos de implementar, no harán que la web se vea sobrecargada, los puedes añadir en cuantas secciones quieras y añadirán un aspecto diferente a todas las webs hechas con la plantilla Divi.

Antes de compartirlos contigo, han sido probados en otra web uno por uno. Así podrás ver cómo quedaría cada diseño.

Añadir una flecha entre secciones

En el primer ejemplo, hemos añadido una pequeña flecha o pico a la sección superior y ha quedado así:

Tienes que colocar el código de abajo en la sección en la que quieras mostrar la flecha, en el apartado CSS Presonalizado -> Después.

Y después sustituir el color (#) por el color de tu sección, para que se muestre integrado. Es decir, en este caso, por el color de la sección superior (en este ejemplo hemos usado el #aaa198).

El código para crear el efecto de flecha o pico en la separación de las secciones es el siguiente:

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

Añadir varias flechas entre secciones

En el siguiente ejemplo de diseño con Divi, hemos añadido tres flechas o picos a la sección superior y ha quedado así:

Al igual que en el caso anterior, tienes que colocar el código que te muestro a continuación en la sección en la que quieras mostrar las flechas, en el apartado CSS Presonalizado -> Después.

Y después sustituir el color (#) por el color de tu sección, para que se muestre integrado (en este ejemplo hemos usado el #aaa198).

El código para crear este efecto de varias flechas o picos en la separación de las secciones es el siguiente:

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 #aaa199, 50px -50px 0 #aaa199;  /** CAMBIA AQUÍ EL COLOR ***/

Sección de Divi con diseño en zig zag

En la siguiente imagen hemos añadido un diseño en zig zag para separar dos secciones de una web con Divi. Se mostraría así:

Para mostrar este diseño en tu web, coloca el código de abajo en los ajustes de la sección en la que quieras mostrar el zig zag, en CSS Presonalizado -> Antes.

En este caso, hemos incluido el código en la sección inferior. Una vez añadido, sustituye los colores (#) por los colores de tu sección, para que se cree correctamente el efecto (en este ejemplo hemos usado #aaa198 y #e9e8e4).

Para añadir un efecto zig zag que recorra toda la separación entre secciones, utiliza el siguiente código:

display:block;
position:absolute;
content:'';
left: 0;
width: 100%;
height: 50px;
background-size: 100px 100%;
top: 0;
background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #aaa199), color-stop(0.5, #e9e8e4)); /** CAMBIA AQUÍ EL COLOR ***/
background-image: linear-gradient(15deg, #e9e8e4 50%, #aaa199 50%); /** CAMBIA AQUÍ EL COLOR ***/

Sección de Divi con diseño de cuadrados

El siguiente ejemplo de diseño original para el tema Divi, consiste en añadir una separación entre secciones mostrando pequeños cuadrados. Tal y como ves en la siguiente imagen:

Para añadiro a tu web, coloca el código de abajo en los ajustes de la sección en la que quieras mostrar el zig zag, en CSS Presonalizado -> Antes.

En este caso, también hemos incluido el código en la sección inferior. Una vez añadido, sustituye los colores (#) por los colores de tu sección, para que se cree correctamente el efecto (en este ejemplo hemos usado #aaa198 y #e9e8e4).

Para añadirlo, utiliza el siguiente código:

display:block;
position:absolute;
content:'';
left: 0;
width: 100%;
height: 50px;
background-size: 100px 100%;
top: 0;
background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #e9e8e4), color-stop(0.5, #aaa199)); /** CAMBIA AQUÍ EL COLOR ***/
background-image: linear-gradient(to right, #e9e8e4 50%, #aaa199 50%); /** CAMBIA AQUÍ EL COLOR ***/
-webkit-background-size: 130px 100%;
background-size: 130px 100%;

Sección de Divi con diseño de línea diagonal

El último ejemplo de diseño es uno de los favoritos y consiste en mostrar una línea diagonal entre secciones. El diseño se vería así:

Para añadir este diseño original a la sección de tu web con Divi, deberás seguir dos pasos:

1. Entrar en los ajustes de la sección inferior a donde deseas mostrar la línea diagonal y en CSS Personalizado -> Clase CSS añadir la clase diagonal-shadow.
2. Entrar en Divi -> Opciones del tema -> CSS Personalizado y pegar el siguiente código:

#et-main-area { overflow: hidden;} 
  
    .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;}

Al igual que en los ejemplos anteriores, sustituye los valores de color por el color que tu quieras mostrar (en este ejemplo hemos usado el #535353).

Probablemente, al añadir este código, la línea diagonal se monte demasiado en la sección superior. En este caso tendrás que añadir «Relleno Inferior» para que la sección se muestre completa.

Espero que te hayan sido útiles estos códigos CSS para personalizar tu web. Encontrarás más ejemplos de diseños originales para las secciones de Divi en este post.