Cómo crear dinámicamente una plantilla simple de publicación de blog amigable con UX con Divi

Al compartir nuevas publicaciones de blog en su sitio web, es importante hacer que la experiencia de lectura sea lo más fácil posible para sus visitantes. Eso significa deshacerse de tantas distracciones como sea posible, sin dejar de coincidir con la marca de su sitio web. También es importante permitir que los visitantes controlen el tamaño del texto a través de su navegador, ahí es donde la unidad de fuente relativa rem resulta útil. Permite a las personas ajustar el tamaño de la fuente que se muestra dentro de su navegador. En este tutorial, crearemos una plantilla de publicación de blog hermosa y simple que tiene muy en cuenta la experiencia del usuario. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue la plantilla de publicación de blog simple y amigable con UX GRATIS

Para poner sus manos en la plantilla de publicación de blog sencilla y gratuita, compatible con UX, primero deberá descargarla 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 formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Suscríbete a nuestro canal de Youtube

1. Vaya a Divi Theme Builder y cree una nueva plantilla

Ir a Divi Theme Builder

Empiece por ir a Divi Theme Builder.

Crear nueva plantilla

Crea una nueva plantilla y úsala en todas tus publicaciones.

• Usar en: todas las publicaciones

2. Comience a crear el cuerpo de la publicación del blog

Luego, comience a construir el cuerpo personalizado de su plantilla de publicación.

Agregar la fila n. ° 1 a la sección existente

Estructura de la columna

Dentro del editor de plantillas, agregue una nueva fila a la sección que ya está allí usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Borde de las columnas 1 y 2

Agregue un borde derecho a la primera y segunda columna a continuación.

• Ancho del borde derecho: 1 px (escritorio), 0 px (tableta y teléfono)
• Color del borde derecho: # 333333

Agregar módulo de texto a cada columna

Contenido dinámico

Continúe agregando un módulo de texto a cada columna y seleccione algún contenido dinámico para cada módulo individualmente.

• Módulo de texto en la columna 1: Categorías de publicaciones

• Módulo de texto en la columna 2: fecha de publicación

• Módulo de texto en la columna 3: Recuento de comentarios de publicaciones
• Después: Comentarios

Configuración de texto

Vaya a la pestaña de diseño de cada módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Lato
• Tamaño del texto: 1.1rem
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 2em

Agregar fila n. ° 2

Estructura de la columna

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

Agregar el módulo de texto n. ° 1 a la columna

Contenido dinámico

Agregue un módulo de texto y seleccione el contenido dinámico del título de la publicación.

• Contenido dinámico: título de la publicación

• Antes: <H1>
• Después: </H1>

Configuración de texto H1

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:

• Fuente de encabezado: Playfair Display
• Alineación del texto del encabezado: centro
• Tamaño del texto del encabezado: 6.2rem (escritorio), 3.2rem (tableta), 2.3rem (teléfono)

Espaciado

Agregue un margen superior e inferior personalizado a continuación.

• Margen superior: 50 px
• Margen inferior: 100 px

Agregar el módulo de texto n. ° 2 a la columna

Contenido dinámico

Agregue otro módulo de texto justo debajo del anterior y seleccione el contenido dinámico del extracto de la publicación.

• Contenido dinámico: extracto de la publicación

Configuración de texto

Cambie la configuración de texto del módulo de la siguiente manera:

• Fuente de texto: Lato
• Tamaño del texto: 1.1rem
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 2em
• Alineación de texto: centro

Agregar fila n. ° 3

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Monitor

Asegúrese de que las columnas permanezcan una al lado de la otra agregando una línea de código CSS al elemento principal de la fila.

display: flex;

Agregar módulo de imagen a la columna 1

Contenido dinámico

Continúe agregando un módulo de imagen a la columna 1 y seleccione el contenido dinámico de la imagen de perfil del autor.

• Contenido dinámico: imagen de perfil del autor

Alineación

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

• Alineación de imagen: derecha

Dimensionamiento

Modifique el ancho a continuación.

• Ancho: 50px

Espaciado

Agregue un margen derecho en la tableta y el teléfono.

• Margen derecho: 20px (tableta y teléfono)

Frontera

Y complete la configuración del módulo agregando un radio de borde a la configuración de borde.

