Cómo diseñar una plantilla de publicación de blog con Divi’s Theme Builder (descarga GRATUITA)

Vistazo

Aquí hay un vistazo rápido a la plantilla de publicación de blog que crearemos en este tutorial.

Es posible que haya notado la similitud de este diseño de nuestro paquete de diseño de marketing digital . Esta plantilla de publicación se creó para que coincida con el diseño, de modo que pueda usarla en combinación con el paquete de diseño de marketing digital.

¡Disfrutar!

Descargue la plantilla de publicación de blog GRATIS

Para poner sus manos en la plantilla de este tutorial, 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.

Para importar el diseño de la plantilla a su sitio web, deberá ir a Divi Theme Builder y usar la opción de portabilidad para importar el archivo .json al generador de temas.

¿Qué es una plantilla de publicación de blog y por qué necesita una?

Una plantilla de publicación de blog es una plantilla de todo el sitio que se utiliza para todas (o algunas) de sus publicaciones de blog individuales en su sitio web. Es una plantilla prediseñada construida con contenido dinámico para que cualquier publicación nueva o existente herede automáticamente el diseño y el diseño de la plantilla asignada.

Hay algunas razones convincentes para usar una plantilla de publicación de blog. La razón principal para usar una plantilla de publicación de blog es para simplificar el proceso de creación de blogs. Tener una plantilla ya diseñada para tus publicaciones puede acelerar drásticamente el proceso de creación al eliminar la necesidad de diseñar los elementos de la publicación sobre la marcha y dejar a los blogueros con más tiempo para hacer lo que mejor saben hacer: escribir contenido. ¡Pero eso no es todo! Una plantilla de publicación de blog puede incorporar elementos adicionales (como comentarios, botones para compartir y opciones de correo electrónico) a la publicación para aumentar la participación del usuario y aumentar las conversiones.

Con Divi Theme Builder, crear una plantilla de publicación de blog es sorprendentemente fácil. El secreto para crear una plantilla de publicación de blog en Divi es comprender qué módulos usar y cómo incorporar elementos de contenido dinámico en la plantilla de manera efectiva.

Antes de pasar a crear juntos una plantilla de publicación de blog, primero repasemos algunas de las herramientas disponibles para crear una.

Bloques de construcción de una plantilla de publicación de blog

Las plantillas de publicación de blog pueden variar según las necesidades del blog. Pero, por lo general, una plantilla de publicación de blog constará de la siguiente estructura:

• Encabezado: el área superior de la publicación que generalmente incluye el título de la publicación, la imagen destacada y los metadatos de la publicación (categorías, etiquetas, autor, fecha de la publicación, etc.)
• Contenido de la publicación: el contenido principal del artículo.
• Publicaciones relacionadas: enlaces a otros artículos que pueden interesar a los lectores.
• Comentarios: una sección para que los usuarios agreguen y respondan comentarios sobre la publicación.
• Llamado a la acción: por lo general, un formulario de suscripción por correo electrónico, íconos para compartir en redes sociales o una oferta promocional de algún tipo.

Módulos Divi y contenido dinámico

Se puede crear una plantilla de publicación de blog en Divi Theme Builder utilizando las capacidades de contenido dinámico integradas de Divi inherentes a los módulos Divi. Hay algunos módulos Divi que están diseñados específicamente para publicaciones. Sin embargo, la mayoría de los módulos Divi tendrán la capacidad de extraer contenido dinámico disponible relacionado con una publicación. Aquí hay un desglose de algunas de las opciones disponibles para usted al diseñar una plantilla de publicación de blog en Divi.

• Módulos Divi creados para plantillas de publicaciones
  
  • Módulo de navegación de publicaciones: útil para proporcionar enlaces de navegación a publicaciones anteriores y siguientes.
  • Módulo deslizante de publicaciones: útil para proporcionar una galería de publicaciones organizadas por las más recientes o por categoría.
  • Módulo de título de publicación: útil para mostrar el título de la publicación con una imagen destacada en un módulo conveniente.
  • Módulo de contenido de publicación : un módulo necesario para la plantilla de publicación para mostrar el contenido de una publicación. El módulo de contenido de publicación también incluye opciones de diseño que se pueden usar como diseño predeterminado para contenido de publicación en todo el sitio.

