En este vídeo te contamos cómo puedes mostrar contenidos en formato cuadrícula en tu Membership Site fácilmente y sin plugins.
Si estás pensando en crear tu sitio de membresía o, simplemente, darle un lavado de cara, posiblemente el diseño sea uno de los puntos que estás barajando en estos momentos.
Sobre diseño para Membership Sites se ha hablado largo y tendido Existen muchas tendencias, teorías, planteamientos y aproximaciones, todas válidas… mientras te ayuden a cumplir con el objetivo principal que te hayas fijado en tu negocio: la conversión.
La forma en la que mostramos el contenido de nuestro sitio de membresía también es parte de este diseño. De hecho, el modo en el que lo presentamos ante nuestros usuarios impactará de forma directa en su consumo.
Una de estas formas es mostrar el contenido en formato cuadrícula, grid o rejilla. Este diseño, abandona la concepción tradicional de los blogs, en la que los contenidos aparecían uno debajo del otro, y pasa a organizarlos en filas y columnas.
De esta forma, el usuario tiene a la vista más contenidos, sin la necesidad de hacer scroll Esto es muy útil, por ejemplo, cuándo presentamos nuestra propuesta de valor en una membresía de contenido.
Aprendemos a mostrar tus contenidos en formato cuadrícula en tu sitio de membresía
En este vídeotutorial, aprenderemos cómo aplicarlo a nuestro sitio de membresía, independientemente de cuál sea el tema de WordPress que utilicemos en cada caso.
Además, en nuestro afán minimalista y potenciador del WPO, lo conseguiremos sin plugins 😉
¡Vamos al lío!
¡Hecho! ¿Verdad que ha quedado chulo? Aquí tienes el código utilizado en el vídeo:
.home .site-inner {
max-width: 1200px;
}
.posts-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.posts-wrapper .entry {
flex-basis: calc(33.33% - 30px);
}
.posts-wrapper .entry img {
max-height: 185px;
}En muy poco tiempo hemos conseguido modificar la forma en la que se muestran los contenidos de nuestro Membership Site, pasando a utilizar un formato cuadrícula, muy interesante y fácil de conseguir.
Y es que, como hemos visto en el vídeo, realmente no es nada complicado aplicar este tipo de diseño a un sitio de membresía con WordPress, sin la necesidad de utilizar plugins.
Ahora, seas o no diseñador web, ya sabes cómo mostrar contenidos en formato cuadrícula en tu Membership Site sin morir en el intento 🙂
Esperamos que este videotutorial te haya sido de utilidad y que ahora no tengas dudas a la hora de crear Custom Post Types por código para tu sitio de membresía con WordPress 😀
Y recuerda que en Bicicleta Studio somos especialistas en Membership Sites y estamos aquí para ayudarte a conseguir ingresos recurrentes para que vivas de lo que te apasiona 🙂
Me ha encantado Jordi. ¡Es lo que llevo intentando conseguir desde hace dos meses! Me he hecho ya casi todos los cursos de boluda que recomendabas en tu curso de «psd a theme», y ya me queda por hacer justo éste y después el de flex. Los haré y los meteré en mi hoja de estilo, ¡qué he aprendido mucho! No veas que ilusión me hace cuando dices que hacerlo así es de «avanzados».
Por otro lado, aprovecho para pedir… A mí lo que me gustaría además es hacer los filtros tan chulos que tenéis hechos en la parte superior (los botones redondeados) por cada CPT. ¿Es muy difícil hacerlo? ¡Anda, animaros a hacer un minicurso!
Gracias
Laura
Gracias Lauraaa 😀
Hola Jordi, te felicito por lo minimalista y eficaz de tu código, me encanta el tono y el tiempo que usas para explicar las cosas es muy agradable.
Qué tengáis un buen fin de semana.
¡Gracias Juan Luís!
Genial el tutorial! Me ha encantado! Felicidades Jordi.
Como lo tendriamos que hacer para un cpt y en lugar de en la home que sea una pagina de archivo? por ejemplo misite.com/cursos
un saludo y gracias
Gracias a ti por el feedback 🙂
Pues lo mismo, la clave es pillar el wrapper que cubre todo el contenido que queremos mostrar en grid.
Hola Jordi, buenas tardes
Disculpa, ¿el código que nos compartes también se puede utilizar a pesar de que el editor sea Gutenberg?
De antemano muchas gracias.
Por cierto, que gran contenido nos aportan las entrevistas, apenas voy en el episodio 25 jejejeje
Saludos desde México 😀
Claro, sin problema! Ten en cuenta, eso sí, que tienes bloques para mostrar contenidos en Grid 😉
Jordi hay alguna forma de poner el titulo debajo de la imagen en el contenido Grid, por defecto en génesis viene encima de la imagen
Fácil: https://wpsites.net/web-design/move-featured-image-before-entry-title-on-archive-pages/ 😉
Alucinante ? thank you
🙂
Moltes gràcies. Feia molt temps que em barallava amb la vista dels Cursos de Sensei. El plugin m’agrada per la facilitat d’us de l’usuari, però l’aspecte visual del arxiu de cursos és molt trist.
De nou, moltes gràcies pel tutorial!
Yeah!
Muy claro y útil. Muchas gracias
Me alegro de que te haya sido útil, Daniel 🙂