Cómo utilizar la función de contenido dinámico de Divi para diseñar un diseño de publicación dinámica

La nueva función de contenido dinámico de Divi nos brinda la capacidad de crear diseños dinámicos para publicaciones de blog (y mucho más). Y hay buenas razones por las que puede considerar hacer esto. Una razón es el diseño. Puede diseñar algunos diseños de publicaciones increíbles con Divi utilizando el constructor visual, especialmente cuando usa los diseños prefabricados disponibles como punto de partida. Otra razón es la conveniencia. Una vez que el diseño de la publicación está diseñado con todos los elementos de contenido dinámico en su lugar (como categorías, imágenes destacadas, etiquetas de publicación, campos personalizados, etc.), el proceso de creación y actualización de publicaciones de blog se simplifica enormemente. Aparte del contenido real de la publicación, todos los demás datos de la publicación se pueden actualizar sin tener que implementar el constructor visual.

En este tutorial, le mostraré cómo crear un diseño de publicación dinámica en Divi. Al comenzar con un diseño prefabricado, lo guiaré a través del proceso de agregar contenido dinámico en todo el diseño y luego diseñar ese contenido para que coincida. Incluso presentaré una forma sencilla de utilizar campos personalizados como contenido dinámico.

Empecemos.

Vistazo

Lo que necesitas para empezar

Para este tutorial, necesitará lo siguiente:

• Tema Divi
• Paquete de diseño de entrenador personal. Este paquete de diseño es accesible desde Divi Builder. Usaremos el diseño de la página del servicio de entrenador personal para iniciar el diseño de nuestro diseño de publicación.

También le mostraré cómo aprovechar los campos personalizados para crear una sección de entrenamiento destacada utilizando la funcionalidad de tipo de publicación personalizada. Los campos personalizados están integrados en WordPress y no requieren complementos adicionales ni nada. Entonces ya tienes lo que necesitas.

Parte 1: Agregar el diseño prefabricado a la publicación

Para comenzar, continúe y cree una nueva publicación (no una página), asigne un título a su publicación y luego haga clic en el botón Usar Divi Builder. No implemente el constructor visual todavía porque primero necesitamos personalizar la configuración de nuestra publicación desde la pantalla predeterminada del editor de WordPress.

Dado que queremos agregar nuestro diseño prefabricado para extraer nuestras imágenes del diseño (lo necesitamos para nuestra imagen destacada). Haga clic en el botón Cargar diseño ubicado en el menú Divi Builder.

En la ventana emergente Cargar desde biblioteca, seleccione el diseño de la página del servicio de entrenador personal e impleméntelo en su publicación haciendo clic en el botón "Usar este diseño".

Luego publique su publicación para guardar su configuración.

Parte 2: Actualizar la configuración de la página Divi, publicar metadatos e imagen destacada

Configuración de página Divi

Es importante que actualicemos la configuración de la página Divi para que nuestro nuevo diseño se ajuste al diseño. También necesitamos ocultar la visualización predeterminada del título de la publicación, ya que usaremos el módulo de título de la publicación.

En la parte superior derecha de la página, ubique el cuadro Configuración de página Divi y actualice lo siguiente:

Diseño de página: ancho completo
Mostrar título de la publicación: Ocultar

Si no ve la configuración de la página Divi, probablemente no tenga el Divi Builder activado, así que asegúrese de hacerlo primero.

Agregar categorías

Debajo del cuadro de categorías, agregue una nueva categoría llamada "Entrenamiento de fuerza" y asegúrese de que sea la única categoría seleccionada.

Agregar etiquetas

En el cuadro de etiquetas, agregue las siguientes tres etiquetas: Velocidad, Entrenamiento y Entrenamientos.

Foto principal

A continuación, agregue una imagen destacada que coincida con la imagen de fondo utilizada en el encabezado del diseño como se muestra en la captura de pantalla a continuación.

