Cómo diseñar publicaciones recientes por diseño de categoría con efectos de desplazamiento fresco en Divi


Todos estamos acostumbrados a ver publicaciones recientes que se muestran en un sitio web. Por lo general, se generan utilizando el widget Publicaciones recientes de WordPress o un complemento para mostrar los artículos publicados más recientemente en el blog. Y generalmente aparecen en la página del blog, en la parte inferior de las publicaciones, en las barras laterales o como una sección destacada de una página de destino (algo como esto)

Para este tutorial, le mostraremos cómo mostrar publicaciones recientes por categoría. Usando solo el Divi Builder (y algunos módulos de blog), crearemos una sección que muestra las últimas publicaciones de cuatro categorías diferentes. Esta sección de publicaciones recientes por categoría incluirá etiquetas de categoría, animaciones y efectos de desplazamiento únicos, todo sin un complemento.

¡Echale un vistazo!

Vistazo

Aquí hay un vistazo rápido al diseño y la funcionalidad de las publicaciones recientes por diseño de categoría que crearemos juntos.

publicaciones recientes por categoría

publicaciones recientes por categoría

Descargue las publicaciones recientes por diseño de categoría GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será "suscrito" ni recibirá correos electrónicos adicionales.

Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.

Vamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

publicaciones recientes por categoría

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo has hecho, instalar y activar el tema Divi.
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. Además, la funcionalidad de la sección de publicaciones recientes depende de tener publicaciones de blog reales en su sitio con categorías asignadas a ellas. Por lo tanto, asegúrese de tener algunas publicaciones falsas de blog configuradas si está utilizando un sitio de prueba.

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación de publicaciones recientes por sección de categoría en Divi

Crear una fila de 4 columnas

Para comenzar en Divi Builder, cree una fila de 4 columnas.

publicaciones recientes por categoría

Crear Blog Módulo 1

Cada una de las cuatro columnas tendrá un módulo de blog separado. Agregue el primer módulo de blog a la columna 1.

publicaciones recientes por categoría

Cada uno de los módulos del blog mostrará la publicación más reciente de su sitio de forma predeterminada. Todo lo que vamos a hacer es seleccionar una categoría específica para incluir para ese módulo de blog específico. Luego limitaremos el recuento de publicaciones a 1 para que solo se muestre una publicación. Esto nos dará la última publicación de blog para esa categoría de forma dinámica.

Contenido del blog

Actualice las opciones de Contenido del blog de la siguiente manera:

  • Tipo de publicación: publicaciones
  • Recuento de publicaciones: 1
  • Categorías incluidas: Noticias (o una propia)
  • Usar extractos de publicaciones: NO
  • Longitud del extracto: 120

publicaciones recientes por categoría

Opciones de elementos

Luego actualice las opciones de elementos de la siguiente manera:

  • Mostrar categorías: NO
  • Mostrar extracto: NO (escritorio), SÍ (pasar el mouse y la tableta)
  • Mostrar paginación: NO

publicaciones recientes por categoría

Diseño de blog

Luego actualice el diseño de la siguiente manera:

  • Color de fondo (escritorio): #ffffff
  • Color de fondo (desplazamiento): # 8ac829
  • Peso de la fuente del título: Semi Bold
  • Estilo de fuente del título: TT
  • Tamaño del texto del título: 24 px
  • Espacio entre letras de título: 1px
  • Altura de la línea de título: 1.4em
  • Color del texto del cuerpo: #ffffff
  • Meta Font Weight: Light
  • Meta espacio entre letras: 3px

publicaciones recientes por categoría

  • Altura mínima: 450 px (escritorio), automático (tableta)
  • Relleno: 5% superior, 5% inferior, 5% izquierda, 5% derecha
  • Box Shadow: Ver captura de pantalla
  • Estilo de Animación: Zoom

publicaciones recientes por categoría

Eso se encarga del diseño de nuestro primer módulo de blog. Ahora necesitamos crear nuestra etiqueta de categoría personalizada.

Crear etiqueta de categoría 1

Para crear la etiqueta, agregue un nuevo módulo de texto debajo del módulo de blog y luego arrástrelo sobre el módulo de blog.

publicaciones recientes por categoría

Contenido del texto

Actualice el contenido del cuerpo con el nombre de la categoría que eligió para el módulo de blog. En mi ejemplo, estoy mostrando la publicación reciente de la categoría Noticias, así que agregaré la palabra "Noticias" al contenido del cuerpo.

publicaciones recientes por categoría

Diseño de la etiqueta de categoría

En la configuración de diseño de texto, actualice lo siguiente:

  • Color de fondo: # 8ac829
  • Peso de fuente de texto: Ultra negrita
  • Color del texto del texto: #ffffff
  • Alineación de texto: centro
  • Ancho: 120 px
  • Margen: 80px arriba, -80px abajo
  • Acolchado: 10px arriba, 10px abajo
  • Estilo de Animación: Fade
  • Retraso de animación: 1000 ms
  • Índice Z: 1

Como estamos usando un margen negativo para colocar la etiqueta sobre la tarjeta del blog, necesitaremos establecer el índice z en 1 para que la etiqueta permanezca por encima del módulo del blog.

publicaciones recientes por categoría

Ahora que tenemos una publicación, podemos implementar el modo de vista de estructura alámbrica y copiar esos módulos en las otras columnas.

