Cum să creați o pagină de destinație Giving Tuesday cu Divi și GiveWP

În cazul în care nu ați auzit, ne pregătim să începem o campanie masivă de Black Friday și Cyber ​​Monday aici, la Elegant Themes. Dar se mai întâmplă un lucru interesant în această perioadă a anului. Se numește Giving Tuesday (anul acesta cade pe 28 noiembrie) și este un efort al non-profitului lumii de a reaminti tuturor că, deși au scos portofelele pentru cumpărături personale, ar putea dori să ia în considerare donarea celor din de asemenea, nevoie. Ce idee mișto! Și din moment ce ne ocupăm de împuternicirea comunității noastre, ne-am gândit că ar fi o idee bună să-i ajutăm pe cei care folosesc Divi (sau Extra) și lucrează pentru organizații non-profit pentru a crea cea mai bună pagină de destinație pentru donațiile de Giving Tuesday. capabil de.

Iată o scurtă privire asupra a ceea ce vom crea astăzi.

Previzualizare rezultat final

În postarea de astăzi vom crea o frumoasă pagină de destinație Giving Tuesday completată cu un formular de donație vizual uimitor (și funcțional, desigur).

Instalați pluginul GiveWP și creați un formular nou

Formularul de donație pe care îl vom folosi în acest tutorial este generat de pluginul GiveWP. Pentru a-l instala, navigați în administratorul dvs. WordPress la Pluginuri> Adăugați un nou . Acolo, utilizați funcția de căutare pentru a găsi pluginul Give. Faceți clic pe butonul „Instalați acum” și apoi activați-l.

Apoi, accesați donații> Adăugați formular . Introduceți un titlu de formular. Am ales „Susțineți fermierii locali și agricultura durabilă”.

Apoi, veți observa Opțiunile formularului de donație. Să le parcurgem filă cu filă.

În prima filă, numită Opțiuni de donație, configurați următoarele setări în secțiunea de sus.

Opțiune de donație: donație pe mai multe niveluri

Afișarea donației: butoane

Suma personalizată: activată

În secțiunea Nivel de donație, configurați următoarele niveluri de donație: 1 $, 5 $, 10 $, 25 $, 50 $, 100 $. Asigurați-vă că setați nivelul de donație de 5,00 USD ca nou implicit.

Acum treceți la fila Afișare formular. Singurul lucru pe care trebuie să-l faceți aici este să schimbați setarea Opțiuni de afișare la Modal.

În fila Donation Goal, activați mai întâi opțiunea Donation Goal. După ce ați făcut acest lucru, setați suma obiectivului. Am stabilit-o pe a mea la 1.000 de dolari. De asemenea, am setat formatul obiectivului la procentaj. Acest lucru va permite spectatorilor să cunoască procentul obiectivului pe care l-am atins, nu suma reală pe care am strâns-o. Și, în cele din urmă, am schimbat ușor culoarea barei de progres pentru a se potrivi cu același verde folosit în restul site-ului meu web (# 07c907).

În cele din urmă, trebuie să adăugăm un conținut de formular. În fila Conținut formular, activați Conținut afișat. Apoi, adăugați text în zona de conținut.

În sensul acestui tutorial, acestea sunt toate setările pentru formularul Dare pe care trebuie să le configurăm. Faceți clic pe butonul Publicați și luați notă de faptul că veți avea nevoie mai târziu de codul scurt al acestui formular de donație.

Când configurați acest formular în mod real, va trebui, de asemenea, să accesați Donații> Setări și să configurați lucruri precum gateway-urile de plată, e-mailurile etc.

Pregătiți-vă activele de imagine

De asemenea, vom avea nevoie de o imagine de fundal personalizată pentru secțiunea noastră de formular. Acest lucru este, desigur, opțional, nu afectează modul în care funcționează formularul. Dar arată grozav și adaugă un design frumos legat de exemplul nostru de pe piața fermierilor.

Pentru a crea această imagine am folosit Photoshop, dar probabil puteți utiliza și un software gratuit numit Gimp. Este un instrument open source care are multe din aceleași caracteristici.

Iată cum să-l creați.

Mai întâi, găsiți-vă o imagine cu elemente legate de non-profit. Deoarece exemplul pe care îl folosesc este pentru o piață a fermierilor, am decis să folosesc legume. Am căutat pe un site web cu imagini de stoc „legume izolate”. De obicei, termenul „izolat” pe un site web cu imagini de stoc se referă la articole pe un fundal alb. Acest lucru le face ușor de izolat prin ștergerea fundalului. Ceea ce am făcut exact.

Iată imaginea pe care am găsit-o.

Apoi am deschis acea imagine în Photoshop.

Deoarece stratul inițial este blocat în mod implicit, copiați-l făcând clic dreapta pe acesta și selectând „Duplicate Layer”. Apoi, ascundeți primul strat făcând clic pe pictograma ochi de lângă acesta.

Apoi, utilizați instrumentul baghetă magică pentru a selecta tot spațiul alb din jurul și din interiorul elementelor vegetale. Apăsați tasta Backspace pentru ao șterge.

Apoi, navigați în meniul de sus la Imagine> Dimensiune pânză și redimensionați pânza la 1920 × 1080. Când faceți acest lucru, elementele dvs. vor fi probabil foarte mari în comparație cu pânza dvs. nouă, mai mică.

Pe tastatură apăsați comanda + T sau accesați Editare> Transformare> Scară . Redimensionați stratul de elemente izolate pentru a se încadra în noua dimensiune a pânzei.

Aceasta este în măsura în care vom merge pe această imagine pentru moment. Pur și simplu asigurați-vă că ați salvat acest nou fișier Photoshop. Vom continua mai jos, odată ce vom avea noul formular de donație ca referință pentru mărime.

Crearea designului în Divi

Dacă nu ați făcut deja acest lucru, veți dori să descărcați și să instalați noul nostru pachet de layout pentru piața fermierilor (gratuit). Urmați instrucțiunile din această postare pentru instalarea pachetului de aspect. După instalare, urmați instrucțiunile din această postare de blog pentru a vă configura site-ul pentru următoarea etapă de personalizare, pe care o vom acoperi aici.

Când sunteți gata, navigați la pagina Donați și utilizați butonul din partea de sus a paginii pentru a activa constructorul vizual. Vă voi duce secțiune cu secțiune în josul paginii, făcând personalizări pe măsură ce mergem.

Întrucât pregătim această pagină pentru o campanie Giving Tuesday, probabil ar trebui să menționăm acest lucru chiar în partea de sus. Deci, plasați cursorul peste secțiunea erou și deschideți setările modulului făcând clic pe pictograma roată din comenzile gri ale modulului.

Apoi, încă în fila Conținut, derulați în jos și deschideți setările pentru link. În titlul câmpului Butonul # 1 URL plasează textul „#donează”. Aceasta va funcționa ca o legătură de ancorare la formularul pe care îl vom crea mai jos.

În cele din urmă, navigați la fila Design și deschideți setările pentru textul SubHead. Setați greutatea fontului Subhead la bold.

Prima secțiune este acum completă. Derulați în jos până la a treia secțiune (cea cu un citat mare) și faceți clic pe pictograma roată din comenzile secțiunii albastre. Setați culoarea de fundal la # F6F6F6.

Apoi, deschideți setările modulului pentru modulul de citare text. Schimbați și fundalul acestuia cu # F6F6F6.

Această secțiune este acum completă, de asemenea. Treceți la a patra secțiune imediat sub ea. Aceasta este secțiunea noastră pentru formularul de donație.

Deoarece această secțiune există în pachetul de aspect, este mai degrabă o secțiune „gaj” în care oamenii pot folosi formularul de contact pentru a vă trimite un angajament pentru cât intenționează să acorde. Dar o vom transforma într-un formular de donație propriu-zis, în care putem accepta bani direct.

Să începem cu setările secțiunii și să lucrăm. Mai întâi, trebuie să schimbăm culoarea de fundal. Setați-l la același # F6F6F6 ca secțiunea de mai sus.

Apoi, în secțiunea fila Proiectare, deschideți opțiunile de spațiere. Adăugați următoarea umplutură personalizată:

Sus: 250 px

Dreapta: 40 px

Partea de jos: 250 px

Stânga: 40 px

În cele din urmă, în timp ce vă aflați încă în setările secțiunii, navigați la fila Advanced și deschideți comenzile CSS ID & Classes. Sub CSS ID scrieți cuvântul „donați”.

Salvați noile setări.

Acum trebuie să scăpăm de formularul nostru de gaj. Este alcătuit din două module de text și un modul de formular de contact. Continuați și ștergeți-le. În locul lor, adăugați un modul text.

În cadrul noului modul de testare, plasați codul scurt pentru formularul de donație Donat pe care l-am creat mai devreme. Setați fundalul pe alb solid (#ffffff).

Acum, navigați la fila Design. Un secret puțin cunoscut este că elementele generate de codurile scurte ale terților pot fi personalizate într-o oarecare măsură utilizând setările de proiectare ale modulului text.

Sub opțiunile de text, configurați următoarele setări:

Dimensiune text text: 18 px

Înălțimea liniei textului: 1,8em

Sub Opțiunile de text Heading pentru H2, configurați următoarele setări:

Rubrica 2 Dimensiune text: 36 px

Titlul 2 Înălțimea liniei: 1,5em

Sub Opțiunile de spațiu, configurați următoarele setări:

Împletire personalizată: 50xp (pentru toate câmpurile)

Sub opțiunile Box Shadow, alegeți ultima opțiune din rândul de sus (în extrema dreaptă). Apoi configurați această opțiune:

Puterea răspândirii umbrei cutiei: -2 px

În cele din urmă, sub opțiunile de animație, configurați aceste setări:

Stil de animație: Bounce

Direcția animației: sus

Durata animației: 800 ms

Întârziere animație: 400 ms

Animație Opacitate de pornire: 100%

După ce ați configurat toate aceste setări de proiectare, salvați-le. Formularul dvs. de donație ar trebui să arate acum.

Desigur, aceasta este o formă perfect acceptabilă. Dar, după părerea mea, este puțin plictisitor. Sunt două lucruri pe care aș vrea să le fac pentru a le condimenta. În primul rând, vom asorta stilul butonului Donare acum pentru a se potrivi cu alte butoane Donare de pe site.

Navigați la opțiunile temei dvs. accesând Divi> Biblioteca Divi> General Derulați în jos până la caseta CSS personalizată și lipiți stilurile butoanelor de urmat acolo:

/*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ți modificările și reveniți la pagina de donații. Reîmprospătați-l și aruncați o privire la formularul dvs. Acum ar trebui să arate așa.

Acum ajungem undeva! Să adăugăm atingerea finală. Imaginea de fundal a secțiunii am început să o creăm mai devreme.

Pentru a o completa, redimensionați fereastra browserului la 1920 × 1120. Puteți utiliza un site web precum whatsmybrowsersize.com.

Apoi, faceți o captură de ecran a paginii de donație cu noul nostru formular centrat pe ea. Ar trebui să arate așa.

Deschideți această nouă captură de ecran în Photoshop împreună cu fișierul Photoshop pe care l-am creat mai devreme.

Utilizați instrumentul Rectangle Marquee pentru a selecta formularul. Apoi, accesați Selectare> Inversă pentru a selecta totul în afară de formularul dvs. Ștergeți noua selecție. Acum ar trebui să aveți o pânză care arată astfel.

Acum aveți o „machetă de formular” de dimensiuni corecte, pe care o puteți folosi ca referință pentru imaginea de fundal. Cu ambele fișiere Photoshop deschise, trageți stratul Photoshop care conține formularul dvs. izolat în fișierul dvs. de imagine de fundal.

În panoul de straturi, ajustați opacitatea stratului de formular la 50%. Apoi, cu formularul selectat ulterior, faceți clic pe pictograma de blocare și blocați-l. Acum ar trebui să arate așa.

Acum puteți selecta stratul de legume din panoul de straturi. Utilizați instrumentul lasso pentru a selecta elemente individuale și fie să le ștergeți, fie să le rearanjați până când veți obține o configurație care vă place. Configurația mea finală arăta așa.

După ce aveți propria configurație finală, accesați Fișier> Export> Exportați ca și alegeți PNG pentru a menține fundalul transparent.

Acum putem adăuga acea imagine în secțiunea Formular de donație a paginii noastre de donații, înapoi pe site-ul nostru web Divi.

Deschideți setările secțiunii. Sub Fundal, lăsați singură culoarea pe care am setat-o ​​mai devreme și alegeți opțiunea de imagine. Adăugați noua imagine de fundal aici. Apoi configurați următoarele setări:

Dimensiunea imaginii de fundal: dimensiunea reală

Poziția imaginii de fundal: Centru

Salvați aceste setări. Secțiunea formularului dvs. ar trebui să fie acum completă.

Pentru a finaliza complet designul (pentru a se potrivi cu previzualizarea noastră completă a paginii de la începutul postării) pur și simplu schimbați culorile de fundal ale secțiunilor rămase ale paginii pentru a se potrivi cu cele din captura de ecran. Veți folosi fie gri (# F6F6F6), fie alb (#ffffff).

Mulțumită strângere de fonduri!

Cu Divi și un plugin la fel de puternic ca Give, suntem siguri că eforturile dvs. de a oferi marți vor fi cu siguranță un mare succes. Vă mulțumim că ați urmat. Dacă doriți totuși asistență cu ceva acoperit în acest tutorial, voi efectua un flux live astăzi la ora 15:00 pe pagina noastră de Facebook și pe canalul YouTube, unde voi arăta întregul proces într-o singură versiune. De asemenea, voi răspunde la întrebări pe măsură ce vom merge mai departe. Sper sa te vad acolo!