Guías Divi

Cómo hacer una Plantilla de Entradas con Divi

  • Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
  • Theme Builder de Divi. Lo encontramos en Divi > Generador de temas.
  • Contenido dinámico. Lo encontramos haciendo clic en el ícono que se encuentra a la derecha de los campos que ofrecen esta posibilidad.
  • Cómo Organizar Datos en Entradas.

Una plantilla de entradas del tema Divi nos permite crear un solo diseño para ser usado en todas las entradas del blog, o en un grupo de entradas.

De esta forma podemos modificar el diseño en cualquier momento sin tener que ir corrigiendo entrada por entrada.

¿Qué es una plantilla de entradas de Divi?

La forma original de trabajar con Divi era diseñando páginas o entradas de manera individual (una por una). Es cierto Divi dispone de herramientas que nos permiten clonar rápidamente el diseño de una página para usarlo en otra.

Pero ésto tenía la limitación de que, si queríamos hacer algún cambio en el diseño una vez que teníamos muchas entradas o páginas publicadas, teníamos que hacer la modificación en cada una de estas.

Así que debíamos conformarnos con usar el diseño básico de Divi para todas las entradas del blog.

Las plantillas de entradas ponen fin a esta limitación y en el video te muestro cómo funcionan.

Una plantilla de entrada no es más que un diseño de página hecho con el constructor Divi que luego se asigna de forma dinámica a todas las entradas del blog, o a las entradas de una determinada categoría.

De esta forma hacemos el diseño una sola vez y además lo podemos modificar cuando queremos sin tener que ir entrada por entrada.

Crear una nueva plantilla de entradas en Divi

Para crear un nueva plantilla de entradas hay que ir a Divi > Theme Builder y luego a Add New Template. Esta nueva plantilla la vamos a asignar a todas las entradas (All entradas, según la traducción que tiene mi Divi).

Y una vez que tenemos creada y asignada la nueva plantilla de entradas vamos Add Custom Body para personalizar el diseño de ésta.

Vas a ver que se activa el editor Divi, que es idéntico al que ya vimos en otras guías para la creación de páginas individuales.

Personalizar el formato de las entradas

Ahora vamos a ir viendo cómo añadir a nuestra plantilla los elementos que habitualmente contienen cualquier entrada de blog.

Título de la entrada

El primer elemento que vemos cuando accedemos a cualquier entrada de blog es el título. Para insertar en tu plantilla de entradas de Divi el título de la entrada vas a usar el módulo de Texto.

Primero crea una sección e inserta en ella una fila de ancho completo (o del ancho que quieras) y dentro de la fila agrega un módulo de texto.

En la pestaña Contenido vamos a Cuerpo y luego de borrar todo el texto pre-cargado hacemos clic en el ícono de Contenido dinámico (que puedes encontrar en la esquina superior derecha del editor).

Entre todas las opciones de contenido dinámico vas a elegir la que se llama Post/Archive TitleTítulo de la entrada y archivo.

Ésto hará que Divi muestre en ese lugar el título de la entrada en la que nos encontremos al momento de navegar por el blog.

Dejo en tus manos asignarle los estilos pertinentes para que quede atractivo y acorde al diseño de tu sitio web.

Ya tienes colocado en tu plantilla de entradas de Divi el título de la entrada, sigamos con más elementos.

Imagen destacada

Otro elemento que no puede faltar en el diseño de una plantilla de entrada de blog es la imagen destacada. Y para añadir la imagen destacada del post a tu plantilla de entradas de Divi vas a valerte del Módulo de Imagen.

Una vez que hayas insertado el módulo de Imagen debes eliminar la imagen que viene pre-cargada para poder ver el icono de contenido dinámico (idéntico al módulo de texto).

En este caso la opción de contenido dinámico que vas a elegir es Imagen principal, que corresponde a la imagen destacada de post.

Ahora que ya insertamos el título y la imagen destacada en nuestra plantilla de entradas de Divi podemos añadir los meta datos de la entrada.

Meta-datos de la entrada

Los meta-datos son la información complementaria de la entrada: autor, fecha de publicación, categoría a la que pertenece, entre otros.

En este caso vamos a usar un módulo de Anuncio o Blurb para mostrar los distintos meta-datos. Este módulo incluye una imagen, un título y un texto que nos van a servir muy bien para lo que necesitamos.

Autor

Insertamos entonces un módulo de Anuncio y dentro de la pestaña Contenido vamos a Título y nos valemos nuevamente del contenido dinámico para elegir la opción Post Author para mostrar el nombre del autor.

