Creación de una cuadrícula dinámica de beneficios de productos para su plantilla de página de productos con Divi y ACF

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de la página del producto GRATIS

Para poner sus manos en la plantilla de página de producto gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

1. Instale el complemento ACF y agregue el grupo de campos de beneficios del producto

Instalar el complemento de campos personalizados avanzados

Para mostrar los diferentes beneficios del producto dentro del backend de nuestros productos, usaremos el complemento gratuito Advanced Custom Fields. Vaya a su backend de WordPress > Complementos > Agregar nuevo > Busque el complemento ACF > Instalar > Activar .

Vaya a Campos personalizados y agregue un nuevo grupo de campos

Una vez que haya instalado y activado el complemento ACF, podrá navegar a sus Campos personalizados y agregar un nuevo grupo de campos.

Configuración del grupo de campos

Asigne un título a su nuevo grupo de campos y permita que aparezca solo en las páginas de productos.

• ‘Tipo de publicación’ es igual a ‘Producto’

Agregar primer campo

Continúe agregando un nuevo campo para el título de su primer beneficio de producto.

• Etiqueta de campo: Título de beneficio 1
• Tipo de campo: Texto

Repita el paso para los campos restantes

Haga lo mismo con los demás beneficios del producto y sus descripciones. Todos estos campos necesitan que se les asigne el tipo de campo ‘Texto’.

• Beneficio Título 1
• Beneficio Descripción 1
• Beneficio Título 2
• Beneficio Descripción 2
• Beneficio Título 3
• Beneficio Descripción 3
• Beneficio Título 4
• Beneficio Descripción 4

2. Agregar beneficios del producto a los productos

Abrir o agregar nuevo producto

Una vez que se hayan creado su grupo de campo y sus campos, puede agregar los beneficios del producto a sus productos a nivel individual. Abra un producto de su elección o cree uno nuevo.

Complete los campos de beneficios del producto

Y complete los beneficios del producto.

3. Cree una plantilla de página de producto dentro de Divi Theme Builder

Vaya a Divi Theme Builder y agregue una nueva plantilla

¡Es hora de empezar con Divi! Para crear una nueva plantilla, navegue hasta Divi Theme Builder y haga clic en ‘Agregar nueva plantilla’.

Usar plantilla en todos los productos

Usamos esta plantilla en todos los productos, pero no dude en seleccionar productos con una categoría o etiqueta específica.

Introduzca el editor de plantillas del cuerpo de la plantilla

Luego, ingrese el cuerpo de la plantilla haciendo clic en ‘Agregar cuerpo personalizado’ y seleccionando ‘Crear cuerpo personalizado’.

Modificar Sección #1

Color de fondo

Una vez dentro del editor de plantillas, verás una sección. Abra esa sección y cambie el color de fondo a negro.

• Color de fondo: #000000

Espaciado

Pase a la pestaña de diseño de la sección y agregue un relleno superior e inferior personalizado.

• Relleno superior: 10px
• Relleno inferior: 10px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y realice algunos cambios en la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 90%
• Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

• Relleno superior: 0px
• Relleno inferior: 0px

Agregue el módulo de notificación de Woo Cart a la columna

Contenido dinámico

El único módulo que necesitamos en esta fila y sección es un módulo de notificación de Woo Cart. Asegúrese de que ‘Este producto’ esté seleccionado en el área de contenido dinámico.

• Producto: Este Producto

Color de fondo

Luego, abra la configuración del módulo y use un color de fondo completamente transparente.

• Color de fondo: rgba(0,0,0,0)

Configuración de texto

Pase a la pestaña de diseño y cambie la fuente del texto en la configuración de texto a continuación.

• Fuente del texto: Karla

Configuración de botones

Complete la configuración del módulo diseñando el botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 20px
• Color del texto del botón: #000000
• Color de fondo del botón: #ffd623
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px

• Fuente del botón: Oswald
• Estilo de fuente del botón: Mayúsculas

• Relleno superior: 20px
• Relleno inferior: 20px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Añadir Sección #2

Fondo degradado

Agregue otra sección regular justo debajo de la anterior, abra la configuración de la sección y use un fondo degradado receptivo.

• Color 1: #000000
• Color 2: #ffffff
• Posición de salida:
  
  • Escritorio: 30%
  • Tableta: 57%
  • Teléfono: 54%
