Personalizar modulo blog de DIVI

NOTA: Para conocer más modificaciones sobre el tema DIVI, no olvides visitar el blog de Elegant Themes, los creadores de DIVI. Visitar blog.

1. Primer paso: insertar un modulo blog.

Lo primero que debemos hacer es ir a nuestro módulo blog o crear una página he insertar un modulo blog. Vamos a Páginas en el menú de la izquierda de nuestro wordpress.

Ahora le damos a añadir una sección estándar, añadimos una fila de ancho completo e insertamos un modulo blog.
Lo configuramos para mostrar 9 artículos y el botón de leer más. Aquí podemos configurar también si queremos mostrar, el autor, la fecha, las categorías, etc.

2. Segundo paso: identifica el modulo.

Ahora debemos añadirle un identificador al módulo blog para posteriormente añadir el CSS adicional que
nos permitirá personalizar el aspecto de los artículos de nuestro blog.

Para ello vamos a la configuración del modulo blog y en la casilla Identificador CSS introducimos el
ID, en esta caso utilizaremos gridcard.

3. Tercer paso: añadir código a CSS personalizado.

Por último, lo que debemos hacer es ir a la configuración general de DIVI y añadir el código del siguiente paso en la casilla de CSS Adicional.

Recuerda modificar y ajustar el código al diseño de tu blog, como los colores , separación, bordes y demás.

4. El código.

/****************************
* Modulo Blog Rejilla       *
* By MadeInMarcel.com       *
****************************/
* Estilo de cada articulo *
#gridcard article:nth-child(even), 
#gridcard article:nth-child(odd) {
    background-color: #333;
    border: 1px solid #333;
    border-radius: 0px;
    margin: 40px 10px;
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
    -webkit-transition: box-shadow 1s;
    transition: box-shadow 1s;
}
/*** Efecto hover del articulo ***/
#gridcard article:nth-child(odd):hover, 
#gridcard article:nth-child(even):hover{
    -webkit-box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5);
}
/** Titulo **/
#gridcard article:nth-child(even) .entry-title, 
#gridcard article:nth-child(odd) .entry-title {
    color: #fff;
    padding-left: 20px;
}
/*** Titulo:hover ***/
#gridcard article:nth-child(even) .entry-title:hover, 
#gridcard article:nth-child(odd) .entry-title:hover {
    color: #7A4B9A;
    padding-left: 20px;
}
/** Metadatos **/
#gridcard article:nth-child(even) .post-meta a, 
#gridcard article:nth-child(odd) .post-meta a {
    color: #999;
    font-weight: 800;
    font-size: 10px;
}
#gridcard article:nth-child(even) .post-meta:hover a, 
#gridcard article:nth-child(odd) .post-meta:hover a {
    color: #7A4B9A;
}
#gridcard article:nth-child(even) .post-meta, 
#gridcard article:nth-child(odd) .post-meta {
    color: #999;
    font-weight: 800; 
    font-size: 10px;
    padding-left: 20px;
}
/** Contenido del articulo **/
#gridcard article:nth-child(even) .post-content p, 
#gridcard article:nth-child(odd) .post-content p { 
    color: #fff;
    line-height: 1.6;
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
}
/** Boton leer mas **/
#gridcard article:nth-child(even) .more-link, 
#gridcard article:nth-child(odd) .more-link {
    background-color: rgba(0,0,0,0);
    border: 2px solid #7A4B9A;
    border-radius: 10px;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    font-weight:800;
    margin: 30px 20px 30px 20px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; 
    /* Safari */
    transition-duration: 0.4s;
    -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.5);
}
/*** Efecto hover boton ***/
#gridcard article:nth-child(odd) .more-link:hover, 
#gridcard article:nth-child(even) .more-link:hover {
    background-color: #7A4B9A;
    padding: 10px 25px;
    -webkit-box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5);
}