• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Mostrar el listado de entradas con formato alternado en Osom Blocks

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:

Diseño de listado por defecto en Osom Blocks

Pero es posible que en alguna ocasión prefieras mostrar un diseño de listado alternado derecha-izquierda:

Diseño de listado alternado en Osom Blocks

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

CSS Osom Blocks

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?