Luego en Cuerpo también abrimos el contenido dinámico y seleccionamos Autor bio para mostrar también la biografía del perfil del autor.

Y por último vamos a visualizar la foto del autor. Nos vamos a la opción Imagen e icono y, borrando la imagen predeterminada, hacemos clic en contenido dinámico y elegimos la opción Post image perfil de autor. Es necesario que tengas configurada tu foto en Gravatar para que ésto funcione, ya que WordPress no tiene opción para cargar una foto en el perfil del usuario.

Categorías

Ahora que ya tenemos al autor vamos a mostrar también a qué categorías pertenece la entrada para que los lectores tengan la posibilidad de acceder a ellas para ver contenido relacionado.

Insertamos un nuevo módulo de Anuncio y esta vez en el título vamos a elegir la opción de contenido dinámico Post Categorías. Y en los ajustes del contenido dinámico marcamos que en Enlace a la página de categoría.

Ésto mostrará las categorías a las que pertenece la entrada una detrás de otra y podremos hacer clic en ellas para acceder a cada una.

Sin salir de los ajustes del módulo buscamos la sección Imagen e icono y marcamos Usar icono Sí, para luego elegir un icono apropiado que acompañe a los nombres de categoría.

Número de Comentarios

Para mostrar el número de comentarios que tiene la entrada vamos simplemente a duplicar el módulo de Anuncio de las categorías y cambiamos el contenido dinámico por Post Recuento de Comentarios.

Y donde aparecen las opciones de Antes y Después le ponemos la palabra comentario(s) en Después.

También cambiamos el icono por otro que haga más referencia a los comentarios.

Fecha

Para mostrar la fecha de publicación de la entrada duplicamos nuevamente alguno de los módulos de Anuncio anteriores y cambiamos el contenido dinámico por Post Fecha de Publicación.

Y por supuesto cambiamos también el icono por otro que haga referencia a este elemento.

 

Ya tenemos colocados en nuestra plantilla de entradas de Divi el título, la imagen destacada y los meta-datos más comunes. Ahora vamos a lo más importante, el contenido del post.

Contenido de la entrada

Para mostrar el contenido de las entradas en la plantilla vamos a utilizar un módulo nuevo que se llama Post Content.

Este módulo inserta en la plantilla de entrada un modelo de post con todos los elementos que puede haber en el contenido:

  • Encabezados H1, H2, H3, H4.
  • Párrafos, citas y enlaces.
  • Imágenes.
  • Listas ordenadas y desordenadas.

Y podemos ir aplicándole estilos a cada uno de los elementos como hacemos en cualquier otro módulo de Divi. Después esos estilos se verán reflejados en el contenido de todas las entradas.

El módulo Post Content de Divi

Es muy simple. Podemos por ejemplo asignarle una familia y tamaño de fuente a los párrafos y otro a cada uno de los encabezados, o bien determinada altura de línea o cualquier cosa que se nos ocurra.

Hasta podemos darle formato a los bordes de las imágenes que contengan las entradas, aplicarles una sombra, filtro o lo que fuera.

Y en este punto podríamos dar por finalizada esta guía sobre cómo personalizar una plantilla de entradas con Divi. Ya tenemos una entrada completa con su título, imagen destacada, meta-datos y contenido.

Pero vamos un poco más allá… Una entrada no termina cuando termina el contenido.

Navegando por las entradas

Es muy común en WordPress y en los blogs en general que debajo de una entrada aparezca unos enlaces o botones para avanzar a la entrada siguiente o retroceder a la anterior.

Si bien no es lo más habitual que un lector vaya leyendo las entradas de manera cronológica podrías querer tener este elemento.

Para crearlo debes usar el módulo de Divi llamado Navegación por los mensajes. Con solo insertarlo debajo del contenido y definir las palabras a mostrar Entrada anterior y Entrada siguiente será suficiente.

Entradas relacionadas

Otro elemento que no suele faltar en el pie de una entrada son las entradas relacionadas. Para añadir este elemento a tu plantilla de entradas de Divi vas a usar el Módulo de Blog de Divi.

El módulo de Blog muestra las entradas relacionadas.

Pero previamente inserta un Módulo Texto en el que puedas escribir un título. Por ejemplo Quizás también te interese…

Una vez dentro del módulo de Blog te recomiendo ir a la pestaña Diseño y elegir el formato Rejilla en lugar de Ancho completo.

