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

La forma en que diseña la página de su producto tiene un impacto inmediato en el comportamiento de los visitantes. Un diseño de página de producto bien diseñado y personalizado puede hacer que los visitantes sean más fáciles de decidir si quieren comprar su producto. Si está buscando una forma de hacer de su producto su producto, le gustará esta publicación. Le mostraremos cómo incluir una cuadrícula dinámica para el producto en su diseño utilizando el complemento Divin y Advanced Custom Fields. Comenzaremos creando un grupo de campo para beneficios. Luego, completaremos los campos personalizados en nuestra página de productos e incluiremos el contenido dinámico en nuestra plantilla de página del producto. ¡Podrá descargar la plantilla del producto de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la plantilla de producto de forma gratuita para poner su mano en la plantilla de página de producto gratuita, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Instale el complemento ACF y agregue el grupo de campo para obtener la ventaja del producto Instale el complemento avanzado de campos personalizados para mostrar los diversos beneficios del producto en el fondo de nuestros productos, utilizaremos el complemento de campos avanzados gratuitos. Vaya a su backend WordPress> Pluginuri> New Add> Search Plugin ACF> Instalación> Activación.
Vaya a los campos personalizados y agregue un nuevo grupo de campo después de haber instalado y activado el complemento ACF, podrá explorar sus campos personalizados y puede agregar un nuevo grupo de campo.

Configuración de grupo dado el título del nuevo grupo de campo y les permite aparecer solo en las páginas del producto.

“Tipo de publicación” es igual al “producto”
Agregue el primer campo Continuar agregando un nuevo campo para el título de su primer beneficio de producto.

Etiqueta de campo: Beneficio Título 1
Tipo de campo: texto
Repita el paso para los campos restantes hace lo mismo para los beneficios restantes del producto y sus descripciones. Todos estos campos requieren el tipo de “texto” de campo atribuido a ellos.


Título 1 del beneficio del beneficio del beneficio 1
Título 2 del beneficio
Descripción del beneficio 2
El título del beneficio 3
Descripción del beneficio 3
Título 4 del beneficio
Descripción del beneficio 4
2. Agregue los beneficios de los productos a los productos abiertos o agregue un nuevo producto después de que se haya creado su grupo y campos de campo, puede agregar las ventajas de los productos a sus productos. 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. Construya la plantilla de página del producto dentro de la división del constructor de temas, vaya al constructor de temas y agregue una nueva plantilla, ¡es hora de comenzar con Div! Para crear una nueva plantilla, navegue por el temas Builder Divin y haga clic en “Agregar una nueva plantilla”.

Use la plantilla para todos los productos, utilizamos esta plantilla para todos los productos, pero no dude en seleccionar productos con una determinada categoría o etiqueta.

Ingrese el editor de la plantilla del cuerpo y luego, ingrese el cuerpo de la plantilla haciendo clic en “Agregar cuerpo personalizado” y seleccionando “construir cuerpo personalizado”.

Cambie el color de fondo de la sección # 1 Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y cambie el color de fondo a negro.

Color de fondo: # 000000

Espacio ir a la pestaña de diseño de la sección y agregue un poco de revestimiento personalizado desde arriba y abajo.
Revestimiento superior: 10 px

Finamiento inferior: 10 PX
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y realice algunos cambios en la configuración de tamaño. Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1

Ancho: 90%
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Agregue el módulo de notificación de carrito de WOO a la columna dinámica La única forma en que necesitamos en esta fila y sección es un módulo de carrito de WOO. Asegúrese de que “este producto” se seleccione en el área de contenido dinámico.
Producto: este producto
El 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 Vaya a la pestaña Diseño y cambie la fuente de texto a la siguiente configuración de texto.

Texto de fuente: Karla
Configuración del botón Complete el módulo Configuración Estilizando el botón de acuerdo con:

Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 20 PX

El color del texto del botón: # 000000
El color de fondo del botón: # FFD623
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: Oswald
El estilo de la fuente del botón: mayúscula
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
ENNIZACIÓN IZQUIERDA: 50 PX

Revestimiento derecho: 50 PX
Agregue el fondo de gradiente de la sección 2 Agregue otra sección habitual justo debajo de la anterior, abra la configuración de la sección y use un fondo de gradiente receptivo.
Color 1: # 000000
Color 2: #ffffff

Posición inicial:
Escritorio: 30%
Tableta: 57%
Teléfono: 54%
Posición final:
Escritorio: 30%
Tableta: 57%
Teléfono: 54%
Pase de espacio a la pestaña de diseño de la sección y agregue algunos revestimientos hacia arriba. Habitación superior: 150 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Ancho: 95%

Ancho máximo: 2560 PX
Alineación de filas: centro
Espacio también eliminamos la facturación predeterminada de la fila.
SUS Lingo: 0 PX
El 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. Desktop: pantalla: Flex;
Alinine-Ritams: Centro; Tableta y teléfono: pantalla: bloque;

Agregue el módulo de imágenes WOO a la columna 1 El contenido dinámico es hora de agregar módulos, comenzando con un módulo de imágenes WOO en la columna 1. Asegúrese de que “este producto” se seleccione en el área de contenido dinámico.
Producto: este producto

Efecto del movimiento vertical agregue un movimiento sutil a la imagen utilizando el efecto del movimiento horizontal en la pestaña avanzada.
Habilitar el movimiento vertical: sí


Comenzando el desplazamiento:
Escritorio: -4

Tableta y teléfono: 0
Brecha promedio: 0
Grado final: 0
El desencadenante del efecto de movimiento: el medio del elemento
Agregue el módulo de título WOO al contenido dinámico de la columna 2 en la columna 2, el primer módulo que necesitamos es un módulo de título WOO. Asegúrese de que “este producto” se seleccione en el área de contenido dinámico.
Producto: este producto
Configuración de texto de título Luego acceda a la pestaña de diseño y estilice el texto del título de la siguiente manera:
Título de la fuente: Oswald

Estilo de fuente de título: mayúscula
Color de texto del título: # FFD623

Título Tamaño del texto: 80 PX
El espacio completa el módulo de título de Woo agregando algunos bordes izquierdo y derecho.
Margen izquierdo: 5%
Marja derecha: 5%
Agregue el módulo de descripción de WOO al contenido dinámico de la columna 2 al siguiente módulo, que es un módulo de descripción Woo. Utilizamos el siguiente contenido dinámico para esto:

Producto: este producto
Tipo de descripción: descripción corta
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:

Texto de fuente: Karla
Color de texto: #DBDBDB
Tamaño de texto: 17 PX (escritorio y tableta), 15 PX (teléfono)

La altura de la línea de texto: 1.9em
Dimensión luego cambie el ancho en diferentes tamaños de pantalla.
Ancho: 59% (escritorio), 82% (tableta y teléfono)
Espacio Complete el módulo de descripción de WOO agregando algunos valores de margen personalizados a la configuración de espaciado.
Margen superior: 50 PX

Margen inferior: 100 px
Margen izquierdo: 5%

Marja derecha: 5%
Agregue los módulos de la propaganda al contenido dinámico de la columna 2 para mostrar las ventajas del producto que agregamos en la primera parte de este tutorial, utilizaremos módulos de propaganda. Agregue un primer módulo de propaganda 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: Descripción del beneficio 1
Cargue la imagen cargar una imagen o use un icono en su elección. Puede encontrar los que usé en este tutorial en la carpeta de descarga que pueda descargar al comienzo de este tutorial.

Configuración de imagen / icono Vaya a la pestaña Diseño del módulo y cambie la configuración de imagen / icono de la siguiente manera:
Colocación de la imagen / icono: arriba
Alineación de imagen / icono: Título de izquierda a la izquierda El título de la izquierda cambia aún más la configuración del título.

Título de la fuente: Oswald

Estilo de fuente de título: mayúscula
Título Tamaño del texto: 25 PX
Configuración de texto del cuerpo junto con la configuración de texto de su cuerpo.

Font Corp: Karla
Tamaño de texto del cuerpo: 17 PX (escritorio y tableta), 15 PX (teléfono)
La altura de la línea del cuerpo: 1.9em
Dimensión Entonces, acceda a la configuración de tamaño y cambie los anchos. Es importante usar un ancho principal de menos del 50%, esto nos permitirá mostrar dos módulos de propaganda uno al lado del otro en los siguientes pasos.

Ancho de imagen: 25%
Ancho: 49%
Espacio También agregaremos algunos espacios blancos alrededor del módulo de propaganda utilizando valores de llenado personalizados en diferentes tamaños de pantalla.
Revestimiento superior: 8%

Finamiento inferior: 8%
Revelaje izquierdo: 8% (escritorio y tableta), 2% (teléfono)
Llenado derecho: 8% (escritorio y tableta) 2% (teléfono)

El elemento principal ahora, para asegurarse de que dos módulos de propaganda aparezcan uno al lado del otro, hay dos pasos importantes. El primero asegura que el ancho del módulo sea inferior al 50% (como lo hicimos en uno de los pasos anteriores). El segundo usa una propiedad de pantalla de línea. Agregaremos esta propiedad CSS al elemento principal del módulo de propaganda en la pestaña avanzada. Pantalla: bloque en línea;
Modo de propaganda de clona tres veces después de haber completado el primer módulo de blurbs, puede clonar tres veces. Notará automáticamente que los módulos de propaganda aparecen en una cuadrícula.
Cambie las imágenes del módulo de la propaganda, cambie la imagen de cada módulo duplicado. Puede encontrarlos en la carpeta de descarga que pueda descargar al comienzo de esta publicación.
Cambie el contenido dinámico del cambio del módulo de la propaganda y el contenido dinámico para cada desenfoque duplicado.
Cuerpo: descripción de beneficios (2.3 o 4)

Agregue bordes a los módulos de propaganda individuales Módulos de propaganda 1 Configuración de borde ahora, para completar el diseño de la red, agregaremos algunos bordes a los módulos de propaganda individuales. Abra el primer módulo de propaganda y use un borde recto.

El ancho del borde recto: 1 PX

Color de borde derecho: # FFD623

Agregue un borde inferior al primer módulo de propaganda.
Ancho de borde inferior: 1 PX
Color de borde inferior: # 000000

Configuración del borde del módulo 2 de la propaganda y luego abra el segundo módulo de propaganda y use un borde inferior.
Ancho de borde inferior: 1 PX
Color de borde inferior: # 000000

Configuración de borde del módulo 3 de la propaganda Complete el diseño de gile agregando un borde recto al tercer módulo de blurb.
El ancho del borde recto: 1 PX
Color de borde derecho: # FFD623

Agregar Woo Agregar a los módulos de carrito en la columna 2 Contenido dinámico El último módulo que necesitamos en nuestro diseño es un agrega Woo al carrito. Asegúrese de que “este producto” se seleccione en el área de contenido dinámico.
Producto: este producto
Configuración de campo Vaya a la pestaña Diseño y cambie la configuración del campo.

El color del fondo del campo: #ffffff
Color de texto de campo: # 000000
Campos de esquinas redondeadas: 0 PX (todas las esquinas)

Campos el ancho del borde inferior: 1 PX
Campos Color Borde inferior: # 000000

Establece el botón Entonces, estilice el botón en consecuencia:
Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 20 PX

El color del texto del botón: # 000000
El color de fondo del botón: # FFD623
El ancho del nudo del botón: 0 pxraza del botón: 0 px

Botón de fuente: Oswald
El estilo de la fuente del botón: mayúscula
Revestimiento superior: 20 px
Finamiento inferior: 20 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Espacio y complete la configuración del módulo agregando valores de margen personalizados.

Margen superior: 100 PX
Margen izquierdo: 5%

3. Guarde los cambios en el constructor de temas y una vista previa del resultado después de haber completado el diseño de la plantilla de producto, puede guardar todos los cambios realizados por el creador de temas y puede ver el resultado de sus productos.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, te mostré cómo ser creativo con la próxima plantilla de producto de la Divica. Específicamente, le mostré cómo incluir una cuadrícula dinámica para los beneficios del producto para agregar incentivos adicionales a la página de su producto. Creamos este tutorial utilizando la división en combinación con el complemento avanzado de campos personalizados. ¡Podrías descargar el archivo JSON gratis! 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.