Si estás usando Divi Theme y Divi Builder para maquetar tu sitio web en WordPress, sabés que el módulo blog muestras las entradas según los layouts preestablecidos (Fullwidth y Grid). Si deseas personalizar un poco más el módulo blog alineando las imágenes destacadas a la izquierda y los títulos a la derecha, aprende como hacerlo en este artículo.
Cuando utilizas el módulo de blog en Divi puedes utilizar dos layouts: Ancho completo y Rejilla.
El diseño de Rejilla del módulo blog de Divi nos ofrece la opción de mostrar mayor cantidad de entradas a simple golpe de vista. Es decir que el usuario no deberá scrollear inmediatamente para ver el tercer o cuarto post de la lista de entradas.
El diseño de Ancho completo nos mostrará las entradas una debajo de otra, en una sola columna. Pero al ser fullwidth, por defecto nos presenta unas cajas demasiado grandes y poco vistosas, aunque afortunadamente podemos mejorar con un poco de CSS.
En algún caso, podrías desear que las imágenes de cada caja / post mostrado en el diseño de Ancho completo estuviera alineada a la izquierda, por ejemplo.
Este es el caso de Francisco, lector del blog que expresó su inquietud en los comentarios de otro post y es por ello que esta entrada va con dedicatoria a su persona. Siempre es un placer ayudar a lectores.
Veamos cómo hacerlo con un poco de CSS en 3 sencillos pasos.
Alinear a la izquierda la imagen destacada en el Módulo Blog de Divi.
Paso 1: Ir a la configuración del módulo y buscar la pestaña Avanzado: Avanzado > ID y clases de CSS y en el campo Clase CSS asignar una… sí… clase.
Por ejemplo:
dt-blog
Para que no haya lugar a confusión, te comparto una captura.
Paso 2: En la pestaña Diseño confirmá que tengas configurado el layout Ancho completo o Fullwidth.
Paso 3: Copiar y pegar el siguiente código CSS en algunos de estos sitios:
- Custom CSS de WordPress
- Custom CSS de tu plantilla
- Plugin para añadir CSS personalizado como Simple Custom CSS and JS.
Para este ejemplo, colocaremos el código en
@media only screen and (min-width: 1080px) {
.dt-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
float: left;
width: 30%;
margin-right: 4%;
}
.dt-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
padding-left: 34%;
}
}
La imagen a la izquierda es la mejor opción, aún así podrías cambiarla a la derecha modificado «float: left;» por «float: right;«.
En este caso, tendrías que cambiar los otros valores del código.
Si usás «float-right», deberías utilizar «margin-left» y «padding-right«.
Justamente, «margin-right» es el espacio de margen –en este caso a la derecha de la imagen– que separa la imagen del contenido.
Si deseas la imagen más ancha, modificá el valor de «width: 30%» por el valor en % que prefieras.
Si te fue útil esta información, hacemelo saber en los comentarios. 😉