• Posición final:
  
  • Escritorio: 30%
  • Tableta: 57%
  • Teléfono: 54%

Espaciado

Pase a la pestaña de diseño de la sección y agregue un poco de relleno superior.

• Relleno superior: 150px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 1
• Ancho: 95%
• Ancho máximo: 2560px
• Alineación de filas: Centro

Espaciado

También eliminaremos el relleno superior predeterminado de la fila.

• Relleno superior: 0px

Elemento principal

Y para centrar el contenido de la columna en el escritorio, usaremos dos líneas de código CSS en el elemento principal de la fila.

Escritorio:

Tableta y teléfono:

Agregue el módulo de imágenes de Woo a la columna 1

Contenido dinámico

Es hora de agregar módulos, comenzando con un módulo de imágenes de Woo en la columna 1. Asegúrese de que ‘Este producto’ esté seleccionado en el área de contenido dinámico.

• Producto: Este Producto

Efecto de desplazamiento de movimiento vertical

Estamos agregando un movimiento sutil a la imagen usando el efecto de desplazamiento de movimiento horizontal en la pestaña avanzada.

• Habilitar movimiento vertical: Sí
• Compensación inicial:
  
  • Escritorio: -4
  • Tableta y teléfono: 0
• Desplazamiento medio: 0
• Compensación final: 0
• Disparador de efecto de movimiento: medio del elemento

Agregue el módulo de título de Woo a la columna 2

Contenido dinámico

En la columna 2, el primer módulo que necesitamos es un módulo de título de Woo. Asegúrese de que ‘Este producto’ esté seleccionado en el área de contenido dinámico.

• Producto: Este Producto

Configuración del texto del título

Luego, ve a la pestaña de diseño y dale estilo al texto del título de la siguiente manera:

• Fuente del título: Oswald
• Estilo de fuente del título: Mayúsculas
• Color del texto del título: #ffd623
• Tamaño del texto del título: 80px

Espaciado

Complete el módulo de título de Woo agregando un margen izquierdo y derecho.

• Margen Izquierdo: 5%
• Margen Derecho: 5%

Agregue el módulo de descripción de Woo a la columna 2

Contenido dinámico

Pasemos al siguiente módulo, que es un módulo de descripción de Woo. Estamos usando el siguiente contenido dinámico para ello:

• Producto: Este Producto
• Tipo de descripción: Descripción breve

Configuración de texto

Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente del texto: Karla
• Color del texto: #dbdbdb
• Tamaño del texto: 17 px (computadora de escritorio y tableta), 15 px (teléfono)
• Altura de línea de texto: 1,9 em

Dimensionamiento

Luego, modifique el ancho en diferentes tamaños de pantalla.

• Ancho: 59 % (escritorio), 82 % (tableta y teléfono)

Espaciado

Complete el módulo de descripción de Woo agregando algunos valores de margen personalizados en la configuración de espaciado.

• Margen superior: 50px
• Margen inferior: 100px
• Margen Izquierdo: 5%
• Margen Derecho: 5%

Agregue el módulo Blurb a la columna 2

Contenido dinámico

Para mostrar los beneficios del producto que agregamos en la primera parte de este tutorial, usaremos los módulos de Blurb. Agregue un primer módulo de Blurb y use el contenido dinámico del primer beneficio del producto para el título y el cuerpo.

• Título: Beneficio Título 1
• Cuerpo: Beneficio Descripción 1

Cargar imagen

Cargue una imagen o use un icono de su elección a continuación. Puede encontrar los que hemos usado a lo largo de este tutorial en la carpeta de descarga que pudo descargar al principio de este tutorial.

Configuración de imagen/icono

Pase a la pestaña de diseño del módulo y cambie la configuración de la imagen/icono de la siguiente manera:

• Colocación de imagen/icono: Arriba
• Alineación de imagen/icono: Izquierda

Configuración del texto del título

A continuación, modificaremos la configuración del texto del título.

• Fuente del título: Oswald
• Estilo de fuente del título: Mayúsculas
• Tamaño del texto del título: 25px

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

• Fuente del cuerpo: Karla
• Tamaño del texto del cuerpo: 17 px (computadora de escritorio y tableta), 15 px (teléfono)
• Altura de la línea del cuerpo: 1,9 em

