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 usando el generador visual, especialmente cuando usa los diseños prefabricados disponibles como punto de partida. Otra razón es la comodidad. 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. Además del contenido real de la publicación, todos los demás datos de la publicación se pueden actualizar sin tener que implementar el generador visual.
En este tutorial, le mostraré cómo crear un diseño de publicación dinámico 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 usar campos personalizados como contenido dinámico.
Empecemos.
Lo que necesitas para empezar
Para este tutorial, necesitará lo siguiente:
- Tema Divi
- Paquete de diseño de entrenador personal . Se puede acceder a este paquete de diseño desde Divi Builder. Usaremos el diseño de 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. Así que 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 generador visual todavía porque primero debemos personalizar la configuración de nuestras publicaciones 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 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: Actualización de la configuración de la página Divi, publicación de metadatos e imagen destacada
Configuración de la 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 debemos ocultar la visualización predeterminada del título de la publicación, ya que en su lugar usaremos el módulo de título de la publicación.
En la parte superior derecha de la página, busque el cuadro Configuración de la página Divi y actualice lo siguiente:
Diseño de página: Ancho completo
Mostrar título de publicación: Ocultar
Si no ve la configuración de la página Divi, probablemente no tenga activado Divi Builder, así que asegúrese de hacerlo primero.
Añadir categorías
En el cuadro de categorías, agregue una nueva categoría llamada «Entrenamiento de fuerza» y asegúrese de que sea la única categoría seleccionada.
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 de 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 la 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 un post. Pero hay muchas formas diferentes de usar campos personalizados para crear contenido dinámico para su sitio web. Siéntase libre de 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 los campos personalizados al crear 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á 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 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 algún motivo no se muestra, asegúrese de seleccionarlo en 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 identificas 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: carrera de 800 m
Nombre: duración
Valor: 30min
Nombre: levantamiento de pesas
Valor:
|
01
02
03
04
|
<ul><li>Squats: 10 reps at 60% max (4 sets)</li><li>Bench: 6 reps at 70% max (3 sets)</li></ul> |
Nombre: enfriamiento
Valor: carrera de 400 m
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 olvides actualizar tu publicación!
Parte 4: agregar contenido dinámico al diseño de la publicación usando el 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 hacer 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, vamos a reemplazar la imagen de fondo utilizada en la columna 1 de nuestra fila de sección de encabezado superior con la imagen destacada utilizada para la publicación. Para hacer esto, abra la configuración de fila y busque la configuración de fondo para la columna 1 y haga clic en la pestaña de imagen de fondo. Luego elimine la imagen que está allí actualmente y luego desplace 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. A continuación, 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 ahora es que la imagen de fondo se extrae de cualquier imagen configurada como la imagen destacada de la publicación. ¡Esta 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 Título de la publicación. También hay una opción para 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 su 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
Pase a la segunda sección del diseño. Luego, elimine 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, notará 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éguelos en la primera fila de la segunda sección. Luego actualice la medianil de la fila con 2. El nuevo tamaño debería parecerse a 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 filas y columnas 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 desplace 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.
A continuación, 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 a blanco.
A continuación, copie el módulo de texto y el divisor debajo de él 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 Recuento de comentarios de publicaciones. En la ventana emergente Recuento de comentarios publicados, 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 sigamos 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 del autor de la publicación y el nombre del autor. Por lo tanto, cambie el contenido dinámico del módulo de texto a Publicar autor. En la ventana emergente Autor de la publicación, actualice lo siguiente:
Antes: por:
Formato de nombre: Nombre y apellido
Encima del 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. Tal como 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 de diseño para subir la imagen y darle un ancho personalizado de la siguiente manera:
Ancho: 80 px
Margen personalizado (escritorio): -82 px Superior
Margen personalizado (tableta): 0 px Superior
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 usar 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 publicidad en la columna de la izquierda.
Vamos a usar módulos publicitarios para agregar el contenido dinámico para la sección de entrenamiento. Para comenzar, agregue un nuevo módulo de propaganda a 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 publicidad colocado 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 publicidad 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 publicitario 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 publicitario final con «Cool Down» como título y el campo personalizado «Cool Down» 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áginas predeterminado en WordPress y ese contenido se agregará automáticamente al diseño de su publicación sin tener que ingresar al generador Divi.
Puede usar contenido dinámico para mostrar las etiquetas de las publicaciones y crear una sección de «temas relacionados» que luzca atractiva 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 aplicar estilo al contenido, actualice la siguiente configuración de diseño:
Fuente del texto: Oswald
Peso de la fuente del texto: Seminegrita
Color del texto del texto: #ff4c00
Tamaño del texto del texto: 30px
Fuente del enlace: Oswald
Peso de la fuente del enlace: Seminegrita
Color del texto del enlace: #262d3f Tamaño del
texto del enlace: 50px
Espaciado entre letras del enlace: 2px
Altura de la línea del enlace : 1.6em
Aquí está el diseño final.
En este punto, estará bien equipado para agregar contenido dinámico y ajustar el diseño de su publicación con bastante facilidad, por lo que no entraré en muchos detalles sobre estos dos últimos elementos.
Para agregar una sección de biografía del autor en la parte inferior del contenido de su publicación, puede usar el contenido dinámico Autor de la publicación, Foto 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 usando el módulo de comentarios
Dado que estamos utilizando un diseño de publicación personalizado, es necesario utilizar 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 y haga coincidir los estilos y las fuentes de los botones con el diseño actual. Aquí hay un ejemplo de cómo se vería.
El diseño definitivo
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 futuras publicaciones
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 lo ayude a comprender algunas de las posibilidades y lo inspire a usar el contenido dinámico de formas nuevas e increíbles.
Espero escuchar de usted en los comentarios.
¡Salud!