Come creare un libro degli ospiti online per il tuo matrimonio con Divi & Auto Testimonials

Pubblicato: 2017-05-21

Questo post fa parte 4 di 5 nella nostra miniserie Come creare un sito Web di matrimonio elegante con Divi. In questa serie, ti guideremo attraverso le parti più importanti della creazione di un sito Web per matrimoni per te o per un cliente con Divi.


Nelle prime tre parti di questa miniserie, vi abbiamo mostrato come creare un elegante sito web per matrimoni. Questo sito Web conteneva una pagina di annuncio, una pagina della galleria e una pagina della lista dei regali.

Avere un guestbook online sul tuo sito web ti consente anche di interagire con gli ospiti dopo il matrimonio. Ecco perché abbiamo cercato la soluzione più semplice che funzioni con Divi.

Vogliamo mostrarti come creare un guestbook online con Automatic Divi Testimonials di Noou. Questo plugin ci aiuterà a creare un flusso automatico di testimonianze in arrivo. Il plugin renderà la tua pagina facile da usare e facile da usare, inoltre, ti farà risparmiare un sacco di tempo.

In questo tutorial, ti mostreremo passo dopo passo come integrare le Testimonianze Divi automatiche nella pagina del tuo guestbook e personalizzarlo a tale scopo. E, come creare il seguente layout del modulo di testimonianza automatico che corrisponda al sito Web del matrimonio che hai già realizzato.

Acquistare il Plugin

Prima di tutto, dovrai acquistare Automatic Automatic Divi Testimonials da Noou sul loro sito web se non possiedi ancora il plugin. Una volta effettuato l'ordine, riceverai un file ZIP. Il file ZIP contiene tutti i file necessari per far funzionare il plugin senza problemi.

Caricamento del plug-in Divi Testimonials automatico

Prima di caricare il plugin sul tuo sito WordPress, dovrai apportare alcune modifiche a uno dei file inclusi nel file ZIP.

Vai al file Zip Divi Automatic Testimonials > Divi-automatic-testimonials > Frontend > Apri il file Form con un editor di codice.

In questo esempio, useremo Notepad++ per modificare il file, ma sentiti libero di usare qualsiasi editor di codice a tua scelta.

Modifica dei titoli dei moduli

Il modulo predefinito di solito viene utilizzato per scopi aziendali. Le domande standard a cui una persona deve rispondere sono relative all'attività, come il titolo di lavoro e l'azienda. Dobbiamo apportare le modifiche al file PHP prima di caricare il plug-in perché utilizzano uno shortcode per visualizzare il modulo nel tuo sito Web creato con Divi.

Vogliamo cambiare questi titoli, ma poiché attualmente stanno ancora lavorando su un modulo dedicato che puoi modificare all'interno di Divi, dovremo tornare alla fonte per apportare queste modifiche. Ecco come appare il modulo sul sito web, senza le modifiche:

I tre campi che dovremo modificare sono il campo "Titolo lavoro", "Nome azienda" e "URL azienda". Puoi modificare questi due campi in qualsiasi cosa tu voglia sapere sulla persona. Ma in questo esempio, li sostituiremo con "Famiglia/amico di", "Ruolo al matrimonio" e "Il tuo sito web".

Il titolo di lavoro a famiglia/amico di

Cambia l'etichetta da "Titolo di lavoro" a "Famiglia/amico di" e il segnaposto da "Inserisci il tuo titolo di lavoro" a "Dicci chi ti ha invitato".

Il nome dell'azienda per il ruolo al matrimonio

Cambia l'etichetta da "Nome azienda" a "Ruolo al matrimonio e il segnaposto da "Inserisci il nome della tua azienda" a "Raccontaci qual è stato il tuo ruolo al matrimonio".

L'URL della società al sito Web personale

Cambia l'etichetta da "Azienda/Il tuo URL" a "Il tuo sito web personale" e il segnaposto da "Inserisci la tua azienda o l'URL personale, ad es. http://google.com" in "Inserisci l'URL del tuo sito web personale, ad es. http://google. .com'.

