Cómo crear dinámicamente una plantilla simple de publicación de blog compatible 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 hacer coincidir 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

Descarga GRATIS la plantilla de publicación de blog simple compatible con UX

Para poner sus manos en la plantilla de publicación de blog simple y gratuita compatible con UX, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Suscríbete a nuestro canal de Youtube

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

Ir al Creador de temas Divi

Comience yendo al Divi Theme Builder .

Crear nueva plantilla

Crea una nueva plantilla y utilízala en todas tus publicaciones.

  • Usar en: todas las publicaciones

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

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

Agregue 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í utilizando la siguiente estructura de columnas:

Dimensionamiento

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

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

Borde de la columna 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 posterior

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

Configuración de texto

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

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

Añadir Fila #2

Estructura de la columna

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

Agregue 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

Pase a la pestaña de 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 título: Centro
  • Tamaño del texto del encabezado: 6,2 rem (escritorio), 3,2 rem (tableta), 2,3 rem (teléfono)

Espaciado

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

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

Agregue el Módulo de Texto #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 del texto: Lato
  • Tamaño del texto: 1,1 rem
  • Espaciado entre letras de texto: 1px
  • Altura de línea de texto: 2em
  • Alineación de texto: Centro

Añadir Fila #3

Estructura de la columna

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

Mostrar

Asegúrate 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.

01
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

Pase 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)

Borde

Y complete la configuración del módulo agregando un radio de borde a la configuración del 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

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

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

Espaciado

Agregue algunos valores de margen personalizados a continuación.

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

Añadir Fila #4

Estructura de la columna

Agregue otra fila a la sección utilizando 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

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

  • 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: 800px (Escritorio), 500px (Tableta), 300px (Teléfono)
  • Alineación del módulo: Centro

Espaciado

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

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

Borde

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

  • Todas las esquinas: 500px

Agregar nueva sección

En la siguiente sección regular.

Añadir Fila #1

Estructura de la columna

Agregue una nueva fila usando la siguiente estructura de columna:

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 del texto: Lato
  • Tamaño del texto: 1,1 rem
  • Espaciado entre letras de texto: 1px
  • Altura de la línea de texto: 2,3 em

Ajustes de texto de encabezado

Modifique también la configuración del texto del encabezado.

  • Fuente del título: Playfair Display
  • Tamaño de texto H2: 3,5 rem (escritorio), 2 rem (tableta y teléfono)
  • Tamaño de texto H3: 2,5 rem (escritorio), 1,5 rem (tableta y teléfono)
  • Tamaño de texto H4: 2,3 rem (escritorio), 1,3 rem (tableta y teléfono)
  • Tamaño de texto H5 y H6: 2 rem (escritorio), 1 rem (tableta y teléfono)

Añadir Fila #2

Estructura de la columna

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

Espaciado

Agregue un margen superior personalizado a la fila.

  • Margen superior: 100px

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 de los campos: Lato
  • Tamaño del texto de los campos: 1,1 rem

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

Configuración de imagen

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

  • Todas las esquinas: 100px

Configuración del texto del título

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

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

Configuración de metatexto

Dale estilo al metatexto también.

  • Fuente Meta: Pantalla Playfair
  • Tamaño del metatexto: 1,4 rem

Ajustes de texto de comentario

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

  • Fuente del comentario: Lato
  • Tamaño del texto del comentario: 1,1 rem
  • Espaciado entre letras de comentario: 1px
  • Altura de 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,1 rem
  • 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
  • Espaciado entre letras de botones: 1 px
  • Fuente del botón: Lato

  • Relleno superior: 20px
  • Relleno inferior: 20px

3. Guardar cambios en la plantilla y el generador de 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 centre en la experiencia del usuario que sus visitantes tienen 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 la 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 regalos de Divi, 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 los beneficios de este contenido gratuito.