Copie el módulo de texto y blog en la columna 1 y péguelos en las columnas 2, 3 y 4 para que tenga exactamente los mismos módulos en cada columna.

publicaciones recientes por categoría

Para cada módulo de blog duplicado, debemos asignarle una nueva categoría de blog y colocar el color de fondo sobre él. Y para cada etiqueta de categoría duplicada, debemos actualizar el nombre de la categoría para que se corresponda con la categoría seleccionada para el módulo de blog y luego actualizar el color de fondo para que coincida con el color de fondo del módulo de blog.

Actualizar módulos en la columna 2

Manteniéndose en la vista de estructura alámbrica, abra la configuración del módulo de blog en la columna 2 y actualice lo siguiente:

  • Categorías incluidas: Negocios (o los suyos)
  • Color de fondo (desplazamiento): # f64937

publicaciones recientes por categoría

Luego actualice la configuración para el módulo de texto en la columna 2 de la siguiente manera:

  • Cuerpo: "Negocios"
  • Color de fondo: # f64937

publicaciones recientes por categoría

Actualizar módulos en la columna 3

Luego abra la configuración para el módulo de blog en la columna 3 y actualice lo siguiente:

  • Categorías incluidas: dinero (o el suyo)
  • Color de fondo (desplazamiento): # 6529c7

publicaciones recientes por categoría

Luego actualice la configuración para el módulo de texto en la columna 3 de la siguiente manera:

  • Cuerpo: "dinero"
  • Color de fondo: # 6529c7

publicaciones recientes por categoría

Actualizar módulos en la columna 4

Luego abra la configuración del módulo de blog en la columna 4 y actualice lo siguiente:

  • Categorías incluidas: Coaching (o el suyo propio)
  • Color de fondo (desplazamiento): # f17809

publicaciones recientes por categoría

Luego actualice la configuración para el módulo de texto en la columna 4 de la siguiente manera:

  • Cuerpo: "Coaching"
  • Color de fondo: # f17809

publicaciones recientes por categoría

Actualización de la configuración de fila

Hay algunos ajustes que debemos hacer en nuestra fila, que incluyen una altura establecida y un ancho de canal personalizado. Actualice la siguiente configuración de fila:

  • Usar ancho de canal personalizado: SÍ
  • Ancho de canal: 2
  • Ancho: 94%
  • Ancho Máx .: 1400px
  • Altura: 540 px (escritorio), automático (tableta)
  • Acolchado: 0px arriba, 0px abajo

publicaciones recientes por categoría

Estamos configurando la altura de la fila a 540 px en el escritorio para evitar que la fila se expanda y mueva otro contenido en la página al pasar el mouse sobre una tarjeta de blog. Asegúrate de establecer la altura en automático en la tableta para que no ocultes ningún contenido.

Actualización de la configuración de cada columna

Para dar a las publicaciones de blog recientes un efecto de desplazamiento que se aplica a ambos módulos simultáneamente, podemos agregar el efecto de desplazamiento a la columna que contiene los dos módulos que forman la publicación del blog. Abra la configuración de cada una de las columnas y actualice lo siguiente:

  • Escala de transformación (desplazamiento): 115%

Luego agregue el siguiente CSS personalizado al elemento principal en la pantalla de la tableta solamente:

transform: none !important

Este pequeño fragmento deshabilitará el efecto de desplazamiento de la escala de transformación para dispositivos móviles.

publicaciones recientes por categoría

Ahora, cuando las publicaciones recientes estén configuradas con una etiqueta de categoría correspondiente y un color de fondo coincidente que se muestre al pasar el mouse sobre la tarjeta. Además, la tarjeta se hará más grande y mostrará el extracto al pasar el mouse por encima.

publicaciones recientes por categoría

Actualización de la configuración de la sección

Para la sección, demos un nuevo degradado de fondo y algo de relleno. Abra la configuración de la sección y actualice lo siguiente:

  • Color de fondo izquierdo del degradado: # 6529c7
  • Gradiente de fondo derecho Color: # f64937
  • Dirección de degradado: 270 grados
  • Acolchado: 10vw arriba, 10vw abajo

publicaciones recientes por categoría

Resultado final

¡Eso es! Veamos el resultado final. Esta imagen incluye un título que se puede agregar fácilmente para completar el diseño.

publicaciones recientes por categoría

publicaciones recientes por categoría

Y aquí está la animación y los efectos de desplazamiento.

Pensamientos finales

Crear publicaciones recientes por diseño de categoría es realmente un proceso fácil una vez que piensa un poco fuera de la caja. Todo lo que realmente necesita hacer es crear un módulo de blog para cada categoría que desee mostrar. Luego, limite ese módulo para que solo muestre la publicación más reciente para una determinada categoría. Después de eso, tienes el poder de Divi a tu lado para cuidar el diseño.

Este diseño se puede usar en cualquier lugar de su sitio, incluidas las plantillas de Theme Builder. Así que siéntase libre de importarlos en cualquier lugar donde los necesite utilizando las opciones de portabilidad. Espero que sea útil para su próximo proyecto o al menos le dé un poco de inspiración para que esas ruedas giren para obtener diseños Divi aún mejores.

Espero tener noticias suyas en los comentarios.

¡Salud!