Come creare moduli di testimonianza dinamica in Divi utilizzando ACF

Rifat Divi Tutorials May 16, 2022

Il contenuto dinamico funziona bene con Divi . Puoi utilizzare il contenuto dinamico per mostrare testo, titoli e molto altro. Con un plug-in chiamato Advanced Custom Fields (ACF), può essere utilizzato anche nel modulo testimonial di Divi. In questo post, vedremo come utilizzare Divi e ACF per creare moduli testimonial che cambiano nel tempo. Divi e ACF funzionano bene insieme e questo post ti mostrerà come.

Installazione plug-in & richiesta

Innanzitutto, dobbiamo scaricare e configurare la versione gratuita del plug-in Advanced Custom Fields. Vai alla dashboard del tuo WP e vai a Plugin > Aggiungi nuovo. Quindi cerca ACF. Installa e attiva il plugin contrassegnato che abbiamo mostrato nell'immagine.

Crea un nuovo gruppo di campi

Crea un gruppo di campi dopo. Questo gruppo di campi avrà tutti i campi necessari per una testimonianza. Quindi, possiamo creare tutte le testimonianze che vogliamo clonando questo gruppo di campi.

Per creare il gruppo di campi, vai alla dashboard di WordPress e fai clic su Campi personalizzati > Aggiungi nuovo.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Innanzitutto, dai un nome al campo e fai clic su "Aggiungi campo".

Questo fa apparire l'editor in cui verranno creati i campi. Dovremo aggiungere ogni campo separatamente. Ci sarà un'etichetta, un nome e un tipo di campo per ogni campo. Il nome e l'etichetta possono essere gli stessi.

Digita l'etichetta e il nome del campo. Fare clic sulla casella a discesa accanto a "Tipo di campo" per visualizzare le scelte. Questo campo è diverso dagli altri tre perché ha un tipo di campo diverso.

Selezionare Area di testo dall'elenco come tipo di campo.

Quindi, scorri verso il basso e seleziona Aggiungi campo.

Quindi, inserisci il nome della testimonianza 1 nei campi Nome campo Nome testimonianza 1 e Etichetta campo. Lascia semplicemente il tipo di campo così com'è (testo).

Quindi, fai clic su Aggiungi campo e digita Testimonianza 1 Posizione lavorativa per il nome del campo e l'etichetta del campo.

Aggiungi un nuovo campo con il nome e l'etichetta "Testimonial 1 Company" facendo clic sul pulsante Aggiungi campo.

Successivamente, stabiliremo le regole per la Location. La testimonianza verrà inserita nella pagina o nelle pagine del tuo sito web da te specificate. Segue il criterio che Post Type è sempre uguale a Pagina. Oltre a questo regolamento, ne introdurremo uno nuovo. Aggiungi un gruppo di regole facendo clic sul pulsante Aggiungi gruppo di regole.

Scegli Pagina dalla casella a discesa Tipo di post quando crei una nuova regola. Specifica la pagina nella casella a discesa Pubblica per la tua nuova regola. La regola per ogni pagina se prevedi di utilizzare più pagine.

  • Primo campo: Pagina
  • Secondo campo: il nome della tua pagina

Fai clic sul pulsante Pubblica nell'angolo in alto a destra dell'editor per completare il processo di pubblicazione e rendere pubblico il tuo nuovo gruppo di campi. Una volta pubblicato, puoi vederlo con le regole.

Clonazione di gruppi di campi

Il gruppo del campo testimonial verrà successivamente clonato. Di conseguenza, sarà possibile una nuova testimonianza. Dovremo replicarlo per ogni testimonianza che vogliamo generare. Troverai questa opzione in Campo personalizzato > Gruppi di campi nell'area di amministrazione di WordPress. Fai clic su Duplica dopo aver selezionato il gruppo di campi che desideri duplicare.

Quindi fare clic su Modifica per aprire il nuovo gruppo di campi e apportare le modifiche necessarie ai nomi del gruppo e dei suoi singoli campi.

Con le modifiche necessarie per le informazioni privilegiate, fare clic su Aggiorna.

Il passaggio successivo consiste nel selezionare la pagina in cui desideri visualizzare questa testimonianza.

Il gruppo sul campo per la tua seconda testimonianza è ora disponibile.

Creazione della testimonianza

I moduli di testimonianza vengono visualizzati nella parte inferiore dell'editor di pagina per la pagina che hai designato come destinazione della testimonianza. Questa illustrazione contiene solo i campi per Testimonial 1. Ho scelto una pagina separata per la posizione di Testimonial 2, quindi non appare in questa pagina.

Completa i campi come di consueto. Quindi, sarai in grado di utilizzare i campi all'interno del layout Divi di questa pagina.

Crea il Modulo Testimonianza Dinamica

Un vantaggio è che chiunque può inserire o modificare i campi senza dover aprire i moduli Divi. I campi del modulo testimonial di Divi devono essere mappati prima di poter essere utilizzati. Questa pagina può essere creata utilizzando Divi Builder facendo clic sul pulsante in basso.

Sezione e Riga

Sotto la seconda parte, crea una nuova sezione regolare.

Ora dobbiamo aggiungere una riga a colonna singola.

Aggiungi il modulo Testimonial Divi

Un modulo testimonial dovrebbe essere aggiunto alla colonna.

Crea il contenuto della testimonianza dinamica

Successivamente, compileremo il modulo testimonial con i dati dei campi personalizzati avanzati. Per fare ciò, utilizzeremo il contenuto dinamico per inserire i dati dal gruppo di campi in ogni campo. È possibile accedere alle normali impostazioni del modulo come di consueto. Passare il puntatore del mouse su ciascun campo rivela la scelta dinamica, come mostrato nell'immagine qui sotto.

Nome autore dinamico

Per iniziare, fai clic sull'icona del contenuto dinamico nell'area Autore passandoci sopra con il cursore.

Ci sono alternative ACF verso la fine dell'elenco, come ci si potrebbe aspettare. Quando abbiamo creato il gruppo di campi, questi sono i nomi che abbiamo assegnato ai campi. Seleziona il nome della Testimonianza 1 dal menu a tendina.

Inserisci il testo aggiuntivo che desideri prima o dopo il nome nei campi corrispondenti. Puoi anche includere HTML se lo desideri. Quando hai finito, fai clic sul segno di spunta verde.

Il nome del contenuto dinamico viene ora visualizzato nel campo Autore. Il nome dell'autore viene ora visualizzato come testo inserito nel modulo.

Titolo di lavoro dinamico

Nel passaggio successivo, seleziona l'icona del contenuto dinamico accanto al campo Titolo di lavoro.

Seleziona l'opzione Testimonial 1 Posizione lavorativa dal menu a discesa.

Quindi, passa con il mouse sul campo Società e seleziona la sua icona dinamica.Seleziona il segno di spunta verde se desideri aggiungere qualsiasi testo pre o post ai campi.

Nome azienda dinamico

Quindi, passa al campo Società e seleziona la sua icona dinamica.

Seleziona la testimonianza 1 dall'elenco e puoi aggiungere qualsiasi testo prima-dopo se lo desideri. Infine colpisci il segno di spunta verde.

Descrizione dinamica

Prossimo. scegli l'icona dinamica passando il mouse sopra la casella del contenuto del corpo.

Seleziona Testimonianza 1 dalla casella a discesa e seleziona ok.

Modifica del contenuto dinamico per la testimonianza

La modifica di una qualsiasi delle testimonianze non richiede l'apertura del builder Divi. È semplice come andare all'editor di pagina e modificare il materiale che viene generato dinamicamente. Il mio cognome appare nella colonna Testimonial 1 Name in questo esempio.

Nel modulo, il nome viene aggiornato automaticamente.

Stile del modulo dinamico

Immagine contenuto

Per aggiungere l'immagine della persona, vai alla scheda contenuto e fai clic sul pulsante Immagine.

  • Immagine: foto di persona’

Icona di citazione

Cambia il colore dell'icona della citazione dalla scheda del design.

  • Colore: #000000

Immagine di design

Ora scorri verso il basso fino all'opzione dell'immagine dalla scheda progettazione e modifica i seguenti valori.

  • Larghezza: 150px
  • Altezza: 150px
  • Angoli arrotondati: 0px

Corpo del testo

Ora dall'opzione del corpo del testo, cambia le opzioni menzionate.

  • Fonte: Montserrat
  • Colore: #000000
  • Dimensioni: 16px, 14px
  • Altezza della linea: 1,8 em

Testo dell'autore

Come il corpo del testo, cambia anche il testo dell'autore e applica le seguenti impostazioni.

  • Fonte: Montserrat
  • Colore: #000000
  • Dimensioni: 20px, 18px, 16px

Posizione del testo

Cambia solo la famiglia di caratteri per questa particolare opzione.

  • Fonte: Montserrat

Testo aziendale

Infine, cambia di nuovo solo la famiglia di caratteri per l'opzione di testo aziendale.

  • Fonte: Montserrat

Uscita finale

Infine, ecco uno sguardo completo al modulo testimonial dinamico in Divi.

Pensieri finali

Quindi, questo è il nostro sguardo su come utilizzare Divi e ACF per creare moduli testimonial che cambiano nel tempo. Con il contenuto dinamico in Divi , è facile aggiungere i campi personalizzati al modulo testimonial. Tutto quello che devi fare è trasformare i campi in un gruppo di campi e quindi utilizzare il contenuto dinamico di Divi per selezionare il gruppo di campi.