Parte 3: Agregar campos personalizados para el contenido del entrenamiento dinámico

Los campos personalizados están integrados en WordPress. Permiten a los autores de publicaciones agregar información adicional (llamada metadatos) a una publicación además de los metadatos predeterminados como categorías, autor de la publicación, fecha de publicación, etc. En un nivel básico, los campos personalizados se pueden usar para mostrar el clima. o el estado de ánimo del autor al escribir una publicación. Pero hay muchas formas diferentes de utilizar campos personalizados para crear contenido dinámico para su sitio web. No dude en leer más sobre cómo agregar campos personalizados a su sitio web. Pero para este caso de uso, creo que comprenderá el concepto básico de campos personalizados creando algunos para usted.

Para este ejemplo, le mostraré cómo agregar algunos campos personalizados que se pueden usar para agregar contenido dinámico a su publicación. El contenido dinámico de este ejemplo es un entrenamiento destacado. Una vez que los campos personalizados estén en su lugar, todo lo que el autor de la publicación tendría que hacer es completar los valores de los campos personalizados y el contenido se actualizará (dinámicamente) en la publicación sin tener que cargar el Visual Builder.

Para hacer esto, desplácese hacia abajo hasta la parte inferior de la publicación y busque el cuadro Campos personalizados. Si por alguna razón no se muestra, asegúrese de seleccionarlo de las opciones de pantalla en la parte superior de la página.

Luego, haga clic en el cuadro desplegable Campos personalizados (si está contraído) para agregar un nuevo campo personalizado e ingrese lo siguiente:

Nombre: título del entrenamiento
Valor: Entrenamiento destacado

Luego haga clic en el botón Agregar campo personalizado.

El nombre es cómo identifica el campo personalizado en Divi. El valor es el contenido que se agregará dinámicamente a la página utilizando la función de contenido dinámico de Divi (más sobre esto más adelante).

Continúe con este proceso para agregar los siguientes campos personalizados a su sitio web.

Nombre: calentamiento
Valor: 800 m de carrera

Nombre: duración
Valor: 30min

Nombre: levantamiento de pesas
Valor:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

Nombre: enfriar
Valor: 400 m de carrera

Nota: Estos campos personalizados se agregarán al tema Divi y estarán disponibles en cualquier publicación nueva que cree en el futuro. En otras palabras, no se limita a esta única publicación.

¡No olvide actualizar su publicación!

Parte 4: Agregar contenido dinámico al diseño de la publicación con Visual Builder

Ahora que tenemos nuestra configuración de publicación y metadatos en su lugar, es hora de comenzar a agregar contenido dinámico a nuestra publicación. Para hacer esto, implemente Visual Builder.

Para que las cosas sean un poco más fáciles de localizar y editar para este diseño de diseño avanzado, abra el menú de configuración y configure el Modo de interacción predeterminado del constructor en Modo clic.

En la sección de encabezado, elimine el módulo de botones (no lo necesitamos).

Reemplazo de la imagen de fondo con el contenido dinámico de la imagen destacada

Para nuestra primera pieza de contenido dinámico, reemplazaremos la imagen de fondo utilizada en la columna 1 de nuestra fila de la sección de encabezado superior con la imagen destacada utilizada para la publicación. Para hacer esto, abra la configuración de la fila y busque la configuración de fondo para la columna 1 y haga clic en la pestaña de la imagen de fondo. Luego, elimine la imagen que está allí actualmente y luego coloque el cursor sobre el cuadro de vista previa de la imagen de fondo. Verá el icono de contenido dinámico en la parte superior derecha del cuadro. Haga clic en él para abrir las opciones de contenido dinámico. Luego, seleccione la opción de contenido dinámico Imagen destacada de la lista.

Su diseño se verá exactamente igual ya que estamos usando la misma imagen. La única diferencia es que ahora la imagen de fondo se extrae de cualquier imagen que esté configurada como imagen destacada de la publicación. ¡Ésta es la belleza del contenido dinámico!

Continuemos.

Agregar el título de la publicación con un módulo de título de la publicación

Debajo del módulo de texto que actualmente contiene el título de la página, agregue un módulo de Título de la publicación. También hay una opción para usar agregar el título de la publicación a un módulo usando contenido dinámico, pero dado que el Módulo de título de la publicación ya funciona como contenido dinámico y conserva la etiqueta de encabezado h1 para SEO, es perfecto para usarlo para el diseño de su publicación personalizada .

Luego actualice la configuración del módulo de título de la publicación de la siguiente manera:

Mostrar meta: NO
Mostrar imagen destacada: NO

Ahora vaya al módulo de texto de arriba y copie los estilos de encabezado h2 haciendo clic derecho en la pestaña h2 y seleccionando la opción de esta lista.

Luego pegue los estilos de encabezado h2 en el módulo de título de la publicación haciendo clic derecho en el módulo y seleccionando la opción de la lista.

Después de eso, regrese nuevamente al módulo de texto anterior y copie los estilos de espaciado y péguelos en el módulo de título de la publicación. Luego, cambie el color del texto del título de la publicación a claro para obtener el color blanco.

Ahora el título de la publicación debe coincidir con el diseño del título del diseño original.

Ahora puede eliminar el módulo de texto que contiene el encabezado original.

Uso de contenido dinámico para crear una fila de metadatos

Continúe con la segunda sección del diseño. Luego, saque el relleno superior de la sección arrastrándolo en el generador visual o configurándolo en 0px en la configuración de la sección.

En la primera fila de la segunda sección del diseño, verá un módulo de texto (tiene el contenido "Acerca del entrenamiento personal") con un divisor debajo. Aquí es donde vamos a construir nuestra fila personalizada de metadatos usando contenido dinámico.

Queremos que el tamaño de esta fila coincida con el tamaño de la fila en la sección superior. Para hacer esto, abra la configuración de fila de la fila en la sección superior y copie los estilos de tamaño. Luego pégalos en la primera fila de la segunda sección. Luego actualice el medianil de fila con a 2. El nuevo tamaño debería verse como la siguiente captura de pantalla.

También deberá agregar un espaciado personalizado de la siguiente manera:

Relleno personalizado: 1% a la izquierda, 1% a la derecha

Luego, guarde la configuración de la fila.

Ahora actualice la estructura de la columna de la fila a un diseño de cuatro columnas.

Ahora estamos listos para agregar nuestro contenido dinámico. Para hacer esto, abra la configuración del módulo de texto ahora en la columna del extremo izquierdo y coloque el cursor sobre el cuadro de contenido. Verá el icono de contenido dinámico en la parte superior derecha del cuadro. Haga clic en él para abrir las opciones de contenido dinámico.

Luego seleccione la opción: Publicar fecha de publicación.

Luego, cambie el formato de fecha en consecuencia.

Esto agregará la fecha de publicación de la publicación como contenido dinámico.

Para diseñar el módulo de texto con el contenido de fecha dinámica, copie los estilos de módulo del módulo de texto en la columna izquierda de la fila directamente debajo.

Luego, pegue los estilos del módulo en el módulo de texto con el contenido de la fecha dinámica y cambie el color del texto del texto a blanco.

A continuación, copie el módulo de texto y el divisor que se encuentra debajo y péguelo en la columna 2. Luego, cambie el contenido dinámico a Categorías de publicaciones.

Deberá actualizar el color del texto del enlace a blanco para que coincida con el diseño del diseño.

Ahora copie el módulo de texto de categorías de publicaciones con el divisor en la columna 3. Luego, cambie el contenido dinámico a Contador de comentarios de publicaciones. En la ventana emergente Contador de comentarios, ingrese lo siguiente en el cuadro de entrada Antes:

Antes: Comentarios:

Los cuadros de entrada antes y después disponibles en las ventanas emergentes de contenido dinámico son una opción conveniente para agregar texto antes y / o después del contenido dinámico. Esto es útil para agregar etiquetas, símbolos de precios y otros elementos cuando sea necesario.

Ahora continuemos agregando nuestro contenido dinámico. Copie el módulo de texto y el divisor en la columna 3 y péguelo en la columna 4. Esta última columna contendrá la miniatura y el nombre del autor de nuestra publicación. Por lo tanto, cambie el contenido dinámico del módulo de texto a Autor de la publicación. En la ventana emergente Autor de la publicación, actualice lo siguiente:

Antes: por:
Formato de nombre: nombre y apellido

Sobre el módulo de texto con el contenido del autor de la publicación, agregue un nuevo módulo de imagen. Abra la configuración del módulo de imagen y elimine la imagen predeterminada. Al igual que lo hemos estado haciendo, haga clic en el icono de contenido dinámico en el cuadro de vista previa de la imagen y agregue la imagen de perfil del autor de la publicación como contenido dinámico.

Luego, ajuste la configuración del diseño para levantar la imagen y darle un ancho personalizado de la siguiente manera:

Ancho: 80px
Margen personalizado (escritorio): -82px superior
Margen personalizado (tableta): 0px arriba

Nota: El nombre del autor de la publicación mostrará el autor que se ha asignado a la publicación actual. Y la imagen de perfil del autor de la publicación es lo que se haya configurado para el perfil de usuario en el panel de WordPress en Usuarios> Su perfil.

Parte 5: Agregar los campos personalizados como contenido dinámico para agregar un entrenamiento destacado a la publicación

¿Recuerda cómo agregamos esos campos personalizados anteriormente en el tutorial? Ahora vamos a utilizar esos campos personalizados como contenido para un entrenamiento destacado en nuestra publicación.

Para agregar nuestro contenido dinámico de entrenamiento destacado, primero duplique la fila de dos columnas directamente debajo de la fila de cuatro columnas con todos nuestros metadatos dinámicos. Luego, elimine los módulos en ambas columnas y agregue un módulo de propaganda en la columna de la izquierda.

Usaremos módulos de propaganda para agregar el contenido dinámico para la sección de entrenamiento. Para comenzar, agregue un nuevo módulo de propaganda en la columna de la izquierda.

Para el título, agregue el campo personalizado llamado "Título del entrenamiento" como contenido dinámico. Luego, para el contenido de la propaganda, agregue el campo personalizado llamado "Duración" como contenido dinámico.

Para mantener las cosas en marcha, no voy a repasar el estilo de estos módulos en detalle. Sin embargo, deberá agregar un ícono de propaganda ubicado a la izquierda del título y actualizar el diseño para que coincida con el diseño.

A continuación, agregue un segundo módulo de propaganda a continuación. Introduzca el texto "Calentamiento" como título. Y luego agregue el campo personalizado llamado "Calentamiento" como contenido dinámico.

Agregue un tercer módulo de propaganda debajo de ese, con "Levantamiento de pesas" como título y el campo personalizado "Levantamiento de pesas" como contenido dinámico. Dado que estamos usando html para este valor de campo personalizado, deberá habilitar html sin procesar en la ventana emergente de levantamiento de pesas.

Agregue un módulo de propaganda final con "Enfriamiento" como título y el campo personalizado "Enfriamiento" como contenido dinámico.

¡Ahora tienes una sección dinámica para agregar entrenamientos a tu publicación!

Todo lo que necesita hacer es actualizar los valores de los campos personalizados desde el editor de página predeterminado en WordPress y ese contenido se agregará automáticamente al diseño de su publicación sin tener que ingresar al generador Divi.

Parte 6: Diseño de una sección de "Temas relacionados" mediante el uso de etiquetas de publicación Contenido dinámico

