El uso de contenido dinámico en Divi puede ser extremadamente útil para inyectar datos de productos dinámicos en toda la página de su producto. Esto le permite crear diseños de página de productos dinámicos con facilidad. La función de contenido dinámico de Divi también nos permite agregar contenido dinámico en línea agregando bloques de contenido antes y después del elemento de contenido dinámico. Por ejemplo, podemos agregar la etiqueta «Precio:» antes del elemento de contenido dinámico Precio del producto o incluso personalizar el título de un formulario de contacto para incluir el Título del producto para una llamada a la acción más específica.
En este tutorial, le mostraremos cómo agregar contenido dinámico en línea a la página de su producto Divi de algunas maneras creativas.
Empecemos.
Suscríbete a nuestro canal de Youtube
El contenido dinámico se puede agregar a cualquier contenido dentro de los módulos Divi. Para agregar contenido dinámico a un módulo Divi, abra la configuración del módulo, desplace el cursor sobre el campo de entrada de contenido y seleccione el icono de contenido dinámico que aparece.
Luego seleccione el elemento de contenido dinámico de la lista desplegable. Para esta ilustración, el título del producto se agrega al contenido del cuerpo de un módulo de texto en una página de producto.
Ahora el título del producto se mostrará dinámicamente como el contenido del módulo de texto. Para acceder a las opciones de entrada antes y después, haga clic en el ícono de ajustes en el elemento de título del producto de contenido dinámico.
Allí tenemos la opción de agregar contenido antes y/o después del contenido dinámico (que en este caso es el título del producto). Para esta ilustración, se agrega texto antes y después del título del producto para crear una oración.
La oración ahora contiene una pieza de contenido dinámico en línea que cambiará cada vez que el producto (o el título del producto) cambie en el backend. Y si está utilizando esta técnica para crear un diseño de página de producto para usar en otros productos, el módulo funcionará perfectamente para incorporar el título del nuevo producto dentro de la oración.
Ahora que comprende la idea básica, repasemos algunos ejemplos específicos de cómo puede personalizar la página de su producto con contenido dinámico en línea.
Creación de un título de alternancia con el título del producto como contenido dinámico en línea
Para este primer ejemplo, vamos a crear un módulo de alternancia personalizado con contenido dinámico en línea para el título. Lo agregaremos a una página de producto para incluir la descripción del producto como contenido de alternancia.
Aquí está cómo hacerlo.
Implemente Divi Builder en la parte frontal de la página del producto WooCommerce para un producto que haya creado. Luego agregue un módulo Toggle debajo del módulo Woo Description predeterminado.
En la ventana emergente Alternar configuración, agregue el Título del producto como contenido dinámico para el Título. Y agregue la descripción del producto como contenido dinámico para el cuerpo.
Luego haga clic para editar el contenido dinámico del título del producto.
Luego actualice el contenido de antes y después de la siguiente manera:
Antes: “Te va a encantar el”
Después: “!”
Asegúrese de agregar un espacio al final del contenido en la entrada Antes para que haya un espacio antes del título del Producto en línea.
¡Y no lo olvides! Puede diseñar todo este título utilizando las opciones de diseño integradas de Divi. Para este ejemplo, vamos a darle un fondo oscuro y personalizar un poco el texto. Actualice la siguiente configuración para el módulo de alternancia:
Color de fondo: #333333
Color del texto del título: #ff9375
Peso de la fuente del título: Semi negrita
Color del cuerpo del texto: #ffffff
Luego, elimine el módulo Woo Description predeterminado sobre el Toggle que acaba de crear, ya que la descripción ahora está dentro del Toggle.
Ahora tiene un conmutador que tiene un título personalizado con contenido dinámico en línea que atrae el título del producto.
Parte 2: Formulario de contacto con contenido dinámico en línea
Para el siguiente ejemplo, podemos usar el mismo proceso para personalizar el título de un formulario de contacto para incluir el título del producto como contenido dinámico en línea para una llamada a la acción atractiva.
Agregue un formulario de contacto a la página del producto. Luego agregue el Título del producto como contenido dinámico para el Título del formulario de contacto.
Haga clic en el ícono de ajustes para editar el contenido dinámico del título del producto y actualice el contenido anterior y posterior de la siguiente manera:
Antes: “¿Tiene alguna pregunta sobre el ”
Después: “? ¡Danos un grito!”
Luego podemos personalizar el formulario de contacto y el texto del título de la siguiente manera:
Color de fondo: #333333
Peso de la fuente del título: Semi negrita
Color del texto del título: #ffffff
Altura de la línea del título: 1,3 em
Relleno: 3 % superior, 3 % inferior, 3 % izquierda, 3 % derecha
Ahora tiene un formulario de contacto con un título personalizado con contenido dinámico en línea que mejora la llamada a la acción al agregar el título del producto dentro del título.
Personalización del precio del producto con contenido dinámico en línea
En este último ejemplo, agregaremos contenido dinámico en línea al elemento de precio del producto para la página del producto.
En el módulo de precio del producto predeterminado, agregue un módulo de texto con el precio del producto como contenido dinámico para el contenido del cuerpo.
Luego actualice el contenido de antes y después de la siguiente manera:
Antes: “Precio: ”
Después: ” (más envío GRATIS)”
Ahora tiene un precio de producto personalizado con contenido dinámico en línea.
Habilitación de HTML sin procesar para contenido dinámico en línea
Algunos elementos dinámicos (como el precio del producto nuevo y el precio del producto anterior) tendrán la opción de habilitar html sin procesar. Esto le permitirá agregar código HTML a las entradas antes y después.
Por ejemplo, podríamos agregar el elemento de contenido dinámico Precio de producto nuevo a un módulo de texto. Luego, podemos agregar la etiqueta «Precio:» al elemento anterior y envolverlo en una etiqueta con un estilo en línea para que la etiqueta tenga un color diferente al del precio.
Pensamientos finales
Si no está familiarizado con las capacidades de contenido dinámico integradas de Divi, esperamos que este artículo lo inspire a explorar agregar contenido dinámico en línea único para mejorar las páginas de sus productos.
Espero escuchar de usted en los comentarios.
¡Salud!