5 Jun 2018
34 comentariosA la hora de diseñar una página web, una de las muchas cuestiones que tienes que decidir es cómo organizar las entradas de tu blog en WordPress.
Para escapar del clásico listado o la habitual vista en forma de cuadrícula (grid), en este artículo te voy a enseñar diferentes formas de mostrar y organizar las entradas de un blog.
Por supuesto, antes de entrar en materia, te quiero recordar la importancia de que un sitio web cuente con un blog en el que publiques tus artículos habitualmente.
¿Por qué tu página web necesita un blog?
Para no extenderme demasiado en este apartado, voy a enumerar en un listado rápido los beneficios de contar con un blog (WordPress mucho mejor):
- Ofrecer contenido habitual a tu comunidad y generar confianza.
- Mostrar el conocimiento que tienes de tu sector.
- Publicar contenidos para posicionarte en Google (enfocados a SEO).
- Convertirte en un referente de tu sector.
- Conseguir nuevos leads.
- Captar suscriptores.
- Encontrar nuevas oportunidades de negocio.
Cómo organizar las entradas de tu Blog WordPress
Hecho este repaso rápido a los beneficios de tener un blog, ahora te cuento diferentes formatos que puedes utilizar para organizar tus posts (con ejemplo reales).
#1 Listado con imagen grande
El primer y más habitual blog en WordPress es el listado de entradas con imagen a tamaño grande.
Si utilizas Divi como plantilla, es el formato de blog que viene por defecto.
Este diseño puede incluir o no sidebar (barra lateral), en función de tus preferencias.
Incluye un resumen del contenido de la entrada, así como los metadatos (fecha, categorías, autor, número de comentarios).
Como te digo, es uno de los diseños clásicos para organizar un blog.
Aquí puedes ver un ejemplo:
#2 Listado con imagen pequeña
Este tipo de blog es otro de los diseños más clásicos.
Como en el caso anterior, se trata de un listado, pero en esta ocasión con imagen pequeña y organización a dos columnas.
En una de ellas aparece la imagen destacada del artículo y en la otra el resumen y los metadatos.
Un ejemplo:
#3 Listado a dos columnas
Este formato de blog es muy similar al anterior, pero se diferencia por la organización de las entradas en dos columnas.
Por lo tanto, los artículos aparecen emparejados en filas que incluyen dos elementos cada una.
En este caso, la información del artículo (título, metadatos y resumen) aparece debajo de la imagen.
Un ejemplo:
#4 Rejilla o cuadrícula
Un diseño muy actual para blogs en WordPress es el formato rejilla, también conocido como "grid".
En este tipo de diseño los artículos se muestran en formato de cuadrícula y lo habitual es que aparezcan tres elementos por fila.
#5 Rejilla con post destacado
Siguiendo el estilo de rejilla, otra modalidad de diseño para un blog es la combinación de cuadrícula + post destacado.
Es decir, en este diseño los artículos se organizan en forma de cuadrícula, pero el primero de todos (el más reciente) aparece destacado y con un tamaño superior al resto.
Un ejemplo:
#6 Categorías destacadas
A este tipo de blog me ha costado ponerle nombre. Le he llamado "categorías destacadas" porque es el elemento diferenciador respecto al resto de blogs que he mostrado.
Es un diseño más alejado de lo convencional, pues incluye diferentes elementos que lo hacen más llamativo:
- El último post publicado aparece como destacado con ancho completo.
- A continuación, aparecen cuatro artículos destacados por categorías. El último publicado en cada una de ellas.
- Después se muestran los botones a cada una de esas categorías.
- Por último, el resto de artículos en formato cuadrícula.
Para que lo acabes de ver, te dejo un ejemplo, que es uno de mis últimos diseños:
#7 Diseño modular con sidebar
El formato modular es también una de las últimas tendencias en diseño web.
Consiste en el planteamiento de cada artículo como un módulo independiente.
Por lo tanto, su característica principal es que el diseño se plantea a partir de elementos independientes que tienen un formato cuadrado.
Aquí puedes ver un ejemplo:
#8 Diseño modular por columnas
Siguiendo el formato mudular, existe una variedad que me parece muy chula y moderna.
Como en el caso anterior, los artículos tienen formato cuadrado y se plantean como elementos independientes, pero en este diseño se muestran a dos columnas.
Es decir, la disposición de los posts tiene un formato modular, pero se organizan en dos columnas: en una aparece la imagen y en otra el título, resumen y metadatos.
Un ejemplo:
Y otro muy similar:
#9 Diseño modular en formato vertical
A continuación, te quiero mostrar un ejemplo más de diseño con formato modular.
En este caso, las entradas se ordenan en formato vertical, es decir, unas debajo de otras.
Como en los ejemplos anteriores, cada entrada se plantea como un elemento independiente.
Un ejemplo para acabar de explicarlo bien:
#10 Diseño moderno
Por último, te quiero mostrar un tipo de blog en WordPress al que he llamado "diseño moderno", pues es un formato que no es tan habitual.
Puedes verlo en mi blog y es un diseño que he creado yo mismo desde cero.
Se me ocurrió plantearlo a modo de listado con dos columnas, con la particularidad de que en otra columna, a la izquierda, aparece la fecha de publicación del post.
Además, el diseño incluye una una cabecera superior con ancho completo, dividida en dos columnas, con acceso a mi masterclass.
Como se me da mejor diseñarlo que explicarlo por escrito, puedes ver el resultado aquí:
Hasta aquí mis 10 formas de organizar las entradas en un blog en WordPress. Espero que, si te vas a crear un blog o ya tienes uno y lo quieres rediseñar, todos estos ejemplos te sirvan de inspiración 😉
Hola Max!
Me gustó muchísimo el diseño que elegiste para el diseño de mi web. Pero me gusta mucho saber que hay otras, para cuando sea el momento de hacer un refresh del sitio.
También me ha gustado mucho el diseño con las categorías destacadas.
Muy buen post para saber todas las opciones
Hola Florencia 🙂
Qué bueno verte por aquí. Ya sabes que tu web es una de las que más orgulloso me siento por el resultado final, el diseño del que partías y la carrera que nos pegamos para lanzarla en tiempo.
Es un proyecto muy chulo que seguirá creciendo y dándote alegrías.
Cuando te canses y quieras cambiar el diseño del blog, ya sabes 😛
Un abrazo!
Muy buena entrada Max! Gran ayuda para inspirarnos. tengo una duda, yo uso Divi y tengo las entradas como en el ejemplo 1. ¿Cómo puedo cambiar y organizar mi blog de otra manera?. Por más que he buscado, no doy con la tecla.
Hola Mariano,
Puedes modificar el estilo de las entradas con el módulo blog de Divi o modificando el CSS.
Échale un vistazo a este post: Efectos CSS para personalizar tu web o blog con Divi 😉
Saludos
Absurdo post donde no te dice como hacer lo que se indica... No aporte ningún valor añadido...
Hola Juan,
Son ideas para maquetar un blog, no un tutorial sobre cómo hacerlo 🙂
Saludos
Hola Max.
Me gustaría hacerte una pregunta que estaría muy agradecido de tu ayuda.
Estoy intentando hacer el nº 5, pero no consigo fijar el post destacado. Es decir, cuando le doy a "entradas más antiguas" se me mueven todos, el destacado y los pequeños.
¿Usas algún plugin, programación o alguna opción que desconozco?
Muchas gracias anticipadas.
Saludos
Victor
Hola Victor,
¿Qué plantilla estas usando? ¿Divi?
Si es así, debes configurar la opción de compensación dentro del módulo blog.
Saludos
Hola de nuevo.
Muchas gracias por la contestación. Lo de la compensación ya lo tenía en cuenta.
Ya he conseguido fijar el post destacado, pero ahora tengo otro pequeño problema:
Si, por ejemplo, quiero poner una fila con dos módulos de blog y aunque estén dentro de una misma sección, se mueven por separado al "pasar de página".
No sé si podrías decirme por qué ocurre esto.
Muchas gracias de nuevo.
Saludos
Victor
Hola Víctor,
Cada módulo funciona de forma independiente, aunque los pongas en la misma fila o sección.
Saludos
Hola otra vez.
Muchas gracias por todo.
Creo que ya me voy enterando. ?
Saludos
Victor
Bendiciones Max, muy interesante este articulo, tengo una consulta espero me puedas orientar, tengo ya creada mi tienda en wordpress y también tengo dentro mi blog, pero no se si sabes como poner algunas entradas de mi blog en la parte inicial de mi pagina? lo que pasa es que cuando uno entra ve el menú y debajo salen los últimos productos de la tienda, lo que quisiera es que se pueda ver algunos post de mi blog en la pagina de inicio, sabes como se puede hacer ello? muchas gracias, saludos desde Perú DTB
Hola Johans,
En función de la plantilla o maquetador que uses en tu web, debes añadir en la home un módulo o bloque de entradas y configurarlas a tu gusto.
Saludos
Buenas tardes, fijate que quiero cambiar de lugar mis post, actualmente se muestran en la parte de abajo en toda la pgina, pero yo quiero que se muestren a la derecha, disculpa como puedo hacerlo
Saludos y muchas gracias
Disculpa y cómo hago para poner algunos diseños en mi blog.
Se ven muy padres, pero no se cómo hacerlo. Tengo por defecto a los que me da wordpress
Es un plugin? Aplicación o como?
Muchas gracias por tu apoyo. Me parecen entradas muy originales
Hola Gerardo,
Depende de la plantilla o maquetador que utilices en tu web. También puedes utilizar algún plugin para organizar entradas, como puede ser WP Show Posts.
Este post es una recopilación de ideas, no un tutorial.
Sorry!
Te agradezco el tiempo que tomaste en contestarme Max
Echaré un vistazo al plugin
Saludos
De nada Gerando!
Si no conoces el tema Divi, échale un vistazo. Es el que recomiendo para diseño web y del que hablo en muchos de los posts de este blog.
Saludos
Hola Max, uso Twenty Seventeen y quiero que en la página blog sólo aparezca la última entrada. Algun plugin que me ayude con esa edición? Muchas gracias!
Hola Max, gusto saludarte. Fíjate que en mi blog me aparecen al final "entradas antiguas" pero no deja visualizarlas, aparecen en la página de inicio pero no en su categoría. Ojalá me puedas ayudar. Muchas gracias. Saludos
Hola Max, me gustan mucho los formatos tipo Diseño modular con sidebar, como puedo hacerlo en mi página? Necesito una plantilla paga? De momento tengo una gratis. Gracias y saludos!
Hola Ali,
Si el tema que has utilizado no te permite hacerlo, te recomiendo usar el plugin WP Show Posts.
Saludos
Deberías cambiar el titulo, mucha gente se confunde y piensa que es un tutorial para organizar la vistas del blog
Hola Luis,
No es un tutorial, sino una recopilación de ideas en base a mi experiencia.
Cuando publico un tutorial o guía, lo indico en el título 🙂
Gracias por pasarte.
Saludos
Hola! Gracias por el artículo! Una consulta. Hay alguna forma de fijar una entrada en una página concreta que no sea la de inicio? Gracias. Un saludo!
Hola Ceci,
¿Con qué plantilla? ¿Divi?
hola yo quiero poner mis entradas como el N3 pero es en blogger
Hola Carlos. Llevo muchos años sin utilizar Blogger para crear webs, pues estoy especializado en WordPress. Lamento no poder ayudarte 🙁
Hola!
Quiero insertar varias entradas en columnas de 3 a las páginas que tengo en mi página web de WordPress, pero me sale como un listado horizontal (uno abajo de otro). Me podría ayudar?
Hola Max
Mi problema es el siguiente: He realizado todo el proceso de traducción en dos idiomas y cuando voy a la web y doy al botón de inglés me traduce la cabecera pero no veo la página de inicio, me aparece el siguiente texto “ this page doesn’t seem to exist. It looks like the link pointing here was faulty.Maybe try searching?
Deduzco que tengo que emparejar el idioma con algun link de la página.
Como debo hacerlo?
Aqui lo puedes ver: ominteriorisme.com
Gracias
Hola Oriol,
Gracias por tu comentario.
Sin saber qué plugin has utilizado para los idiomas y sin ver cómo lo has configurado, no puedo decirte. Sorry!
Puedes contactar conmigo y lo vemos.
Saludos
Hola. Me gustaría mejorar tanto la visualización de las entradas en la página de inicio como en la página de blog , mi tema es Boxy y la web consultin.es ¿Me puedes decir cómo puedo hacerlo o puedes contactar conmigo?
Hola! Gran aporte, pero podria tener en cuenta WP Latest Posts que permite crear una seccion con entradas personalizadas en WordPress y tiene una version gratuita
Estan guapisimos! Gracias por el articulo. Estupendo aporte