Cómo crear módulos de testimonios dinámicos en Divi usando ACF

Rifat Divi Tutorials May 16, 2022

El contenido dinámico funciona bien con Divi . Puede usar contenido dinámico para mostrar texto, títulos y mucho más. Con un complemento llamado Campos personalizados avanzados (ACF), incluso se puede usar en el módulo de testimonios de Divi. En esta publicación, veremos cómo usar Divi y ACF para crear módulos de testimonios que cambien con el tiempo. Divi y ACF funcionan bien juntos, y esta publicación le mostrará cómo.

Complemento requerido & Configuración

Primero, necesitamos descargar y configurar la versión gratuita del complemento Advanced Custom Fields. Vaya a su tablero de WP y navegue a Complementos \ 003E Agregar nuevo. Luego busque ACF. Instale y active el complemento marcado que hemos mostrado en la imagen.

Crear un nuevo grupo de campos

Haga un grupo de campo a continuación. Este grupo de campos tendrá todos los campos necesarios para un testimonio. Luego, podemos hacer tantos testimonios como queramos clonando este grupo de campo.

Para crear el grupo de campos, vaya al panel de control de WordPress y haga clic en Campos personalizados > Agregar nuevo.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Primero, asigne un nombre al campo y haga clic en "Agregar campo".

Esto abre el editor donde se crearán los campos. Tendremos que agregar cada campo por separado. Habrá una etiqueta, un nombre y un tipo de campo para cada campo. El nombre y la etiqueta pueden ser los mismos.

Escriba la etiqueta y el nombre del campo. Haga clic en el cuadro desplegable junto a "Tipo de campo" para ver las opciones. Este campo es diferente de los otros tres porque tiene un tipo de campo diferente.

Seleccione Área de texto de la lista como tipo de campo.

A continuación, desplácese hacia abajo y seleccione Agregar campo.

A continuación, coloque Testimonial 1 Name en los campos Testimonial 1 Name Field Name y Field Label. Simplemente deje el Tipo de campo como está (Texto).

A continuación, haga clic en Agregar campo y escriba Testimonio 1 Puesto de trabajo para el Nombre del campo y la Etiqueta del campo.

Agregue un nuevo campo con el nombre y la etiqueta "Testimonio 1 Empresa" haciendo clic en el botón Agregar campo.

Después de eso, estableceremos las reglas para la ubicación. El testimonio se colocará en la página o páginas de su sitio web que especifique. Sigue el criterio de que Tipo de publicación siempre es igual a Página. Además de esta regulación, presentaremos una nueva. Agregue un grupo de reglas haciendo clic en el botón Agregar grupo de reglas.

Elija Página en el cuadro desplegable Tipo de publicación al crear una nueva regla. Especifique la página en el cuadro desplegable Publicar para su nueva regla. La regla para cada página si planea usar varias páginas.

  • Primer campo: página
  • Segundo campo: el nombre de tu página

Haga clic en el botón Publicar en la esquina superior derecha del editor para completar el proceso de publicación y hacer público su nuevo grupo de campo. Una vez publicado, puedes verlo con las reglas.

Clonación de grupos de campos

El grupo de campo testimonial se clonará a continuación. Un nuevo testimonio será posible como resultado de esto. Tendremos que replicar esto para cada testimonio que queramos generar. Encontrará esta opción en Campo personalizado > Grupos de campos en el área de administración de WordPress. Haga clic en Duplicar después de haber seleccionado el grupo de campos que desea duplicar.

A continuación, haga clic en Editar para abrir el nuevo grupo de campos y realice las modificaciones necesarias en los nombres del grupo y de sus campos individuales.

Con los cambios necesarios para la información privilegiada, haga clic en actualizar.

El siguiente paso es seleccionar la página en la que desea que aparezca este testimonio.

El grupo de campo para su segundo testimonio ya está disponible.

Crear el testimonio

Los formularios de testimonios se muestran en la parte inferior del editor de páginas para la página que designó como destino del testimonio. Esta ilustración contiene solo los campos para el Testimonio 1. Elegí una página separada para la ubicación del Testimonio 2, por lo que no aparece en esta página.

Complete los campos como de costumbre. Luego, podrá usar los campos dentro del diseño Divi de esta página.

Crear el Módulo de Testimonios Dinámicos

Una ventaja es que cualquiera puede ingresar o cambiar los campos sin tener que abrir los módulos Divi. Los campos del módulo de testimonios de Divi deben mapearse antes de que puedan usarse. Esta página se puede construir usando Divi Builder haciendo clic en el botón de abajo.

