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 la imagen destacada de los post queden a la izquierda y el texto a la derecha.

El aspecto a conseguir es el siguiente. Si pincháis en una categoría, esta sería la página que se mostraría.

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.

/* 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;
}
}

Como siempre, os recomiendo hacer uso de los Temas Hijo o Child Theme para que las actualizaciones de Divi no afecten a vuestras personalizaciones.

Guardar

Si te ha parecido interesante este artículo y crees que Divi puede ayudarte con tu proyecto Web y estás pensando en comprarlo, te pido que lo hagas pinchando en la siguiente imagen. Estoy afiliado a ElegantThemes y me llevaría una pequeña comisión si llegas a comprarlo. De esta manera me ayudas a mantener el blog y a escribir más artículos como este. Si además, te haces suscriptor de ElegantThemes, podrás comprarlo con hasta un 20% de descuento en algunos casos. AfiliadosDivi Guardar Guardar
Advertisements

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.

CERRAR

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!