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 inspirada en la máquina de escribir GRATIS

Para poner sus manos en la plantilla de publicación de blog gratuita inspirada en una máquina de escribir, 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.

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

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience yendo al Divi Theme Builder . Una vez allí, agregue una nueva plantilla.

Usar plantilla en todas las publicaciones

Usa esta nueva plantilla en todas tus publicaciones.

• Usar en: todas las publicaciones

Comience a construir el cuerpo de la plantilla

Y comience a construir el cuerpo de la nueva plantilla.

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

Ajustes de sección

Color de fondo

Una vez dentro del editor de plantillas, verás una sección. Abre esa sección y cambia el color de fondo.

• Color de fondo: #fff4d8

Espaciado

Agregue un poco de relleno superior e inferior personalizado a continuación.

• Relleno superior: 200px
• Relleno inferior: 200px

Borde

Y complete la configuración de la sección agregando un borde.

• Ancho del borde: 100 px (escritorio), 20 px (tableta y teléfono)
• Color del borde: #ffffff

Añadir Fila #1

Estructura de la columna

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

Espaciado

Sin agregar ningún módulo todavía, abra la configuración de la fila y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Relleno inferior: 0px

Agregar módulo de imagen a la columna

Cargar imagen

Luego, agregue un módulo de imagen a la columna de la fila y cargue una ilustración de su elección. La ilustración que estamos usando en este tutorial se puede encontrar en la carpeta descargable al comienzo de este tutorial.

Espaciado

Pase a la pestaña de diseño del módulo y modifique los valores de espaciado de la siguiente manera:

• Margen superior: -150px
• Margen izquierdo: -12vw (escritorio), 0px (tableta y teléfono)

Añadir Fila #2

Estructura de la columna

A la siguiente fila. Utilice la siguiente estructura de columnas:

Agregar módulo de texto a la columna 1

Contenido dinámico

Agregue un módulo de texto a la primera columna de la fila y use el siguiente contenido dinámico :

• Cuerpo: Publicar fecha de publicación

• Formato de fecha: 06/08/1999 m/d/Y

Configuración de texto

Cambie la configuración de texto en consecuencia:

• Fuente de texto: Elite especial
• Peso de fuente de texto: Negrita
• Color del texto: #000000
• Tamaño del texto: 1,4 rem

Clonar módulo de texto tres veces

Una vez que haya completado la configuración del módulo de texto, puede clonar el módulo completo tres veces.

Cambiar contenido dinámico

Modifique el contenido dinámico de los módulos duplicados de la siguiente manera:

• Duplicado #1: Categorías de publicaciones
• Duplicado #2: Autor de la publicación
• Duplicado n.º 3: Publicar recuento de comentarios
  
  • Después: Comentarios
  • Enlace al área de comentarios: Sí

Coloque dos módulos de texto en la columna 2

Continúe colocando los dos últimos módulos de texto en la segunda columna de la fila,

Cambiar el color del texto del enlace de la categoría y el número de comentarios

Modifique el color del texto del enlace cuando sea necesario también.

• Color del texto del enlace: #000000

Cambiar la orientación del texto de los módulos en la columna 2

Y complete los módulos de texto en la columna 2 modificando su alineación de texto en diferentes tamaños de pantalla.

• Alineación de texto: derecha (escritorio), izquierda (tableta y teléfono)

Añadir Fila #3

Estructura de la columna

¡A la siguiente fila! Utilice la siguiente estructura de columnas:

Agregar módulo de texto a la columna

Contenido dinámico

Agregue un módulo de texto a la columna de la fila y use el siguiente contenido dinámico:

• Cuerpo: Título de la publicación/archivo

• Antes:
  

• Después:

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: Elite especial
• Color del texto del encabezado: #000000
• Tamaño del texto del encabezado: 3,5 rem (escritorio), 2,5 rem (tableta), 2 rem (teléfono)
• Altura de la línea de encabezado: 1,5 em

Espaciado

Agregue también un margen superior e inferior personalizado.

• Margen superior: 150px
• Margen inferior: 150px

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

Configuración de texto

Pasemos al siguiente módulo, que es el Módulo de contenido de publicación. Modifique la configuración de texto en consecuencia:

• Fuente de texto: Elite especial
• Tamaño del texto: 1,2 rem
• Altura de la línea de texto: 2,5 em

Ajustes de texto de encabezado

Cambie también las diferentes configuraciones del texto del título.

• Fuente del título: Elite especial
• Color del texto del encabezado: #000000
• Título 2 Tamaño del texto: 2 rem (H2), 1,9 rem (H3), 1,8 rem (H4), 1,7 rem (H5), 1,6 rem (H6)

ID de CSS

Y asigne una ID de CSS al módulo.

• ID de CSS: módulo de contenido posterior

Agregar módulo de código a la columna

Agregar código CSS de encabezado

Ahora, para agregar un margen personalizado a los diferentes encabezados, agregaremos el siguiente CSS personalizado a un módulo de código:

Añadir Sección #2

Color de fondo

Agregue otra sección a la plantilla de publicación, abra la configuración de la sección y cambie el color de fondo de la sección.

• Color de fondo: #fff4d8

Borde

Agregue un borde también.

• Ancho del borde: 100 px (escritorio), 20 px (tableta y teléfono)
• Ancho del borde superior: 0px
• Color del borde: #ffffff

Agregar nueva fila

Estructura de la columna

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

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 en consecuencia:

• Color de fondo de los campos: rgba(0,0,0,0)
• Color del texto de los campos: #000000
• Relleno inferior de campos: 50px
• Fuente de los campos: Elite especial
• Tamaño del texto de los campos: 1,2 rem

• Ancho del borde inferior de los campos: 1px
• Color del borde inferior de los campos: #000000

Configuración de texto de recuento de comentarios

Junto con la configuración de texto de recuento de comentarios.

• Nivel de encabezado de recuento de comentarios: H2
• Fuente de recuento de comentarios: Elite especial
• Color del texto del conteo de comentarios: #000000
• Número de comentarios Tamaño del texto: 2 rem

Configuración del texto del título del formulario

Realice también algunos cambios en la configuración del texto del título del formulario.

• Título del formulario Nivel de encabezado: H3
• Fuente del título del formulario: Elite especial
• Color del texto del título del formulario: #000000
• Tamaño del texto del título del formulario: 1,5 rem

Configuración de metatexto

Luego, cambie la configuración del metatexto.

• Fuente meta: élite especial
• Color del metatexto: #000000
• Tamaño del metatexto: 1,5 rem

Ajustes de texto de comentario

También haremos algunos cambios en la configuración del texto de los comentarios.

• Fuente del comentario: Elite especial
• Tamaño del texto del comentario: 1,2 rem
• Altura de la línea de comentario: 2,5 em

Configuración de botones

Continúe 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,2 rem
• Color del texto del botón: #ffffff
• Fondo del botón: #000000
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px

• Fuente del botón: Elite especial

CSS del cuerpo del comentario

Y complete la configuración del módulo agregando un margen superior al cuerpo del comentario en la pestaña avanzada.

3. Guardar todos los cambios del generador de temas y obtener una vista previa del resultado

Una vez que haya creado el cuerpo de la publicación de blog personalizado de su plantilla, puede guardar todos los cambios y ver el resultado en sus publicaciones de blog.

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, compartimos una plantilla de publicación de blog clásica inspirada en una máquina de escribir que pudo descargar de forma gratuita y usar para su próximo proyecto Divi. También hemos recreado el diseño de la plantilla de publicación desde cero. 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.