Nota: è possibile che il file sia ancora in modalità di sola lettura. Per iniziare a modificare, vai alla scheda Modifica e seleziona "Cancella contrassegno di sola lettura".

Dopo aver modificato il codice, copia l'intero codice e crea un nuovo file Notepad++ da sostituire con quello corrente. Le modifiche probabilmente non verranno salvate sul vecchio file, ecco perché dobbiamo sostituire il file con uno nuovo. Sostituire il vecchio file con un nuovo file, che contiene il nuovo codice, ti aiuterà a colmare i problemi.

Salva il file ed esci. Il tuo modulo, in seguito, assomiglierà a questo:

Abbiamo apportato le modifiche solo alla parte frontend del plug-in, in modo da non confondere gli ospiti che visitano il sito web. Le modifiche che abbiamo apportato non si applicano al backend di tutto.

Quando provi ad aggiungere manualmente una testimonianza al tuo sito WordPress, continuerai a vedere i titoli "Titolo lavoro" e "Nome azienda". Tuttavia, questi non vengono mai visualizzati sul tuo sito Web, quindi sentiti libero di digitare una risposta alle nuove domande che abbiamo fatto.

Caricamento del plugin

Ora, per caricare il plug-in sul tuo sito Web, vai su Plugin> Aggiungi nuovo e carica il plug-in modificato salvato sul desktop. Dopo aver attivato il plugin Automatic Divi Testimonials, apparirà nel menu di WordPress:

Impostazioni di Testimonianze Divi automatiche

Il plug-in Automatic Divi Testimonials consente agli ospiti di condividere facilmente l'esperienza che hanno avuto al matrimonio. Possono compilare il modulo sul sito Web e un'e-mail verrà automaticamente inviata al proprietario del sito Web o a qualsiasi altro indirizzo e-mail che ti piace. Per apportare queste modifiche, vai su Impostazioni e aggiungi l'indirizzo email della persona a cui desideri ricevere le testimonianze in arrivo.

Aggiungere una nuova testimonianza

Ci sono due modi per aggiungere una nuova testimonianza alla tua lista di testimonianze; manualmente o automaticamente. In alcuni casi, dovrai aggiungere tu stesso una testimonianza. Questo plugin ne tiene conto.

Aggiungere manualmente una nuova testimonianza

Puoi aggiungere manualmente le testimonianze facendo clic su "Aggiungi testimonianza" nella parte Testimonianze automatiche Divi del tuo sito Web WordPress.

Qui noterai che le modifiche che abbiamo fatto prima non si applicavano al backend del plugin. Il campo "Famiglia/amico di" è ancora chiamato "Titolo di lavoro". Devi solo ricordare che quello è il posto dove scrivi come la persona in questione è imparentata con gli sposi.

Stesso discorso per gli altri due campi che si adattano alle testimonianze aziendali. Il "Nome azienda" è il campo in cui inserire il "Ruolo al matrimonio" e il campo "URL" non è correlato all'azienda.

L'importante è che tutti questi titoli non compaiano mai sul sito stesso. Abbiamo già modificato le cose che inizialmente sarebbero apparse (all'interno del modulo) sul sito web. La modifica che abbiamo apportato prima di caricare il plug-in è stato il modo più veloce per far funzionare il plug-in senza dover apportare modifiche radicali al plug-in stesso.

Quando crei una nuova testimonianza, puoi anche aggiungere un'immagine in primo piano della persona che sta testimoniando. Questa sarà l'immagine che apparirà all'interno della testimonianza sul sito del tuo matrimonio.

Aggiungere automaticamente una nuova testimonianza

Quindi abbiamo la parte interessante di questo plugin che consente agli ospiti di interagire con il sito Web e di svolgere il lavoro ripetitivo per te. Gli ospiti possono inviarti la propria testimonianza senza ulteriori lavori manuali. La testimonianza che i tuoi ospiti generano, compilando il form sul tuo sito web, verrà automaticamente aggiunta all'elenco delle testimonianze e riceverai una email di notifica.

