Personalizar modulo blog de DIVI

13

OCTUBRE, 2018

Divi
Módulo Blog
Personalizado

¿Te gustaría personalizar la apariencia del modulo blog de tu web desarrollada con DIVI?
Sigue esta sencilla guía para modificar la apariencia del modulo blog y aprender como hacer tus propias modificaciones.
En el código encontrarás comentarios para que te sea fácil seguir esta guía, pero si lo prefieres, en breve pondré a disposición de los usuarios archivos de descarga para facilitar el proceso…

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

«No tengas miedo a trastear con el código, así es como se aprende»

Inserta un módulo 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.

Identifica el módulo: gridcard

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.

Añade el código a CSS personalizado

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.

Ejemplo del resultado

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);
}

Summary
Modulo blog rejilla de DIVI personalizado en tres estilos
Article Name
Modulo blog rejilla de DIVI personalizado en tres estilos
Description
Sigue esta sencilla guía para modificar la apariencia del modulo blog de DIVI y aprender como hacer tus propias modificaciones.
Author
Publisher Name
MadeInMarcel
Publisher Logo