El contenido de tu página de blog se puede organizar de muchas maneras. Como se trata de 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 la monotonía y abrir la puerta a diseños de páginas de blog más exclusivos.

En este tutorial, compartiremos con usted 5 consejos útiles para organizar el contenido de la página del blog en Divi que lo ayudarán a aprender lo siguiente:

  1. Cómo crear un diseño de dos columnas
  2. Cómo usar publicaciones adhesivas
  3. Cómo usar las compensaciones de publicación
  4. Cómo usar múltiples módulos de blog para crear un diseño personalizado para publicaciones de blog
  5. Cómo mostrar publicaciones recientes por categoría

Vistazo

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

organizar el contenido de la página del blog en Divi

Una sección de publicación destacada sobre el feed principal del blog

organizar el contenido de la página del blog en Divi

Un control deslizante de publicación de ancho completo sobre el feed principal del blog

organizar el contenido de la página del blog en Divi

Uso de múltiples módulos de blog para un diseño y diseño únicos

organizar el contenido de la página del blog en Divi

Con publicaciones recientes por categoría

organizar el contenido de la página del blog en Divi

Lo que necesitas para empezar

Si aún no lo ha hecho, instale y active el Divi Theme .

Para este tutorial, usaré la Plantilla de página de categoría del segundo paquete de generador de temas . Si desea utilizarlo 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.
organizar el contenido de la página del blog en Divi

Por defecto, 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.

organizar el contenido de la página del blog en Divi

organizar el contenido de la página del blog en Divi

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.

organizar el contenido de la página del blog en Divi

Ahora puede usar el editor de diseño para modificar el diseño.

organizar el contenido de la página del blog en Divi

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 blog y archivo. 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 Crear 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).

organizar el contenido de la página del blog en Divi

Si desea cambiar el diseño para mostrar publicaciones en un diseño de dos columnas, esto es algo que puede hacer.

Primero, cambie el diseño de la columna de la fila a un diseño de dos tercios y un tercio. Esto mostrará las publicaciones de blog en dos columnas en la columna izquierda de la fila.

organizar el contenido de la página del blog en Divi

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;

organizar el contenido de la página del blog en Divi

Esto hará que la columna abarque todo el ancho de la fila.

Ahora todo lo que tenemos que hacer es ocultar la columna a la derecha. Abra la configuración de la columna 2 (la vacía) y desactive la visibilidad de la columna en todos los dispositivos.

organizar el contenido de la página del blog en Divi

Ahora puede organizar el contenido de la página del blog con dos columnas en el escritorio en lugar de tres si lo desea.

organizar el contenido de la página del blog en Divi

# 2 Use publicaciones adhesivas

Si está familiarizado con WordPress, es posible que ya sepa sobre este. Cada publicación creada en Divi (o WordPress) puede hacerse adhesiva. Cuando haces una publicación pegajosa, la publicación se mostrará automáticamente en la parte frontal 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 una publicación adhesiva, simplemente edite una publicación en Divi y marque la opción «Pegarse a la parte superior del blog» en la barra lateral derecha.

organizar el contenido de la página del blog en Divi

Cada publicación que hagas se etiquetará como «Adhesiva» cuando veas todas las publicaciones en el backend.

organizar el contenido de la página del blog en Divi

Ahora, cuando visita la página del blog, puede ver que las publicaciones adhesivas han saltado al frente del feed de publicaciones del blog.

organizar el contenido de la página del blog en Divi

Nota: Es posible que las publicaciones fijas no funcionen como se espera cuando se usan compensaciones de publicaciones en el Módulo de 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 se seguirán mostrando antes (y además de) las 3 publicaciones.

Antes de pasar al siguiente consejo, le sugiero que elimine 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 publicación de ofensa. Esto le indica al módulo del blog que omita un cierto número de publicaciones recientes antes de mostrar el feed del blog. Esta opción es útil siempre que desee mezclar un poco el diseño de su página de 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 la compensación de publicaciones

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.

organizar el contenido de la página del blog en Divi

Luego agregue una fila de una columna.

organizar el contenido de la página del blog en Divi

Copie el módulo de blog que vino con la plantilla y péguelo en la nueva fila.

organizar el contenido de la página del blog en Divi

