Jak stworzyć stronę docelową Giving Tuesday z Divi i GiveWP

Jeśli nie słyszeliście, przygotowujemy się do rozpoczęcia ogromnej kampanii w Czarny Piątek i Cyberponiedziałek w Elegant Themes. Ale o tej porze roku dzieje się jeszcze jedna fajna rzecz. Nazywa się Dawanie Wtorku (w tym roku wypada 28 listopada) i jest to wysiłek organizacji non-profit z całego świata, aby przypomnieć wszystkim, że chociaż mają portfele na osobiste zakupy, mogą chcieć rozważyć przekazanie darowizny na rzecz tych w też potrzebujesz. Co za fajny pomysł! A ponieważ zajmujemy się wzmacnianiem naszej społeczności, pomyśleliśmy, że dobrym pomysłem byłoby pomóc tym, którzy korzystają z Divi (lub Extra) i pracują dla organizacji non-profit, w stworzeniu najlepszej strony docelowej dla darowizn we wtorek zdolny do.

Oto krótki rzut oka na to, co będziemy dzisiaj tworzyć.

Podgląd wyniku końcowego

W dzisiejszym poście utworzymy piękną stronę docelową Giving Tuesday wraz z oszałamiającym wizualnie (i oczywiście funkcjonalnym) formularzem darowizny.

Zainstaluj wtyczkę GiveWP i utwórz nowy formularz

Formularz darowizny, którego będziemy używać w tym samouczku, jest generowany przez wtyczkę GiveWP. Aby go zainstalować, przejdź w panelu administratora WordPress do Wtyczki > Dodaj nowy . Tam użyj funkcji wyszukiwania, aby znaleźć wtyczkę Give. Kliknij przycisk „Zainstaluj teraz”, a następnie go aktywuj.

Następnie przejdź do Darowizny > Dodaj formularz . Wpisz tytuł formularza. Wybrałem „Wspieraj lokalnych rolników i zrównoważone rolnictwo”.

Następnie zauważysz Opcje formularza darowizny. Przejrzyjmy je karta po karcie.

Na pierwszej karcie, zwanej Opcje darowizny, skonfiguruj następujące ustawienia w górnej sekcji.

Opcja darowizny: darowizna wielopoziomowa

Wyświetlanie darowizn: Przyciski

Kwota niestandardowa: Włączone

W sekcji Poziom darowizny ustaw następujące poziomy darowizn: 1 USD, 5 USD, 10 USD, 25 USD, 50 USD, 100 USD. Pamiętaj, aby ustawić poziom darowizny 5,00 USD jako nowy domyślny.

Teraz przejdź do zakładki Wyświetlanie formularza. Jedyne, co musisz tutaj zrobić, to zmienić ustawienie Opcje wyświetlania na Modalne.

