Personalizar modulo blog de DIVI

07

OCTUBRE, 2018

#CSS
#DIVI
#BLOG

¿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..

Primer paso a seguir

Lo primero que debemos hacer es ir a nuestro modulo blog o crear una página he insertar un modulo blog. Vamos a Páginas en el menu 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 boton de leer más. Aquí podemos configurar también si queremos mostrar, el autor, la fecha, las categorias, etc.

Segundo paso a seguir

Ahora debemos añadirle un identificador al modulo 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.

Tercer paso a seguir

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

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

Añadir nuestras propias modificaciones

Para añadir nuestras propias modificaciones solo debemos modificar o añadir los atributos que queramos dentro de los corchetes que identifican cada sección. Recuerda que el “:hover” hace referencia a cuando pasamos el cursor sobre el elemento. Si necesitas ayuda con CSS puedes echarle un vistazo a W3School, ahi encontrarás todo lo necesario para poder darle el estilo que buscas a tu blog.

Resultado final

A continuación podemos ver un ejemplo del resultado de esta modificación.

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

Compártelo si quieres…

Share This