¿Busca una forma clásica pero creativa de mostrar publicaciones de blog en su sitio web? Si es así, te encantará este obsequio de Divi. ¡Hemos diseñado una plantilla de publicación de blog clásica inspirada en una máquina de escribir que se aplica automáticamente a todas las publicaciones de blog en su sitio web! A lo largo de esta publicación, también mostraremos paso a paso cómo puede recrear el diseño desde cero dentro de Theme Builder.

¡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 GRATIS la plantilla de publicación de blog inspirada en la máquina de escribir

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

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

Vaya a Divi Theme Builder y agregue una nueva plantilla

Empiece por ir a Divi Theme Builder. Una vez allí, agregue una nueva plantilla.

Usar plantilla en todas las publicaciones

Utilice esta nueva plantilla en todas sus publicaciones.

• Usar en: todas las publicaciones

Empezar a construir el cuerpo de la plantilla

Y comience a construir el cuerpo de la nueva plantilla.

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

Configuración de la sección

Color de fondo

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

• Color de fondo: # fff4d8

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

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

Frontera

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

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando 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
• Acolchado 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

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

Agregar fila n. ° 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: 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 la fuente del texto: negrita
• Color del texto: # 000000
• Tamaño del texto: 1.4rem

Clonar el 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 n. ° 1: Categorías de publicaciones
• Duplicado n. ° 2: Autor de la publicación
• Duplicado n. ° 3: Contador de comentarios de publicaciones
  • 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 recuento de comentarios

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

• 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 la alineación del texto en diferentes tamaños de pantalla.

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

Agregar fila n. ° 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

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

Espaciado

Agregue un margen superior e inferior personalizado también.

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

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 publicaciones. Modifique la configuración del texto en consecuencia:

• Fuente de texto: Elite especial
• Tamaño del texto: 1.2rem
• Altura de la línea de texto: 2.5em

Configuración del texto del encabezado

Cambie también las diferentes configuraciones del texto del encabezado.

• Fuente de encabezado: Elite especial
• Color del texto del encabezado: # 000000
• Encabezado 2 Tamaño del texto: 2rem (H2), 1.9rem (H3), 1.8rem (H4), 1.7rem (H5), 1.6rem (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:

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

Agregar sección 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

Frontera

Agrega 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 usando 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 los campos: 50px
• Fuente Fields: Elite especial
• Tamaño del texto de los campos: 1.2rem

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

Configuración del texto del recuento de comentarios

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

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

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
• Título del formulario Tamaño del texto: 1.5rem

Configuración de meta texto

Luego, cambie la configuración del meta texto.

• Fuente Meta: Elite especial
• Color del meta texto: # 000000
• Tamaño del metatexto: 1.5rem

Configuración de texto de comentario

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

• Fuente de comentario: Elite especial
• Tamaño del texto del comentario: 1.2rem
• Altura de la línea de comentarios: 2.5em

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.2rem
• 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

Cuerpo de comentario CSS

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

margin-top: 100px;

3. Guarde todos los cambios del generador de temas y obtenga una vista previa del resultado

Una vez que haya creado el cuerpo de la publicación de blog personalizada de su plantilla, puede guardar todos los cambios y ver el resultado en las publicaciones de su 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, hemos compartido 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 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.