• Elementos de contenido dinámico para plantilla de publicación disponibles en todos los módulos Divi
  
  • Título de la publicación/archivo
  • Extracto de la publicación
  • Fecha actual
  • Lema del sitio
  • Biografía del autor
  • Autor de la publicación
  • Publicar enlace
  • Categorías de publicaciones
  • Recuento de comentarios publicados
  • Publicar fecha de publicación
  • Campos Personalizados

Ahora que tiene una buena idea de las herramientas disponibles, veamos cómo podemos crear una plantilla de publicación de blog en Divi desde cero.

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active el tema Divi  (o el complemento Divi Builder si no usa el tema Divi).
2. Asegúrese de tener al menos algunas publicaciones de blog creadas para ver los resultados de la plantilla de publicación de blog que crearemos. Asegúrate de incluir tanto contenido en cada publicación como sea posible (es decir, imagen destacada, categorías, etc.) para que tengas un buen ejemplo de una publicación real.

Después de eso, estará listo para comenzar a crear una nueva plantilla para las publicaciones de su blog en Divi.

Cómo crear una plantilla de publicación de blog en Divi Theme Builder

Suscríbete a nuestro canal de Youtube

Como todas las plantillas, se crea una plantilla de publicación de blog en Divi Theme Builder que le permitirá crear la plantilla completamente desde cero con el poder de Divi Builder .

Creación de una nueva plantilla

Desde el Panel de WordPress, navega a Divi > Generador de temas. Luego haga clic en el cuadrado vacío «agregar nueva plantilla».

Asignación de la plantilla a todas las publicaciones de blog

Una vez que agregue una nueva plantilla, aparecerá el cuadro de configuración de la plantilla que le permitirá asignar la plantilla a páginas y/o publicaciones en todo su sitio web. Dado que queremos crear una plantilla de publicación de blog para todas las publicaciones de blog en todo el sitio, seleccione «Todas las publicaciones» y haga clic en el botón Crear plantilla.

Creación de un diseño de área del cuerpo personalizado

A continuación, haga clic en el área «Agregar cuerpo personalizado» de la plantilla para crear una nueva área de cuerpo para la plantilla de publicación. Luego seleccione «Crear cuerpo personalizado».

Seleccione la opción «Construir desde cero» para iniciar el proceso de construcción.

Creación del diseño de cuerpo personalizado para la plantilla de publicación

Una vez que se inicia el Editor de diseño de plantillas, tiene la libertad de crear todo el cuerpo de la plantilla de su publicación de blog desde cero utilizando Divi Builder.

Para comenzar, agregue una fila de una columna a la sección normal predeterminada.

Luego, antes de agregar un módulo, actualice la configuración de la sección con un diseño de fondo y algo de relleno de la siguiente manera:

• Degradado de fondo Color izquierdo: #8624e1
• Degradado de fondo Color derecho: #3607a6
• Dirección del gradiente: 130 grados
• Posición inicial: 25%
• Imagen de fondo: insertar imagen
• Usar efecto de paralaje: SÍ
• Acolchado: 7vw arriba, 7vw abajo

Crear el encabezado del título de la publicación como contenido dinámico con el módulo de texto

Dentro de la fila de una columna, agregue un módulo de texto.

A continuación, haga clic en el icono de contenido dinámico al pasar el cursor sobre el área de contenido del cuerpo.

Seleccione el elemento Título de publicación/archivo de la lista.

Luego, haga clic en el icono de engranaje en el elemento Título de publicación/archivo y actualice las áreas de entrada antes y después con etiquetas h1 de la siguiente manera:

Antes:

Después:

Ahora diseñe el título con la siguiente configuración de diseño:

• Fuente del texto: Roboto
• Texto Tamaño del texto: 16px
• Altura de la línea de texto: 1,8 em
• Alineación de texto: centro
• Fuente del encabezado: Roboto
• Peso de la fuente del encabezado: Negrita
• Tamaño del texto del encabezado: 60 px (escritorio), 40 px (tableta), 32 px (teléfono)
• Altura de la línea de encabezado: 1,2 em

Agregar la imagen destacada usando un módulo de imagen como contenido dinámico

Una vez que la sección del título esté en su lugar, agreguemos la imagen destacada para la plantilla de la publicación. Para hacer esto, agregue otra sección regular con un diseño de columna de dos tercios y un tercio.

Luego agregue un módulo de imagen a la columna izquierda.

Luego agregue el elemento de contenido dinámico de la imagen destacada para la imagen.

Diseño del módulo de imagen

Vaya a la pestaña de diseño y personalice la imagen de la siguiente manera:

• Alineación de imagen: centro
• Margen: -9vw (escritorio), 0vw (tableta)
• Esquinas redondeadas: 8px
• Sombra de caja: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 16px
• Fuerza de desenfoque de sombra de cuadro: 96px
• Fuerza de propagación de la sombra del cuadro: -24px

Agregue el autor de la publicación y la biografía del autor al módulo de Blurb como contenido dinámico

A continuación, vamos a agregar un autor de la publicación y una biografía del autor de la publicación usando un módulo de blog. Entonces, continúa y agrega un módulo de blog a la columna de la derecha.

En la configuración de la publicidad, desplace el cursor sobre el cuadro de entrada Título y haga clic en el icono de contenido dinámico. A continuación, agregue el elemento de contenido dinámico Autor de la publicación para el contenido del título.

A continuación, abra la configuración del autor de la publicación y actualice la entrada anterior de la siguiente manera:

• Antes: Escrito por

Para el contenido del cuerpo del módulo de propaganda, haga clic en el icono de contenido dinámico y seleccione el elemento de contenido dinámico «Biografía del autor» de la lista.

Para la Imagen del módulo de propaganda, agregue la «Imagen de perfil del autor de la publicación» como contenido dinámico.

Diseño Post Author y Bio Blurb Module

Ahora optimice el diseño de la imagen de la siguiente manera:

• Colocación de imagen/icono: Izquierda
• Esquinas redondeadas de la imagen: 50%
• Fuente del título: Roboto
• Peso de la fuente del título: Negrita
• Altura de la línea del título: 1,3 em
• Fuente del cuerpo: Lato
• Altura de la línea del cuerpo: 1,4 em
• Ancho de la imagen: 50px

Agregar categorías de publicaciones al módulo de Blurb como contenido dinámico

En el Módulo de autor y biografía del autor que acaba de crear, agregue otro módulo de publicidad debajo y seleccione el elemento de contenido dinámico Categorías de publicación para el Título.

Luego actualice la propaganda con un ícono de la siguiente manera:

• Icono de uso: SÍ
• Icono: ver captura de pantalla

Módulo de Blurb de categoría de publicación de diseño

Actualice la configuración de diseño de la siguiente manera:

• Color del icono: #dddddd
• Colocación de imagen/icono: Izquierda
• Usar tamaño de fuente del icono: SÍ
• Tamaño de fuente del icono: 20 px
• Fuente del título: Roboto
• Peso de la fuente del título: Medio
• Color del texto del título: #f92c8b
• Tamaño del texto del título: 16px
• Altura de la línea del título: 20 px
• Relleno: 16px a la izquierda

Agregue el recuento de comentarios al módulo de Blurb como contenido dinámico

Para agregar el recuento de comentarios de publicación para la plantilla de publicación de blog, duplique el módulo de publicidad que acaba de crear.

A continuación, actualice el contenido del Título con el elemento de contenido dinámico Recuento de comentarios publicados.

Dado que el recuento de comentarios solo muestra un número, debemos complementar el número con algún texto adicional después del número. Para hacer esto, abra la configuración de Recuento de comentarios de publicaciones y actualice lo siguiente:

Después: Comentario(s)

Luego actualice el icono de la siguiente manera:

• Icono de uso: SÍ
• Icono: ver captura de pantalla

Agregue la fecha de publicación posterior al módulo de Blurb como contenido dinámico

Para la última pieza de metadatos, duplique el módulo de publicidad con el recuento de comentarios. A continuación, actualice el contenido del título con el elemento de contenido dinámico «Fecha de publicación posterior».

Sugerencia: siempre puede abrir la configuración del elemento dinámico Publicar fecha de publicación para cambiar el formato de visualización de la fecha.

Luego actualice el icono de la siguiente manera:

• Icono de uso: SÍ
• Icono: ver captura de pantalla

Agregar módulo de publicación de contenido con configuración de diseño para contenido

Con el título de la publicación, la imagen destacada, el autor de la publicación y los metadatos en su lugar, estamos listos para el contenido principal de la publicación.

Agregue una nueva fila con un diseño de una columna.

Luego agregue un módulo de contenido de publicación a la fila.

Este módulo de contenido de publicación es donde se mostrará el contenido principal de la publicación. Además, podemos actualizar la configuración de diseño para establecer el diseño predeterminado de todo el contenido de la publicación ingresado con el editor predeterminado. Podemos actualizar la configuración del Módulo de contenido de publicaciones como lo haríamos con cualquier otro módulo. Y podemos ver el contenido simulado proporcionado por el módulo a medida que actualizamos el módulo.

