Personalizar la página de blog de Divi

por | 9 Ene, 2019 | Blog, css, Diseño Divi

Personalizar la pagina de blog en Divi

El módulo BLOG de Divi

En este tutorial vamos a Personalizar la página de blog de Divi. Sabemos que Divi es el mejor theme para WordPress hoy en dia. Por lo menos esa es mi opinión. Está en constante evolución y nos garantiza una completa compatibilidad con WordPress. Existen módulos increíblemente amigables y versátiles.

Sin embargo, dentro de la excelencia que impregnan todas las caracteristicas del tema, hay algunas susceptibles de mejorar. El módulo blog es uno de ellos.

Por lo tanto en este tutorial sobre Divi vamos a mejorar el módulo blog de Divi estándar. Existen algunos buenos plugins que permiten cambiar el estilo de nuestro blog. Sin embargo no queremos cargar nuestro WordPress innecesariamente. No digo que no haya que usar pluging, pero si que hay que hacerlo con cabeza, solo si es necesario. Así que no vamos a necesitar ningún pluging, lo haremos con un poco de CSS.

Así es como Divi muestra un blog a pantalla completa por defecto:

configurar-blog-Divi-por-defecto

Y así es como debe verse una vez aplicado el tutorial de hoy:

personalizar-blog-divi-final

Ya hicimos un tutorial para modificar el módulo blog en otra ocasión, limitando a unas medidas el tamaño de las imágenes con css. Puedes verlo aquí. En esta ocasión lo vamos a hacer de manera diferente y añadiendo algunas opciones más.

Primeros ajustes del módulo blog de Divi

Básicamente lo que haremos será asignar un porcentaje del ancho de la página disponible y el espacio restante será para el texto, esto es, título, metadatos y extracto de la publicación. Luego ajustaremos un poco el estilo con css. También podemos configurar muchas opciones desde el panel de ajustes del módulo, que para eso está.

Así que, si no tenemos ya una página con el módulo blog, lo creamos dentro de una columna. No hace falta decir que necesitas tener creadas varias entradas con sus imágenes destacadas para ver correctamente cómo vamos ajustando nuestro módulo blog de Divi,

Es importante que la disposición del blog esté en diseño de ancho completo, así que lo ponemos en este modo desde la pestaña diseño en los ajustes del módulo.

Si no estás en vista constructor visual, actívalo, pues así veremos cada cambio que hagamos. Debería ser la forma habitual en la que trabajamos. Sin duda, para mí es más eficaz que hacerlo desde la vista de administrador de WordPress.

El CSS para nuestro módulo blog Divi. Primer bloque.

Dicho esto, vamos a insertar el CSS en las opciones de página. De manera que este código solo se ejecutará en la página y no tendrá efecto en otras páginas. Si queremos que sa aplique en todo nuestro sitio web, lo podemos poner en nuestro tema hijo o en las opciones CSS de nuestro tema.

Como decía, nosotros lo pondremos en los ajustes de la página. Así que abrimos estos ajustes pulsando la ruedecite de engranaje de la parte inferior de la página. Ahora en avanzado > css, introducimos el siguiente css.

/*Configurar blog*/
@media only screen and ( min-width: 800px ) {
.aulamedia_blog a img  {
float: left;
width: 40%;
margin-right:30px;
margin-bottom: 20px;
box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(119, 119, 119, 0.75);
border: 8px solid #ffffff;
}
}

Explicando el CSS

Para que se ejecute el código debes poner la clase (aulamedia_blog) en los ajustes del módulo blog (ajustes del módulo > pestaña Avanzado > Clases & ID CSS > Clase CSS). Mira la imagen a continuación.

blog-divi-clase-CSS

Y ahora la explicación. En este primer bloque limitamos la anchura de la imagen destacada al 40%  de la anchura de la página. También añadimos unos píxeles respecto al texto (margin-right) y 20 píxeles más respecto a la siguiente entrada (margin-bottom). Puedes aumentar o reducir los valores de estas propiedades para ajustar el blog a tus preferencias.

Además, le hemos agregado una sombra en sus distintas versiones para que sea compatible con cualquier navegador y un contorno blanco de 8 píxeles de grosor (border). Ya sabes, experimenta con los valores para conseguir la apariencia deseada. Si no tienes muy claro cómo modificar la sombra, puedes mirar este tutorial.

Segundo bloque de CSS. Personalizar el botón leer más.

Este es el código que debes poner a continuación, aquí te lo dejo:

/*estilo boton leer mas*/

.aulamedia_blog a.more-link {
display: inline-block;
background: #4aaecf;
font-weight: bold;
color: #ffffff;
width: 150px;
padding: 5px 10px;
text-align: center;
margin: 20px auto;
text-transform: uppercase;
letter-spacing: 1px;
border-radius:60px;
border: solid 2px #7a7979;
}

Ahora vamos a ajustar el eslio para el botón “leer más”. El motivo de ir añadiendo el código css por bloques es simplemente para poder explicar lo que hace cada parte y ayudar a entenderlo mejor. Voy a interpretar línea a línea este trozo de código para que sepas que estamos haciendo:

/*esto es un comentario, no tiene efecto*/

Clase que se aplicará al botón leer más

ajustamos la posición del botón;

Color de fondo del botón: #codigo de color;

estilo del texto del boóon: negrita;

color del texto del boton: blanco en este caso (#ffffff);

Anchura del botón: 150px;

Relleno horizontal y vertical (espacio interno): 5px 10px;

Alineacion del texto del botón: centrado;

Margen: 20px; experimenta para entender mejor las propiedades.

Cambia el texto a: mayúsculas;

Espacio entre caracteres (letras): 1px;

Redondea el contorno del botón:60px;

Tipo de contorno, grosor y color: solid 2px #7a7979;

Y eso es todo por ahora. A continuación vamos a ponerle la guinda incorporando un efecto hover al botón. Esto es, qué va a suceder cuando pasemos el ratón por el botón.

Tercer bloque. Al pasar por el botón leer más

/*leer mas hover*/

.aulamedia_blog a.more-link:hover {
background: #f9f9f9;
border: solid 2px #000000;
color: #000000;
}

Como puedes ver sobre estas líneas, es muy simple y sencillo.

Cambiamos el color de fondo del botón, ajustamos el contorno y por último el color del texto del botón. Podríamos cambiar muchas más cosas, como por ejemplo agregar una sombra, un poco de animación, escala, etc. Pero para este ejemplo nos sobra con lo que hemos incluido.

Espero que te haya gustado. Recuerda que puedes interactuar con otros compañeros y conmigo en el grupo de Facebook o enviando un comentario.

Aquí tienes el vídeo por si te aclaras mejor.