Continuando con los artículos de personalización del Theme de Divi de Elegant Themes, os muestro cómo he diseñado mi página de categorías para que en el módulo blog de Divi quede la imagen destacada a la izquierda y el texto a la derecha.
También te puede interesar:
¡Divi 4 Ya ha llegado!
Curso de Diseño Web con Divi
Divi Child Theme [+Descarga]
Cursos de SEO
Tabla de contenidos
Módulo de Blog con la imagen a la izquierda
El aspecto a conseguir es el siguiente. Este es un ejemplo de cuando tenía un diseño anterior al actual. Pinchando en una categoría se veía así.
Realmente, esto no es particular de Divi, ya que podéis implementarlo en cualquier theme porque se hace únicamente tocando la hoja de estilos CSS. Pero en este tutorial os voy a dejar los estilos que yo he configurado en mi Divi Child Theme para que podáis aplicarlos directamente.
Estilos CSS para poner la imagen destacada a la izquierda en el módulo Blog de Divi
Tenéis que añadir el siguiente código en vuestro Child Theme o en opciones de Divi en la parte de CSS adicional.
/* Este código muestra la imagen destacada a la izda del listado de post */
.archive .et_pb_post a img, /* esta línea solo afecta a cuando listas una categoria */
.et_pb_posts .et_pb_post a img {
max-width: 210px!important;
float: left;
padding-right: 20px;
}
@media only screen and (max-width: 980px) {
.et_pb_posts .et_pb_post a img{
float:none;
max-width: 250px!important;
}
/* Para ampliar el margen entre post */
.et_pb_post {
margin-bottom: 100px;
}
}
Es muy sencillo, solo pega el código y configura tu módulo de blog para que se ve a ancho completo en vez de rejilla y tomará el aspecto que ves en la primera imagen que te puse.
Recomendaciones de diseño con Divi
Como siempre, os recomiendo hacer uso de los Temas Hijo o Child Theme para que las actualizaciones de Divi no afecten a vuestras personalizaciones.
También te recomiendo leer mi eBook sobre cómo actualizar WordPress para que no tengas sorpresas si algo falla. Pincha en la imagen para descargarlo GRATIS.
Y si todavía no tienes Divi, aquí tienes un descuento del 20% en tu licencia de Divi 😉.
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
Great post. Just I need it.
I have a question. How I can have the same effect with search pages?
--
Gran post. Justo lo que necesitaba
Tengo una pregunta. Como puedo tener el mismo efecto con las búsquedas?
Pues no me había dado por comprobar eso pero es buena idea. Tendría analizarlo con el Firebug y ver qué estilos son los que habría que tocar. Si saco hueco lo miro. Un saludo.
Buenas.
El problema que tengo, es que Divi, en la página principal, no me muestra ninguna miniatura de ninguna de las entradas. Cuando lo pongo en modo blog, sí. Tengo activada en la plantilla que muestre miniaturas de las entradas, pero no hay manera.
Cualquier sugerencia será bienvenida. Gracias
Hola Txema. En la página principal, imagino que te refieres a una página con el listado de las entradas. La imagen que muestra sobre el título es la imagen destacada. Tienes que ponerle una imagen destacada para que te la muestre. Un saludo.
Buenas Javier,
Excelente post! Queda muy chulo, pero sólo se ve bien cuando se listan categorías o etiquetas, en la principal se sigue viendo la imagen arriba muy grande... https://ofertaychollos.com. Te agradecería si me dijeras el CSS para que quedara igual en la home con divi.
Gracias!!
Alberto.
Muchas gracias Alberto. Tendría que hacer pruebas y decirte. Un saludo.