Na karcie Cel darowizny najpierw włącz opcję Cel darowizny. Gdy to zrobisz, ustal kwotę celu. Ustawiłem mój na 1000 dolarów. Ustawiłem również format celu na procent. Dzięki temu widzowie będą znali procent naszego celu, który osiągnęliśmy, a nie rzeczywistą kwotę, którą zebraliśmy. I wreszcie, zmieniłem nieco kolor paska postępu, aby pasował do tego samego zielonego, który jest używany w pozostałej części mojej witryny (#07c907).

Na koniec musimy dodać trochę treści formularza. Na karcie Zawartość formularza włącz opcję Wyświetl zawartość. Następnie dodaj tekst do obszaru zawartości.

Na potrzeby tego samouczka są to wszystkie ustawienia formularza Give, które musimy skonfigurować. Kliknij przycisk Opublikuj i zwróć uwagę, że później będziesz potrzebować skróconego kodu tego formularza darowizny.

Podczas konfigurowania tego formularza będziesz musiał również przejść do Darowizny > Ustawienia i skonfigurować takie rzeczy, jak bramki płatności, e-maile itp.

Przygotuj swoje zasoby graficzne

Będziemy również potrzebować niestandardowego obrazu tła dla naszej sekcji formularza. Jest to oczywiście opcjonalne, nie ma to wpływu na działanie formularza. Ale wygląda fajnie i dodaje ładnego wzornictwa do naszego przykładu z rynku rolników.

Do stworzenia tego obrazu użyłem Photoshopa, ale prawdopodobnie możesz również użyć darmowego oprogramowania o nazwie Gimp. Jest to narzędzie typu open source, które ma wiele takich samych funkcji.

Oto jak to stworzyć.

Najpierw znajdź sobie obraz z elementami związanymi z Twoją organizacją non-profit. Ponieważ przykład, którego używam, dotyczy rynku rolników, postanowiłem użyć warzyw. Szukałem na stronie z obrazami stockowymi w poszukiwaniu „izolowanych warzyw”. Zazwyczaj termin „izolowany” na stronie internetowej z obrazami stockowymi odnosi się do przedmiotów na białym tle. Dzięki temu można je łatwo wyizolować, usuwając tło. I dokładnie to zrobiłem.

Oto obraz, który znalazłem.

Następnie otworzyłem ten obraz w Photoshopie.

Ponieważ początkowa warstwa jest domyślnie zablokowana, zduplikuj ją, klikając ją prawym przyciskiem myszy i wybierając „Powiel warstwę”. Następnie ukryj pierwszą warstwę, klikając ikonę oka obok niej.

Następnie użyj narzędzia magicznej różdżki, aby zaznaczyć całą białą przestrzeń wokół i wewnątrz elementów warzywnych. Naciśnij klawisz Backspace, aby go usunąć.

Następnie przejdź w górnym menu do Obraz> Rozmiar płótna i zmień rozmiar płótna na 1920 × 1080. Kiedy to zrobisz, twoje elementy będą prawdopodobnie bardzo duże w porównaniu z twoim nowym, mniejszym płótnem.

Na klawiaturze naciśnij polecenie + T lub przejdź do Edycja> Przekształć> Skaluj . Zmień rozmiar warstwy izolowanych elementów, aby pasowała do nowego rozmiaru płótna.

To jest tak daleko, jak na razie zajmiemy się tym obrazem. Po prostu upewnij się, że zapisałeś ten nowy plik programu Photoshop. Będziemy kontynuować poniżej, gdy otrzymamy nasz nowy formularz darowizny jako odniesienie do rozmiaru.

Tworzenie projektu w Divi

Jeśli jeszcze tego nie zrobiłeś, pobierz i zainstaluj nasz nowy (bezpłatny) pakiet Farmers Market Layout Pack. Postępuj zgodnie z instrukcjami w tym poście, aby zainstalować pakiet układu. Po zainstalowaniu postępuj zgodnie z instrukcjami zawartymi w tym poście na blogu, aby skonfigurować witrynę do następnego etapu dostosowywania, który omówimy tutaj.

Kiedy będziesz gotowy, przejdź do strony Przekaż darowiznę i użyj przycisku u góry strony, aby włączyć wizualny kreator. Przeprowadzę cię sekcja po sekcji w dół strony, dokonując dostosowań w miarę postępów.

Ponieważ przygotowujemy tę stronę na wtorkową kampanię „Giving Tuesday”, powinniśmy prawdopodobnie wspomnieć o tym na samej górze. Najedź więc na sekcję bohatera i otwórz ustawienia modułu, klikając ikonę koła zębatego w szarym panelu sterowania modułu.

Następnie, wciąż na karcie Treść, przewiń w dół i otwórz ustawienia łącza. W tytule pola Button #1 URL umieść tekst „#donate”. Będzie to działać jako link kotwiczny do formularza, który utworzymy poniżej.

Na koniec przejdź do karty Projekt i otwórz ustawienia tekstu SubHead. Ustaw grubość czcionki podtytułu na pogrubioną.

Pierwsza sekcja jest już gotowa. Przewiń w dół do trzeciej sekcji (tej z dużym cytatem) i kliknij ikonę koła zębatego w niebieskich kontrolkach sekcji. Ustaw kolor tła na #F6F6F6.

Następnie otwórz ustawienia modułu dla modułu tekstu cytatu. Zmień również tło tego na #F6F6F6.

Ta sekcja również jest już kompletna. Przejdź do czwartej sekcji bezpośrednio pod nią. To jest nasza sekcja dotycząca formularza darowizny.

Ponieważ ta sekcja istnieje w pakiecie układu, jest bardziej sekcją „zastawu”, w której ludzie mogą korzystać z formularza kontaktowego, aby wysłać Ci zastaw na to, ile zamierzają dać. Ale zamierzamy przekształcić to w prawdziwą formę darowizny, w której będziemy mogli bezpośrednio przyjmować pieniądze.

Zacznijmy od ustawień sekcji i pracujmy. Najpierw musimy zmienić kolor tła. Ustaw go na ten sam #F6F6F6, co w powyższej sekcji.

Następnie w zakładce Projekt otwórz opcje Odstępy. Dodaj następujące niestandardowe wypełnienie:

Góra: 250px

Po prawej: 40px

Dół: 250px

Po lewej: 40px

Na koniec, nadal w ustawieniach sekcji, przejdź do karty Zaawansowane i otwórz kontrolki CSS i klasy. Pod identyfikatorem CSS wpisz słowo „dotacja”.

Zapisz nowe ustawienia.

Teraz musimy pozbyć się naszego formularza zastawu. Składa się z dwóch modułów tekstowych i modułu formularza kontaktowego. Śmiało i usuń je. W ich miejsce dodaj moduł tekstowy.

W nowym module testowym umieść skrócony kod do utworzonego wcześniej formularza Przekaż darowiznę. Ustaw tło na jednolicie białe (#ffffff).

Teraz przejdź do zakładki Projekt. Mało znanym sekretem jest to, że elementy generowane przez skróty stron trzecich można do pewnego stopnia dostosować za pomocą ustawień projektowych modułu tekstowego.

W opcjach tekstu skonfiguruj następujące ustawienia:

Rozmiar tekstu: 18px

Wysokość linii tekstu: 1,8 em

W opcjach tekstu nagłówka dla H2 skonfiguruj następujące ustawienia:

Rozmiar tekstu nagłówka 2: 36px

Wysokość linii nagłówka 2: 1,5 em

W opcjach Odstępy skonfiguruj następujące ustawienia:

Niestandardowe wypełnienie: 50xp (dla wszystkich pól)

W opcjach Box Shadow wybierz ostatnią opcję w górnym rzędzie (z prawej strony). Następnie skonfiguruj tę opcję:

Siła rozprzestrzeniania się cieni w pudełku: -2px

Na koniec w opcjach animacji skonfiguruj te ustawienia:

Styl animacji: odbicie

Kierunek animacji: w górę

Czas trwania animacji: 800ms

Opóźnienie animacji: 400 ms

Początkowe krycie animacji: 100%

Po skonfigurowaniu wszystkich tych ustawień projektu zapisz je. Twój formularz darowizny powinien teraz wyglądać tak.

Oczywiście jest to całkowicie akceptowalna forma. Ale moim zdaniem to trochę nudne. Są dwie rzeczy, które chciałbym zrobić, aby to urozmaicić. Po pierwsze, dopasujemy styl przycisku Przekaż darowiznę teraz do innych przycisków Przekaż darowiznę w witrynie.

Przejdź do opcji motywu, przechodząc do Divi> Biblioteka Divi> Ogólne Przewiń w dół do niestandardowego pola CSS i wklej tam następujące style przycisków:

/*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;
}

Zapisz zmiany i wróć do swojej strony darowizny. Odśwież go i spójrz na swój formularz. Powinno teraz wyglądać tak.

Teraz dokądś zmierzamy! Dodajmy ostateczny szlif. Obraz tła sekcji, który zaczęliśmy tworzyć wcześniej.

Aby to zakończyć, zmień rozmiar okna przeglądarki do 1920×1120. Możesz korzystać ze strony internetowej takiej jak whatsmybrowsersize.com.

Następnie zrób zrzut ekranu swojej strony darowizny z wyśrodkowanym na niej naszym nowym formularzem. To powinno wyglądać tak.

Otwórz ten nowy zrzut ekranu w Photoshopie wraz z utworzonym wcześniej plikiem Photoshop.

Użyj narzędzia Zaznaczanie prostokąta, aby wybrać formularz. Następnie przejdź do Wybierz> Odwróć, aby wybrać wszystko oprócz formularza. Usuń swój nowy wybór. Powinieneś teraz mieć płótno, które wygląda tak.

Masz teraz odpowiednio dopasowaną „makietę formularza”, której możesz użyć jako odniesienia do obrazu tła. Po otwarciu obu plików programu Photoshop przeciągnij warstwę programu Photoshop zawierającą izolowany formularz do pliku obrazu tła.

W panelu warstw dostosuj krycie warstwy formularza do 50%. Następnie, nadal zaznaczając formularz później, kliknij ikonę kłódki i zablokuj ją. Powinno teraz wyglądać tak.

Możesz teraz wybrać warstwę warzyw w panelu warstw. Użyj narzędzia lasso, aby wybrać poszczególne elementy i albo je usunąć, albo ponownie ułożyć, aż uzyskasz odpowiednią konfigurację. Tak wyglądała moja ostateczna konfiguracja.

Po uzyskaniu własnej ostatecznej konfiguracji przejdź do Plik> Eksportuj> Eksportuj jako i wybierz PNG, aby zachować przezroczyste tło.

Teraz możemy dodać ten obraz do sekcji Formularz darowizny na naszej stronie Darowizny, z powrotem na naszej stronie internetowej Divi.

Otwórz ustawienia sekcji. W opcji Background pozostaw kolor, który wcześniej ustawiliśmy, w spokoju i wybierz opcję obrazu. Dodaj tutaj swój nowy obraz tła. Następnie skonfiguruj następujące ustawienia:

Rozmiar obrazu tła: rzeczywisty rozmiar

Pozycja obrazu tła: środek

Zapisz te ustawienia. Twoja sekcja formularza powinna być teraz kompletna.

Aby całkowicie sfinalizować swój projekt (aby dopasować nasz pełny podgląd strony od początku postu), po prostu zmień kolory tła pozostałych sekcji strony, aby pasowały do ​​tych na zrzucie ekranu. Użyjesz szarego (#F6F6F6) lub białego (#ffffff).

Miłego zbierania funduszy!

Dzięki Divi i wtyczce tak potężnej, jak Give, jesteśmy pewni, że Twoje wysiłki w ramach dawania we wtorek z pewnością będą wielkim hitem. Dzięki za podążanie. Jeśli nadal potrzebujesz pomocy we wszystkim, o czym mowa w tym samouczku, dzisiaj o 15:00 poprowadzę transmisję na żywo na naszej stronie na Facebooku i kanale YouTube, gdzie za jednym razem pokażę cały proces. Będę też odpowiadał na pytania w miarę postępów. Mam nadzieję, że się tam zobaczymy!