El uso de contenido dinámico en Divi puede ser extremadamente útil para inyectar datos dinámicos del producto 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 del 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 su página de producto Divi de varias maneras creativas.

Empecemos.

Cómo usar las entradas antes y después para contenido dinámico

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 del 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 icono de engranaje en el elemento de título de 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 un contenido dinámico en línea que cambiará cada vez que el producto (o 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 ser utilizado en otros productos, el módulo funcionará a la perfección para incorporar el nuevo título del 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.

Crear 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 la página de un producto para incluir la descripción del producto como contenido de alternancia.

Aquí te explicamos cómo hacerlo.

Implemente Divi Builder en el front-end de la página del producto WooCommerce para un producto que haya creado. Luego, agregue un módulo de alternar debajo del módulo predeterminado de descripción de Woo.

En la ventana emergente Configuración de alternancia, 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 anterior y posterior de la siguiente manera:

Antes: «Vas a amar 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 Divi integradas. Para este ejemplo, demos un fondo oscuro y personalicemos un poco el texto. Actualice la siguiente configuración para el módulo de alternar:

Color de fondo: # 333333
Color del texto del título: # ff9375
Peso de la fuente del título: Semi negrita
Color del texto del cuerpo: #ffffff

Luego, elimine el módulo predeterminado de Descripción de Woo sobre el Toggle que acaba de crear, ya que la descripción ahora está dentro del Toggle.

Ahora tiene una palanca que tiene un título personalizado con contenido dinámico en línea que tira del 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 una 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.3em 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.

Personalizar el 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 de producto predeterminado, agregue un módulo de texto con el Precio de producto como contenido dinámico para el contenido del cuerpo.

Luego actualice el contenido anterior y posterior 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 formato 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 formato. 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 Nuevo precio del producto a un módulo de texto. Luego, podemos agregar la etiqueta «Precio:» al elemento anterior y envolverlo en una etiqueta con estilo en línea para que la etiqueta tenga un color diferente al precio.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!