Tutorial Divi: Imagen destacada a la izquierda del título y extracto en el blog

Una de las cosas que me ponen de los nervios de Divi, y mira que me gusta, es los estilos de la visualización en modo blog, con esas imágenes destacadas enormes sobre el título y el extracto, pues yo prefiero que la imagen quede a la izquierda de ambos y, de este modo, poder ver más entradas en un solo scroll.

Vamos, que me refiero a esto …

modo-blog-de-divi-por-defecto

A ver ¿no te parece mucho más razonable algo así?

modo-blog-de-divi-con-imagen-a-la-izquierda

Bueno, pues es muy fácil conseguirlo. Solo tienes que ir a la página de opciones de Divi en la administración de WordPress y, en la sección de CSS personalizado, abajo del todo en la pestaña General, añadir el siguiente código:

/*Imagen destacada a la izquierda en el blog*/ 
.et_pb_post a img{
  height: 200px!important;
  float: left;
  width: 400px;
  left: 0;
  padding-right: 14px;}
 
@media only screen and (max-width: 980px) {
.et_pb_post a img{
  float:none;
  width:400px;
  height:200px;}}

Un par de apuntes nada más:

  • Cambia el valor height dependiendo de los tamaños que uses para imágenes destacadas y, sobre todo, a como quede mejor.
  • Cambia el valor width dependiendo de los tamaños que uses para imágenes destacadas y, sobre todo, a como quede mejor.

La captura de arriba está con los valores del código (400 de ancho y 200 de alto)

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

12 comentarios en “Tutorial Divi: Imagen destacada a la izquierda del título y extracto en el blog”

  1. Andrey Pérez

    Muchas gracias por el aporte, es justo lo que necesitaba y sin duda me has ahorrado un par de dias de pruebas con CSS. Estaré pendiente a nuevos recursos y consejos para el tema Divi.

  2. Francisco Jordán Varea

    Buen apunte si quieres estructurarlo con una única columna y por tanto un post por linea. En mi caso, en lugar de marcar la página de entradas en los ajustes, creo una página nueva normal y con el constructor añado una sección especial a la que añado a la derecha los elementos que quiero que aparezcan en modo «sidebar» y en la sección de la izquierda añado el módulo «Blog» configurado en modo rejilla. Queda así:

  3. Hola Fernando.
    He probado el código y la verdad es que queda mucho mejor pero he tenido que quitarlo porque no sólo cambia el tamaño de las imágenes en la portada del blog si no que también cambia el tamaño de, incluso, la imagen de publicidad que tengo al final de cada artículo y una imagen que también está que es para suscribirse al mi canal de Youtube ya en el código html tiene width=»728″ height=»90″.
    Se puede hacer de alguna manera para que solo cambie el tamaño de las imágenes destacadas de la portada del blog.

    Muchas gracias
    Toni Herrera

  4. Albeiro Ochoa

    Que bueno preciso el ajuste que necesitaba realizar, pero me surge arreglar otro detalle ¿como agregar el botón «leer mas» en la parte de abajo?

  5. Hola. Gracias Fernando. Tengo dos consultas:
    1.- ¿Cual sería la manera de limitar las palabras del extracto con está fórmula que propones?
    2.- ¿Cómo se puede hacer en DIVI para que la imagen destacada no aparezca en el principio de la entrada? Una manera es quitándola, pero me gustaría que hubiese una imagen para utilizar Yoast y poner descripción y todo eso.
    Si alguno habéis tenido necesidad de esta configuración y lo habéis resuelto, gracias por compartirlo…

  6. Hola!
    Para mantener la proporción de la imagen, mejor poner de ancho un tanto por ciento, por ejemplo: width: 30%; y quitar la altura.
    Saludos.

  7. Hola Fernando, gracias por el post y la gran ayuda. Tengo una consulta, todo bien con lo que indicas que se haga pero ahora el «leer más» me aparece debajo de la imagen. ¿Que podrá estar pasando?

  8. Muchas gracias! Yo estoy usando el tema Extra en dos webs y ahora que he instalado Divi estoy alucinando que tenga tan pocas opciones de personalización para las entradas. Esta que comentas me soluciona uno de los problemas, ahora tengo otro ¿Como puedo quitar la imagen destacada de la entrada? Quiero tener imagen destacada para que salga en los extractos (con el truquillo este que compartes) y tambien en RRSS, pero no en la entrada, que quiero que sea lo mas limpia posible, ya que es un podcast y no quiero perder a la gente con nada que no sea el audio

  9. la verdad es que me cambio, no solo las imagenes del blog, sino tambien la de cada post y las hizo mas pequeñas T_T

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido