Al compartir nuevas publicaciones en el blog en su sitio, es importante que la experiencia de lectura sea fácil para sus visitantes. Esto significa deshacerse de la mayor cantidad de distracciones posible, mientras que aún coincide con la marca desde su sitio. También es importante permitir que los visitantes controlen el tamaño del texto a través de su navegador, donde la unidad de fuente relativa rem. Permite a las personas regular el tamaño de fuente que se muestra en su navegador. En este tutorial, construiremos una plantilla de publicación de blog hermosa y simple, que tendrá en cuenta la experiencia del usuario. ¡Podrá descargar el archivo JSON de forma gratuita!
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. Escritorio

Móvil

Descargue la plantilla de publicación de blog simple amigable con UX de forma gratuita para poner su mano en la plantilla de publicación de blog simple y amigable con UX, primero la descargará usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube 1. Vaya al Temo Builder Divin y cree una nueva plantilla Access Div Temo Builder Comience accediendo al Builder Divic.
Cree una nueva plantilla Cree una nueva plantilla y úsela en todas sus publicaciones.

Uso activado: todas las publicaciones
2. Comience a crear el cuerpo de publicaciones en el blog luego, comience a crear su cuerpo personalizado de su publicación.


Agregue la fila # 1 a la sección existente La estructura de la columna en el editor de plantillas, agregue una nueva fila a la sección ya utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
La columna 1 y 2 borde agregan un borde recto a la primera y segunda columna siguiente.

Ancho del borde derecho: 1 PX (escritorio), 0 PX (tableta y teléfono)
Color de borde derecho: # 333333
Agregue un módulo de texto a cada columna de contenido dinámico Continúe agregando un módulo de texto a cada columna y seleccione un contenido dinámico para cada módulo individualmente. El modelo de texto en la columna 1: Categorías de publicación

Módulo de texto en la columna 2: Fecha de publicación de publicación
Módulo de texto en la columna 3: Número de comentarios publicados

Después: comentarios

Configuración de texto Vaya a la pestaña Diseño de cada módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: Lato

Tamaño del texto: 1.1rem
Texto de la carta de espacio: 1 PX
Altura de la línea de texto: 2em
Agregue la estructura de la columna de la fila # 2 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:
Agregue el módulo de texto no. 1 En la columna de contenido dinámico, agregue un módulo de texto y seleccione el contenido dinámico del título de publicación.

Contenido dinámico: publicar título

Antes:

Después de:

Configuración de texto H1 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:
Fuente del título: PlayFair Display

Alineación del texto del encabezado: Centro
Tamaño del encabezado de texto: 6.2Rem (escritorio), 3.2Rem (tableta), 2.3rem (teléfono)
El espacio agregue algunos bordes superiores e inferiores personalizados.
Margen superior: 50 PX

Margen inferior: 100 px
Agregue el módulo de texto no. 2 En la columna de contenido dinámico, agregue otro módulo de texto justo debajo del anterior y seleccione el contenido dinámico del extracto de publicación.
Contenido dinámico: publicar un extracto

Configuración de texto Cambie la configuración de texto del módulo de la siguiente manera:
Texto de fuente: Lato

Tamaño del texto: 1.1rem
Texto de la carta de espacio: 1 PX
Altura de la línea de texto: 2em
Alineación de texto: Centro
Agregue la estructura de la fila # 3 de la columna Agregue otra fila a la sección utilizando la siguiente estructura de columnas: Muestre que las columnas permanecen una al lado de la otra agregando una línea de código CSS al elemento principal de la fila. Pantalla: Flex;
Agregue el módulo de imagen al contenido dinámico de la columna 1 Continúe agregando un módulo de imagen en la columna 1 y seleccione el contenido dinámico de la imagen de perfil del autor.

Contenido dinámico: foto de perfil del autor

Alineación Vaya a la pestaña Diseño del módulo y cambie la alineación de la imagen.

Alineación de imágenes: correcto
Dimensión Cambiar el siguiente ancho.


Ancho: 50 PX
Espacio agregue un borde recto a la tableta y al teléfono.

Margen derecho: 20 PX (tableta y teléfono)
Borde y complete la configuración del módulo agregando un radio de borde a la configuración del borde.

Todas las esquinas: 100 px
Agregue un módulo de texto en la columna 2 contenidos dinámicos en la segunda columna, necesitaremos un módulo de texto. Seleccione el contenido dinámico de la publicación de publicación.

Contenido dinámico: autor publicado
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto en consecuencia:

Texto de fuente: Lato
Tamaño del texto: 1.1rem