Abra la configuración del módulo de contenido de publicación y actualice la siguiente configuración de imagen:

• Esquinas redondeadas de la imagen: 8px
• Sombra de cuadro de imagen: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 16px
• Fuerza de desenfoque de sombra de cuadro: 96px
• Fuerza de propagación de la sombra del cuadro: -24px

A continuación, debemos configurar el diseño para todos los elementos de contenido de texto posibles para cuando un usuario crea una publicación de blog con el editor predeterminado. Abra el grupo de opciones de texto para revelar las 5 pestañas diferentes de tipos de diseños de texto: párrafo, enlace, lista desordenada, lista ordenada y cita en bloque.

Luego actualice las siguientes opciones debajo de cada una de las pestañas.

Continúe actualizando la configuración del texto del encabezado para cada uno de los niveles de encabezado: h1, h2, h3, h4, h5, h6.

• Fuente del encabezado: Roboto
• Peso de la fuente del encabezado: Negrita
• Tamaño del texto del encabezado (h1): 56 px (escritorio), 42 px (tableta), 28 px (teléfono)
• Tamaño del texto del encabezado (h2): 45 px (escritorio), 35 px (tableta), 24 px (teléfono)
• Tamaño del texto del encabezado (h3): 40 px (escritorio), 30 px (tableta), 20 px (teléfono)
• Tamaño del texto del encabezado (h4): 32 px (escritorio), 24 px (tableta), 18 px (teléfono)
• Tamaño del texto del encabezado (h5): 28 px (escritorio), 20 px (tableta), 16 px (teléfono)
• Tamaño del texto del encabezado (h6): 24 px (escritorio), 18 px (tableta), 14 px (teléfono)

Agregar módulo de navegación posterior

En el Módulo de contenido de publicaciones, agregue una nueva fila de una columna con un Módulo de navegación de publicaciones.

Actualice el texto del enlace anterior y siguiente de la siguiente manera:

• Enlace anterior: Anterior: %título
• Siguiente enlace: Siguiente: %título

Luego, actualice el diseño de navegación de la publicación de la siguiente manera:

• Enlaces Fuente: Roboto
• Enlaces Peso de fuente: Negrita
• Color del texto de los enlaces: #f92c8b

Agregar sección de publicaciones relacionadas

Después de la navegación de publicaciones, estamos listos para agregar una sección de «publicaciones relacionadas» a nuestra plantilla de publicación de blog. Esto será útil para ofrecer al usuario publicaciones sugeridas en función de la categoría actual de la publicación que se está viendo.

Agregar título de publicación relacionada usando el módulo de texto

Antes de agregar el módulo de blog para extraer las publicaciones relacionadas, debemos crear un título estático para la sección. Para hacer esto, cree una nueva sección con una fila de una columna. Luego agregue un módulo de texto a la fila.

Actualice el contenido del texto con el siguiente encabezado H2:

Luego actualice el diseño del texto del encabezado de la siguiente manera:

• Encabezado 2 Fuente: Roboto
• Título 2 Tamaño del texto: 48 px (escritorio), 38 px (tableta), 28 px (teléfono)

Ahora que nuestro título está en su lugar, estamos listos para agregar nuestras publicaciones relacionadas.

Agregar publicaciones relacionadas usando el módulo de blog con publicaciones de la categoría actual

Debajo del módulo de texto que contiene el título, agregue un nuevo módulo de blog.

Luego actualice el contenido del módulo de blog de la siguiente manera:

• Número de publicaciones: 3
• Categorías incluidas: Categoría actual
• Longitud del extracto: 120
• Mostrar autor: NO
• Mostrar Categorías: NO
• Mostrar paginación: NO

El aspecto más importante de estos ajustes es la selección de la “categoría actual”. Esto permitirá que la plantilla de publicación extraiga las publicaciones más recientes que comparten la misma categoría de la publicación actual.

Con la configuración de contenido del módulo de blog en su lugar, vaya a la configuración de diseño y actualice lo siguiente:

• Diseño: Cuadrícula
• Fuente del título: Roboto
• Tamaño del texto del título: 14px
• Altura de la línea del título: 1,3 em
• Fuente del cuerpo: Lato
• Fuente Meta: Lato
• Color del metatexto: #f92c8b
• Tamaño del metatexto: 13px
• Esquinas redondeadas de diseño de cuadrícula: 20px

Continúe actualizando el diseño con una sombra de caja de la siguiente manera:

• Ancho del borde del diseño de cuadrícula: 0px
• Sombra de cuadro: ver captura de pantalla
• Posición vertical de la sombra del cuadro: 16px
• Fuerza de desenfoque de sombra de cuadro: 96px
• Fuerza de propagación de la sombra del cuadro: -24px

Agregar módulo de comentarios

La sección final de esta plantilla de publicación de blog contendrá los comentarios. Para agregar comentarios a la publicación, simplemente cree una nueva fila de una columna y coloque el módulo de comentarios dentro.

Módulo de comentarios de diseño

Todo lo que queda por hacer ahora es personalizar el diseño del módulo de comentarios para que coincida con nuestra plantilla. Actualice la siguiente configuración de diseño:

• Color de fondo: #f2f5f9
• Color de fondo de los campos: #ffffff
• Color de fondo del foco de los campos: #ffffff
• Color de texto de enfoque de campos: #222222
• Margen de campos: 3px inferior
• Relleno de campos: 18px arriba, 18px abajo
• Fuente de los campos: Lato
• Tamaño del texto de los campos: 16px
• Altura de la línea de campos: 1,4 em

Continúe actualizando la configuración de la siguiente manera:

• Esquinas redondeadas de la imagen: 60px
• Fuente del título: Roboto
• Tamaño del texto del título: 26 px (escritorio), 20 px (tableta), 15 px (teléfono)
• Altura de la línea del título: 1,3 em
• Fuente Meta: Lato
• Fuente del comentario: Lato
• Color del texto del comentario: #222222
• Relleno: 5% arriba, 5% abajo, 5% izquierda, 5% derecha

Finalmente, personalice el estilo del botón para los comentarios de la siguiente manera:

• Tamaño del texto del botón: 14px
• Ancho del borde del botón: 0px
• Radio del borde del botón: 4px
• Espaciado entre letras de botones: 5 px (escritorio), 5,5 px (desplazamiento)
• Fuente del botón: Roboto
• Peso de la fuente del botón: Negrita
• Estilo de fuente del botón: Mayúsculas (TT)
• Relleno de botones: 16 px arriba, 16 px abajo

Agregar divisor de sección al encabezado

No se olvide de todas las increíbles opciones de diseño que tiene a su disposición cuando diseñe la plantilla de publicación. Por ejemplo, podemos darle a la sección de encabezado un diseño divisorio. Para hacer esto, regrese a la parte superior de la página y abra la configuración de la sección superior que contiene el encabezado. Luego actualice lo siguiente:

• Estilo de divisor inferior: ver captura de pantalla
• Color del divisor: #ffffff
• Altura del divisor: 10vw
• Voltear el divisor: horizontal

No olvide guardar su configuración para el diseño y también para Theme Builder para que se guarden sus cambios.

¡Eso es todo! Veamos el resultado final.

Resultado final

Para ver el resultado final, podemos abrir cualquier publicación de blog dentro de nuestro sitio Divi (ya que la plantilla se ha asignado a todas las publicaciones de blog).

Aquí hay una publicación de ejemplo al verla desde el editor de publicaciones en el backend.

Y aquí está la publicación en la parte delantera con nuestra plantilla de publicación de blog en su lugar.

Y aquí está en la pantalla de la tableta y el teléfono:

Uso de Divi Builder para crear una publicación de blog con una plantilla de publicación de blog en su lugar

Si lo desea, puede implementar fácilmente Divi Builder para diseñar una publicación de blog utilizando una plantilla de publicación de blog como esta. Cualquier contenido creado y diseñado con Divi Builder se mostrará dentro del área del Módulo de contenido de publicación de la plantilla.

Pensamientos finales

Espero que este tutorial sirva como un buen punto de partida para crear su propia plantilla de publicación de blog desde cero utilizando Divi Builder. No olvide tomarse el tiempo para considerar todas las herramientas disponibles, así como también cómo desea estructurar el diseño de la plantilla de publicación. Siempre es importante usar la mayor cantidad de elementos de contenido dinámico en toda la plantilla de publicación de blog para agilizar mejor el proceso de creación relacionado con los blogs. Con una hermosa plantilla en su lugar, un blogger realmente puede concentrarse en la creación de contenido mientras que la plantilla hace todo el trabajo pesado del diseño automáticamente.

¿Ha creado una plantilla de publicación de blog con Divi Theme Builder? Háganos saber lo que piensas.

Espero escuchar de usted en los comentarios.

¡Salud!