Actualice la configuración del blog de la siguiente manera:

  • Recuento de publicaciones: 3
  • Mostrar Leer más Botón: NO
  • Mostrar categorías: NO
  • Mostrar recuento de comentarios: NO
  • Mostrar extracto: NO
  • Mostrar paginación: NO

organizar el contenido de la página del blog en Divi

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 desplazamiento 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 # 4.

organizar el contenido de la página del blog en Divi

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 eso.

organizar el contenido de la página del blog en Divi

Agregar un control deslizante de publicación de ancho completo sobre el feed principal del blog

Al igual que en la sección presentada anteriormente, también podemos organizar el contenido de las publicaciones de blog agregando un control deslizante de publicaciones 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í te explicamos cómo hacerlo.

Primero, agregue una sección de ancho completo al diseño.

organizar el contenido de la página del blog en Divi

Luego agregue un módulo deslizante de publicación de ancho completo a la sección.

organizar el contenido de la página del blog en Divi

Luego actualice la siguiente configuración:

  • Publicaciones para la página actual: SÍ
  • Recuento de publicaciones: 3

organizar el contenido de la página del blog en Divi

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: 40 px
  • Tamaño del texto del cuerpo: 16px
  • Tamaño del texto del botón: 14 px
  • 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 fuente del botón: negrita
  • Estilo de fuente del botón: TT

organizar el contenido de la página del blog en Divi

Asegúrese de que el módulo del blog muestre que el feed principal tiene un número de desplazamiento de publicación aún establecido en 3 para acomodar las 3 publicaciones del control deslizante de publicaciones.

Entonces mira el resultado.

organizar el contenido de la página del blog en Divi

Se ve bien hasta ahora.

Ahora tomemos la idea de usar un módulo de blog separado un paso más allá con este próximo 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 dar un diseño único a una sola tarjeta postal de blog. Luego, usando compensaciones de publicaciones, podemos crear un diseño completamente único para mostrar dinámicamente las publicaciones de blog.

Aquí te explicamos cómo hacerlo.

Primero, agregue una nueva fila de media columna de media columna sobre la fila que contiene el módulo principal del blog.

organizar el contenido de la página del blog en Divi

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:

  • Recuento de publicaciones: 1
  • Número de compensación de publicación: 0
  • Mostrar paginación: NO

organizar el contenido de la página del blog en Divi

A continuación, copie el módulo de blog que acaba de crear y pegue un duplicado en la columna 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

organizar el contenido de la página del blog en Divi

Asegúrese de establecer el número de desplazamiento posterior a 1 para omitir el primero en la columna 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.

Duplique el módulo del blog en la columna derecha.

organizar el contenido de la página del blog en Divi

Luego cambie el número de desplazamiento posterior a 2.

organizar el contenido de la página del blog en Divi

Duplique el módulo de blog una vez más y cambie el número de desplazamiento de la publicación a 3.

organizar el contenido de la página del blog en Divi

Ahora puede tener libertad para personalizar el diseño de cada uno de los módulos del blog de forma individual. Por ejemplo, podría agregar un color de fondo diferente a cada uno.

Aquí está el resultado.

organizar el contenido de la página del blog en Divi

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.

organizar el contenido de la página del blog en Divi

También puede ver esta misma técnica que se utiliza en algunas de nuestras plantillas de página de categoría del generador de temas. 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 separando un poco el diseño y resaltando diferentes categorías al mismo tiempo.

Aquí te explicamos cómo hacerlo.

Primero, agregue una nueva fila de una columna debajo de la fila que contiene el módulo principal del blog.

organizar el contenido de la página del blog en Divi

Luego actualice la configuración del blog de la siguiente manera:

  • Publicaciones para la página actual: NO
  • Tipo de publicación: publicaciones
  • Recuento de publicaciones: 3
  • Categorías incluidas: Negocios (o uno propio)

organizar el contenido de la página del blog en Divi

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.

organizar el contenido de la página del blog en Divi

Y al igual que 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 varias secciones de categorías destacadas, cada una con un diseño único.

organizar el contenido de la página del blog en Divi

Estas secciones de categorías destacadas encajan bien en la parte inferior de la plantilla de la página del blog.

organizar el contenido de la página del blog en Divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!