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


Una plantilla de publicación de blog es probablemente la plantilla más importante que puede agregar a un sitio de blog. Proporciona una estructura y un diseño que se aplica "mágicamente" a todas las publicaciones de blog en el front-end, mientras que los bloggers solo deben preocuparse por escribir la publicación en el backend. Esto ahorra drásticamente tiempo al agilizar el proceso de creación para publicar rápidamente su publicación en la web. Y con Divi Theme Builder, no tendrá que conformarse con una plantilla de publicación aburrida que se parece a cualquier otra publicación de blog en la web. Puede crear innumerables diseños auténticos (visualmente) y agregar fácilmente diferentes combinaciones de contenido estático y dinámico en toda su plantilla.

En esta publicación, cubriremos todo lo que necesita saber para crear una plantilla de publicación de blog utilizando Divi Theme Builder. Cubriremos una gran cantidad de contenido, pero creo que se sorprenderá de lo fácil que estas plantillas pueden cobrar vida ante sus ojos.

¡Ahora comencemos!

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 para 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 sobre la plantilla de este tutorial, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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á "suscrito" ni recibirá correos electrónicos adicionales.

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

plantilla de página de categoría divi

plantilla de página de categoría divi

¿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 utilizada para todas (o algunas) de sus publicaciones de blog individuales en su sitio web. Es una plantilla prediseñada creada 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 optimizar el proceso de creación de blogs. Tener una plantilla ya preparada para sus 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 bloggers 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 comenzar a crear una plantilla de publicación de blog juntos, repasemos algunas de las herramientas disponibles para crear una.

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

Las plantillas de publicaciones 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 publicación, etc.)
  • Publicar contenido: 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 correo electrónico, iconos 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 integradas de contenido dinámico 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 incorporar 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 más reciente o por categoría.
    • Módulo de título de la 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 utilizar como diseño predeterminado para el 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 publicación / archivo
    • Extracto posterior
    • Fecha actual
    • Lema del sitio
    • Biografía del autor
    • Publicar autor
    • Enlace de publicación
    • Categorías de publicaciones
    • Publicar recuento de comentarios
    • Fecha de publicación 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 has hecho, instalar y activar 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úrese de incluir la mayor cantidad de contenido posible en cada publicación (es decir, imagen destacada, categorías, etc.) para que tenga un buen ejemplo de una publicación real.

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

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

(incrustar) https://www.youtube.com/watch?v=hSDtlO4OLP8 (/ incrustar)

Suscríbase 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.

Crear una nueva plantilla

Desde el Panel de WordPress, navegue hasta 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.

Crear un diseño de área de 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 comenzar el proceso de construcción.

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

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

Para comenzar, agregue una fila de una columna a la sección regular 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:

  • Gradiente de fondo Color izquierdo: # 8624e1
  • Gradiente de fondo Color correcto: # 3607a6
  • Dirección de degradado: 130 grados
  • Posición de inicio: 25%
  • Imagen de fondo: insertar imagen
  • Usar efecto de paralaje: SÍ
  • Acolchado: 7vw arriba, 7vw abajo

Crear el título 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.

Luego haga clic en el ícono de contenido dinámico al pasar el mouse 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 de:

Después:


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

  • Fuente de texto: Roboto
  • Tamaño del texto: 16px
  • Altura de la línea de texto: 1.8em
  • 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 rumbo: 1.2em

Agregar la imagen destacada utilizando 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 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ñando el Módulo de Imagen

Salte 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
  • Box Shadow: ver captura de pantalla
  • Posición vertical de la sombra de la caja: 16px
  • Box Shadow Blur Fuerza: 96 px
  • Fuerza de propagación de la sombra de la caja: -24 px

Agregar autor de publicaciones y biografía del autor al módulo Blurb como contenido dinámico

A continuación, agregaremos un autor de publicación y una biografía de autor de publicación mediante un módulo de blog. Entonces, continúe y agregue un módulo de blog en la columna derecha.

En la configuración de publicidad, pase 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 Publicar autor para el contenido del Título.

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

  • Antes: escrito por

Para el contenido del cuerpo del módulo de publicidad, haga clic en el icono de contenido dinámico y seleccione el elemento de contenido dinámico "Autor Bio" de la lista.

Para la Imagen del módulo publicitario, agregue la “Imagen de perfil del autor de la publicación” como contenido dinámico.

Autor del puesto de diseño y módulo Bio Blurb

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 de título: 1.3em
  • Fuente del cuerpo: Lato
  • Altura de la línea del cuerpo: 1.4em
  • Ancho de imagen: 50 px

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

En el Módulo Autor y Biografía del autor que acaba de crear, agregue otro módulo publicitario debajo de él y seleccione el elemento de contenido dinámico Categorías de publicaciones para el Título.

Luego actualice la propaganda con un icono de la siguiente manera:

  • Use el icono: SÍ
  • Icono: ver captura de pantalla