Y en Contenido marca la opción Categorías incluidas > Categoría actual para que Divi nos muestre solo entradas relacionadas pertenecientes a la misma categoría de la entrada que estamos viendo.

Ajusta el resto de los formatos como más te guste y en minutos tendrás una atractiva sección de entradas relacionadas debajo del contenido de la entrada, en tu plantilla de entradas de Divi.

Ahora sí ya casi estamos, pero… ¡Un momento! ¿Qué sería de un blog sin los comentarios? No podemos irnos sin dotar a la plantilla de entradas que estamos creando con Divi una sección de comentarios como Dios manda.

Comentarios

Por suerte el módulo de Comentarios de Divi es muy fácil de usar. Lo insertamos en el lugar de la plantilla de entradas que nosotros queremos y por sí solo muestra los comentarios de la entrada y el formulario para comentar.

También podemos, por supuesto, asignarle estilos a sus diversos elementos.

 

Y ahora sí tu plantilla de entradas de Divi está completa!

Para que funcione debes guardar los cambios en el editor y, luego de cerrarlo y regresar al Theme Builder, vuelve a guardar los cambios allí, para que aplique la asignación de la plantilla a todas las entradas.

Más posibilidades de las plantillas de entradas

Vamos a ver algunas cosas más que podemos hacer para sacarle mayor provecho a las plantillas de entradas,

Llamadas a la acción

Antes de terminar aprovecho para mencionar otro recurso que puede ser muy útil en una plantilla de entradas: me refiero a las llamadas a la acción.

Las llamadas a la acción son textos llamativos que se colocan en las barras laterales, o en cualquier otro lugar de la entrada, para incentivar al lector a completar una determinada acción.

Una excelente forma de llamar la atención es hacer que esas llamadas a la acción se adhieran al borde superior mientras el lector hacer hace scroll. De forma que no desaparecen rápidamente.

Entradas recientes por categoría

En el caso de blogs con varias categorías también suele ser útil mostrar, además de entradas de la misma categoría, la última entrada publicada en las distintas categorías del blog.

Una manera atractiva de lograr ésto es como lo muestro en esta guía.

Menú que se pega al borde superior

En esta guía vemos cómo hacer con Divi un menú de categorías que se queda pegado al borde superior cuando hacemos scroll en la página.

De esta forma permitimos al lector consultar otros contenidos del blog con facilidad.

Llamada a la acción pegajosas

Las llamadas a la acción de barra lateral adhesivas son extremadamente efectivas para captar la atención de los lectores sin ser invasivos y en esta guía te muestro cómo agregarlas a tu plantilla de entradas de Divi.

Organización compleja de datos en entradas

En esta guía te muestro cómo organizar datos en entradas complejas como fichas técnicas, recetas de cocina, etc., utilizando los campos personalizados de WordPress.

Recetas de cocina

El diseño de un blog de recetas de cocina difiere mucho de un blog estándar ya que necesita mostrar la información organizada de una forma más compleja, para ofrecer una lectura rápida y más clara de los distintos bloques de contenido.

Botones sociales flotantes

En la guía de hoy te voy a mostrar cómo insertar una barra de botones sociales en las entradas de tu blog sin necesidad de instalar un plugin adicional, usando el Theme Builder de Divi.

Barra lateral oculta

Te voy a mostrar cómo hacer con Divi una barra lateral o sidebar que permanece oculto hasta que hacemos clic en una pestaña.

Galería de imágenes atractiva

En esta guía te muestro un complemento de Divi que te va a permitir hacer una galería mucho más atractiva de lo que nos permite el módulo de galería nativo.

 

Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Compartir
Publicado por
Jorge B.
Tags: Video Divi

Artículos recientes

Cómo Configurar Divi

Al momento de activar el constructor Divi se crea una nueva opción en el menú…

28/02/2023

¿Qué es Divi?

Divi es un constructor para WordPress que se instala como un si fuera un tema…

28/02/2023

Cómo Insertar una Caja de Autor en Entradas con Divi

En esta guía te muestro paso a paso cómo crear una caja con información del…

11/04/2022

Cómo Hacer un Encabezado Diferente para la Home con Divi

En esta guía te muestro cómo cambiar el encabezado de la página home para que…

04/04/2022

Cómo Diferenciar Entradas con Diseños Diferentes con Divi

En esta guía vamos a ver cómo asignar con Divi un diseño diferente a entradas…

28/03/2022

Cómo Hacer un CV Digital con WordPress y Divi

En esta guía te muestro paso a paso cómo crear un CV digital con WordPress…

24/03/2022