Customizar la página de artículos de Altitud Pro como en No Sidebar Pro

Vamos a ver como dejar la página de artículos de Altitude Pro como en No Sidebar Pro. Lo haremos con código, haciendo uso del template home.php.

En No Sidebar Pro Theme tienen una forma bastante asimétrica y llamativa de presentar el listado de artículos en la portada. Es muy vistosa y la he llevado a un par de Child Themes. Uno de ellos es Altitude Pro. El resultado no desentona mucho del diseño original.

Artículos mostrados en Altitud Pro como en No Sidebar Pro
Artículos mostrados en Altitud Pro como en No Sidebar Pro

El código

El código usado no es básico. Incluso el CSS es algo avanzado por el uso de selectores. Pero no empecemos por el final.

Crearemos un nuevo template llamado home.php que alojaremos en la carpeta raíz de Altitude Pro Theme. En este template introduciremos este snippet de código.

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

No te olvides de copiar también la etiqueta <?php del comienzo.

Ya hemos hecho la mitad del trabajo. Aunque si refrescas la página verás que no ocurre nada. bueno, tenemos la base. Ahora hay que trabajar con el estilo.

Al final del archivo style.css pega este código CSS para terminar de dar forma a nuestro nuevo blog asimétrico en Altitude Pro.

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

He tenido que retocar un poco el ancho de la página del blog y cambiar el color de fondo para que se distingan bien los bloques.

Usando el selector de CSS :nth-child-type conseguimos dar estilos distintos a los elementos mostrados, según que posición ocupan en la lista.

Conclusión

Hemos adoptado un estilo de blog completamente distinto al original con solo un template y algo de código CSS. No está mal.

Esto mismo que hemos hecho en Altitude Pro, con variaciones de código lo podríamos hacer en casi cualquier Genesis Child Theme.

Ya sabes para cualquier duda o problema con el código, deja un comentario abajo. Te resolveré la duda :). Feliz semana!

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?