Come creare una pagina di destinazione del martedì con Divi e GiveWP
Pubblicato: 2017-11-22Nel caso non l'avessi saputo, ci stiamo preparando a dare il via a una massiccia campagna per il Black Friday e il Cyber Monday qui su Elegant Themes. Ma c'è un'altra cosa interessante che accade in questo periodo dell'anno. Si chiama Giving Tuesday (quest'anno cade il 28 novembre) ed è uno sforzo delle organizzazioni non profit di tutto il mondo per ricordare a tutti che mentre hanno i portafogli fuori per lo shopping personale, possono prendere in considerazione l'idea di donare a coloro che anche bisogno. Che bella idea! E dal momento che ci occupiamo di potenziare la nostra comunità, abbiamo pensato che sarebbe stata una buona idea aiutare coloro che utilizzano Divi (o Extra) e lavorano per organizzazioni non profit a creare la migliore pagina di destinazione per le donazioni di Giving Tuesday che sono capace di.
Ecco una rapida occhiata a ciò che creeremo oggi.
Anteprima risultato finale
Nel post di oggi creeremo una bellissima landing page di Giving Tuesday completa di un modulo di donazione visivamente sbalorditivo (e ovviamente funzionale).
Installa il plugin GiveWP e crea un nuovo modulo
Il modulo di donazione che utilizzeremo in questo tutorial è generato dal plugin GiveWP. Per installarlo, vai nel tuo pannello di amministrazione di WordPress su Plugin > Aggiungi nuovo . Lì, usa la funzione di ricerca per trovare il plug-in Give. Fare clic sul pulsante "Installa ora" e quindi attivarlo.
Successivamente, vai su Donazioni > Aggiungi modulo . Inserisci un titolo per il modulo. Ho scelto "Sostieni i tuoi agricoltori locali e l'agricoltura sostenibile".
Successivamente, noterai le Opzioni del modulo di donazione. Esaminiamoli scheda per scheda.
Nella prima scheda, chiamata Opzioni di donazione, configura le seguenti impostazioni nella sezione superiore.
Opzione di donazione: donazione multilivello
Visualizzazione delle donazioni: pulsanti
Importo personalizzato: abilitato
Nella sezione Livello di donazione, imposta i seguenti livelli di donazione: $ 1, $ 5, $ 10, $ 25, $ 50, $ 100. Assicurati di impostare il livello di donazione di $ 5,00 come nuova impostazione predefinita.
Ora passa alla scheda Visualizzazione modulo. L'unica cosa che devi fare qui è cambiare l'impostazione Opzioni di visualizzazione su Modale.
Nella scheda Obiettivo della donazione, abilita prima l'opzione Obiettivo della donazione. Dopo averlo fatto, imposta l'importo dell'obiettivo. Ho impostato il mio a $ 1.000. Ho anche impostato il formato obiettivo su percentuale. Ciò consentirà agli spettatori del modulo di conoscere la percentuale del nostro obiettivo che abbiamo raggiunto, non la quantità effettiva di denaro che abbiamo raccolto. E infine, ho leggermente modificato il colore della barra di avanzamento in modo che corrisponda allo stesso verde utilizzato nel resto del mio sito Web (#07c907).
Infine, dobbiamo aggiungere del contenuto del modulo. Nella scheda Contenuto modulo, abilita Visualizza contenuto. Quindi, aggiungi del testo all'area del contenuto.
Ai fini di questo tutorial, queste sono tutte le impostazioni del modulo Give che dobbiamo configurare. Fai clic sul pulsante Pubblica e prendi nota del fatto che in seguito avrai bisogno dello shortcode di questo modulo di donazione.
Quando imposti questo modulo per davvero, dovrai anche andare su Donazioni> Impostazioni e configurare cose come i tuoi gateway di pagamento, e-mail, ecc.
Prepara le tue risorse di immagine
Avremo anche bisogno di un'immagine di sfondo personalizzata per la nostra sezione del modulo. Questo è ovviamente facoltativo, non influisce sul funzionamento del modulo. Ma ha un bell'aspetto e aggiunge un bel design al nostro esempio di mercato degli agricoltori.
Per creare questa immagine ho usato Photoshop ma probabilmente puoi anche usare un software gratuito chiamato Gimp. È uno strumento open source che ha molte delle stesse funzionalità.
Ecco come crearlo.
Per prima cosa, trova un'immagine con elementi relativi alla tua organizzazione non profit. Poiché l'esempio che sto usando è per un mercato degli agricoltori, ho deciso di utilizzare le verdure. Ho cercato su un sito Web di immagini stock per "verdure isolate". In genere, il termine "isolato" su un sito Web di immagini stock si riferisce a elementi su uno sfondo bianco. Ciò li rende facili da isolare eliminando lo sfondo. Che è esattamente quello che ho fatto.
Ecco l'immagine che ho trovato.
Ho quindi aperto quell'immagine in Photoshop.
Poiché il livello iniziale è bloccato per impostazione predefinita, duplicalo facendo clic con il pulsante destro del mouse su di esso e selezionando "Duplica livello". Quindi, nascondi il primo livello facendo clic sull'icona a forma di occhio accanto ad esso.
Quindi, usa lo strumento bacchetta magica per selezionare tutto lo spazio bianco intorno e all'interno degli elementi vegetali. Premi il tasto backspace per eliminarlo.
Quindi, naviga nel menu in alto su Immagine> Dimensioni tela e ridimensiona la tela a 1920 × 1080. Quando lo fai, i tuoi elementi saranno probabilmente molto grandi rispetto alla tua nuova tela più piccola.
Sulla tastiera premi command+T o vai a Modifica > Trasforma > Scala . Ridimensiona il livello degli elementi isolati per adattarlo alle nuove dimensioni della tela.
Questo è il punto in cui andremo su questa immagine per ora. Assicurati semplicemente di aver salvato questo nuovo file di Photoshop. Continueremo in basso una volta che avremo il nostro nuovo modulo di donazione come riferimento per le dimensioni.
Creare il design in Divi
Se non lo hai già fatto, ti consigliamo di scaricare e installare il nostro nuovissimo (gratuito) Farmers Market Layout Pack. Segui le istruzioni in quel post per installare il pacchetto di layout. Dopo l'installazione, segui le istruzioni in questo post del blog per configurare il tuo sito per la fase successiva di personalizzazione, che tratteremo qui.
Quando sei pronto, vai alla tua pagina Donazioni e usa il pulsante nella parte superiore della pagina per abilitare il visual builder. Ti porterò sezione per sezione lungo la pagina, apportando personalizzazioni man mano che procediamo.
Dal momento che stiamo preparando questa pagina per una campagna di Giving Tuesday, dovremmo probabilmente menzionarlo proprio in alto. Quindi passa il mouse sopra la sezione dell'eroe e apri le impostazioni del modulo facendo clic sull'icona a forma di ingranaggio nei controlli del modulo grigio.
Quindi, mentre sei ancora nella scheda Contenuto, scorri verso il basso e apri le impostazioni del collegamento. Nel campo title Button #1 URL inserisci il testo “#donate”. Questo funzionerà come collegamento di ancoraggio al modulo che creeremo di seguito.
Infine, vai alla scheda Design e apri le impostazioni del testo dei sottotitoli. Imposta il peso del carattere dei sottotitoli in grassetto.

La prima sezione è ora completa. Scorri verso il basso fino alla terza sezione (quella con una grande citazione) e fai clic sull'icona dell'ingranaggio nei controlli della sezione blu. Imposta il colore di sfondo su # F6F6F6.
Quindi, apri le impostazioni del modulo per il modulo di testo preventivo. Cambia anche lo sfondo in # F6F6F6.
Anche questa sezione è ora completa. Passa alla quarta sezione immediatamente sotto di essa. Questa è la nostra sezione del modulo di donazione.
Poiché questa sezione esiste nel pacchetto di layout, è più una sezione di "impegno" in cui le persone possono utilizzare il modulo di contatto per inviarti un impegno per quanto intendono dare. Ma lo trasformeremo in un vero e proprio modulo di donazione in cui possiamo accettare direttamente denaro.
Iniziamo con le impostazioni della sezione e lavoriamo. Innanzitutto, dobbiamo cambiare il colore di sfondo. Impostalo sullo stesso # F6F6F6 della sezione sopra.
Quindi, nella sezione Scheda Progettazione, apri le Opzioni di spaziatura. Aggiungi il seguente riempimento personalizzato:
In alto: 250 px
A destra: 40px
In basso: 250 px
Sinistra: 40px
Infine, mentre sei ancora nelle impostazioni della sezione, vai alla scheda Avanzate e apri i controlli ID e classi CSS. Sotto l'ID CSS scrivi la parola "donare".
Salva le tue nuove impostazioni.
Ora dobbiamo sbarazzarci del nostro modulo di pegno. È composto da due moduli di testo e un modulo di modulo di contatto. Vai avanti ed eliminali. Al loro posto, aggiungi un modulo di testo.
All'interno del nuovo modulo di test, inserisci lo shortcode per il modulo di donazione Give che abbiamo creato in precedenza. Imposta lo sfondo su bianco solido (#ffffff).
Ora vai alla scheda Design. Un segreto poco noto è che gli elementi generati da shortcode di terze parti possono essere personalizzati in una certa misura utilizzando le impostazioni di progettazione del modulo di testo.
Sotto le opzioni di testo, configura le seguenti impostazioni:
Dimensione del testo del testo: 18px
Altezza riga di testo: 1,8 em
Sotto le opzioni del testo dell'intestazione per H2, configura le seguenti impostazioni:
Titolo 2: Dimensione testo: 36px
Altezza riga intestazione 2: 1,5 em
Sotto le opzioni Spaziatura, configura le seguenti impostazioni:
Imbottitura personalizzata: 50xp (per tutti i campi)
Sotto le opzioni Box Shadow, scegli l'ultima opzione nella riga in alto (all'estrema destra). Quindi configura questa opzione:
Forza di diffusione dell'ombra della scatola: -2px
Infine, sotto le Opzioni di animazione, configura queste impostazioni:
Stile di animazione: rimbalzo
Direzione dell'animazione: su
Durata dell'animazione: 800 ms
Ritardo animazione: 400 ms
Opacità iniziale dell'animazione: 100%
Quando hai configurato tutte queste impostazioni di progettazione, salvale. Il tuo modulo di donazione dovrebbe ora assomigliare a questo.
Ovviamente questa è una forma perfettamente accettabile. Ma secondo me è un po' noioso. Ci sono due cose che vorrei fare per ravvivarlo. Innanzitutto, abbineremo lo stile del pulsante Dona ora in modo che corrisponda ad altri pulsanti Dona in tutto il sito web.
Passa alle opzioni del tema andando su Divi> Libreria Divi> Generale Scorri verso il basso fino alla casella CSS personalizzato e incolla lì i seguenti stili del pulsante:
/*Give Plugin Styles*/ .give-btn.give-btn-modal { background: #07C907; border: none; border-radius: 0px; color: #fff; padding: 20px; cursor: pointer; line-height: 1.2em; font-size: 18px; font-weight: bold; } #give-purchase-button.give-submit.give-btn { background: #07C907; border: none; border-radius: 0px; color: #fff; padding: 20px; cursor: pointer; line-height: 1.2em; font-size: 18px; font-weight: bold; }
Salva le modifiche e torna alla pagina delle donazioni. Aggiornalo e dai un'occhiata al tuo modulo. Ora dovrebbe assomigliare a questo.
Ora stiamo arrivando da qualche parte! Aggiungiamo il tocco finale. L'immagine di sfondo della sezione che abbiamo iniziato a creare in precedenza.
Per completarlo, ridimensiona la finestra del browser a 1920×1120. Puoi usare un sito web come whatsmybrowsersize.com.
Quindi, fai uno screenshot della tua pagina di donazione con il nostro nuovo modulo centrato su di essa. Dovrebbe sembrare come questo.
Apri questo nuovo screenshot in Photoshop insieme al file Photoshop che abbiamo creato in precedenza.
Utilizzare lo strumento Selezione rettangolo per selezionare il modulo. Quindi, vai su Seleziona> Inversa per selezionare tutto tranne il modulo. Elimina la tua nuova selezione. Ora dovresti avere una tela simile a questa.
Ora hai un "modello di modulo" di dimensioni corrette che puoi utilizzare come riferimento per l'immagine di sfondo. Con entrambi i file di Photoshop aperti, trascina il livello di Photoshop contenente il modulo isolato nel file dell'immagine di sfondo.
Nel pannello dei livelli, regola l'opacità del livello del modulo al 50%. Quindi, con il modulo in seguito ancora selezionato, fai clic sull'icona del lucchetto e bloccalo. Ora dovrebbe assomigliare a questo.
Ora puoi selezionare il tuo livello di verdure nel pannello dei livelli. Usa lo strumento lazo per selezionare singoli elementi ed eliminarli o riorganizzarli fino a ottenere una configurazione che ti piace. La mia configurazione finale era simile a questa.
Una volta che hai la tua configurazione finale, vai su File> Esporta> Esporta come e scegli PNG per mantenere lo sfondo trasparente.
Ora possiamo aggiungere quell'immagine alla sezione Modulo di donazione della nostra pagina delle donazioni, sul nostro sito Web Divi.
Apri le impostazioni della sezione. Sotto Sfondo lascia da solo il colore che abbiamo impostato in precedenza e scegli l'opzione dell'immagine. Aggiungi qui la tua nuova immagine di sfondo. Quindi configurare le seguenti impostazioni:
Dimensione dell'immagine di sfondo: dimensione reale
Posizione immagine di sfondo: Centro
Salva queste impostazioni. La sezione del modulo dovrebbe ora essere completa.
Per finalizzare completamente il tuo design (in modo che corrisponda alla nostra anteprima a pagina intera dall'inizio del post) cambia semplicemente i colori di sfondo delle sezioni rimanenti della pagina in modo che corrispondano a quelli dello screenshot. Userai il grigio (#F6F6F6) o il bianco (#ffffff).
Buona raccolta fondi!
Con Divi e un plugin potente come Give, siamo sicuri che i tuoi sforzi di Giving Tuesday saranno sicuramente un grande successo. Grazie per aver seguito. Se desideri ancora assistenza con qualsiasi cosa trattata in questo tutorial, condurrò un live streaming oggi alle 15:00 sulla nostra pagina Facebook e sul canale YouTube, dove mostrerò l'intero processo in un'unica ripresa. Risponderò anche alle domande man mano che procediamo. Spero di vedervi lì!