Puede utilizar contenido dinámico para mostrar las etiquetas de las publicaciones y crear una sección de "temas relacionados" de aspecto atractivo para su publicación. Para hacer esto, cree una nueva fila de una columna y agregue un módulo de texto a la fila.

Luego, para el cuadro de contenido, agregue Etiquetas de publicación como contenido dinámico. Luego actualice las siguientes opciones de Etiquetas de publicación:

Antes: Temas relacionados:
Separador de etiquetas: //

Nota: Puede usar casi cualquier conjunto de caracteres que desee para el separador de etiquetas, así que siéntase libre de experimentar con diferentes para diseños creativos.

Para diseñar el contenido, actualice la siguiente configuración de diseño:

Fuente de texto: Oswald
Peso de la fuente del texto: Semi negrita
Color del texto del texto: # ff4c00
Tamaño del texto del texto: 30px
Fuente del enlace: Oswald
Peso de la fuente del enlace: Semi negrita
Color del texto del enlace: # 262d3f
Tamaño del texto del enlace: 50 px
Espaciado de letras de enlace: 2px
Altura de la línea de enlace: 1.6em

Aquí está el diseño final.

Parte 7: Agregar una biografía de autor y una sección de comentarios

En este punto, estará bien equipado para agregar contenido dinámico y ajustar el diseño del diseño de su publicación con bastante facilidad, por lo que no entraré en muchos detalles sobre estos dos últimos elementos.

Agregar una sección de biografía de autor mediante contenido dinámico

Para agregar una sección de biografía del autor en la parte inferior del contenido de la publicación, puede usar el contenido dinámico Autor de la publicación, Imagen de perfil del autor de la publicación y Biografía del autor. Como puede ver en la captura de pantalla a continuación, creé una fila de columna de 1/4 3/4. Luego agregué la foto de perfil del autor de la publicación a la columna de la izquierda. En la columna de la derecha, agregué el autor de la publicación con la biografía del autor debajo. También agregué el contenido dinámico de la imagen destacada como imagen de fondo para la sección (y una superposición de degradado). Aquí hay un ejemplo de cómo se vería.

Agregar una sección de comentarios mediante el módulo de comentarios

Dado que estamos usando un diseño de publicación personalizado, es conveniente usar un módulo de comentarios para que podamos hacer coincidir el diseño de la sección de comentarios con el diseño. Simplemente agregue el módulo de comentarios a una nueva fila de sección que haga coincidir los estilos de los botones y las fuentes con el diseño actual. Aquí hay un ejemplo de cómo se vería.

El diseño final

Aquí está el diseño final de toda la publicación una vez que se haya ajustado todo el diseño.

Actualizar el contenido de la publicación y guardar el diseño para publicaciones futuras

Dado que estamos utilizando Divi Builder para crear el diseño de la publicación, aún deberá actualizar el contenido de la publicación real para su publicación utilizando los módulos Divi. Pero con todo lo demás ahora dinámico, esto hace que el proceso sea mucho más fácil en el futuro. Deberá guardar el diseño de la publicación en su biblioteca para que, al crear una nueva publicación, todo lo que tenga que hacer sea agregar el diseño guardado a su publicación y actualizar el contenido de la publicación.

Pensamientos finales

El contenido dinámico de Divi es una característica poderosa que hace que agregar y actualizar datos de publicaciones sea mucho más fácil. Entonces, si está buscando diseñar un diseño personalizado para las publicaciones de su blog (u otros tipos de publicaciones personalizadas como Proyectos) utilizando Divi Builder, el contenido dinámico es el camino a seguir. Por supuesto, el contenido dinámico no se limita a las publicaciones. Puede aprovechar el contenido dinámico y los campos personalizados en todo su sitio web. Espero que esta publicación te ayude a comprender algunas de las posibilidades y te inspire a usar contenido dinámico de maneras nuevas e increíbles.

Espero tener noticias tuyas en los comentarios.

¡Salud!