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

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

Personalizar Divi para que la imagen destacada quede a la izquierda 01

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.

eBook Actualizar WordPress

Y si todavía no tienes Divi, aquí tienes un descuento del 20% en tu licencia de Divi 😉.

Guardar

Dime qué te ha parecido el artículo...

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Pin It on Pinterest