El contenido de la página de tu blog se puede organizar de muchas maneras. Dado que es una página de blog, la mayor parte del contenido consistirá en una fuente de publicaciones de blog recientes. Saber cómo organizar este contenido puede ser una excelente manera de romper con la monotonía y abrir la puerta a diseños de páginas de blog más exclusivos.
En este tutorial, compartiremos contigo 5 consejos útiles para organizar el contenido de una página de 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 múltiples módulos de blog para crear un diseño personalizado para publicaciones de blog
- Cómo mostrar publicaciones recientes por categoría
Aquí hay un vistazo a algunas 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 sobre el feed principal del blog
Un control deslizante de publicación de ancho completo sobre el feed principal del blog
Uso de múltiples módulos de blog para un diseño y diseño únicos
Con publicaciones recientes por categoría
Lo que necesitas para empezar
Si aún no lo has hecho, instala y activa el tema Divi .
Para este tutorial, usaré la plantilla de página de categoría del segundo paquete de generador 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 usando las opciones de portabilidad.
De forma predeterminada, la plantilla importada se asignará a «Todas las páginas de categoría». Abra la configuración de la plantilla y asígnela al Blog.
Ahora está listo para comenzar el proceso de organizar el 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 usar el editor de diseño para modificar el diseño.
5 consejos para organizar la plantilla de página de 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 archivos y blogs. Sin embargo, no tenemos que mantener este diseño estándar para mostrar publicaciones. Aquí hay algunos consejos útiles para organizar el contenido de la página del blog en Divi.
#1 Crea 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 (al igual que en nuestra plantilla).
Si desea cambiar el diseño para mostrar las 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 y 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:
|
01
|
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 deshabilite 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 fijas
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 fija, 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 más reciente. Esta es una excelente manera de presentar publicaciones que sabes que tu audiencia querrá (o necesitará) ver.
Para hacer que una publicación sea fija, simplemente edite una publicación en Divi y marque la opción «Adherirse a la parte superior del blog» en la barra lateral derecha.
Cada publicación que hagas se pegará se etiquetará como «Sticky» cuando veas todas las publicaciones en el backend.
Ahora, cuando visita la página del blog, puede ver que las publicaciones fijas han saltado al frente del feed de publicaciones del blog.
Nota: Es posible que las publicaciones fijas no funcionen como se espera cuando se usan compensaciones de publicación en el módulo Blog. Por ejemplo, si configura el módulo de blog para mostrar 3 publicaciones con un desplazamiento de publicación de 3, sus publicaciones fijas aún se mostrarán antes (y además de) las 3 publicaciones.
Antes de pasar al siguiente consejo, le sugiero que se deshaga de las publicaciones adhesivas.
#3 Use las compensaciones de publicación para organizar el contenido de la página del blog en secciones separadas
Cada módulo de blog tiene una opción para ingresar un Número de descuento de publicación. Esto le dice al módulo de blog que omita una cierta cantidad de publicaciones recientes del blog antes de mostrar el feed del blog. Esta opción es útil cuando desea mezclar un poco el diseño de la página de su blog mediante el uso de múltiples 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 número de comentarios: NO
- Mostrar extracto: NO
- Mostrar paginación: NO
Las tres publicaciones más recientes se mostrarán en la sección superior de la página.
Ahora necesitamos agregar un número de desplazamiento de publicación al módulo de blog original para que omita las primeras tres 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 desplazamiento posterior: 3
Ahora, el feed del blog comenzará con la publicación n.º 4.
Para resaltar la sección destacada en la parte superior de la página, puede agregar un degradado de fondo.
Aquí hay un ejemplo de cómo se vería.
Adición de un control deslizante de publicación de ancho completo sobre el feed principal del blog
Al igual que la sección destacada anterior, también podemos organizar el contenido de la publicación del 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 blog y puede usarlo en combinación con un módulo de blog que tiene un desplazamiento de publicación.
Aquí está 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 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 cuerpo del texto: 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 el feed principal con 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 detenernos simplemente agregando un módulo de blog adicional a un diseño de plantilla. De hecho, podemos usar tantos módulos de blog como necesitemos. Incluso podemos elegir 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, usando compensaciones de publicaciones, podemos crear un diseño completamente único de publicaciones de blog que se muestran dinámicamente.
Aquí está cómo hacerlo.
Primero, agregue una nueva fila de una mitad de una mitad de columna arriba de la fila que contiene el módulo de blog principal.
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 desplazamiento posterior: 1
- Mostrar imagen destacada: NO
- Mostrar número de comentarios: NO
- Mostrar extracto: NO
Asegúrese de establecer el número de desplazamiento de la 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 publicación en 1 cada vez.
Duplica el módulo de blog en la columna de la derecha.
A continuación, 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 puedes 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 principal del blog a continuación, asegúrese de actualizar el número de desplazamiento de la publicación a 4 para acomodar las 4 publicaciones en la fila de arriba.
También puede ver que esta misma técnica se utiliza en algunas de nuestras Plantillas de página de categoría 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 feed 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 al dividir un poco el diseño y resaltar diferentes categorías al mismo tiempo.
Aquí está cómo hacerlo.
Primero, agregue una nueva fila de una columna debajo de la fila que contiene el módulo de blog principal.
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: Negocios (o uno propio)
Esto mostrará las tres publicaciones más recientes de la categoría Negocios.
Luego agregue un módulo de texto sobre el módulo de blog con el título de categoría correspondiente.
Y así, tiene una sección de categoría destacada en su página de blog, ¡una excelente manera de organizar el contenido de la página de blog!
Incluso puede agregar múltiples 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 utilizan el módulo de blog para mostrar contenido. Siéntase libre de explorar estos consejos y utilizarlos en su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!