Personalizar la página de blog de 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:
Y así es como debe verse una vez aplicado el tutorial de hoy:
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.
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.
Hola amigo,
Muy buen post, gracias.
Vengo trabajando con DIVI en una página web y voy a aplicar este estilo de blog, queda más limpio y se ve más aprovechable.
Pero tengo un problema: comencé desarrollando las páginas en una plantilla Blankpage, para evitarme configurarlo todo desde cero, ya que es un pedido urgente, y ahora que las tengo listas, el cliente me pide que ponga un menú, cuando al principio me había pedido que no lo hiciera… bien, pues lo hice pero desde luego tenía que desactivar en WordPress la opción de «BLANKPAGE», hice el menú de prueba y veo que al quitar la opción «»BLANKPAGE, también se activa por defecto y como es debido, el footer.
En resumen, mi pregunta es: ¿hay algún modo, ya sea con código o lo que sea de eliminar el footer de todas las páginas de la «PLANTILLA PREDETERMINADA».
Espero haberlo dicho bien.
Un abrazo, amigo.
Hola, Tomás
Muchas gracias por los piropos.
Puedes ocultar el footer añadiendo estas líneas en tu panel css
/* Ocultar footer */
#main-footer {
height: 0 !important;
overflow: hidden;
}
Dime si te funcionó
Un abrazo
Hola,
¡Me has salvado de nuevo!
Ha funcionado grandioso y ya revisé que no quedarán errores.
No hay duda de que eres un crack.
Saluditos.
Gracias, Tomás
Encantado de ayudarte, un placer.
Excelente ayuda, me gustaria que me ayudaras con thema extra , en sección de tu blog con thema extra se ve genial tus entradas que tipo de configuración le diste? no me sale. gracias antemano.
Hola, Cerina
En Constructor de categoria > feed del blog estandar >> activar como diseño predeterminado
En pagina del blog > plantilla > Blog feed
Espero que te sirva
Saludos
Hola, estupendo artículo. He hecho todo como pones, pero no se guatrdan los cambios, con el constructor Divi se ven los cambios, pero despues de guardar y actualizar, la página está igual que estaba, por que puede ser?r
Hola Jesús, prueba a limpiar la cache del navegador, aunque es raro. Si has puesto el código css de en la página prueba a ponerlo en el panel de css del tema. De todas formas lo he comprobado y funciona correctamente, posiblemente el motivo no sea es css. Un saludo!
Lo que hacía era editar la pagina que tenia de blog, ahore he creado una nueva página de blog y sí me coge los cambios, pero en cuanto la asigno a la pagina de entradas, se `pierden todos los cambios y el diseño nuevo
Hola, Jesús
¿A qué te refieres cuando dices «la asigno a la página de entradas»?
En ajustes de lectura en WordPress tengo que asignar la pagina de entradas para que se pubiquen no? Me he dado cuenta que no funciona en ese caso. Si no la asigno a la pagina de entradas, si coge los cambios
No la elijas como página de entradas, sino como página estática > portada > tu página. En página de entrada no pongas nada (Te aparecerá elegir, pero no elijas nada).
Hazlo y me cuentas
Un saludo
He creado una nueva página de blog y sí me coge los cambios, pero en cuanto la asigno a la pagina de entradas, se `pierden todos los cambios y el diseño nuevo: ahora tengo dos páginas blogs
Vale, como pagina de inicio he puesto el home, y como entradas lo he dejado sin poner. Ahora parece que sí se ven los cambios, pero las entredas que publique se van a ver en esta nueva? Yo pensaba que habia que ponerlo como pagina de entrada para que se vieran las noticias
Claro que se verán, lo que has hecho es cambiar la opción por defecto de wordpress para el blog, por la que tú has creado con el módulo blog de Divi. Funcionará perfectamente. Prueba creando una nueva entrada si quieres.
Ok, lo que ocurre que ahora tengo dos paginas blog creadas, pero bueno, eliminaré la original. Eso me pasa por meter la patita, pero ya me ha quedado bien como pones en tu post. Muchas gracias!!
No te preocupes, Jesús
Puedes borrar la pagina que no usas sin problema. Si tsupieras las veces que he metido yo las pata…Así se aprende. Si no lo intentas, no.
Un saludo
Buenas tardes.
Muy bueno el tutorial.
Me he encontrado con un problema, utilizo el tema divi, en la biblioteca he creado una serie de plantillas para las páginas de categorías, en las cuales utilizo el módulo de blog, el css principal de este artículo lo he colocado en css personalizado de las opciones de divi, y me encuentro que en una de dichas categorías me funciona sin problema, pero en otra no.
Muchas gracias, espero que podáis ayudarme
NO deberias tener problemas siempre que pongas el nombre de la clase CSS en cada modulo blog. Prueba en cualquiercaso en poner el codigo en cada página que necesites.
Saludos
Hola amigo una consulta, como podría hacer que mis imágenes sean verticales y no horizontales pero en rejillas, gracias ante todo
Puedes ajustar el porcentaje de pantalla asignado a la imagen a tus necesidades.
Saludos
Buenas,
Hay alguna manera de mostar 3 articulos en la version desktop y solo 2 tanto en tablet como en mobile? Me estoy volviendo loco y no encuentro la manera… Muchisimas gracias
Hola, Alejandro
Duplica el módulo blog y a este le pones que solo muestre dos artículos. En ajustes, primer módulo, haz que solo se muestre en escritorio. En el módulo duplicado, haz que solo se muestre en tablet y móvil. Estos ajustes puedes hacerlos en la tercera pestaña (avanzado) de los ajustes. Visibilidad.
Saludos
Asi solo lo bloqueas a ojos de publico pero los bots lo siguen viendo por lo que los H son visibles, no me sirve el truco 😛
Hola Aulamedia, que buen totorial muchas gracias.
Oye Sabes como ocultar el menu principal de responsive? quiero quitar el icono de hamburguesa y dejar sin menú la versión móvil ayudame por favor, muchas gracias nuevamente.
Prueba esto:
@media screen and (max-width: 980px){
.et_fixed_nav #main-header {
display:none;
}
Saludos
Hola!
Muchas gracias por el artículo. Tengo un problema, y es que al abrir cada entrada individualmente el estilo (la tipografía), me cambia al original de serie. ¿Sabes cómo puedo solucionarlo?
Muchisimas gracias de antemano!
Gracias Beatriz por tu comentario. Desde la personalización de tema puedes hacer ajustes de tipografía, pero si quieres cambiar la fuente debes hacerlo con CSS. También puedes usar el constructor divi, pero para las entradas no es muy recomnedable, a no ser que sean pocas.
Prueba a poner en el panel css de personalizacion del tema:
.et_pb_post .entry-content {
font-family:Montserrat;
}
Cambia Montserrat por la fuente que quieras cambiar
Ya me dices si se solucionó
Saludos
Hola, muy buenas, lo hice en mi blog, y la verdad quedó fantástico, sabrías como puedo añadir un pequeño separador entre entrada y entrada, Gracias
Hola quisiera saber como se puede modificar la pagina del contenido de una entrada, o sea al hacer click en un articulo esa pagina que te lleva. Saludos
hola excelente tutorial, quisiera saber como hago también para móviles . por que en móviles no se ven los efectos
Gracias,Vanesa
Prueba eliminando la primera línea:
@media only screen and ( min-width: 800px ) {
No te olvides de eliminar tambien una llave de cierre (})
Ya me dices
Saludos