Presentación de sus últimas publicaciones de blog en un increíble diseño móvil con div Div

La forma en que muestra las publicaciones de blog en su sitio tiene una gran influencia en cómo se comportan sus visitantes cuando las conocen mientras navegan en su sitio. Para ayudarlo a ser creativo y eficiente, le mostraremos cómo presentar las últimas publicaciones de blog de una manera increíble. El ejemplo que recrearemos se verá particularmente genial en el tamaño más pequeño de la pantalla, mientras mantendrá un aspecto y apariencia extraordinarios en el escritorio y la tableta. Esperamos que este tutorial lo inspire a crear sus propios modelos personalizados mediante las últimas publicaciones de blog.
¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.

¡Comencemos a recrear! Agregue una nueva sección de fondo de gradiente Cree una nueva página o abra una existente y agregue una sección normal. Abra la configuración y agregue un fondo degradado adicional.
Color 1: # 2E1B8F
Color 2: #ffffff
Dirección de gradiente: 90 grados
Posición inicial: 53.3%
Posición final: 53.3%

El espacio luego accede a la configuración de espaciado. Aquí, reduciremos el tamaño del contenido de la sección en el escritorio y eliminaremos gradualmente el espacio en dimensiones de pantalla más pequeñas.
Margen superior: 100 PX
Margen inferior: 100 px
ENLIZACIÓN IZQUIERDA: 26VW (escritorio), 13VW (tableta), 0VW (teléfono)
Revestimiento derecho: 22.8VW (escritorio), 11.4VW (tableta), 0VW (teléfono)

Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Columna 2 Color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo a la segunda columna.
Columna 3 Color de fondo Agregue el mismo color y en el fondo de la columna 3. Usamos el mismo color para que ambas columnas se conecten y hacemos que parezcan una sola pieza. Más adelante en la publicación, usaremos esto para manejar los anchos de la columna en un tamaño más pequeño de la pantalla.

Columna 3 Color de fondo: # F7F7F7
Dimensión Vaya a la pestaña Diseño y abra la configuración de tamaño. Aquí eliminaremos todo el espacio predeterminado entre las columnas.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Se muestra ahora, para asegurarse de que las tres columnas aparezcan una al lado de la otra en dimensiones de pantalla más pequeñas, debemos agregar una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;

Agregue los módulos de blurb a la columna 1 ¡Seleccione el icono es hora de comenzar a agregar módulos! Comience con un módulo de propaganda en la columna 1 y seleccione un icono de su elección.

Fondo de gradiente Vaya a la configuración de fondo del módulo y agregue un fondo de gradiente 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%
Continuar la configuración del icono accediendo a la pestaña de diseño y cambiando la configuración del icono.

Icono de color: #ffffff
Colocación de la imagen / icono: arriba
Use la fuente de iconos: sí
Icono de tamaño de fuente: 22 PX
Espacio agregue algunos forros personalizados en la parte superior e inferior.

Revestimiento superior: 20 pxcatuse inferior: 10 px
Borde y agregue un borde inferior sutil para completar el diseño del módulo de propaganda.
Ancho de borde inferior: 1 PX

Color de borde inferior: #ffffff
El estilo del margen inferior: puntiagudo
Agregue un 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 un contenido a su elección.
Configuración de texto luego acceda a la pestaña de diseño y cambie la configuración de texto en consecuencia:

Fuente de texto: Didact Gothic


El peso de la fuente de texto: en negrita
Color de texto: #ffffff
Agregue un módulo de texto en la columna 2 Agregar contenido ¡Vamos a la segunda columna! Aquí, la única forma en que necesitamos es un módulo de texto. Ingrese un contenido de su elección.
El color de fondo cambia a la configuración de fondo y agrega un color de fondo completamente blanco.

Color de fondo: #ffffff

La configuración de texto también cambia la apariencia de nuestro contenido cambiando la configuración de texto en la pestaña Diseño.
Texto de fuente: fuente serif pro

El peso de la fuente de texto: en negrita
Color de texto: # 000000
Tamaño de texto: 13 PX
Orientación de texto: centro
Dimensión Como se mencionó anteriormente, manejar estructuras de columnas para crear un diseño personalizado en dimensiones de pantalla más pequeñas. Para hacer esto, deberá reducir el ancho del módulo de texto y asegurarse de que esté alineado en el lado izquierdo de la columna.
Ancho: 60%


Alineación del módulo: izquierda
Sparting agregamos algunos valores de llenado personalizados.
Revestimiento superior: 57 PX

Finamiento inferior: 57 PX
ENLIZACIÓN IZQUIERDA: 20 PX
Revestimiento derecho: 20 PX
Sombra de caja con un tono de caja sutil.
Poder de la falta de clara de la sombra de la caja: 80 pxcului sombra: RGBA (0.0,0,0.23)

Agregue un módulo de texto a la columna 3 Agregue el interruptor de contenido a la siguiente y última columna. Agregue un módulo de texto con el título H3 de la publicación del blog y un enlace. Agregue los detalles de publicación en el estilo del texto del 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 cambie la configuración de texto.
Texto de fuente: fuente serif pro

Color de texto: # A8A8A8

Tamaño de texto: 12 PX
Configuración de texto H3 Continúe cambiando la configuración de texto H3.
3 Fuentes de fuentes: Didact Gothic
Título 2 Fuente de peso: Bold

Rúbrica 3 Dimensión de texto: 17 PX
Finalmente espaciado, tendremos que agregar algunos valores de espaciado personalizados. Notará que también agregamos un margen izquierdo negativo al modo. Este es el último paso para crear otro tipo de estructura de columna en dimensiones de pantalla más pequeñas. 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 borde izquierdo negativo para crear un resultado diferente.
Margen superior: 35 PX
Margen izquierdo: -80px (escritorio), -50px (tableta y teléfono)

Revestimiento derecho: 20 PX
Clone Row dos veces Después de haber terminado de cambiar la fila y todos sus módulos, puede seguir adelante y puede clonar toda la fila tantas veces como desee, dependiendo de cuántas publicaciones de blog recientes desee aparecer.
Cambie los íconos Cambiar el icono de cada duplicado.
¡Cambie el contenido y los enlaces con el contenido y los enlaces involucrados y termine!

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.