• Todas las esquinas: 100px

Agregar módulo de texto a la columna 2

Contenido dinámico

En la segunda columna, necesitaremos un módulo de texto. Seleccione el contenido dinámico del autor de la publicación.

• Contenido dinámico: autor de la publicación

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto en consecuencia:

• Fuente de texto: Lato
• Tamaño del texto: 1.1rem
• Espaciado de letras de texto: 1px

Espaciado

A continuación, agregue algunos valores de margen personalizados.

• Margen superior: 15px
• Margen izquierdo: 20px (tableta y teléfono)

Agregar fila n. ° 4

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Agregar módulo de texto a la columna

Dejar el cuadro de contenido vacío

Agregue un módulo de texto a la columna y asegúrese de dejar el cuadro de contenido vacío.

Imagen de fondo dinámica

A continuación, agregue el contenido dinámico de la imagen destacada a la imagen de fondo del módulo.

• Contenido dinámico: imagen destacada

Dimensionamiento

Continúe modificando 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

Espaciado

Agregue también un acolchado superior e inferior personalizado en diferentes tamaños de pantalla.

• Relleno superior: 400 px (escritorio), 250 px (tableta), 150 px (teléfono)
• Acolchado inferior: 400 px (escritorio), 250 px (tableta), 150 px (teléfono)

Frontera

Y agregue algo de radio de borde a la configuración de borde para convertir el módulo en un círculo.

• Todas las esquinas: 500px

Agregar nueva sección

Pasemos a la siguiente sección regular.

Agregar fila n. ° 1

Estructura de la columna

Agregue una nueva fila usando la siguiente estructura de columnas:

Agregar módulo de contenido de publicación a la columna

Configuración de texto

Agregue el Módulo de contenido de publicación a la columna, pase a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

• Fuente de texto: Lato
• Tamaño del texto: 1.1rem
• Espaciado de letras de texto: 1px
• Altura de la línea de texto: 2,3 em

Configuración del texto del encabezado

Modifique también la configuración del texto del título.

• Fuente de encabezado: 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)

Agregar fila n. ° 2

Estructura de la columna

Agregue otra fila a la sección usando la siguiente estructura de columnas:

Espaciado

Agregue un margen superior personalizado a la fila.

• Margen superior: 100 px

Agregar módulo de comentarios a la columna

Configuración de campos

El único módulo que necesitamos en esta fila es un módulo de comentarios. Cambie la configuración de los campos de la siguiente manera:

• Color de fondo de los campos: #ffffff
• Fuente Fields: Lato
• Tamaño del texto de los campos: 1.1rem

• Todas las esquinas: 0px
• Ancho del borde de los campos: 1px
• Color del borde de los campos: # 000000

Configuraciones de imagen

Cambie también la configuración de la imagen.

• Todas las esquinas: 100px

Configuración del texto del título

Luego, modifique la configuración del texto del título.

• Nivel de encabezado del título: H2
• Fuente del título: Playfair Display
• Tamaño del texto del título: 3rem (escritorio), 2rem (tableta y teléfono)
• Altura de la línea de título: 1.4em

Configuración de meta texto

Diseñe también el meta texto.

• Fuente Meta: Playfair Display
• Tamaño del meta texto: 1.4rem

Configuración de texto de comentario

Estamos usando la siguiente configuración para la configuración del texto del comentario:

• Fuente de comentario: Lato
• Tamaño del texto del comentario: 1.1rem
• Espaciado entre letras de comentarios: 1 px
• Altura de la línea de comentario: 2em

Configuración del texto del botón

Y complete la configuración del módulo diseñando el botón de la siguiente manera:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1.1rem
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 000000
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Espacio entre letras de los botones: 1 px
• Fuente del botón: Lato

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

3. Guarde los cambios en el Creador de plantillas y temas

Una vez que haya completado el diseño de la plantilla, guarde todos los cambios de Divi Theme Builder y obtenga una vista previa del resultado en sus publicaciones.

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear una plantilla de publicación de blog hermosa y simple que se centra en la experiencia del usuario que tienen sus visitantes mientras leen. Modifique esta plantilla de publicación utilizando las opciones integradas de Divi para que coincida con la marca de su sitio web. ¡También pudo descargar el archivo JSON de plantilla de forma gratuita! 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 aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.