Cómo personalizar una página de producto Divi con contenido dinámico en línea


El uso de contenido dinámico en Divi puede ser extremadamente útil para inyectar datos dinámicos del producto en toda la página del 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 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 parte de contenido dinámico en línea que cambiará cada vez que el producto (o título del producto) cambie en el back-end. 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 Toggle debajo del módulo predeterminado de Descripción 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, vamos a darle un fondo oscuro y personalizar 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 de Descripción Woo predeterminado 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 Bold
Color del texto del título: #ffffff
Altura de la línea de 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 el llamado 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 un etiqueta con estilo en línea para hacer que el labe tenga un color diferente al precio.

Pensamientos finales

Si no está familiarizado con las capacidades integradas de contenido dinámico de Divi, es de esperar que este artículo lo inspire a explorar la adición de contenido dinámico en línea único para mejorar las páginas de sus productos.

Espero tener noticias suyas en los comentarios.

¡Salud!