Dimensionamiento

Luego, vaya a la configuración de tamaño y modifique los anchos. Es importante usar un ancho principal de menos del 50 %, esto nos permitirá mostrar dos módulos de Blurb uno al lado del otro en los próximos pasos.

• Ancho de la imagen: 25%
• Ancho: 49%

Espaciado

También agregaremos algunos espacios en blanco alrededor del módulo Blurb mediante el uso de valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 8%
• Acolchado inferior: 8%
• Relleno izquierdo: 8 % (computadora de escritorio y tableta), 2 % (teléfono)
• Relleno derecho: 8 % (computadora de escritorio y tableta) 2 % (teléfono)

Elemento principal

Ahora, para asegurarse de que dos módulos de Blurb aparezcan uno al lado del otro, hay dos pasos importantes. El primero es asegurarse de que el ancho del módulo sea inferior al 50% (como hicimos en uno de los pasos anteriores). El segundo está usando una propiedad de visualización en línea. Agregaremos esta propiedad CSS al elemento principal del módulo Blurb en la pestaña avanzada.

Clonar el módulo Blurb tres veces

Una vez que haya completado el primer módulo de Blurb, puede clonarlo tres veces. Notará automáticamente que los módulos de Blurb aparecen en una cuadrícula.

Modificar imágenes del módulo de Blurb

Cambie la imagen en cada Módulo de Blurb duplicado. Puede encontrarlos en la carpeta de descarga que pudo descargar al comienzo de esta publicación.

Modificar el contenido dinámico del módulo Blurb

Cambie también el contenido dinámico de cada módulo de Blurb duplicado.

• Título: Título de beneficio (2,3 o 4)
• Cuerpo: Descripción del beneficio (2,3 o 4)

Agregue bordes a los módulos de Blurb individualmente

Configuración de borde del Módulo 1 de Blurb

Ahora, para completar nuestro diseño de cuadrícula, agregaremos algunos bordes a los módulos de Blurb en un nivel individual. Abra el primer módulo de Blurb y use un borde derecho.

• Ancho del borde derecho: 1px
• Color del borde derecho: #ffd623

Agregue también un borde inferior al primer módulo de Blurb.

• Ancho del borde inferior: 1px
• Color del borde inferior: #000000

Configuración de bordes del Módulo 2 de Blurb

Luego, abra el segundo módulo de Blurb y use un borde inferior.

• Ancho del borde inferior: 1px
• Color del borde inferior: #000000

Configuración de borde del Módulo 3 de Blurb

Complete el diseño de la cuadrícula agregando un borde derecho al tercer módulo de Blurb.

• Ancho del borde derecho: 1px
• Color del borde derecho: #ffd623

Agregar Woo Agregar al módulo del carrito a la columna 2

Contenido dinámico

El último módulo que necesitamos en nuestro diseño es un módulo Woo Add to Cart. Asegúrese de que ‘Este producto’ esté seleccionado en el área de contenido dinámico.

• Producto: Este Producto

Configuración de campos

Pase a la pestaña de diseño a continuación y cambie la configuración de los campos.

• Color de fondo de los campos: #ffffff
• Color del texto del campo: #000000

• Campos Esquinas redondeadas: 0px (Todas las esquinas)
• Ancho del borde inferior de los campos: 1px
• Color del borde inferior de los campos: #000000

Configuración de botones

Luego, diseñe el botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 20px
• Color del texto del botón: #000000
• Color de fondo del botón: #ffd623
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px

• Fuente del botón: Oswald
• Estilo de fuente del botón: Mayúsculas

• Relleno superior: 20px
• Relleno inferior: 20px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Espaciado

Y complete la configuración del módulo agregando valores de margen personalizados.

• Margen superior: 100px
• Margen Izquierdo: 5%

3. Guarde los cambios del generador de temas y obtenga una vista previa del resultado

Una vez que haya completado el diseño de la plantilla de la página del producto, puede guardar todos los cambios de Theme Builder y ver el resultado de sus productos.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con su próxima plantilla de página de producto Divi. Más específicamente, le mostramos cómo incluir una tabla dinámica de beneficios de productos para agregar un incentivo adicional a su página de productos. Hemos creado este tutorial usando Divi en combinación con el complemento Advanced Custom Fields. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.