La forma en que muestra las publicaciones de blog en su sitio web tiene una gran influencia en cómo se comportan sus visitantes cuando las encuentran mientras navegan en 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 volveremos a crear se verá particularmente bien en pantallas más pequeñas y al mismo tiempo mantendrá una excelente apariencia en computadoras de escritorio y tabletas. Esperamos que este tutorial lo inspire a crear sus propios diseños de publicaciones de blog más recientes.
¡Hagámoslo!
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 agréguele una sección normal. 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 gradualmente eliminaremos ese espacio en pantallas más pequeñas.
- Margen superior: 100px
- Margen inferior: 100px
- Relleno 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 utilizando 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
Agregue 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 del canalón: 1
- Igualar alturas de columna: Sí
Mostrar
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.
|
01
|
display: flex; |
Agregue el módulo Blurb a la columna 1
Seleccionar icono
¡Es hora de comenzar a agregar módulos! Comience con un módulo de 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 gradiente: 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
- Colocación de imagen/icono: Arriba
- Usar fuente de icono: Sí
- Tamaño de fuente del icono: 22 px
Espaciado
Agregue un poco de relleno superior e inferior personalizado a continuación.
- Relleno superior: 20px
- Relleno inferior: 10px
Borde
Y agregue un borde inferior sutil para terminar el diseño del módulo Blurb.
- Ancho del borde inferior: 1px
- Color del borde inferior: #ffffff
- Estilo de borde inferior: punteado
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 del texto: didáctica gótica
- Peso de fuente de texto: Negrita
- Color del texto: #ffffff
Agregar módulo de texto a la columna 2
Agregar contenido
¡A por la segunda columna! Aquí, el único módulo que necesitaremos es un módulo de texto. Introduzca 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 de texto en la pestaña de diseño.
- Fuente de texto: Source Serif Pro
- Peso de fuente de 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 hacerlo, 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.
- Relleno superior: 57px
- Relleno inferior: 57px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Sombra de la caja
Junto con una sombra de caja sutil.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Color de sombra: rgba(0,0,0,0.23)
Agregar módulo de texto a la columna 3
Agregar contenido
En 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. Agregue 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.
- Título 3 Fuente: Didact Gothic
- Encabezado 2 Peso de fuente: Negrita
- Encabezado 3 Tamaño del texto: 17px
Espaciado
Por último, necesitaremos agregar algunos valores de espaciado personalizados. Notará que también estamos agregando un margen izquierdo negativo al módulo. Este es el último paso para crear un tipo diferente de estructura de columnas en tamaños de pantalla más pequeños. Entonces, aunque la estructura de la columna sigue siendo técnicamente la misma, hemos combinado los fondos de las columnas, los anchos de los módulos y el margen izquierdo negativo para crear un resultado de aspecto diferente.
- Margen superior: 35px
- Margen izquierdo: -80 px (escritorio), -50 px (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, según la cantidad de publicaciones de blog más recientes que desee presentar.
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 las últimas publicaciones de su 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!