Divi Módulo Blog: alinear imagen destacada a la izquierda.

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.

Así es cómo se verán tus entradas en el módulo blog con el diseño Ancho completo.

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.

Asignar una clase CSS al módulo Blog.

Paso 2: En la pestaña Diseño confirmá que tengas configurado el layout Ancho completo o Fullwidth.

Configurar el layout Ancho completo en el módulo de Blog.

Paso 3: Copiar y pegar el siguiente código CSS en algunos de estos sitios:

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. 😉

Compartir:

Recibe este contenido en tu correo.

Te envío mis últimas publicaciones y comentarios extras.
Tu privacidad es tan importante como la mía: no compartiré tus datos con nadie.

Sitio Web / Blog
en WordPress

de Regalo 🎁

Listo para promocionar tus productos y servicios online.

Emprende con
Recursos

Conoce las principales herramientas que utilizo a diario.

Emprende con
Recursos

Conoce las principales herramientas que utilizo a diario.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Responsable » Franco Román Giardina
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que proporcionas estarán ubicados en los servidores de SiteGround, que es la empresa que provee el servicio de alojamiento web a francogiardina.com, dentro de la UE. Puedes ver la política de privacidad de SiteGround en la siguiente URL: https://www.siteground.es/privacidad.htm/
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

¿Te parece útil este contenido?

Si este y otros artículos te son de utilidad se aceptan cafés (con su brioche y todo).

La energía de ese café se usa para poder producir más y mejores contenidos.

También es un modo de evitar meter patrocinios en los artículos.