Descubre cómo puedes mostrar un listado de entradas con diseño alternado derecha-izquierda en un bloque del plugin Osom Blocks, con un poco de código.
El plugin Osom Blocks te permite crear un listado de cualquier tipo de entrada (CPTs, entradas y páginas) y personalizarlo usando la interfaz de usuario.
Entre los ajustes están la opción de mostrarlo en formato de rejilla o de listado con la imagen a la izquierda y el texto a la derecha:
Pero es posible que en alguna ocasión prefieras mostrar un diseño de listado alternado derecha-izquierda:
Vamos a ver cómo puedes conseguir esta variación de estilo con un poco de CSS:
Snippet para mostrar un diseño de entradas alternadas derecha-izquierda en Osom Blocks
Añade un bloque de Osom Blocks y configura los ajustes a tu gusto. Recuerda seleccionar el diseño de listado (es decir, no actives el toggle de mostrar en rejilla).
A continuación añade el siguiente snippet al final de fichero style.css.
@media only screen and (min-width: 960px) {
.osomblocks-cptlist .entry:nth-child(even) {
grid-template-columns: 3fr 1fr;
}
.osomblocks-cptlist .entry:nth-child(even) a {
order: 1;
}
.osomblocks-cptlist .entry:nth-child(even) div {
order: 0;
}
.osomblocks-cptlist .entry::after {
content: none;
}
.osomblocks-cptlist .entry:nth-child(even) a.more-link {
float: left;
}
}En este código modificas el CSS de las entradas impares en dispositivos con una resolución de más de 960 píxeles.
Y esto es solo un ejemplo de lo que puedes conseguir con un poco de CSS. Si estás interesado en alguna otra variación soy todo oídos.
Conclusiones
Ya ves qué fácil es modificar el diseño de entradas de Osom Blocks para que las muestre de forma alternada a derecha e izquierda.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