Design Post Category Blurb Module

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 de icono: SÍ
  • Tamaño de fuente del icono: 20 px
  • Fuente del título: Roboto
  • Título Fuente Peso: Medio
  • Color del texto del título: # f92c8b
  • Tamaño del texto del título: 16px
  • Altura de la línea de título: 20 px
  • Acolchado: quedan 16 px

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

Para agregar el recuento de comentarios de publicaciones 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 Publicar recuento de comentarios.

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 Conteo de comentarios de publicación y actualice lo siguiente:

Después: comentario (s)

Luego actualice el icono de la siguiente manera:

  • Use el icono: SÍ
  • Icono: ver captura de pantalla

Agregar fecha de publicación de la publicación al módulo 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 "Publicar fecha de publicación".

Consejo: 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:

  • Use el icono: SÍ
  • Icono: ver captura de pantalla

Agregar módulo de contenido de publicación con configuraciones 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 la 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 entrada ingresado utilizando el editor predeterminado. Podemos actualizar la configuración para el módulo de contenido de publicación tal 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:

  • Imagen esquinas redondeadas: 8px
  • Image Box Shadow: ver captura de pantalla
  • Posición vertical de la sombra de la caja: 16px
  • Box Shadow Blur Fuerza: 96 px
  • Fuerza de propagación de la sombra de la caja: -24 px

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

Luego actualice las siguientes opciones en 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 de encabezado (h1): 56 px (escritorio), 42 px (tableta), 28 px (teléfono)
  • Tamaño del texto de encabezado (h2): 45 px (escritorio), 35 px (tableta), 24 px (teléfono)
  • Tamaño del texto de encabezado (h3): 40 px (escritorio), 30 px (tableta), 20 px (teléfono)
  • Tamaño del texto de encabezado (h4): 32 px (escritorio), 24 px (tableta), 18 px (teléfono)
  • Tamaño del texto de encabezado (h5): 28 px (escritorio), 20 px (tableta), 16 px (teléfono)
  • Tamaño del texto de encabezado (h6): 24 px (escritorio), 18 px (tableta), 14 px (teléfono)

Agregar módulo de navegación de publicaciones

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

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

  • Enlace anterior: Anterior:% title
  • Enlace siguiente: Siguiente:% title

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

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

Agregar sección de publicaciones relacionadas

Después de la navegación de la publicación, estamos listos para agregar una sección de "publicaciones relacionadas" a nuestra plantilla de publicación de blog. Esto será útil para dar al usuario publicaciones sugeridas basadas en 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 obtener las publicaciones relacionadas, necesitamos 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:

You May Also Like...

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

  • Título 2 Fuente: Roboto
  • Encabezado 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 mediante 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:

  • Recuento 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 "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, salte 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: 14 px
  • Altura de la línea de título: 1.3em
  • Fuente del cuerpo: Lato
  • Meta Font: Lato
  • Color del texto meta: # f92c8b
  • Meta Tamaño del texto: 13px
  • Diseño de cuadrícula Esquinas redondeadas: 20 px

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

  • Ancho de borde de diseño de cuadrícula: 0px
  • Box Shadow: Ver captura de pantalla
  • Posición vertical de la sombra de la caja: 16px
  • Box Shadow Blur Fuerza: 96 px
  • Fuerza de propagación de la sombra de la caja: -24 px

Añadir 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 campos: #ffffff
  • Color del texto del foco de campos: # 222222
  • Margen de campos: fondo de 3px
  • Relleno de campos: 18px arriba, 18px abajo
  • Fuente de campos: Lato
  • Tamaño del texto de los campos: 16 px
  • Altura de la línea de campos: 1.4em

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

  • Imagen esquinas redondeadas: 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 de título: 1.3em
  • Meta Font: Lato
  • Fuente del comentario: Lato
  • Color del texto del comentario: # 222222
  • Relleno: 5% superior, 5% inferior, 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: 14 px
  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 4px
  • Espacio entre letras de botones: 5 px (escritorio), 5.5 px (hover)
  • Fuente del botón: Roboto
  • Peso de fuente del botón: negrita
  • Estilo de fuente del botón: mayúscula (TT)
  • Acolchado de botones: 16px arriba, 16px abajo

Agregar divisor de sección al encabezado

No olvide todas las increíbles opciones de diseño a su disposición cuando diseñe la plantilla de publicación. Por ejemplo, podemos darle a la sección del encabezado un diseño divisor. 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 del divisor inferior: ver captura de pantalla
  • Color del divisor: #ffffff
  • Altura del divisor: 10vw
  • Divisor Flip: horizontal

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

¡Eso es! 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 cuando se ve desde el editor de publicaciones en el backend.

Y aquí está la publicación en el front-end 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 del 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 Módulo de contenido 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 utilizar 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.

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

Espero tener noticias suyas en los comentarios.

¡Salud!