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

Publicado: 2019-11-05

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 del blog en el front-end, mientras que los bloggers solo deben preocuparse por escribir el post en el back-end. Esto ahorra tiempo drásticamente al agilizar el proceso de creación para que su publicación se publique en la web rápidamente. 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 pueden cobrar vida estas plantillas 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 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 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 será resuscrito 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.

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!

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.

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 para todo el sitio que se utiliza para todas (o algunas) de las publicaciones de su blog en su sitio web. Es una plantilla prediseñada construida con contenido dinámico de modo que cualquier publicación nueva o existente heredará automáticamente la disposición 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 utilizar una plantilla de publicación de blog es para agilizar el proceso de creación de blogs. Tener una plantilla lista para usar ya diseñada 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 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 juntos una plantilla de publicación de blog, repasemos primero algunas de las herramientas disponibles para crear una.

Elementos básicos 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.)
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.
Llamada 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 se crean 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 de control 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 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 la publicación también incluye opciones de diseño que se pueden usar como un diseño predeterminado para el contenido de la publicación en todo el sitio.

Elementos de contenido dinámico para la 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
- Bio del autor
- Autor de la publicación
- Enlace de publicación
- Categorías de publicaciones
- Publicar recuento de comentarios
- 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:

Si aún no lo ha hecho, instale y active el tema Divi (o el complemento Divi Builder si no usa el tema Divi).
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 tanto contenido en cada publicación como sea posible (es decir, imagen destacada, categorías, etc.) para que tenga 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.

Crear una nueva plantilla

Desde el Panel de WordPress, navegue a Divi> Theme Builder. Luego haga clic en el cuadro vacío "agregar nueva plantilla".

Asignar la plantilla a todas las publicaciones del 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 personalizado del área del cuerpo

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. A continuación, seleccione "Crear cuerpo personalizado".

Seleccione la opción "Construir desde cero" para comenzar 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 publicación de su 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:

Color de degradado de fondo a la izquierda: # 8624e1
Gradiente 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 superior, 7vw inferior

Creación del 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.

Luego, haga clic en el ícono de contenido dinámico al pasar el cursor sobre el área de contenido del cuerpo.

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

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

Antes:

<h1>

Después:

</h1>

Ahora diseñe el título con las siguientes configuraciones de diseño:

Fuente de texto: Roboto
Tamaño del texto del texto: 16px
Altura de la línea de texto: 1.8em
Alineación de texto: centro
Fuente de 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 usando un módulo de imagen como contenido dinámico

Una vez que la sección de 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 un tercio de dos tercios.

Luego agregue un módulo de imagen a la columna de la 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 la imagen: centro
Margen: -9vw (escritorio), 0vw (tableta)
Esquinas redondeadas: 8px
Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 16px
Fuerza de desenfoque de sombra de caja: 96px
Fuerza de propagación de la sombra de caja: -24px

Agregue el autor de la publicación y la biografía del autor al módulo 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 mediante un módulo de blog. Entonces, continúe y agregue un módulo de blog en la columna de la derecha.

En la configuración de la propaganda, coloque el cursor sobre el cuadro de entrada Título y haga clic en el ícono de contenido dinámico. A continuación, agregue el elemento de contenido dinámico del 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 de publicación de autor y módulo Bio Blurb

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

Ubicación de la 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 la imagen: 50px

Agregar categorías de publicaciones al módulo 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 propaganda debajo 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:

Usar icono: SÍ
Icono: ver captura de pantalla

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

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

Color del icono: #dddddd
Ubicación de la imagen / icono: Izquierda
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 20px
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 de título: 20px
Relleno: 16px a la izquierda

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

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

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

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

Después: Comentario (s)

Luego actualice el icono de la siguiente manera:

Usar icono: SÍ
Icono: ver captura de pantalla

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

Para la última pieza de metadatos, duplique el módulo de propaganda 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".

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

Luego actualice el icono de la siguiente manera:

Usar icono: SÍ
Icono: ver captura de pantalla

Agregar módulo de contenido de publicación 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 de la publicación principal.

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 la publicación ingresado usando 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 la publicación y actualice la siguiente configuración de imagen:

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

A continuación, debemos establecer el diseño de todos los posibles elementos de contenido de texto para cuando un usuario crea una publicación de blog utilizando el editor predeterminado. Abra el grupo de opciones de texto para mostrar 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 en cada una de las pestañas.

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

Fuente de encabezado: Roboto
Peso de la fuente del encabezado: negrita
Tamaño del texto del encabezado (h1): 56px (escritorio), 42px (tableta), 28px (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 de publicaciones

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

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

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

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

Fuente de enlaces: Roboto
Peso de la fuente de los enlaces: 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 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:

<h2>You May Also Like...</h2>

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

Fuente del encabezado 2: Roboto
Tamaño del texto del encabezado 2: 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 del 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 de título: 1.3em
Fuente del cuerpo: Lato
Fuente Meta: Lato
Color del meta texto: # 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 cuadro de la siguiente manera:

Ancho del borde del diseño de la cuadrícula: 0px
Box Shadow: ver captura de pantalla
Posición vertical de la sombra del cuadro: 16px
Fuerza de desenfoque de sombra de caja: 96px
Fuerza de propagación de la sombra de caja: -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 de enfoque de campos: #ffffff
Color de texto de enfoque de campos: # 222222
Margen de campos: 3px inferior
Relleno de campos: 18px superior, 18px inferior
Fuente Fields: Lato
Tamaño del texto de los campos: 16px
Altura de la línea de campos: 1.4em

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: 26px (escritorio), 20px (tableta), 15px (teléfono)
Altura de la línea de título: 1.3em
Fuente Meta: Lato
Fuente de 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
Espacio entre letras de los botones: 5px (escritorio), 5.5px (desplazarse)
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 píxeles en la parte superior, 16 píxeles en la parte inferior

Agregar divisor de sección al encabezado

No se olvide de todas las increíbles opciones de diseño a su disposición al diseñar la plantilla de publicación. Por ejemplo, podemos darle a la sección de encabezado un diseño de divisor. Para hacer esto, vuelva 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
Flip divisor: horizontal

No olvide guardar su configuración para el diseño y también para el Generador de temas 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 cuando la ve desde el editor de publicaciones en el backend.

Y aquí está la publicación en la parte frontal 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 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 puede realmente concentrarse en la creación de contenido mientras la plantilla hace todo el trabajo pesado del diseño automáticamente.

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

Espero tener noticias tuyas en los comentarios.

¡Salud!