Successivamente, puoi ancora decidere cosa fare con le testimonianze; come li visualizzi sul tuo sito web e se vuoi mantenerli o meno. Lo scopo principale del plug-in Automatic Divi Testimonials è quello di aiutare il proprietario del sito Web a ottenere testimonianze dagli ospiti senza che nessuna delle parti debba impegnarsi molto. Gli ospiti non devono comunicare attraverso nient'altro che il sito web del matrimonio.

Iniziare

Ora vai alla pagina in cui desideri aggiungere il guestbook online. Questa potrebbe essere una pagina separata, ma puoi sempre aggiungere anche alcune testimonianze automatiche alla tua home page. Il modulo attualmente non viene visualizzato nel visual builder perché viene visualizzato tramite uno shortcode. Per questo tutorial, useremo il normale generatore Divi di una pagina per mostrarti come è fatto.

Ora, inizia aggiungendo una nuova pagina o apri la pagina in cui desideri inserire le tue testimonianze. All'interno di quella nuova pagina, avremo bisogno di una sezione standard con una riga a larghezza intera. Aggiungi un normale modulo di testo alla riga. All'interno di quel modulo di testo, digita il seguente shortcode [dup] all'interno della sottocategoria Testo della scheda Contenuto. Questo shortcode farà apparire il modulo sul sito web.

Ecco come dovrebbe apparire il tuo modulo se lo visualizzi in anteprima:

Assegnazione di categorie diverse

Una volta aggiunte le testimonianze all'elenco, puoi inserirle in diverse categorie. Basta andare alla sezione "Categorie" nel tuo plug-in Divi Testimonials automatico. Qui puoi creare nuove categorie per rendere tutto più organizzato dietro le quinte. Ad esempio, puoi creare una categoria separata per le damigelle e i testimoni dello sposo.

Mostrare le testimonianze sul sito web del tuo matrimonio

Utilizzo del modulo Testimonianze automatiche

A prima vista, il modulo Testimonianze automatiche ha lo stesso aspetto di tutti gli altri moduli nell'elenco. Crea una nuova sezione, aggiungi una riga a larghezza intera e inserisci il modulo Testimonianze automatiche. Se hai già raccolto testimonianze, queste verranno visualizzate automaticamente sul tuo sito web.

E, naturalmente, puoi regolare lo stile di conseguenza. In questo esempio, renderemo le tue testimonianze simili all'immagine mostrata di seguito. Questo stile si adatterà allo stile delle prime tre parti di queste miniserie.

Apri le impostazioni del tuo modulo Testimonianze Divi automatico, vai alla sottocategoria Sfondo della scheda Contenuto e scegli quante testimonianze desideri mostrare. All'interno della stessa scheda, scegli il layout della testimonianza "Standard Divi 4 Column".

Andando avanti, vai alla scheda Impostazioni avanzate di progettazione e cambia il Colore dell'icona della citazione in "# 9b857b" all'interno della sottocategoria Spaziatura.

Quindi, vai alla scheda Avanzate e aggiungi il seguente codice all'elemento principale all'interno della scheda CSS personalizzato:

border-radius: 25px;
background: -webkit-linear-gradient(-90deg, #fffaf6 , #fae4de );
background: -o-linear-gradient(-90deg, #fffaf6 , #fae4de );
background: -moz-linear-gradient((-90deg, #fffaf6 , #fae4de );
background: linear-gradient((-90deg, #fffaf6 , #fae4de );

E hai finito. Le testimonianze avranno ora un colore di sfondo sfumato che corrisponde alle altre pagine del sito Web del tuo matrimonio.

Prossimo

Nell'ultima parte di questa miniserie, vedremo come creare una sequenza temporale per il sito Web del tuo matrimonio in cui puoi mostrare il programma del matrimonio. Se hai domande su questo tutorial o se hai richieste per tutorial futuri; assicurati di lasciare un commento nella sezione commenti di questo post del blog in modo che possiamo risponderti con le risposte!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!