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 743x1024 Personalizar Divi para que la imagen destacada quede a la izquierda

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 Personalizar Divi para que la imagen destacada quede a la izquierda

Guardar

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

rating off Personalizar Divi para que la imagen destacada quede a la izquierdarating off Personalizar Divi para que la imagen destacada quede a la izquierdarating off Personalizar Divi para que la imagen destacada quede a la izquierdarating off Personalizar Divi para que la imagen destacada quede a la izquierdarating off Personalizar Divi para que la imagen destacada quede a la izquierda (Ninguna valoración todavía)
loading Personalizar Divi para que la imagen destacada quede a la izquierdaCargando…
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.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!