Texto de la carta de espacio: 1 PX
Espaciado Agregue algunos valores de margen personalizados.
Margen superior: 15 PX
Margen izquierdo: 20 PX (tableta y teléfono)

Agregue la estructura de columna de la fila # 4 Agregar otra fila a la sección utilizando la siguiente estructura de columnas:
Agregue un módulo de texto a la columna Deje el cuadro de contenido vacío Agregue un módulo de texto a la columna y asegúrese de dejar el cuadro de contenido.
Imagen de fondo dinámico Agregar el contenido dinámico de la imagen presentada a la imagen de fondo del módulo.

La dimensión continúa cambiando la configuración de tamaño del módulo en diferentes tamaños de pantalla.

Ancho: 800 PX (escritorio), 500 PX (tableta), 300 PX (teléfono)

Alineación del módulo: centro
Espacio agregue algunos rellenos personalizados en la parte superior e inferior en diferentes tamaños de pantalla.

Revestimiento superior: 400 PX (escritorio), 250 px (tableta), 150 px (teléfono)
Bajo forro: 400 PX (escritorio), 250 px (tableta), 150 px (teléfono)
Borde y agregue un cierto rayo de borde a la configuración del borde para convertir el módulo en un círculo.

Todas las esquinas: 500 PX
Agregue un nuevo interruptor de sección a la siguiente sección regular.
Agregue la estructura de columna de la fila # 1 Agregar una nueva fila utilizando la siguiente estructura de columna:

Agregue un módulo de contenido para publicar en la configuración de texto de la columna Agregue el módulo de contenido de publicación en la columna, muévase a la pestaña Diseño del módulo y modifique la configuración de texto en consecuencia:
Texto de fuente: Lato

Tamaño del texto: 1.1rem

Texto de la carta de espacio: 1 PX

La altura de la línea de texto: 2.3em
Configuración El encabezado de texto modifica y la configuración del texto del encabezado.
Fuente del título: PlayFair Display
Tamaño de texto H2: 3.5REM (escritorio), 2rem (tableta y teléfono)
Tamaño de texto H3: 2.5REM (escritorio), 1.5rem (tableta y teléfono)

Tamaño de texto H4: 2.3REM (escritorio), 1.3rem (tableta y teléfono)
Tamaño de texto H5 y H6: 2REM (escritorio), 1Rem (tableta y teléfono)
Agregue la estructura de la columna de la fila # 2 Agregar otra fila a la sección utilizando la siguiente estructura de columnas:
Espaciado Agregar algunos bordes superiores personalizados en una fila. Superior Marja: 100 PX
Agregue el módulo de comentarios en los campos de configuración de la columna La única forma en que necesitamos en esta fila es un módulo de comentarios. Cambie la configuración del campo de la siguiente manera:
El color del fondo del campo: #ffffff

Fuerte de campos: lato

Tamaño de los campos de texto: 1.1rem
Todas las esquinas: 0 PX

El ancho del marco de campo: 1 PX
El color del marco de campo: # 000000
Configuración de imagen modificar y configuración de imagen.
Todas las esquinas: 100 px

Configuración de texto de título Entonces, cambie la configuración del texto del título.
Nivel de encabezado de título: H2
Título de la fuente: Playfair Display

Título Tamaño del texto: 3REM (escritorio), 2REM (tableta y teléfono)
Altura de la línea de título: 1.4em

Configuración de meta texto estilizado y meta texto.
Meta Font: PlayFair Display
Tamaño del meta de texto: 1.4rem
Configuración de texto para comentarios Usamos la siguiente configuración para la configuración de texto para comentarios:
Comentario de fuentes: Lato

Size Text Comment: 1.1rem
Carta de espacio Comentario: 1 PX
Comentario de la línea de altura: 2em

Configuración Botón de texto y complete el módulo Configuración Estilizando el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1.1rem
El color del texto del botón: #ffffff
El color de fondo del botón: # 000000

El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 1 PX
Botón de fuente: Lato
Revestimiento superior: 20 px
Finamiento inferior: 20 PX
3. Guarde los cambios en la plantilla y el constructor de temas después de haber completado el diseño de la plantilla, guarde todos los cambios en el constructor de temas de div y obtenga la vista previa del resultado en sus publicaciones.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Pensamientos finales En esta publicación, le mostré cómo crear una plantilla de publicación de blog hermosa y simple para centrarse en la experiencia del usuario que sus visitantes tienen mientras leen.Modifique esta plantilla de publicación utilizando las opciones de división in otorgada para que coincida con la marca de su sitio web.¡Podrías descargar la plantilla JSON gratis!Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.