Sección y Fila

Debajo de la segunda parte, cree una nueva sección regular.

Ahora necesitamos agregar una fila de una sola columna.

Agregar módulo de testimonios de Divi

Se debe agregar un módulo de testimonios a la columna.

Crear el contenido testimonial dinámico

Después de eso, completaremos el módulo de testimonios con datos de los campos personalizados avanzados. Para hacer esto, usaremos contenido dinámico para insertar datos del grupo de campos en cada campo. Se puede acceder a la configuración normal del módulo como de costumbre. Al pasar el puntero del mouse sobre cada campo, se revela la opción dinámica, como se muestra en la imagen a continuación.

Nombre de autor dinámico

Para comenzar, haga clic en el icono de contenido dinámico en el área de Autor pasando el cursor sobre él.

Hay alternativas de ACF hacia el final de la lista, como era de esperar. Cuando creamos el grupo de campos, estos son los nombres que asignamos a los campos. Seleccione el nombre del Testimonio 1 del menú desplegable.

Ponga cualquier texto adicional que desee antes o después del nombre en los campos correspondientes. También puede incluir HTML si lo desea. Cuando haya terminado, haga clic en la marca de verificación verde.

El nombre del contenido dinámico ahora se muestra en el campo Autor. El nombre del autor ahora se muestra como el texto que colocó en el formulario.

Título de trabajo dinámico

En el siguiente paso, seleccione el icono de contenido dinámico junto al campo Título del trabajo.

Seleccione la opción Puesto de trabajo Testimonio 1 del menú desplegable.

A continuación, desplace el cursor sobre el campo Empresa y seleccione su icono dinámico. Seleccione la marca de verificación verde si desea agregar texto previo o posterior a los campos.

Nombre de empresa dinámico

Luego, vaya al campo Compañía y seleccione su icono dinámico.

Seleccione el testimonio 1 de la lista y puede agregar cualquier texto de antes y después si lo desea. Finalmente presione la marca de verificación verde.

Descripción dinámica

Próximo. elija el icono dinámico pasando el cursor sobre el cuadro de contenido del Cuerpo.

Seleccione Testimonio 1 en el cuadro desplegable y seleccione Aceptar.

Edición del contenido dinámico para testimonios

Cambiar cualquiera de los testimonios no requiere abrir el constructor Divi. Es tan sencillo como ir al editor de páginas y editar el material que se genera de forma dinámica. Mi apellido aparece en la columna Testimonio 1 Nombre en este ejemplo.

En el módulo, el nombre se actualiza automáticamente.

Dar estilo al módulo dinámico

Imagen de contenido

Para agregar la imagen de la persona, vaya a la pestaña de contenido y haga clic en el botón Imagen.

  • Imagen: foto person’s

Icono de cotización

Cambia el color del ícono de cotización desde la pestaña de diseño.

  • Color: #000000

Imagen de diseño

Ahora, desplácese hacia abajo hasta la opción de imagen desde la pestaña de diseño y cambie los siguientes valores.

  • Ancho: 150px
  • Altura: 150px
  • Esquinas redondeadas: 0px

Cuerpo de texto

Ahora desde la opción de texto del cuerpo, cambie las opciones mencionadas.

  • Fuente: Montserrat
  • Color: #000000
  • Tamaño: 16px, 14px
  • Altura de la línea: 1,8 em

Texto del autor

Al igual que el texto del cuerpo, cambie también el texto del autor y aplique la siguiente configuración.

  • Fuente: Montserrat
  • Color: #000000
  • Tamaño: 20 píxeles, 18 píxeles, 16 píxeles

Texto de posición

Solo cambie la familia de fuentes para esta opción en particular.

  • Fuente: Montserrat

Texto de la empresa

Por último, vuelva a cambiar solo la familia de fuentes para la opción de texto de la empresa.

  • Fuente: Montserrat

Salida final

Finalmente, aquí hay una mirada completa al módulo dinámico de testimonios en Divi.

pensamientos finales

Entonces, ese es nuestro análisis de cómo usar Divi y ACF para crear módulos de testimonios que cambian con el tiempo. Con el contenido dinámico en Divi , es fácil agregar campos personalizados al módulo de testimonios. Todo lo que tiene que hacer es convertir los campos en un grupo de campos y luego usar el contenido dinámico de Divi para seleccionar el grupo de campos.

Divi WordPress Theme