5 consejos para organizar el contenido de la página del blog en Divi
Publicado: 2019-12-21El contenido de la página de tu blog se puede organizar de muchas formas. Dado que es una página de blog, la mayor parte del contenido consistirá en un feed de publicaciones de blog recientes. Saber cómo organizar este contenido puede ser una excelente manera de romper la monotonía y abrir la puerta a diseños de páginas de blogs más exclusivos.
En este tutorial, compartiremos contigo 5 consejos útiles para organizar el contenido de la página del blog en Divi que te ayudarán a aprender lo siguiente:
- Cómo crear un diseño de dos columnas
- Cómo usar publicaciones fijas
- Cómo utilizar las compensaciones de publicación
- Cómo usar varios módulos de blog para crear un diseño personalizado para publicaciones de blog
- Cómo mostrar publicaciones recientes por categoría
Vistazo
Aquí hay un vistazo a algunas de las formas en que organizaremos el contenido de la página del blog en Divi.
Usando un diseño de dos columnas
Una sección de publicación destacada encima del feed del blog principal
Un control deslizante de publicación de ancho completo sobre el feed del blog principal
Uso de varios módulos de blog para una distribución y un diseño únicos
Presentando publicaciones recientes por categoría
Lo que necesitas para empezar
Si aún no lo ha hecho, instale y active Divi Theme.
Para este tutorial, utilizaré la plantilla de página de categoría del segundo paquete de creación de temas. Si desea usarlo para seguir, descargue el paquete e importe el archivo divi-theme-builder-pack-2-category-page-template.json al generador de temas utilizando las opciones de portabilidad. 
De forma predeterminada, la plantilla importada se asignará a "Todas las páginas de categorías". Abra la configuración de la plantilla y asígnela al Blog.
Ahora está listo para comenzar el proceso de organización del contenido de la página del blog dentro de la plantilla. Para comenzar, haga clic en el icono de edición en el área del cuerpo de la plantilla.
Ahora puede utilizar el editor de diseño para modificar el diseño.
5 consejos para organizar la plantilla de la página del blog en Divi
En esta plantilla, tenemos un módulo de blog que está en una fila de una columna que muestra las publicaciones (en tres columnas en el escritorio) para la página actual. Esta es una configuración estándar para plantillas de páginas de blogs y archivos. Sin embargo, no tenemos que mantener este diseño estándar para mostrar publicaciones. A continuación, se incluyen algunos consejos útiles para organizar el contenido de la página del blog en Divi.
# 1 Cree un diseño de dos columnas
El módulo de blog (si está configurado en diseño de cuadrícula) mostrará las publicaciones en una estructura de tres columnas si el módulo se agrega a una fila de una columna (como en nuestra plantilla).
Si desea cambiar el diseño para mostrar publicaciones en un diseño de dos columnas, aquí hay algo que puede hacer.
Primero, cambie el diseño de columna de la fila a un diseño de dos tercios un tercio. Esto mostrará las publicaciones del blog en dos columnas en la columna izquierda de la fila.
A continuación, abra la configuración de la columna 1 (la que contiene el módulo de blog) y agregue el siguiente CSS personalizado al elemento principal:
width: 100% !important;
Esto hará que la columna abarque todo el ancho de la fila.
Ahora todo lo que tenemos que hacer es ocultar la columna de la derecha. Abra la configuración de la columna 2 (la vacía) y desactive la visibilidad de la columna en todos los dispositivos.
Ahora puede organizar el contenido de la página del blog con dos columnas en el escritorio en lugar de tres si lo desea.
# 2 Usa publicaciones adhesivas
Si está familiarizado con WordPress, es posible que ya conozca este. Cada publicación creada en Divi (o WordPress) se puede hacer pegajosa. Cuando hace que una publicación sea pegajosa, la publicación se mostrará automáticamente en la parte delantera del feed del blog en la página del blog, incluso antes de la publicación publicada más recientemente. Esta es una excelente manera de presentar publicaciones que sabes que tu audiencia querrá (o necesitará) ver.
Para hacer que una publicación sea pegajosa, simplemente edite una publicación en Divi y marque la opción "Pegar en la parte superior del blog" en la barra lateral derecha.
Cada publicación que haga que se adhiera se etiquetará como "Adhesiva" cuando vea todas las publicaciones en el backend.
Ahora, cuando visita la página del blog, puede ver que las publicaciones adhesivas han saltado al frente del feed de publicaciones del blog.
Nota: Es posible que las publicaciones fijas no funcionen como se esperaba cuando se utilizan compensaciones de publicaciones en el Módulo de blog. Por ejemplo, si configura el módulo de blog para que muestre 3 publicaciones con un desplazamiento de publicación de 3, sus publicaciones fijas se seguirán mostrando antes (y además de) las 3 publicaciones.
Antes de continuar con el siguiente consejo, le sugiero que se deshaga de las publicaciones pegajosas.
# 3 Use compensaciones de publicaciones para organizar el contenido de la página del blog en secciones separadas
Cada módulo de blog tiene la opción de ingresar un número de publicación. Esto le dice al módulo de blog que omita una cierta cantidad de publicaciones de blog recientes antes de mostrar el feed del blog. Esta opción es útil siempre que desee mezclar un poco el diseño de la página de su blog mediante el uso de varios módulos de blog para mostrar sus publicaciones. Esto le brinda más flexibilidad con el diseño del diseño porque puede diseñar cada módulo de blog de manera diferente.
Presentando las publicaciones más recientes con un módulo de blog separado usando Post Offset
Una forma de organizar el contenido de la página del blog en el diseño de su plantilla es agregar una sección de publicación de blog destacada en la parte superior de la página. Esta es una forma en que puede resaltar las tres publicaciones más recientes de una manera única. Aquí está ahora para hacerlo.
Agregue una nueva sección regular al diseño.
Luego agregue una fila de una columna.
Copie el módulo de blog que vino con la plantilla y péguelo en la nueva fila.
Actualice la configuración del blog de la siguiente manera:
- Número de publicaciones: 3
- Mostrar botón Leer más: NO
- Mostrar categorías: NO
- Mostrar recuento de comentarios: NO
- Mostrar extracto: NO
- Mostrar paginación: NO
Tendremos las tres publicaciones más recientes que se muestran en la sección superior de la página.
Ahora necesitamos agregar un número de compensación de publicación al módulo de blog original para que omita las tres primeras publicaciones que ya se muestran arriba.
Abra la configuración del blog para el módulo de blog original y actualice lo siguiente:
- Número de compensación de publicación: 3
Ahora el feed del blog comenzará con la publicación n. ° 4.
Para que la sección destacada en la parte superior de la página se destaque, puede agregar un degradado de fondo.
Aquí hay un ejemplo de cómo se vería.
Agregar un control deslizante de publicación de ancho completo sobre el feed del blog principal
Al igual que en la sección destacada anterior, también podemos organizar el contenido de la publicación de blog agregando un control deslizante de publicación de ancho completo en la parte superior de la página del blog. Este es un diseño popular para páginas de blogs y puede usarlo en combinación con un módulo de blog que tiene un desplazamiento de publicación.
He aquí cómo hacerlo.
Primero, agregue una sección de ancho completo al diseño.
Luego agregue un módulo deslizante de publicación de ancho completo a la sección.
Luego actualice la siguiente configuración:
- Publicaciones para la página actual: SÍ
- Número de publicaciones: 3
Luego actualice el diseño del control deslizante de la publicación para que coincida con el diseño de la siguiente manera:
- Fuente del título: Lato
- Peso de la fuente del título: negrita
- Tamaño del texto del título: 40px
- Tamaño del texto del cuerpo: 16px
- Tamaño del texto del botón: 14px
- Color del texto del botón: # ff0071
- Color de fondo del botón: #ffffff
- Ancho del borde del botón: 0px
- Fuente del botón: Lato
- Peso de la fuente del botón: negrita
- Estilo de fuente del botón: TT
Asegúrese de que el módulo de blog muestre la fuente principal tenga un número de desplazamiento de publicación aún establecido en 3 para adaptarse a las 3 publicaciones del control deslizante de publicación.
Entonces mira el resultado.
Se ve bien hasta ahora.
Ahora llevemos la idea de usar un módulo de blog separado un paso más allá con este siguiente consejo.
# 4 Agregar múltiples módulos de blog, cada uno con una sola publicación
No tenemos que limitarnos a agregar un módulo de blog adicional a un diseño de plantilla. De hecho, podemos utilizar tantos módulos de blog como necesitemos. Incluso podemos optar por mostrar solo una publicación por módulo de blog para darle un diseño único a una sola tarjeta de publicación de blog. Luego, utilizando compensaciones de publicaciones, podemos crear un diseño completamente único de publicaciones de blog que se muestran dinámicamente.
He aquí cómo hacerlo.
Primero, agregue una nueva fila de media columna por encima de la fila que contiene el módulo principal del blog.
Copie el módulo de blog original a continuación y péguelo en la columna izquierda de la nueva fila. Luego actualice lo siguiente:
- Número de publicaciones: 1
- Número de compensación de publicación: 0
- Mostrar paginación: NO
A continuación, copie el módulo de blog que acaba de crear y pegue un duplicado en la columna de la derecha.
Luego actualice lo siguiente:
- Número de compensación de publicación: 1
- Mostrar imagen destacada: NO
- Mostrar recuento de comentarios: NO
- Mostrar extracto: NO
Asegúrese de establecer el número de desplazamiento de publicación en 1 para omitir el primero en la columna de la izquierda.
Ahora continúe este proceso creando otro módulo de blog y aumentando el número de desplazamiento de la publicación en 1 cada vez.
Duplica el módulo del blog en la columna de la derecha.
Luego, cambie el número de desplazamiento posterior a 2.
Duplique el módulo del blog una vez más y cambie el número de desplazamiento de la publicación a 3.
Ahora puede tener la libertad de personalizar el diseño de cada uno de los módulos del blog individualmente. Por ejemplo, podría agregar un color de fondo diferente a cada uno.
Aquí está el resultado.
Si va a mantener el feed del blog principal a continuación, asegúrese de actualizar el número de compensación de la publicación a 4 para adaptarse a las 4 publicaciones de la fila anterior.
También puede ver que esta misma técnica se utiliza en algunas de nuestras Plantillas de páginas de categorías de Theme Builder. Consulte nuestro tutorial sobre cómo crear una plantilla de página de categoría utilizando el mismo concepto.
# 5 Mostrar publicaciones recientes por categoría en la página del blog
Además del canal principal del blog en la plantilla de la página del blog, también puede mostrar sus publicaciones recientes por categoría. Esta es una excelente manera de organizar el contenido de la página del blog dividiendo un poco el diseño y resaltando diferentes categorías al mismo tiempo.
He aquí cómo hacerlo.
Primero, agregue una nueva fila de una columna debajo de la fila que contiene el módulo principal del blog.
Luego actualice la configuración del blog de la siguiente manera:
- Publicaciones para la página actual: NO
- Tipo de publicación: Publicaciones
- Número de publicaciones: 3
- Categorías incluidas: Negocio (o uno propio)
Esto mostrará las tres publicaciones más recientes de la categoría Negocios.
Luego agregue un módulo de texto encima del módulo de blog con el título de categoría correspondiente.
Y así, tiene una sección de categoría destacada en la página de su blog, ¡una excelente manera de organizar el contenido de la página del blog!
Incluso puede agregar varias secciones de categorías destacadas, cada una con un diseño único.
Estas secciones de categorías destacadas encajan bien en la parte inferior de la plantilla de la página del blog.
Pensamientos finales
Estos consejos deberían ayudarlo a organizar el contenido de la página del blog en todo tipo de formas únicas. Y estos mismos consejos funcionarían para muchos otros tipos de plantillas (como plantillas de página de categoría / archivo) que usan el módulo de blog para mostrar contenido. No dude en explorar estos consejos y utilizarlos en su próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡Salud!