Presentando sus últimas publicaciones de blog en un impresionante diseño móvil con Divi

La forma en que exhibe las publicaciones de blog en su sitio web tiene una gran influencia en cómo se comportan sus visitantes cuando se encuentran con ellos mientras navegan por su sitio web. Para ayudarlo a ser creativo y efectivo, le mostraremos cómo presentar sus últimas publicaciones de blog de una manera sorprendente.

El ejemplo que recrearemos se verá particularmente bien en tamaños de pantalla más pequeños, al mismo tiempo que mantendrá una excelente apariencia en computadoras de escritorio y tabletas. Esperamos que este tutorial lo inspire a crear sus propios diseños personalizados de publicaciones de blog más recientes.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

¡Empecemos a recrear!

Agregar nueva sección

Fondo degradado

Cree una nueva página o abra una existente y agregue una sección regular. Abra la configuración y agregue un fondo degradado a continuación.

• Color 1: # 2e1b8f
• Color 2: #ffffff
• Dirección del gradiente: 90 grados
• Posición inicial: 53,3%
• Posición final: 53,3%

Espaciado

Luego, vaya a la configuración de espaciado. Aquí, vamos a reducir el tamaño del contenido de la sección en el escritorio y deshacernos gradualmente de ese espacio en tamaños de pantalla más pequeños.

• Margen superior: 100 px
• Margen inferior: 100 px
• Acolchado izquierdo: 26vw (escritorio), 13vw (tableta), 0vw (teléfono)
• Relleno derecho: 22.8vw (escritorio), 11.4vw (tableta), 0vw (teléfono)

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Color de fondo de la columna 2

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo a la segunda columna.

• Color de fondo de la columna 2: # f7f7f7

Color de fondo de la columna 3

Agrega ese mismo color al fondo de la columna 3 también. Estamos usando el mismo color para ambas columnas para conectarlas y hacer que se vean como una sola pieza. Más adelante en la publicación, usaremos esto para manipular los anchos de columna en tamaños de pantalla más pequeños.

• Color de fondo de la columna 3: # f7f7f7

Dimensionamiento

Vaya a la pestaña de diseño a continuación y abra la configuración de tamaño. Aquí, vamos a eliminar todo el espacio predeterminado entre columnas.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Monitor

Ahora, para asegurarnos de que las tres columnas aparezcan una al lado de la otra en tamaños de pantalla más pequeños, debemos agregar una sola línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo Blurb a la columna 1

Seleccionar icono

¡Es hora de comenzar a agregar módulos! Comience con un módulo Blurb en la columna 1 y seleccione un icono de su elección.

Fondo degradado

Vaya a la configuración de fondo del módulo y agregue un fondo degradado radial.

• Color 1: # 5000ff
• Color 2: rgba (41,196,169,0)
• Tipo de degradado: radial
• Dirección radial: centro
• Posición inicial: 28%
• Posición final: 28%

Configuración de iconos

Continúe yendo a la pestaña de diseño y modificando la configuración del icono.

• Color del icono: #ffffff
• Ubicación de la imagen / icono: parte superior
• Usar fuente de icono: Sí
• Tamaño de fuente del icono: 22px

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Acolchado superior: 20px
• Acolchado inferior: 10px

Frontera

Y agregue un borde inferior sutil para terminar el diseño del módulo Blurb.

• Ancho del borde inferior: 1 px
• Color del borde inferior: #ffffff
• Estilo del borde inferior: discontinuo

Agregar módulo de texto a la columna 1

Agregar contenido

El siguiente y último módulo que necesitamos en la primera columna es un módulo de texto. Agregue algún contenido de su elección.

Configuración de texto

Luego, vaya a la pestaña de diseño y modifique la configuración del texto en consecuencia:

• Fuente de texto: Didact Gothic
• Peso de la fuente del texto: negrita
• Color del texto: #ffffff

Agregar módulo de texto a la columna 2

Agregar contenido

¡A la segunda columna! Aquí, el único módulo que necesitaremos es un módulo de texto. Ingrese algún contenido de su elección.

Color de fondo

Pase a la configuración de fondo y agregue un color de fondo completamente blanco.

• Color de fondo: #ffffff

Configuración de texto

También estamos cambiando la apariencia de nuestro contenido modificando la configuración del texto en la pestaña de diseño.

• Fuente de texto: Source Serif Pro
• Peso de la fuente del texto: negrita
• Color del texto: # 000000
• Tamaño del texto: 13px
• Orientación del texto: centro

Dimensionamiento

Como se mencionó anteriormente, estamos manipulando las estructuras de las columnas para crear un diseño personalizado en tamaños de pantalla más pequeños. Para hacer eso, deberá disminuir el ancho del Módulo de texto y asegurarse de que esté alineado con el lado izquierdo de la columna.

• Ancho: 60%
• Alineación del módulo: izquierda

Espaciado

A continuación, agregaremos algunos valores de relleno personalizados.

• Acolchado superior: 57px
• Acolchado inferior: 57px
• Relleno izquierdo: 20px
• Relleno derecho: 20px

Sombra de la caja

Junto con una sutil sombra de caja.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.23)

Agregar módulo de texto a la columna 3

Agregar contenido

A la siguiente y última columna. Agregue un módulo de texto con el título H3 de su publicación de blog y un enlace. Agrega los detalles de la publicación en el estilo de texto de párrafo justo debajo del título.

Configuración de texto

Vaya a la pestaña de diseño del Módulo de texto y modifique la configuración del texto.

• Fuente de texto: Source Serif Pro
• Color del texto: # a8a8a8
• Tamaño del texto: 12px

Configuración de texto H3

Continúe cambiando también la configuración de texto H3.

• Fuente del encabezado 3: Didact Gothic
• Peso de fuente del encabezado 2: Negrita
• Tamaño del texto del encabezado 3: 17px

Espaciado

Por último, necesitaremos agregar algunos valores de espaciado personalizados. Notarás que también estamos agregando un margen izquierdo negativo al módulo. Este es el último paso hacia la creación de un tipo diferente de estructura de columna en tamaños de pantalla más pequeños. Entonces, aunque la estructura de la columna sigue siendo técnicamente la misma, hemos combinado fondos de columna, anchos de módulo y margen izquierdo negativo para crear un resultado de apariencia diferente.

• Margen superior: 35 px
• Margen izquierdo: -80px (escritorio), -50px (tableta y teléfono)
• Relleno derecho: 20px

Clonar fila dos veces

Una vez que haya terminado de modificar la fila y todos sus módulos, puede continuar y clonar la fila completa tantas veces como desee, dependiendo de cuántas publicaciones de blog más recientes desee incluir.

Cambiar iconos

Cambia el icono de cada duplicado.

Modificar contenido y enlaces

Junto con el contenido y los enlaces que están involucrados, ¡y listo!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

En esta publicación, le mostramos cómo crear un diseño móvil impresionante que muestre sus últimas publicaciones de blog. El diseño que hemos recreado paso a paso está hecho principalmente para tamaños de pantalla más pequeños, pero también se ve muy bien en tabletas y computadoras de escritorio. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!